Ajax Form在数据库php mysql中插入两次数据

Question

The Scenario

I have a html form (index.php) which submits data using ajax to an external file (register.php) which does the parsing job and inserts data into mysql table.

The Problem

When the form is submitted, it inserts the data twice in the database. I searched everywhere but could not find any solution.

Here is my code:

index.php (form):

<form name="register" id="register" class="col-md-12 form-horizontal" role="form" onsubmit="submitForm(); return false;">
<div class="form-group">
    <label for="regname" class="control-label"  >Name:*</label>
    <input name="regname" type="text" class="form-control" id="regname" placeholder="Please provide your Name">
</div>
<div class="form-group">
    <label for="regmobile" class="control-label">Mobile No.:*</label>
    <input name="regmobile" type="text" class="form-control" id="regmobile" placeholder="Your Mobile Number">
</div>
<div class="form-group">
    <label for="regvillage" class="control-label">Village/City:*</label>
    <input name="regvillage" type="text" class="form-control" id="regvillage" placeholder="Your Village Name">
</div>
<div class="form-group">
    <label for="regdistrict" class="control-label">District:*</label>
    <select name="regdistrict" id="regdistrict" class="form-control" data-allow-clear="true" data-placeholder="Select District" style="width:100%">
    <option value="">Please Select</option>
    <option value="Ahmedabad">Ahmedabad</option>
    <option value="Amreli">Amreli</option>
    <option value="Anand">Anand</option>
    </select>
</div>
<div class="form-group">
    <hr>
    <span id="status"></span></br>
    <button type="submit" name="submitbtn" id="submitbtn" class="pull-right btn btn-primary">Register</button>
</div>
</form>

index.php (Ajax)

<script>
function _(id){ return document.getElementById(id); }
function submitForm(){
_("submitbtn").disabled = true;
_("status").innerHTML = 'please wait ...';
var formdata = new FormData();
formdata.append( "regname", _("regname").value );
formdata.append( "regmobile", _("regmobile").value );
formdata.append( "regvillage", _("regvillage").value );
formdata.append( "regdistrict", _("regdistrict").value );
var ajax = new XMLHttpRequest();
ajax.open( "POST", "register.php" );
ajax.onreadystatechange = function() {
    if(ajax.readyState == 4 && ajax.status == 200) {
        if(ajax.responseText == "success"){
            _("register").innerHTML = '<h4>Thanks '+_("regname").value+', your registration is complete.</h4>';
        } else {
            _("status").innerHTML = ajax.responseText;
            _("submitbtn").disabled = false;
        }
    }
}
ajax.send( formdata );
}
</script>

register.php

<?php  require_once('caligrodb.php'); ?> //database connection config file
<?php 
if (isset($_POST['regname']) && isset($_POST['regmobile']) && isset($_POST['regvillage']) && isset($_POST['regdistrict'])){
    $regname = mysql_real_escape_string($_POST['regname']);
    $regmobile = mysql_real_escape_string($_POST['regmobile']);
    $regvillage = mysql_real_escape_string($_POST['regvillage']);
    $regdistrict = mysql_real_escape_string($_POST['regdistrict']);

    mysql_select_db($database_caligrodb, $caligrodb);
    mysql_query("INSERT INTO contacts(contactname, contactno, contactvillage, contactdistrict, subscribed) VALUES ('$regname', '$regmobile', '$regvillage', '$regdistrict', '1')");

    echo "success";
} else {
    echo"Kindly fill the form & submit the data!";
};
?>

Can anyone help me in find whats wrong with this code?

Answer 1

I found the mistake:

The onsubmit="submitForm(); return false; is applied to the form tag. I removed it from there and instead I added onclick="submitForm(); returnfalse; to the submit button.

Now its working as expacted.