0

I am trying to submit data into MySQL database using PHP and ajax but it is not submitting data and when I tried to submit data with default page reload method it is submitting the data may be there is some problem in my ajax code. Please guide me in this regards.

HTML Code:

<form method="POST" id="custForm" class="addcustform">
                        <div class="header">
                            <h2>
                                <strong>ADD CUSTOMER</strong>
                                <span class="pull-right sys-id">System ID - <input type="text" name="sys_id_input" class="sys_id_input" /></span>
                            </h2>
                        </div>
                        <div class="body">
                            <h2 class="card-inside-title">Personal Detials</h2>
                            <div class="row clearfix">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Customer Name</label>
                                        <div class="form-line">
                                            <input type="text" name="cust_name" class="form-control" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Email</label>
                                        <div class="form-line">
                                            <input type="email" name="cust_email" class="form-control" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row clearfix">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Mobile Number</label>
                                        <div class="form-line">
                                            <input type="text" name="cust_mobile" class="form-control mobile-phone-number">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Address</label>
                                        <div class="form-line">
                                            <input type="text" name="cust_address" class="form-control" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row clearfix">
                                <div class="col-sm-6">
                                    <label>Visa Type</label>
                                    <div class="btn-group bootstrap-select form-control show-tick select-dropdown-trick-container">
                                        <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="-- Please select --">
                                            <span class="filter-option pull-left select-dropdown-trick-text">-- Please select --</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
                                            <input type="hidden" class="dropdown-input" name="cust_visa" />
                                        </button>
                                        <div class="dropdown-menu open">
                                            <ul class="dropdown-menu inner select-dropdown-trick" role="menu">
                                                <li data-original-index="0" class="selected">
                                                    <a tabindex="0" class="" style="" data-tokens="null">
                                                        <span class="text">-- Please select --</span><span class="glyphicon glyphicon-ok check-mark"></span>
                                                    </a>
                                                </li>
                                                <li data-original-index="1">
                                                    <a tabindex="0" class="" style="" data-tokens="null">
                                                        <span class="text">Visit Visa</span><span class="glyphicon glyphicon-ok check-mark"></span>
                                                    </a>
                                                </li>
                                                <li data-original-index="2">
                                                    <a tabindex="0" class="" style="" data-tokens="null">
                                                        <span class="text">Residental Visa</span><span class="glyphicon glyphicon-ok check-mark"></span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Nationality</label>
                                        <div class="btn-group bootstrap-select form-control show-tick select-dropdown-trick-container">
                                            <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="-- Please select --">
                                                <span class="filter-option pull-left select-dropdown-trick-text">-- Please select --</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
                                                <input type="hidden" class="dropdown-input" name="cust_nationality" />
                                            </button>
                                            <div class="dropdown-menu open large-list-short">
                                                <ul class="dropdown-menu inner select-dropdown-trick" role="menu">
                                                    <?php include 'country_list.php'; ?>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h2 class="card-inside-title">Car Detials</h2>
                            <div class="row clearfix">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Car Modal</label>
                                        <div class="btn-group bootstrap-select form-control show-tick select-dropdown-trick-container">
                                            <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="-- Please select --">
                                                <span class="filter-option pull-left select-dropdown-trick-text">-- Please select --</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
                                                <input type="hidden" class="dropdown-input" name="cust_cars" />
                                            </button>
                                            <div class="dropdown-menu open large-list-short">
                                                <ul class="dropdown-menu inner select-dropdown-trick" role="menu">
                                                    <?php include 'cars_list.php'; ?>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Car Color</label>
                                        <div class="btn-group bootstrap-select form-control show-tick select-dropdown-trick-container">
                                            <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="-- Please select --">
                                                <span class="filter-option pull-left select-dropdown-trick-text">-- Please select --</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
                                                <input type="hidden" class="dropdown-input" name="car_color" />
                                            </button>
                                            <div class="dropdown-menu open">
                                                <ul class="dropdown-menu inner select-dropdown-trick" role="menu">
                                                    <li data-original-index="0" class="selected">
                                                        <a tabindex="0" class="" style="" data-tokens="null">
                                                            <span class="text">-- Please select --</span><span class="glyphicon glyphicon-ok check-mark"></span>
                                                        </a>
                                                    </li>
                                                    <li data-original-index="1">
                                                        <a tabindex="0" class="" style="" data-tokens="null">
                                                            <span class="text">White</span><span class="glyphicon glyphicon-ok check-mark"></span>
                                                        </a>
                                                    </li>
                                                    <li data-original-index="2">
                                                        <a tabindex="0" class="" style="" data-tokens="null">
                                                            <span class="text">Black</span><span class="glyphicon glyphicon-ok check-mark"></span>
                                                        </a>
                                                    </li>
                                                    <li data-original-index="2">
                                                        <a tabindex="0" class="" style="" data-tokens="null">
                                                            <span class="text">Silver</span><span class="glyphicon glyphicon-ok check-mark"></span>
                                                        </a>
                                                    </li>
                                                    <li data-original-index="2">
                                                        <a tabindex="0" class="" style="" data-tokens="null">
                                                            <span class="text">Blue</span><span class="glyphicon glyphicon-ok check-mark"></span>
                                                        </a>
                                                    </li>
                                                    <li data-original-index="2">
                                                        <a tabindex="0" class="" style="" data-tokens="null">
                                                            <span class="text">Red</span><span class="glyphicon glyphicon-ok check-mark"></span>
                                                        </a>
                                                    </li>
                                                    <li data-original-index="2">
                                                        <a tabindex="0" class="" style="" data-tokens="null">
                                                            <span class="text">Brown</span><span class="glyphicon glyphicon-ok check-mark"></span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Plate Number</label>
                                        <div class="form-line">
                                            <input type="text" name="plate_number" class="form-control plate-input" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Start KM</label>
                                        <div class="form-line">
                                            <input type="text" name="start_km" class="form-control" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h2 class="card-inside-title">Rental Detials</h2>
                            <div class="row clearfix">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Start Date</label>
                                        <div class="form-line">
                                            <input type="text" name="start_date" class="form-control date-input" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>End Date</label>
                                        <div class="form-line">
                                            <input type="text" name="end_date" class="form-control date-input" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row clearfix">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Rental Amount</label>
                                        <div class="form-line">
                                            <input type="text" name="rental_amount" class="form-control" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Security Amount</label>
                                        <div class="form-line">
                                            <input type="text" name="scurity_amount" class="form-control" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                             <div class="row clearfix">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Rental Company</label>
                                        <div class="btn-group bootstrap-select form-control show-tick select-dropdown-trick-container">
                                            <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="-- Please select --">
                                                <span class="filter-option pull-left select-dropdown-trick-text">-- Please select --</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
                                                <input type="hidden" class="dropdown-input" name="rental_company" />
                                            </button>
                                            <div class="dropdown-menu open large-list-short">
                                                <ul class="dropdown-menu inner select-dropdown-trick" role="menu">
                                                    <?php include 'rental_company_list.php'; ?>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row clearfix">
                                <div class="col-sm-2">
                                    <div class="form-group">
                                        <button class="btn bg-red btn-block btn-lg waves-effect btn-addcust" name="btn-addcust" type="submit">Save Details</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <form>

