javascriptforms

onchange="this.form.submit()" versus two submit buttons


With a pulldown triggering an onchange event to submit, it fails to work when two input submit buttons are present. It makes sense, so how do you specify exclusively which submit button to process?

<form>
<select onchange="this.form.submit()"></select>
<input type="submit" name="submit1" id="submit1" value="Submit 1" />
<input type="submit" name="submit2" id="submit2" value="Submit 2" />
</form>

Solution Using the suggestion from below, this code will work so that the second submit button will execute if the onchange is trigged from the pulldown:

<form>
<select onchange="var e=document.getElementById('killbox'); var s=document.getElementById('submit1'); e.removeChild(s); this.form.submit();"></select>
<div id="killbox"><input type="submit" name="submit1" id="submit1" value="Submit 1" /></div>
<input type="submit" name="submit2" id="submit2" value="Submit 2" />
</form>

This is in a basic form, certainly doesn't hurt to throw the Javascript in to a function instead of using inline Javascript for the onchange.


Solution

  • I'm pretty sure you can simply call .submit() on the button itself: document.getElementById('submit1').submit()

    -edit-

    Solution two: just remove one of the buttons (use removeChild(), which is a common DOM method).