Question

因此，我正在将用户输入的输入字段的值与mysql DB的值进行比较（使用对checkAnswer.php文件的Ajax请求）。该请求本身可以正常工作，它显示正确的“确定”或“错误”消息，但是如果“确定”，则不提交表单。我应该将.submit（）放在其他地方吗？

HTML代码：

            <form id="answerInput" action="index" method="post">
              <div id="answer-warning"></div>
              <div><input id="answer-input" name="answer" type="text"></div>
              <input type="hidden" id="id" name="id" value="<?=$id?>">      
              <div><button type="submit" id="validate">Valider</button></div>
            </form>
        </div>

JS代码

$("#validate").click(function(e){
    e.preventDefault(); 
    $.post(
        'includes/checkAnswer.php',
        {            
           answer : $('#answer-input').val(),
           id : $('#id').val()
        }, 
        function(data){ 
            if(data === '1'){ 
                 $("#answer-warning").html("OK");
                 $("#answerInput").submit();
             }
            else{
                 $("#answer-warning").html("WRONG");
             }         
        },
        'text'
     );
});

Answer 1

我认为是因为您将按钮类型设置为submit。为什么？

执行$("#validate").click(function(e){时，将隐式替换表单的默认提交行为。

由于您希望在过程中进行其他操作，因此建议您将按钮类型更改为button或直接删除type属性。

然后$("#validate").click(function(e){会更改click而不是表单的submit的行为。

Answer 2

<form id="answerInput" action="index" method="post">
    <div id="answer-warning"></div>
    <input id="answer-input" name="answer" type="text">
    <input type="hidden" id="id" name="id" value="<?=$id?>">      
    <button onlcick="validate()">Valider</button>
</form>

/ ******** JS ************ /

function validate(){
var post = {};
    post['answer'] = $('#answer-input').val();
    post['id'] =  $('#id').val();
    $.ajax({
        url: 'includes/checkAnswer.php',
        type: 'POST',
        data: {data: post},
        success:function (data) {
            console.log('succsess');
        },
        error:function (jQXHR, textStatus, errorThrown) {
            console.log('failure');
        }
    });
}

表单未根据Ajax请求提交

2 个答案: