JQUERY + PHP POST不發送值

Question

我有一個帶有四個<input type='submit'/>按鈕和action='updateEstado.php' 。 另外，當單擊按鈕時，我會啟動一些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>

我已經用以下新行更新了jquery代碼： event.preventDefault();

現在，當我啟動updateEstado.php時，控制台將顯示以下消息：

如果我刪除此行： $.post("updateEstado2.php", {estado: "DESACTIVAT", codigo: "38"});

顯示消息消失。 顯然這是問題所在。 解決方案？ 我不...

Answer 1

如果表單未被阻止，則提交按鈕將提交表單。 您可以使用preventDefault()阻止它。

例如：

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

Answer 2

如果您確實要通過JavaScript提交表單，而不是標准的HTML表單提交，則必須做幾件事：

1. 向表單添加一個onsubmit函數
2. 使用event.preventDefault（）取消常規表單提交
3. 從表單獲取值
4. 通過jQuery提交手動表單

但是，我認為您想做的事情要瑣碎得多：提交兩個值，無論用戶單擊哪個選項。

存檔的最簡單方法是使用隱藏的輸入：

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

Answer 3

如果按鈕類型為submit，則當您單擊按鈕形式時，表單將被提交到updateEstado.php而不包含$.post的值。 您可以使用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"});
});

或者，如果您想獲取button的值：

<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"});             
});