buttons in forms doesnt work after ajax call from db

user_8635824 0
Viewed 93

I have search google, here and w3schools but this answer i cant find anyway. Not even in the "questions that may already have your answer".

I am trying to learn a bit more about AJAX and i have come to a hold at this guide W3schools AJAX database

All the guide i can get to work but when i try to suit it to my needs it goes wrong. What i want is that when i get to "getuser.php" i want to be able to update db in this file. If possible without me leaving this page with the result i have found. I choose from a dropdown table before this site. The php files which is supposed to update the db works (tried them on a normal page, and all is good). My current workaround is to add a button which opens a second window to update the info.

When i get to this point: 

<?php
$q = intval($_GET['q']);
include 'db.php';
$con = new mysqli($servername, $username, $password, $dbname);
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"webhelp");
$sql="SELECT * FROM advisors WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);

while($row = mysqli_fetch_assoc($result)) {
    echo "<table><tr><td>Phone</td><td>" . $row['phone'] . "</td>
          <td><form action='addphone.php' method='post'>
          <input type='hidden' name='id' value='".$q."'>        
          <td><input type='text' name='phone'></td>
          <td><input type='submit' value='Update'></td>
          </form></td></tr></table>";

    echo "<tr><td>LoB</td><td>" . $row['lob'] . "</td>
          <td><form action='addlob.php' method='post'>
          <input type='hidden' name='id' value='".$q."'>
          <td><select name='lob'>
          <option value='". $row['lob'] ."'>" . $row['lob'] . "</option>".

          $sql = "SELECT * FROM lob";
          $result = $con->query($sql);

          while($row = $result->fetch_assoc()) {
             echo "<option value='" . $row["lob"] . "'>" . $row["lob"] . "</option>"; }
              "</select></td>
              <td><input type='submit' value='Update'></td>
              </form>
              </tr>";

     echo "<tr><td>Country</td><td>" . $row['country'] . "</td>
          <td><form action='addcountry.php' method='post'>
          <input type='hidden' name='id' value='".$q."'>
          <td><select name='country'>
          <option value='". $row['country'] ."'>" . $row['country'] . "</option>".

          $sql = "SELECT * FROM country";
          $result = $con->query($sql);

          while($row = $result->fetch_assoc()) {
             echo "<option value='" . $row["country"] . "'>" . $row2["country"] . "</option>" ; }
            "</select></td>
            <td><input type='submit' value='Update'></td>
            </form>
            </tr>"; 

  }
echo "</table>";

mysqli_close($con);
?>

The "Update" buttons doesnt work. It doesnt matter where i place the files (same folder, different folder) ect. However if i add a button with a link outside of the then that button work. But as soon as it is inside a table PLUS also method="post" is in the form it mess it up.

What am i doing wrong?

Alternatively is it possible to make a button here which carries the $id over to a small popup window? (I can open it in a new window but I can't choose how big the window should be)

mysqli php jquery ajax javascript
1 Answers

You want to do this for all your 3 forms. I give you example for first one.

Form

   echo "<form class='addPhoneForm' action='addphone.php' method='post'>
         <table>
         <tr>
          <td>Phone</td><td>" . $row['phone'] . "</td>
          <td><input class='phoneID' type='hidden' name='id' value='".$q."'></td>        
          <td><input class='phoneNumber' type='text' name='phone'></td>
          <td><input class='submitme' type='submit' value='Update'></td>
          </td>
          </tr>
         </table>
         </form>";

AJAX

$(document).ready(function(){
$(".submitme").click(function(){

//collect variables from input
var phoneID = $(".phoneID").val();
var phoneNumber = $(".phoneNumber").val();

// store in a string
var dataAddPhone = 'phoneID='+ phoneID + '&phoneNumber='+ phoneNumber;

// send to database
$.ajax({
type: "POST",
url: "addphone.php",
data: dataAddPhone,
cache: true,

//if success 
success: function(response){

//display message
   $(".displayMessage").html(response);

   //and reset form
       $(".addPhoneForm").trigger("reset");
}
});

return false;
});

});
user_85092740
Related