•  09-06-2021
  •  | 
  •  

Frage

i am using an ajax event which is triggered when i hit the submit button to add data to the database but since when i orignally created this page they were all in seprate files for testing purposes so now when i have put all the code together i have notice that 4 submit buttons i was using to refresh the page and then change the data being seen by filtering it are triggering the ajax query i have placed the code bellow.. i am quite stumped in what is the only way to go about this...

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(function()
    {

$("input[type='checkbox']").on('click', function() {

    var $this = $(this);
    var isChecked = $this.prop('checked');

    var checkVal = isChecked ? $this.attr('id') : $this.attr("value");
    var process= $this.attr("value");
    var userid = $this.attr('name');

            $.ajax({
            type: "GET",
            url: 'request.php',
            data: {
            'uname': checkVal,
            'id': userid

                },
            success: function(data) {

        if(data == 1){//Success 
             alert('Sucess');
          }
        if(data == 0){//Failure 
             alert('Data was NOT saved in db!');
          }
            }
    });
  });

 $('form').bind('submit', function(){  // it is triggering this peice of code when the submit buttons are clicked ???
                $.ajax({
                    type: 'POST',
                    url: "requestadd.php",
                    data: $("form").serialize(),

                    success: function(data) {

                            if(data == 1){//Success 
                                    alert('Sucess');
                                         }
                             if(data == 0){//Failure 
                                    alert('Data was NOT saved in db!');
                                         }
                                 }
                });
                return false;
            });
                      $("#claim").change(function(){       
             $("#area").find(".field").remove();
             //or
               $('#area').remove('.field');
          if( $(this).val()=="Insurance")
             {
        $("#area").append("<input class='field' name='cost' type='text' placeholder='Cost' />");

             }
          });
  });

</script>
    </head>
        <body>
        <div id="add">
        <form name="form1aa" method="post" id="form1a" >
 <div id="area">
 <input type=text name="cases"  placeholder="Cases ID">
         <select id="claim" name="claim">
            <option value="">Select a Claim</option>
        <option value="Insurance">Insurance</option>  
        <option value="Warranty">Warranty</option>
        </select>
        </div>
    <select name="type" onChange=" fill_damage (document.form1aa.type.selectedIndex); ">
    <option value="">Select One</option>
    <option value="Hardware">Hardware</option>
    <option value="Software">Software</option>
    </select>

    <select name="damage">
    </select>
    <br />
    <input type=text name="comment"  placeholder="Comments Box">
    <input type="submit" value="Submit" name="Submit">
    </form>
    </div>
    <?  

        $sql="SELECT * FROM $tbl_name ORDER BY cases ASC";

    if(isset($_POST['tpc'])){
        $sql="select * from $tbl_name WHERE class LIKE '1%' ORDER BY cases ASC";
    }
    if(isset($_POST['drc'])){
        $sql="select * from $tbl_name WHERE class LIKE 'D%' ORDER BY cases ASC";
    }
    if(isset($_POST['bsc'])){
        $sql="select * from $tbl_name WHERE class LIKE 'B%' ORDER BY cases ASC";
    }
    $result=mysql_query($sql);

    ?>

<!-- Filter p1 (Start of) !-->
<form action="ajax-with-php.php" target="_self">
<input type="submit" name="all" value="All" />  // the issue is mainly occuring here when i click any of thesse meant to refesh the page and change the query with the if statements but is trigger the other code i commented
<input type="submit" name="tpc" value="TPC" /> 
<input type="submit" name="drc" value="DRC" />
<input type="submit" name="bsc" value="BSC" />
</form>
War es hilfreich?

Lösung 

$('form').bind('submit', function(){ ...

will bind to all forms. Change it to

$('form#form1a').bind('submit', function(){ ...

and it will only bind to the first form, not the second.

Andere Tipps

 $('form').bind('submit', function(event){  
    event.preventDefault();
    $.ajax({...

Try making the changes above 1) adding the event argument to your callback 2) executing the .preventDefault() method. When using AJAX with the submit event this is neccessary to stop the page from reloading and interrupting your async request.

There may be more issues than that, but hopefully that will get you on the right track.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top