PHP Code:

if(isset($_POST['btn-addcust'])) {
  # code...
  $sys_id_input = $_POST['sys_id_input'];
  $cust_name = $_POST['cust_name'];
  $cust_email = $_POST['cust_email'];
  $cust_mobile = $_POST['cust_mobile'];
  $cust_address = $_POST['cust_address'];
  $cust_visa = $_POST['cust_visa'];
  $cust_nationality = $_POST['cust_nationality'];
  $cust_cars = $_POST['cust_cars'];
  $car_color = $_POST['car_color'];
  $plate_number = $_POST['plate_number'];
  $start_km = $_POST['start_km'];
  $start_date = $_POST['start_date'];
  $end_date = $_POST['end_date'];
  $rental_amount = $_POST['rental_amount'];
  $scurity_amount = $_POST['scurity_amount'];
  $rental_company = $_POST['rental_company'];

  $sql = "CREATE TABLE IF NOT EXISTS `$rental_company` (
            id INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
            sys_id_input VARCHAR(255) NOT NULL,
            cust_name VARCHAR(255) NOT NULL,
            cust_email VARCHAR(255) NOT NULL,
            cust_mobile VARCHAR(255) NOT NULL,
            cust_address VARCHAR(255) NOT NULL,
            cust_visa VARCHAR(255) NOT NULL,
            cust_nationality VARCHAR(255) NOT NULL,
            cust_cars VARCHAR(255) NOT NULL,
            car_color VARCHAR(255) NOT NULL,
            plate_number VARCHAR(255) NOT NULL,
            start_km VARCHAR(255) NOT NULL,
            start_date VARCHAR(255) NOT NULL,
            end_date VARCHAR(255) NOT NULL,
            rental_amount VARCHAR(255) NOT NULL,
            scurity_amount VARCHAR(255) NOT NULL,
            rental_company VARCHAR(255) NOT NULL
          )";

  $db_con->exec($sql);

  $sql = "INSERT INTO `$rental_company` (sys_id_input, cust_name, cust_email, cust_mobile, cust_address, cust_visa, cust_nationality, cust_cars, car_color, plate_number, start_km, start_date, end_date, rental_amount, scurity_amount, rental_company) VALUES ('$sys_id_input', '$cust_name', '$cust_email', '$cust_mobile', '$cust_address', '$cust_visa', '$cust_nationality', '$cust_cars', '$car_color', '$plate_number', '$start_km', '$start_date', '$end_date', '$rental_amount', '$scurity_amount', '$rental_company')";

  $db_con->exec($sql);

  echo "ok";

}

Ajax Code:

$('.addcustform').submit(function(){

    var data = $('#custForm').serialize();

    $.ajax({

        type : 'POST',
        url  : '../include/addcust.php',
        data : data,
        beforeSend: function()
        {   
            //$("#alert").fadeOut();
            $(".btn-addcust").html('Saving ...');
        },
        success : function(response)
        {                        
            if(response=="ok"){
                setTimeout( function(){ 
                    // Do something after 1 second 
                    $(".btn-addcust").html('Success');
                }  , 1000 );
            }
            //alert(data);
        }
    });

    return false;

});

Any help will be appriciated. Thanks

Qarar Ul Hassan
  • 141
  • 1
  • 13
  • Can you please add your HTML too? Can you please open the console and check in the network tab if at least your AJAX request is starting? – quirimmo May 24 '17 at 11:21
  • Check your `url` path of ajax calling if it is right or not. – Virb May 24 '17 at 11:22
  • Show your error plz... – Mahfuzur Rahman May 24 '17 at 11:22
  • as it is using ajax I am not able to see error and file path is ok I checked it twice and HTML code is added. – Qarar Ul Hassan May 24 '17 at 11:25
  • when I tested, your ajax did not handle send+response (error with empty JS data). please try to modify `data : data,` with `data : {data},` and `success : function(response) { ... your stuff ... }` to `success : function(response) { $('#response').html(response); }`. Then, on the PHP side, just do `$data = $_POST['data']; print_r($data);` **add** the `
    ` on top of your form to see what will be returned and let us know...     – OldPadawan May 24 '17 at 14:08

3 Answers3

0

You can if you use chrome press F12, go to Network, then submit the form and look at the newly added line what the response from your server looks like (should be ok according to your posted code). Maybe you are submitting your data to the wrong URL (try using an absolute one like /include/addcust.php).

You haven't set a value for your button, so jQuery wont take it into effect and your first line of PHP would result in a false. So just add something like value="submit" to your submit button.

