Question

我有一个表单，并且在该表单中有一个QR码.QR代码是根据表单值生成的。按下提交按钮时，我需要的是

表单值必须提交到数据库

请求QR码的ajax请求并更新qr码。

function getNewQrcode() {
 customRequest({
   type : "GET",
   url: ROOT_PATH + "hotel/qrcode",
   success: function(data) {
   document.getElementById("qrcode-holder").innerHTML = data;
 },
 error: function(err) {
 alert("Error" + err.Message)
 }
});
}

function formSub(){
 $("#hotel_device_settings_form").submit();
}

function combinedEvent(){
 formSub();
 getNewQrcode();
 return true
}

HTML按钮

<button onclick="combinedEvent();" >SAVE</button>

当我单击按钮两次时，每件事都有效。在第一次单击表单提交时，在第二次单击时QR码正在更新。有可能单击一下吗？

Answer 1

创建iframe <iframe id="createdIframe" style="display: none;" ></iframe>并添加表单'target'属性：<form target="createdIframe" >。

例如：

function getSubmit() {
  document.forms[0].submit();
  $.ajax({
    url:'/action',
    data: {
      name: 'test'
    }
  })
}

form {

}
button {
width: 100px;
height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="createdIframe" style="display: none;" ></iframe>
<form action="/" target="createdIframe">
  <input type="text" name="name" /> 
  <br><br>
  <button onClick="getSubmit()">Submit form</button>
</form>

Answer 2

两次发出ajax请求。首先通过ajax发送表单的数据。您可以将其转换为任何合适的形式（如JSON）并将其发送到服务器。之后再次为QRcode发出ajax请求。

示例：

<script>
    function formSub(){

        // Convert the attributes accordingly (In JSON or anthing else) to be sent.

        var variable1 = $('#variable1').val();
        var variable2 = $('#variable2').val();

        var dataString = {"variable1" : variable1, "variable2" : variable2};
        var dataJson = JSON.stringify(dataString);

        // Do form Validation accordingly
        if(variable1 == "")
        {
           alert('Please enter the details');
           document.getElementById("variable1").focus();
        }

        // Make the post request to the desired page
        $.ajax({
            type: "POST",
            url: path,
            data : dataJson,
            success: function(result)
            {
                // Return success if the data insertion is successful
                if(result=="success")
                {
                    console.log("success");
                }
            },
            error : function(error)
            {
                console.log("error");
            }
        });
    }


    function getNewQrcode() {
        customRequest({
            type : "GET",
            url: ROOT_PATH + "hotel/qrcode",
            success: function(data) {
                document.getElementById("qrcode-holder").innerHTML = data;
            },
            error: function(err) {
                alert("Error" + err.Message)
            }
        });
    }


    function combinedEvent(){
        formSub();
        getNewQrcode();
        return true
    }
</script>

单击表单提交后的Ajax请求

2 个答案: