OnChange Form/Submit not working.

[TechBoyJK]

Trying this code.

Wanting the form to submit anytime there is a change in the select box. Can't get it to work..

<form action="submit_test.cfm" method="post">
<select class="select" name="test" onchange="form.submit()">
<option value="yes">yes</option>
<option value="no">no</option>
</select>

<br>
<br>

<input type="submit" name="submit" value="submit">

</form>

 

[Ka0t1x]

all I've ever used is just

<select onchange="submit()">

 

[TechBoyJK]

Hmmm... that's not working for me. Can you try using that code and seeing if it works for you? Post the code you used?

 

[Woosta]

The code in the initial post probably relies on quirks mode dom references, the second one relies on a global function named submit. And because you are doing name="submit" you override the reference to the native function, at least in Chrome.

I suggest you use the ID and do things unobtrusively. Example:

<form action="submit_test.cfm" method="post" id="fedor">
<select class="select" id="foo">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<input type="submit" name="changethis" value="submit">
</form>
<script src="external.js"></script>

Contents of external.js:

    (function() {
      var s = document.getElementById('foo');
        s.onchange = function() {
           var f = document.getElementById('fedor');
           f.submit();
        }
    })();

Put the script reference right before the end body tag so that it references the elements when they are accessible otherwise you get null references.

The difference and pros of my example is that:

1. We aren't doing inline event handlers, eg onclick="" or onsubmit="" in the HTML. This is EVIL. Behaviour should be separate from Markup.
2. We aren't relying on global methods like "submit", as per the first post.
3. We aren't relying on DOM 0 level referencing as in your first attempt, where it probably relied on name="form" and quirks mode to work
4. name="submit" I changed the value of this so it doesnt mess up the reference to the submit method and so we can invoke it.

 

[uclabachelor]

Trying this code.

Wanting the form to submit anytime there is a change in the select box. Can't get it to work..

<form action="submit_test.cfm" method="post">
<select class="select" name="test" onchange="form.submit()">
<option value="yes">yes</option>
<option value="no">no</option>
</select>

<br>
<br>

<input type="submit" name="submit" value="submit">

</form>

<form action="submit_test.cfm" method="post" name="my_form">
<select class="select" name="test" onchange="document.my_form.submit();">

 

[Woosta]

BTW: Ideally you'd want to use a DOM library such as jQuery or your own for learning purposes, as that cuts down on the production time so you can get more done in less time.. but of course for learning purposes its best to do the actual DOM programming to get more fluent with how jQuery works underneath it all.

 

[Ka0t1x]

I was just going to say the example from me is very old and I usually default anything JS now to jQuery.

 

[TechBoyJK]

<form action="submit_test.cfm" method="post" name="my_form">
<select class="select" name="test" onchange="document.my_form.submit();">

tried.. not working for me.

<form action="http://details.at/submit_test.cfm" method="post" name="myform">
<select class="select" name="test" onchange="document.myform.submit();">

<option value="yes">yes</option>

<option value="no">no</option>

</select>

<br><br>
<input type="submit" name="submit" value="submit">
</form>

 

[Woosta]

tried.. not working for me.

<form action="http://details.at/submit_test.cfm" method="post" name="myform">
<select class="select" name="test" onchange="document.myform.submit();">

<option value="yes">yes</option>

<option value="no">no</option>

</select>

<br><br>
<input type="submit" name="submit" value="submit">
</form>

I specify the other reason why it doesn't work in my post... it's because you did

name="submit"

And in Chrome, that overrides the submit native function reference. Try my example.

 

[Woosta]

Live example of my code: http://jsfiddle.net/tX4WS/

 

[TechBoyJK]

lol ok

it was really simple.

I had to change the name of the submit button to something besides 'submit'

Using the simple onchange="form.submit();" tag in the select box

<input type="submit" name="submit" value="submit">

changed to

<input type="submit" name="mysubmit" value="submit">

and it works. lol

 

[Woosta]

Are you playing some sort of ignore game with me?

 

[TechBoyJK]

Are you playing some sort of ignore game with me?

Lol, no bro I'm not. I got it figured out my last post. I just had to change the 'name' attributed in the submit input tag.

 

[Woosta]

note to self: never answer a dev q from TechBoyJK.