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表单提交，你必须做几件事：

向表单添加onsubmit函数
使用event.preventDefault（）取消普通表单提交
从表格中获取值
通过jQuery

但我认为你想做更微不足道的事情：无论用户点击哪个选项，都要提交两个值。

最简单的方法是使用隐藏的输入：

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

Answer 3

如果按钮类型已提交，则当您在按钮表单中单击时，将提交到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"});
});

或者，如果你想获得按钮的值：

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

JQUERY + PHP POST不发送值

3 个答案: