2 different forms with select field

Question

2 different forms with select field

Navigation

#1 by (2 votes)

1

I need 2 forms on the same page and I'm trying to create a select field in the end so I can choose between one or the other, I'm trying here several ways without success! please help, follow:

<div class="module-body" id="div1">
    <section class="docs">
        <form method="post" action="" class="form-horizontal row-fluid">
            <input type="hidden" name="codigoPlanoEscolhido" value="<?=$codigoPlano?>" />
            <input type="hidden" name="nomePlanoEscolhido" value="<?=$nomePlano?>" />
            <input type="hidden" name="tipoPlanoEscolhido" value="<?=$tipoPlano?>" />


   <input type="text" name="clienteEmail" value="<?php  $telefone = '55' . $cliente->telefones[1]->ddd .       $cliente->telefones[2]->numero;

    echo '(22)'.("******"), substr($telefone, -3).''

      ;?>" class="span3" disabled />
        <br>

            <button name="confirmarPedido" class="btn btn-primary btn-lg">Confirmar Minha Solicitação Por SMS</button>
        </form>

<div id="div2" class="module-body" style="display:none">
            <form method="post" action="upgrade-3">
                <input type="hidden" name="codigoPlanoEscolhido" value="<?=$codigoPlano?>" />
                <input type="hidden" name="nomePlanoEscolhido" value="<?=$nomePlano?>" />
                <input type="hidden" name="tipoPlanoEscolhido" value="<?=$tipoPlano?>" />
                <button name="solicitarUpgrade" class="btn btn-primary btn-lg">Confirmar solicitação por Email</button>
            </form>

            <script>
                function oWhichSubmit(thisSubmit) {
                    var oWhich = thisSubmit.value;
                    if (document.getElementById(oWhich)) {
                        document.getElementById(oWhich).click();
                    }
                }
            </script>

            <select onchange="oWhichSubmit(this)" onkeypress="oWhichSubmit(this)">
                <option value="confirmarPedido"></option>
                <option value="confirmarPedido">Submit1</option>
                <option value="solicitarUpgrade">Submit2</option>
            </select>
            <input type="submit" name="confirmarPedido" id="upgrade2" value="confirmarPedido" />

     <?=getClienteEmail($cliente)?>"  class="span3" disabled/><br>
 <button name="solicitarUpgrade"  class="btn btn-primary                        tn-lg">Confirmar solicitação pelo Email</button>
                </form>
          "  class="span3" disabled/>
           <input type="submit" name="solicitarUpgrade"        id="upgrade3" value="solicitarUpgrade" />
            </form>

 <select id="mySelect">
 <option value="div1">div1</option>
<option value="div2">div2</option>
</select>


 <script>

document.getElementById("mySelect").addEventListener("change",       myFunction);
function myFunction() {
   var x = document.getElementById("mySelect").value;
   if(x=="div1"){
    document.getElementById("div1").style.display="block"; 
  document.getElementById("div2").style.display="none"; 
    }else if(x=="div2"){
    document.getElementById("div2").style.display="block"; 
  document.getElementById("div1").style.display="none"; 
    }
}
 </script>

I need to select in the end me the option to choose between one and the other and make the submit

javascript html

asked by anonymous 05.04.2017 / 14:10

1 answer

Put the options of an input select into a variable TFS Automatic Merge without Check Conflicts

score 2 · Accepted Answer

Place each form inside different divs with display none:

<select id="mySelect">
  <option value="div1">div1</option>
  <option value="div2">div2</option>
</select>
<div id="div1" style="background:red;height:100px;width:100px;">
  <form></form>
</div>
<div id="div2" style="display:none;background:blue;height:100px;width:100px;">
  <form></form>
</div>

Javascript:

document.getElementById("mySelect").addEventListener("change", myFunction);
function myFunction() {
    var x = document.getElementById("mySelect").value;
    if(x=="div1"){
        document.getElementById("div1").style.display="block"; 
      document.getElementById("div2").style.display="none"; 
    }else if(x=="div2"){
        document.getElementById("div2").style.display="block"; 
      document.getElementById("div1").style.display="none"; 
    }
}

I've made this example: link