单击表单提交后的Ajax请求

Question

I have a form and in that form there is a QR code.QR code is generated based on form values. When the submit button is pressed, what i need is

1. Form values must submit to database

2. Make ajax request for QR code and update qr code.

    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 is

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

Every thing works when i click the button twice.On the first click form is submitting,On the second click QR code is updating. Is it possible to do it in single click?

Answer 1

Create a iframe <iframe id="createdIframe" style="display: none;" ></iframe> <iframe id="createdIframe" style="display: none;" ></iframe> and add the form 'target' property: <form target="createdIframe" > .

For example:

 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

Make the ajax request twice. First send the data of the form through ajax. You can convert it to any suitable form (like JSON) and send it to the server. After that make the ajax request again for the QRcode.

Example:

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