Jonathan
  • 177
  • 1
  • 11
  • 1
    this should be a comment below his comment where he states that he cannot check errors because he is using AJAX – quirimmo May 24 '17 at 11:31
  • There you can click on the addcust.php and look at the response but it seems like your server is redirecting your request somewhere else (see status 302) – Jonathan May 24 '17 at 11:44
  • that was because I was using absolute file path. Check this one with correct path. http://prntscr.com/fbisd5 http://prntscr.com/fbisiz – Qarar Ul Hassan May 24 '17 at 11:48
  • Can you look in the headers and check if the responsecode is 200? If it's something else there is a problem with something (which can probably be narrowed down by the response code) – Jonathan May 24 '17 at 11:52
  • I have updated the answer to include a new possible solution. – Jonathan May 24 '17 at 11:59
  • But I think I am using – Qarar Ul Hassan May 24 '17 at 12:07
  • In that case you could exchange it for an `````` or you check for any other required field in your PHP. Just a little hint: You can add the ```required``` to any input to prevent the form from being submitted without that input being filled in. – Jonathan May 24 '17 at 12:09
  • Done but nothing happen – Qarar Ul Hassan May 24 '17 at 13:45
  • Would you mind trying to add the following lines to the very top of your addcust.php? PHP: `if(isset($_POST)){foreach($_POST as $key => $val){echo $key . ": " . $val . "
    ";}` After that you should be able to see all the submitted date in the response of your ajax request. Check if everything is as you expect it.     – Jonathan May 24 '17 at 14:00
  • Parse error: syntax error, unexpected end of file in F:\xampp\htdocs\erp\include\addcust.php on line 54 – Qarar Ul Hassan May 24 '17 at 14:30
  • I'm sorry, I missed a closing ```}``` at the very end – Jonathan May 24 '17 at 14:36
  • but still not able to submit – Qarar Ul Hassan May 24 '17 at 14:46
  • But if it shows the data that means that the form was successfully submitted and transmitted and the mistake is somewhere in the PHP you wrote. Just make sure you check your keys against what JS autogenerates via the serialize function. Check also if you have transmitted the data you wanted to and not missing something. – Jonathan May 24 '17 at 14:58
0

The form's action is its own page and you say the page refreshes on submit. Seem like you javascript isn't preventing the default action of the form, so even if you AJAX code works the page has refreshed before it's finished.

You will need to add event.preventDefault(); inside the .submit() function.

A similar question has been asked: Ajax Form submit with preventDefault

You can also read more about preventing default actions here:

https://api.jquery.com/submit/

https://api.jquery.com/event.preventdefault/

$('.addcustform').submit(function(){
    event.preventDefault();
    var data = $('#custForm').serialize();

    $.ajax({

        type : 'POST',
        url  : '../include/addcust.php',
        data : data,
        beforeSend: function()
        {   
            //$("#alert").fadeOut();
            $(".btn-addcust").html('Saving ...');
        },
        success : function(response)
        {                        
            if(response=="ok"){
                setTimeout( function(){ 
                    // Do something after 1 second 
                    $(".btn-addcust").html('Success');
                }  , 1000 );
            }
            //alert(data);
        }
    });

    return false;

});
Blueline
  • 388
  • 1
  • 10
  • Hi @David thanks for your answer but if you read my question I stated that if I submit the form with page reload it is a success but when I tried with ajax I am not able to submit. So, I know how to prevent page reload on form submit but I am facing the issue in form submission without page reload. – Qarar Ul Hassan May 24 '17 at 11:45
  • Hi @QararUlHassan, sorry for missing that detail. I've had a play with the code and found one possible problem. Is the above ajax wrapped in $( document ).ready(function() {....}); ? – Blueline May 24 '17 at 12:16
  • Change buttun type to "button" not submit, then listen for the click. I'm getting the form data with this, but not with your above. $( ".addcustform" ).on('click', function() { var data = $('#custForm').serialize(); console.log(data); $.ajax({ .... }); }); – Blueline May 24 '17 at 14:02
0

Change

type="submit"

into

type="button"

on your html code

felhie
  • 1
  • 1