Ajax表单提交和响应中存储的数据？

Question

I have form which is used for sending sms now am sending the data on submit to sms.php page and executing the process. Now I need to submit the data in form without moving to sms.php page. It should be executed in the form page itself by using ajax method I have done that but also it redirects to sms.php. I need it to be done and the same page and the json response obtained should be stored in the database.

How can I do this? Help me Thanks in advance.

Form used for sending sms:

   <form role="form" method="POST" action="sms.php">
        <div class="form-group row">
            <label class="col-sm-4 form-control-label">Select Date Range<span class="text-danger">*</span>
            </label>
            <div class="col-sm-7">
                <div class="input-daterange input-group" id="date-range">
                    <input type="text" class="form-control" name="start" />
                    <span class="input-group-addon bg-custom b-0">to</span>
                    <input type="text" class="form-control" name="end" />
                </div>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-4 form-control-label">Select Brand<span class="text-danger">*</span>
            </label>
            <div class="col-sm-7">
                <select class="form-control" name="brand" id="brand" required>
                    <option value="">Select Brand</option>
                    <option value="3">test1</option>
                    <option value="2">test2</option>
                    <option value="1">test3</option>
                </select>
            </div>

        </div>

        <div class="form-group row">
            <div class="col-sm-8 col-sm-offset-4">
                <input type="submit" class="btn btn-primary  btn-sm" value="Submit">
            </div>
        </div>
    </form>

Ajax used to send data

$('sms').on('submit', function (e) {

          e.preventDefault();

          $.ajax({
            type: 'post',
            url: 'sms.php',
            data: $('form').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });

        });

sms.php

<?php

    if(isset($_POST['submit'])){
       $senderid =$_POST['senderid'];
       // echo $senderid;
       $message = rawurlencode($_POST['message']);
       $mobile = isset($_POST['mobilenumber']) ? $_POST['mobilenumber'] : '';
       sendSMS($mobile,$message,$senderid);
    }

function sendSMS($mobile,$message,$senderid){

$user = "asdhaskbdjasdjbfjk";
$url = 'http://login.smsgatewayhub.com/api/mt/SendSMS?APIKey='.$user.'&senderid='.$senderid.'&channel=2&DCS=0&flashsms=0&number='.$mobile.'&text='.$message.'&route=16;';

$ch=curl_init($url);

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch,CURLOPT_POST,1);
curl_setopt($ch,CURLOPT_POSTFIELDS,"");
curl_setopt($ch, CURLOPT_RETURNTRANSFER,2);
$data = curl_exec($ch);
print($data); /* result of API call*/

}

?>

Response obtained:

{"ErrorCode":"000","ErrorMessage":"Success","JobId":"112591825","MessageData":[{"Number":"0123456789","MessageId":"mU9WfV6hLEyNAQQI63BzNw"}]}

Answer 1

Your selector in jquery code $('sms') is wrong. And to stop changing the page, you should use click event and stop actually submitting the form like this:

$('.btn-sm').on('click', function (e) {
    e.preventDefault();
    $.ajax({
        type: 'post',
        url: 'sms.php',
        data: $('form').serialize(),
        success: function () {
          alert('form was submitted');
        }
    });
});

You can see from the above given code snippet that, I have used click event of the submit button, and also written e.preventDefault() in first line, so it will stop the form to submit but it will just initiate ajax call. So SMS will be sent and you will be on the same page. No redirection will be there.

Answer 2

In your code I found that you added action in your page:

 <form role="form" method="POST" action="sms.php">

remove that action and post from form as because you included inside your script tag