CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
Guru
Guru

Reputation: 39

Form is not submitting in ajax returned html data from php

There are three files 1.street_master.php 2.street.php 3.streetdelete.php

street_master.php has form for adding new street(streetname,streetcode) when submit is pressed using ajax call new street is added and and the street list from the database are printed in table format( with individual delete option delete is done by streetdelete.php file ) on the same page that is street_master.php .but delete option is not working. actually form is not submitting which redirect to streetdelete.php

streetmaster.php

<html>
    <?php include 'conf.php'; ?>
    <head>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <script src="jquery-1.12.0.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>
            function showUser()
            {

                var n1=document.getElementById('scode').value;
                var n2=document.getElementById('sname').value;
                var n3=document.getElementById('desc').value;
                var n4=document.getElementById('ward').value;

                if (n1 == null || n1 == "" )
                {
                   alert('fill street code ');
                }
                else if( n2 == null || n2 == "" ) {
                alert('fill street name');
                }
                else
                {
                xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function()
                {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    {
                        document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
                    }
                }

                var q="?v1="+n1;
                q+="&v2="+n2;
                q+="&v3="+n3;
                q+="&v4="+n4;



                xmlhttp.open("GET","street.php"+q,true);
                xmlhttp.send();
                }
            }
        </script>
    </head>
    <body>
        <center>
            <h2>Street Master</H2>
        </CENTER>
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label class="control-label col-sm-2">Street code </label>
                <div class="col-sm-1">
                    <input type="number" class="form-control" name="scode" id="scode" required>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">  Street name</label>
                <div class="col-sm-2"> <input type="text" class="form-control" name="sname" id="sname" required> </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2"> Description</label>
                <div class="col-sm-2"> <input type="text" class="form-control" name="desc" id="desc" > </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="ward num"> Ward No </label>
                <div class="col-sm-2">
                    <select name="ward" id="ward" class="form-control">
                        <option value="">chose the ward</option>
                        <?php
                            $s="select  WardNo from ward";
                            $result=$con->query($s);

                            while($row = $result->fetch_assoc())
                            {
                                echo  "<option value='$row[WardNo]'> ward $row[WardNo]</option>";
                            }
                            ?>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2"> </div>
                <div class="col-sm-2"> <input type="button"  class="form-control" value="submit" onClick="showUser()"> </div>
            </div>
        </form>
        <div id="txtHint"></div>
    </body>
</html>

street.php

<?php

    $q =$_GET['v1'];
    $q1 =$_GET['v2'];
    $q2 =$_GET['v3'];
    $q3 =$_GET['v4'];

    /
     include 'conf.php'; 

    if($con)
    {
       $sql="insert into areacodemaster values('$q','$q1','$q3')";
        $con->query($sql);
        $s="select * from areacodemaster";
        $result=$con->query($s);
        echo "
        <head>
        <link rel='stylesheet' href='scroll.css'>
        <script src='scroll.js'></script>
        </head>
        <body><center>
        <table class='scroll'>
        <thead>
        <tr>
        <th>Street_code</th>
        <th width='70%'>Street_Name</th>
        <th>Ward_Number</th>
        <th>delete</th>
        </tr>
        </thead> ";
        echo "
        <tbody> ";


        while($row = $result->fetch_assoc())
        {
            echo "
            <tr>
            <form action='streetdelete.php' method='post'>
            <td>".$row['Areacode']."</td>
            <td>".$row['Areaname']."</td>
            <td>".$row['WardNo']."</td>
            <td><input type='hidden' name='ac' value='$row[Areacode]'>
            <td><input type='submit' value='Delete'></a></td>
            </form>
            </tr>";
        }

        echo "

        </tbody>
        </table></center>
        </body> ";


    }


    ?>

streetdelete.php

<?php
$g=$_POST['ac'];
include 'conf.php';
            $sq="delete from areacodemaster where Areacode='$g'";
            $con->query($sq);
             echo "<script type='text/javascript'>alert('Deleted');         </script>";
?>

