I have a textbox where onchange event adds some element at runtime. Due to this the submit button's position is changed. If user enters something in the textbox and clicks on the button the onclick event does not fire. I suspect its because at the same time the position of the button changes and browser thinks the click happened on page and not on the button.

Is there a way I can handle this situation? I can not move the button above the element which is added at runtime.

I have created a sample jsfiddle: /

HTML:

<p>Enter something</p>
<input type="text" id="input" onchange="onChange()">
<div id="log"></div>
<button value="Go" style="display:block" type="button" onclick="submit();" id="btn-submit">Submit</button>

JavaScript:

function onChange(){
    var value = $('#input').val();
    $('#log').append('<p>New value: ' + value + '</p>');
}

function submit(){
    alert('value submitted');
}

Edit 1

Test Case (Question is about 2nd test case) Its happening in all browsers (Chrome, IE 10 etc):

1. Enter something in the textbox and hit tab, p element is added and button's position is moved. Now click on submit button. An alert is shown.
2. Enter something in the textbox and click on the submit button. p element is added but the alert is not shown.

Edit 2: I can not use other key events like keyup, keydown or keypress because of obvious reasons (they fire on every keypress). setimeout too is out of question since there are some radio buttons which are generated at runtime on the onchange event of textbox. Its no wise to click on submit button without showing these radio buttons to user.

I have a textbox where onchange event adds some element at runtime. Due to this the submit button's position is changed. If user enters something in the textbox and clicks on the button the onclick event does not fire. I suspect its because at the same time the position of the button changes and browser thinks the click happened on page and not on the button.

Is there a way I can handle this situation? I can not move the button above the element which is added at runtime.

I have created a sample jsfiddle: http://jsfiddle/WV3Q8/3/

HTML:

<p>Enter something</p>
<input type="text" id="input" onchange="onChange()">
<div id="log"></div>
<button value="Go" style="display:block" type="button" onclick="submit();" id="btn-submit">Submit</button>

JavaScript:

function onChange(){
    var value = $('#input').val();
    $('#log').append('<p>New value: ' + value + '</p>');
}

function submit(){
    alert('value submitted');
}

Edit 1

Test Case (Question is about 2nd test case) Its happening in all browsers (Chrome, IE 10 etc):

1. Enter something in the textbox and hit tab, p element is added and button's position is moved. Now click on submit button. An alert is shown.
2. Enter something in the textbox and click on the submit button. p element is added but the alert is not shown.

Edit 2: I can not use other key events like keyup, keydown or keypress because of obvious reasons (they fire on every keypress). setimeout too is out of question since there are some radio buttons which are generated at runtime on the onchange event of textbox. Its no wise to click on submit button without showing these radio buttons to user.

• javascript
• jquery
• html

Share Improve this question Follow edited Mar 28, 2014 at 11:04 Neeraj Gulia asked Mar 28, 2014 at 10:40 Neeraj GuliaNeeraj Gulia 70088 silver badges2525 bronze badges 8

• 2 It works fine in my Firefox – blue Commented Mar 28, 2014 at 10:43
• 2 Works fine for me on Chrome/Mac! – lshettyl Commented Mar 28, 2014 at 10:43
• 1 Works for me on Chrome. Elements changing positions shouldn't be a problem. Which browser does that occur on? – Andy Commented Mar 28, 2014 at 10:43
• 2 Same on Chrome, your JSfiddle works – radia Commented Mar 28, 2014 at 10:43
• 2 Works for me in Firefox/Linux, which browser are you using? – Brovoker Commented Mar 28, 2014 at 10:43

 |  Show 3 more ments

5 Answers 5

Sorted by: Reset to default 2

For your edit #2 you have to delay the append with setTimeout() method like this:

setTimeout(function(){
    $('#log').append('<p>New value: ' + randomVal + '</p>');
},100);

Fiddle

Working Fiddle
A way out is to use onkeypress

<input type="text" id="input" onkeypress="onChange();">

UPDATE
If it is possible for you to use mousedown event, it work's good.

Updated Fiddle

You are missing a return true statement in onChange()

Here is the code on jsfiddle

function onChange(){
    var randomVal = Math.floor((Math.random()*100)+1);
    $('#log').append('<p>New value: ' + randomVal + '</p>');
    return true;
}

function submit(){
    alert('value submitted');
}

EDIT: Alternative solution might be calling onChange() inside submit().

I would use setTimeout with keyup event:

var time;

function onChange() {
    clearTimeout(time);
    time = setTimeout(function() {
        var value = $('#input').val();
        $('#log').append('<p>New value: ' + value + '</p>');
    }, 200);
}

It will append text once user finishes typing.

Demo: http://jsfiddle/WV3Q8/8/

This is not good solution but you can trigger the submit function for your case like this:

function onChange(){    
    var value = $('#input').val();
    $('#log').append('<p>New value: ' + value + '</p>');

    submit();
}

function submit(){

    alert('value submitted');


}

demo