JQUERY + PHP POST senden keine Werte

Question

Ich habe ein Formular mit vier <input type='submit'/> Tasten und action='updateEstado.php'. Außerdem habe ich einige jQuery-Code, der startet, wenn ich auf eine Schaltfläche klicke.

<!-- CHANGE STATUS MODAL MENU --> 

<div class="modal fade" id="change" tabindex="-1" role="dialog" aria-labelledby="change" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 

      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button> 
       <h4 class="modal-title custom_align" id="Heading">CANVIAR ESTAT</h3>  
      </div> 

      <form action="updateEstado.php" method="post"> 
       <div class="modal-body"> 
        <div class=" text-center"> 

           <div class="container-fluid"> 
            <div class="row"> 
             <div class="col-md-12 text-center"> 
              <input type="submit" id="cambiarestado" class="btn btn-modal-estado" style="background-color:YellowGreen; color:white;" value="ACTIVAT"> 
             </div> 
            </div> 

            <div class="row"> 
             <div class="col-md-12 text-center"> 
              <input type="submit" id="cambiarestado" class="btn btn-modal-estado" style="background-color:Tomato; color:white;" value="PENDENT MIQUEL ALIMENTACIÓ">   
             </div> 
            </div> 

            <div class="row "> 
             <div class="col-md-12 text center"> 
              <input type="submit" id="cambiarestado" class="btn btn-modal-estado" style="background-color:SkyBlue; color:white;" value="PENDENT ADDCOM"> 
             </div> 
            </div> 

            <div class="row"> 
             <div class="col-md-12 text center"> 
              <input type="submit" id="cambiarestado" class="btn btn-modal-estado" style="background-color:Gray; color:white;" value="DESACTIVAT"> 
             </div> 
            </div> 

            <div class="row"> 
             <h5 id='codigosSeleccionados'></h5> 
            </div> 
           </div>  

         </div> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 
</div> 


<script> 
    $('#cambiarestado').click(function(){ 
     event.preventDefault();      
     // Get the value of the input fields 
     var inputvalue = $(this).attr("value"); 

     // Send Ajax request to updateEstado.php, with value set as 'input' in the POST data 
     $.post("updateEstado.php", {estado: "DESACTIVAT", codigo: "38"}); 

     alert(inputvalue);   
    }); 
</script> 

Ich habe den jQuery-Code mit dieser neuen Linie aktualisiert: event.preventDefault();

Nun, wenn ich die updateEstado.php der Konsole zeigen diese Meldung starten:

Wenn ich diese löschen Zeile: $.post("updateEstado2.php", {estado: "DESACTIVAT", codigo: "38"});

Die Show-Nachricht verschwinden. Es ist klar, das ist das Problem. Die Lösung? Ich kann nicht ...

Answer 1

Der Submit-Button sendet das Formular, wenn es nicht blockiert ist. Sie können es mit preventDefault() blockieren.

zum Beispiel:

$('#cambiarestado').click(function(event){ 
    event.preventDefault(); 
    ...rest of your code ... 

Answer 2

Wenn Knopf ist einreichen, wenn Sie in der Knopfform klicken, ohne die Werte von $.post-updateEstado.php submited werden. Sie können das Formular mit JQuery und senden die Daten senden:

<form id="form" > 
    <div class="row"> 
     <div class="col-md-12 text center"> 
      <input type="submit" id="cambiarestado" class="btn btn-modal-estado" style="background-color:Gray; color:white;" value="DESACTIVAT"> 
     </div> 
    </div> 
</form> 

Funktion:

$('#form').on('submit', function(e){ 
    $.post("updateEstado.php", {estado: "DESACTIVAT", codigo: "38"}); 
}); 

Oder, wenn Sie die Werte der Taste erhalten möchten:

<form id="form" > 
    <div class="row"> 
     <div class="col-md-12 text center"> 
      <input type="button" id="cambiarestado" class="btn btn-modal-estado" style="background-color:Gray; color:white;" value="DESACTIVAT"> 
     </div> 
    </div> 
</form> 

Hinweis Typ ist Taste, und auf diese Weise Form wird nicht eingereicht.

$('button').click(function(){ 
    var inputvalue = $(this).attr("value");   
    $.post("updateEstado.php", {estado: inputvalue, codigo: "38"});    
}); 

Answer 3

Wenn Sie wirklich wollen, das Formular per JavaScript unterbreiten, anstelle des Standard-HTML-Formular einreichen, können Sie mehrere Dinge zu tun haben:

1. füge eine onsubmit Funktion Form
2. Einsatz Event.preventDefault() aufzuheben die normale Form einreichen
3. die Werte aus der Form erhalten
4. eine manuelle Form Sie über jQuery einreichen

ABER ich denke, dass Sie etwas viel trivialer tun möchten: Senden Sie zwei Werte, unabhängig davon, welche Option der Benutzer klickt.

Der einfachste Weg, dies zu archieve, ist versteckte Eingänge zu verwenden:

<input type="hidden" name="estado" value="DESACTIVAT"> 
<input type="hidden" name="codigo" value="38">