Question

I have a form with an input text field which imports data every couple of seconds and display it in the form field , let us say :

<input name="code" id="code" type="text" size="64" maxlength="128" />

and a submit button and my form has the formname form1.
I want the submit button to be clicked as soon as the data in the form field is changed.
I did try to do the following. In the header I did add the follwoing javascript:

<SCRIPT LANGUAGE="javascript">
function send_data()
{
document.form1.submit();
}
</SCRIPT>

and on the form :

<input name="code" id="code" type="text" size="64" maxlength="128" onchange="send_data();" />

but it didn`t work..

Any help ?

Thanks

Answer 1

Something like this would work:

<form action="#">
    <input type="" id="input" />
    <button type="submit"></button:>
</form>

<script>
function send_data() {
    document.forms[0].submit();
}

window.onload = function(){
    var input = document.getElementById('input');
    input.onchange = send_data;
}
</script>

But I’d add a few caveats:

1. I’m assuming there is only one form on the page. You would be safer assigning and ID to your form and using getElementById and referencing that instead of document.forms[x]
2. The change event will only happen after you lose focus on the input, which I probably what you want? Just making sure it’s expected behavior
3. Without knowing why you need to do this, I’d note that it could potentially be very annoying to the user, as submission will trigger a new page load. You may be better off doing a submission via ajax so as not to disrupt the user’s browsing. If you do this, I strongly recommend a JS library to handle this.