but if we run street.php alone form is submitting to streetdelete.php

Upvotes: 0

Views: 92

Answers (1)

Tarek.hms
Tarek.hms

Reputation: 1283

Your whole code is in a mess and it need to be more organized, The basics mistakes you have done:

1- You are adding new page each time new street is being shown, and that because you are mixing the server side page with the search page and to fix that you have to separate them, so a page for searching and another for showing.

2- It's better to have one core Ajax function to deal with all requests and then you can process the searching actions and deleting actions through Ajax, in this case you will not need to use a form for deleting and the problem will be solved, OR since you are including Jquery to your project then there is no need to have your own Ajax core function because Jquery has done that for you so you can call an Ajax request any place you want with your preferred parameters.

So your code will be as follow:

First page: streets.php (the main page which shows existing streets)

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="jquery-1.12.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        function deleteUser(streetCode){
           $.ajax({
           type: "POST",
           url: "deletestreet.php",
           data: {ac: streetCode},
           success: function( msg ){$("#" + streetCode ).remove();alert("Deleted");}
           });

        }
        function showUser(){
            var n1 = $("#scode").val();
            var n2 = $("#sname").val();
            var n3 = $("#desc").val()
            var n4 = $("#ward").val();

            if (n1 == null || n1 == "" ){
                alert('fill street code ');
            }
            else if( n2 == null || n2 == "" ){
                alert('fill street name');
            }
            else{
                $.ajax({
                type: "POST",
                url: "searchstreet.php",
                data: {v1: n1, v2: n2, v3: n3, v4: n4},
                success: function( msg ){$("#txtHint").html(msg);}
                });
            }
    </script>

</head>
<body>
<center><h2>Street Master</h2></center>
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-sm-2">Street code</label>
    <div class="col-sm-1">
    <input type="number" class="form-control" name="scode" id="scode" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2">Street name</label>
    <div class="col-sm-2">
    <input type="text" class="form-control" name="sname" id="sname" required> 
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2">Description</label>
    <div class="col-sm-2"> 
    <input type="text" class="form-control" name="desc" id="desc" > 
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="ward num">Ward No</label>
    <div class="col-sm-2">
    <select name="ward" id="ward" class="form-control">
    <option value="">chose the ward</option>
    <?php
    $s="select  WardNo from ward";
    $result=$con->query($s);
    while($row = $result->fetch_assoc()){
       echo  "<option value='$row[WardNo]'> ward $row[WardNo]</option>";
    }
    ?>
    </select>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-2"> </div>
    <div class="col-sm-2"> 
    <input type="button"  class="form-control" value="submit" onClick="showUser()"> 
    </div>
  </div>
</form>
<div id="txtHint"></div>
</body>
</html>

Page 2: searchstreet.php

<?php
$q = $_GET['v1'];
$q1 =$_GET['v2'];
$q2 =$_GET['v3'];
$q3 =$_GET['v4'];

 include 'conf.php'; 

if($con){
    $sql = "insert into areacodemaster values('$q','$q1','$q3')";
    $con->query($sql);
    $s = "select * from areacodemaster";
    $result=$con->query($s);
    echo "
    <center>
        <table class='scroll'>
            <thead>
              <tr>
                <th>Street_code</th>
                <th width='70%'>Street_Name</th>
                <th>Ward_Number</th>
                <th>delete</th>
              </tr>
            </thead>
            <tbody>";
    while($row = $result->fetch_assoc()){
        echo "
              <tr id='".$row['Areacode']."'>
                <td>".$row['Areacode']."</td>
                <td>".$row['Areaname']."</td>
                <td>".$row['WardNo']."</td>
                <td><input type='button' value='Delete' onclick=deleteUser('".$row['Areacode']."')></td>
              </tr>";
    }
        echo"
            </tbody>
        </table>
    </center>";
}

deletestreet.php

<?php
$g = $_POST['ac'];
include 'conf.php';
$sq = "delete from areacodemaster where Areacode='$g'";
$con->query($sq);
?>

Upvotes: 1

Related Questions