Change action in form with dom script

Question

How can I change the onSubmit value dynamic or should I remove onSubmit and have <action="return zomlink();">

What I want is to change the action/onsubmit link to a new link depending on what option they select in the drop down box. I cannot use Jquery i need it in plain javascript form.

   <form method="post" id="buyvipform" name="buyvipform" class="buyvipform" onSubmit="return zomlink();">

<select name="zomlink" id="zomlink" style="margin-top: 290px;">
<option value="1906083">3 days Trial (2€)</option>
<option value="1906104">31 days (19€)</option>
<option value="1906125">90 days (50€)</option>
<option value="1906146">365 days (99€)</option>
</select>


<input type="submit" value="" style="background:url(<?php bloginfo('template_directory'); ?>/images/vbestall.png) no-repeat; width: 106px; height: 40px; border: 0px;">
<input type="hidden" name="hide_credits" value="True">

</form>

Script:

function zomlink() {
  if(document.zomlink.value == '1906104') {
    document.buyvipform.action = 'http://google.com';
  }
     if(document.zomlink.value == '1906125') {
    document.buyvipform.action = 'http://facebook.com';
  }

  return true;
}

Fiddle: http://jsfiddle.net/6x4u28yd/

you mean for example if someone chose a different option Form submit in different page??? — Daniel.V, Sep 01 '14 at 20:59
Hey, it should change the form action link or in this case the form onSubmit value to another value. So the form get submitted to the right link. — Zara Rebecka Elisabeth Zentio, Sep 01 '14 at 21:05
I'm posting a comment since I'm not sure why would you use a submit button in this case. However, check this snippet http://jsbin.com/foyanasitici/1/edit — hex494D49, Sep 01 '14 at 21:08

Chad · Answer 1 · 2014-09-01T21:17:11.387

Edit: Here is a non-jQuery solution.

<form method="get" id="buyvipform" name="buyvipform" class="buyvipform">

<select name="zomlink" id="zomlink" style="margin-top: 290px;">
    <option value="1906083">3 days Trial (2€)</option>
    <option value="1906104">31 days (19€)</option>
    <option value="1906125">90 days (50€)</option>
    <option value="1906146">365 days (99€)</option>
</select>

<input type="hidden" name="hide_credits" value="True">

</form>

<button onclick="zomlink()">Submit</button>


<script>

function zomlink() {

    var myForm = document.forms["buyvipform"];

    if(document.getElementById("zomlink").value == '1906104') myForm.action = 'http://google.com';
    else if(document.getElementById("zomlink").value == '1906125') myForm.action = 'http://facebook.com';

    document.getElementById("buyvipform").submit();

}
</script>

Did you read the question? "I cannot use Jquery i need it in plain javascript form" — LcSalazar, Sep 01 '14 at 21:04
@LcSalazar my apologies. I have removed the jQuery from the solution. — Chad, Sep 01 '14 at 21:17

score 0 · Answer 2 · answered Sep 01 '14 at 21:03

Instead of a submit input, set your input as type=button, and add a onclick="" event to it, checking the condition you wanted.

Then, call the .submit(); method from the form DOM element.

<form method="post" id="buyvipform" name="buyvipform" class="buyvipform">

    <select name="zomlink" id="zomlink" style="margin-top: 290px;">
        <option value="1906083">3 days Trial (2€)</option>
        <option value="1906104">31 days (19€)</option>
        <option value="1906125">90 days (50€)</option>
        <option value="1906146">365 days (99€)</option>
    </select>


    <input type="button" onclick="zomlink();" value="Submit" style="background:url(<?php bloginfo('template_directory'); ?>/images/vbestall.png) no-repeat; width: 106px; height: 40px; border: 0px;" />
    <input type="hidden" name="hide_credits" value="True" />

</form>

JS:

function zomlink() {
    var form = document.getElementById("buyvipform");
    var select= document.getElementById("zomlink");

    if(select.value == '1906104') {
        form.action = 'http://google.com';
    }
     if(select.value == '1906125') {
        form.action = 'http://facebook.com';
    }

    form.submit();
}

Change action in form with dom script

2 Answers2