Question

我有4个链接（查看汽车，手车，检索汽车和添加汽车）。每个链接都由Ajax加载。问题出在（添加汽车），我第一次点击提交数据一次记录在数据库中......当我点击（查看汽车）并返回（添加汽车）并再次提交表格时，它会添加数据到数据库3次。此外，当我按下（查看汽车）并返回添加汽车并再次提交时，它会记录数据6次。

ajax.js

$(document).ready(function(){
$('#viewCar').click(function(){
     $("#show").load('view'); 
});});//end click

$(document).ready(function(){
    $('#handCar').click(function(){
        $("#show").load('handcar');
    });//end load

});//end click

$(document).ready(function(){
    $('#retrieveCar').click(function(){
        $("#show").load('retrieve');
    });//end load
});//end click

$(document).ready(function(){
    $('#addCar').click(function(){
      enter code here  $("#show").load('add');
    });//end load
});//end click




$(document).ready(function(){
        $("#submit").click(function(e)


  {
            e.preventDefault(); 
            var postData = $('#cForm').serialize();
            var formURL = 'car/add';





  var LT = $("#LT").val();
            var LN = $("#LN").val();



if(LT == ''|| LN == '')
        {
            console.log('error some form is empty !!');
        }
        else
        {  
            $.ajax({
                url : formURL,
                type: "POST",
                data : postData,
                success:function() 
                {
                    $('#cForm').find("input[type=text]").val(" ");
                    console.log('saved !!');
                }
            });
        }
       return null;
    });   //end click

}); //end of ready

car_links.html

<div class="container">
<ul class="ul">
    <li class="li"><a id="viewCar" href="#" >view cars</a></li>
    <li class="li"><a id="handCar" href="#">hand car</a></li>
    <li class="li"><a id="retrieveCar" href="#">retrieve car</a></li>
    <li class="li"><a id="addCar" href="#">add a car</a></li>
</ul>

car_add.html

 <div class="col-md-4 col-md-offset-4">

    <form id="cForm" class="form-horizontal" >

        <?php echo validation_errors();  ?>

        <legend>add a new car</legend>
        <div class="form-group">
            <label class="col-sm-5 control-label" for="LN">License #:</label>
            <div class="col-sm-13">
                <input  class="form-control form-size" type="text" id="LN"  name="LN" value="" /></li>
            </div>
        </div>  

        <div class="form-group">    
            <label class="col-sm-5 control-label" for="LT">License Ltr:</label>
            <div class="col-sm-13">
                <input  class="form-control form-size" type="text" id="LT" name="LT" value="" />
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-5 control-label" for="Model">Model:</label>
              <div class="col-sm-13">
                <select  class="form-control form-size" name="Model">
                    <option value="Toyota"> Toyota</option>
                    <option  value="Audi"> Audi</option>
                    <option  value="Hundai"> Hundai</option>
                    <option  value="BMW"> BMW</option>
                </select>
            </div>
         </div>

         <div class="form-group">   
           <label class="col-sm-5 control-label" for="Year"> Year:</label> 
            <div class="col-sm-13">
            <select class="form-control form-size" name="Year">
                <option value="2010"> 2010</option>
                <option value="2014"> 2014</option>
            </select>
            </div>
         </div>

         <div class="form-actions btn-action">
            <button class="btn btn-success" id="submit" value="save" type="button" name="submit">save</button></li>
            <button  class="btn btn-danger" type="reset" name="reset"> Reset </button></li> 
         </div>

    </form>
</div>

Answer 1

对于初学者来说，每个点击功能都有自己的.ready功能。加载页面时会启动.ready功能。如果您希望仅在单击时加载该函数，则需要将click函数放入这样的函数中。

$(function() {
    $('#viewCar').click(function() {
        $("#show").load('view'); 
    });

    $('#handCar').click(function() {
        $("#show").load('handcar');
    });

    $('#retrieveCar').click(function() {
        $("#show").load('retrieve');
    });

    $('#addCar').click(function() {
        $("#show").load('add');
    });

    $("#submit").click(function(e) {
        e.preventDefault(); 
        var postData = $('#cForm').serialize();
        var formURL = 'car/add';
        var LT = $("#LT").val();
        var LN = $("#LN").val();

        if(LT == ''|| LN == '') {
            console.log('error some form is empty !!');
        } else {  
            $.ajax({
                url : formURL,
                type: "POST",
                data : postData,
                success:function() {
                    $('#cForm').find("input[type=text]").val(" ");
                    console.log('saved !!');
                }
            });
        }
        return null;
    });
}

如果这不起作用或不是您想要的，请给我留言。

表单提交后重复数据

1 个答案: