JQUERY + PHP POSTは値を送信しません

Question

私は<input type='submit'/>のボタンとaction='updateEstado.php'の4つのフォームを持っています。また、ボタンをクリックすると起動するjQueryコードがあります。私は、コンソール・ショーこのメッセージをupdateEstado.phpを起動したときに今event.preventDefault();

：

私はこれを削除した場合、私はこの新しいラインとjqueryのコードを更新した

<!-- 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> 

行：$.post("updateEstado2.php", {estado: "DESACTIVAT", codigo: "38"});

表示メッセージが表示されなくなります。これが問題であることは明らかです。ソリューション？私はしない...

Answer 1

送信ボタンは、ブロックされていない場合はフォームを送信します。あなたはpreventDefault()でそれをブロックすることができます。例えば

：

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

Answer 2

ボタンタイプを使用すると、フォームが$.postの値なしupdateEstado.phpにsubmitedされるボタンでクリックしたときに、提出された場合。あなたはjQueryを使ってフォームを送信してデータを送信することができます：

<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> 

機能：

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

それとも、あなたはボタンの値を取得したい場合：

<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> 

ノート型がありますボタンを押して、この方法でフォームを提出しません。

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

Answer 3

あなたが本当に提出する代わりに、標準のHTML形式では、JavaScriptを経由してフォームを送信したい場合、あなたはいくつかのことをしなければならない。

1. フォーム
2. 使用をonSubmit機能を追加event.preventDefault（）正規形が
3. はjQueryの
経由で手動フォームを送信しない形
4. から値を取得提出キャンセルします10

しかし、あなたはもっとはっきりとしたことをしたいと思う： ユーザーがクリックするオプションにかかわらず、2つの値を送信する。あなたはユニーク `id`名を使用する必要が

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