CODEWITHSUNDEEP
javascriptphp
Dreamsword981
Dreamsword981

Reputation: 39

Javascript not posting info to php

Good Day

Please help me, I am struggling to figure out why this script is not working, all items are passing through except accountM

PHP First Page Snippet:

<body>

<div class="form">
<form name="registration" action="" id="register_form" method="post" autocomplete="new-password">
<input type="text" name="Name" placeholder="Name" id="Name" autocomplete="new-password" required />
<input type="text" name="Surname" placeholder="Surname" id="Surname" autocomplete="new-password" required />
<input type="email" name="Email" placeholder="Email" id="Email" autocomplete="new-password" required />
<!-- The text and password here are to prevent FF from auto filling my login credentials because it ignores autocomplete="off" -->
<input type="text" style="display:none"/>
<input type="password" style="display:none"/>
<input type="password" name="Password" placeholder="Password" id="Password" autocomplete="new-password" required />

<div class="select">
    <select name="Server" id="Server" onchange="server(this.value)">
        <option value="">Select Server</option>
        <option value="1">ZA02</option>
        <option value="2">ZA04</option>
        <option value="3">ZA05</option>
        <?php
        $getServer = $con->query("SELECT `Server`, `Name` FROM users.customers where `Server ID` = '0';");
    $gsResult = mysqli_fetch_all($getServer);
    for ($i = 0; $i < mysqli_num_rows($getServer); $i++) {
        echo "
        <option value=".$gsResult[$i][0].">".$gsResult[$i][1]."</option>
        ";
    } ?>
    </select>
    <div class="select_arrow"></div>
</div>
<div class="select">
    <select id='customer' name='Company'>
        <option value=''>Select Customer</option>
    </select>
    <div class="select_arrow"></div>
</div>
<div class="select">
    <select id="accountM" name="accountM">
        <option value="">Select AM</option>
        <option value="Tyron Lecki">Tyron Lecki</option>
        <option value="Kaamilah Achmat">Kaamilah Achmat</option>
        <option value="Siddharth Bawa">Siddharth Bawa</option>
    </select>
    <div class="select_arrow"></div>
</div>
<br>
<br>
<div syle="padding-bottom: 10px;">
<label for="cbox" style="color: #2f2f2f; float: left; margin-top: 10px; padding-right: 10px" >Premium</label>
<input id="cbox" type="checkbox" name="premium" id="Premium" value="yes"/>
</div>
<input type="button" id="submit" name="submit" value="Register" />

<br>
<div id="loading">
<p></p>
<p style="margin-left: 15px">Please Wait...</p>
<img src="images/hrs2.gif"/>
</div>
</form>
</div>

Javascript:

$(document).ready(function() {
    $("#submit").click(function() {
    // To Display progress bar
    $("#loading").show();
    var name = $("#Name").val();
    var surname = $("#Surname").val();
    var email = $("#Email").val();
    var password = $("#Password").val();
    var company = $("#customer").val();
    var server = $("#Server").val();
    var premium = $("#Premium").val();
    var accountM = $("#accountM").val();

    // Transfering form information to different page without page refresh
    $.post("register.php", {
        name: name,
        surname: surname,
        email: email,
        password: password,
        company: company,
        server: server,
        accountM: accountM,
        premium: premium
        }, function(status) {
            $("#loading").hide(); // To Hide progress bar
                alert(status);
            });
        });
    });

PHP Second Page Snippet:

if (($_POST['name']=='')
||($_POST['surname']=='')
||($_POST['email']=='')
||($_POST['password']=='')
||($_POST['company']=='')
||($_POST['server']=='')
||($_POST['accountM']=='')) {
    echo "Please fill in all fields";
} else {
    // some other code
}

When using this I keep getting "Please fill in all fields", I figured out that it is only the accountM variable not passing to the second script

Edit:

Here is the AJAX script:

function server(str) {
  if (str == "") {
      document.getElementById("customer").innerHTML = "";
      return;
  } else {
      if (window.XMLHttpRequest) {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp = new XMLHttpRequest();
      } else {
          // code for IE6, IE5
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
              document.getElementById("customer").innerHTML = this.responseText;
          }
      };
      xmlhttp.open("GET","customer.php?q="+str,true);
      xmlhttp.send();
  }
}

customer.php:

<?php
include("db.php");
$q = intval($_GET['q']);
$result = $con->query("SELECT * from users.customers where `Server ID` = '".$q."' order by Name");
echo "<option value=''>Select Customer</option>";
while ($row = mysqli_fetch_array($result)) {
        echo "<option value='" . htmlentities($row['Name'], ENT_QUOTES) . "'>"
. htmlentities($row['Name'], ENT_QUOTES)
. "</option>";
}
mysqli_close($con);

Upvotes: 0

Views: 121

Answers (2)

mickmackusa
mickmackusa

Reputation: 47864

The symptom suggests that the option value(s) are the cause of the trouble because they are not quoted and/or not converted to html entities and this is leading to a break your dom. There are two locations where I think problems can arise:

In your form:

<option value="">Select Server</option>
<option value="1">ZA02</option>
<option value="2">ZA04</option>
<option value="3">ZA05</option>
<?php
if($result=$con->query("SELECT `Server`,`Name` FROM users.customers WHERE `Server ID`=0;")){
    while($row=$result->fetch_assoc()){
        echo "<option value=\"",htmlentities($row['Server'],ENT_COMPAT),"\">",htmlentities($row['Name'],ENT_COMPAT),"</option>";
    }
}else{
    echo "<option>ERROR</option>";  // just for the sake of debugging
}
?>

In your customer.php file: (If the value is the same as the text, omit the value attribute in the option tag -- it is redundant)

$q = intval($_GET['q']);
if($result=$con->query("SELECT `Name` from users.customers WHERE `Server ID`=$q ORDER BY `Name`"){
    echo "<option value=''>Select Customer</option>";
    while($row=$result->fetch_assoc()){
        echo "<option>",htmlentities($row['Name'],ENT_COMPAT),"</option>";
    }
}else{
    echo "<option>ERROR</option>";  // just for the sake of debugging
}

My completely untested suggestion

@your form

<body>
    <div class="form">
        <form id="register" autocomplete="new-password">
            <input type="text" name="Name" placeholder="Name" id="Name" autocomplete="new-password" required />
            <input type="text" name="Surname" placeholder="Surname" id="Surname" autocomplete="new-password" required />
            <input type="email" name="Email" placeholder="Email" id="Email" autocomplete="new-password" required />
            <!-- The text and password here are to prevent FF from auto filling my login credentials because it ignores autocomplete="off" -->
            <input type="text" style="display:none"/>
            <input type="password" style="display:none"/>
            <input type="password" name="Password" placeholder="Password" id="Password" autocomplete="new-password" required />

            <div class="select">
                <select name="Server" id="Server">
                    <option value="">Select Server</option>
                    <option value="1">ZA02</option>
                    <option value="2">ZA04</option>
                    <option value="3">ZA05</option>
                    <?php
                    if($result=$con->query("SELECT `Server`,`Name` FROM users.customers WHERE `Server ID`=0;")){
                        while($row=$result->fetch_assoc()){
                            echo "<option value=\"",htmlentities($row['Server'],ENT_COMPAT),"\">",htmlentities($row['Name'],ENT_COMPAT),"</option>";
                        }
                    }else{
                        echo "<option>ERROR</option>";  // just for the sake of debugging
                    }
                    ?>
                </select>
                <div class="select_arrow"></div>
            </div>
            <div class="select">
                <select id="Company" name="Company">
                    <option value=''>Select Customer</option>
                </select>
                <div class="select_arrow"></div>
            </div>
            <div class="select">
                <select id="AccountM" name="AccountM">
                    <option value="">Select AM</option>
                    <option value="Tyron Lecki">Tyron Lecki</option>
                    <option value="Kaamilah Achmat">Kaamilah Achmat</option>
                    <option value="Siddharth Bawa">Siddharth Bawa</option>
                </select>
                <div class="select_arrow"></div>
            </div>
            <br><br>
            <div syle="padding-bottom: 10px;">
                <label for="cbox" style="color: #2f2f2f; float: left; margin-top: 10px; padding-right: 10px" >Premium</label>
                <input id="cbox" type="checkbox" name="Premium" id="Premium" value="yes"/>
            </div>
            <input type="button" id="Submit" value="Register" />
            <br>
            <div id="status"></div>
        </form>
    </div>
</body>

@your.js file

$(document).ready(function(){
    $("#Server").change(function(){
        $("#status").html("<p></p><p style=\"margin-left:15px\">Please Wait...</p><img src=\"images/hrs2.gif\"/>");
        $.get("customer.php", {q:this.value}, function(response){
            $("#Company").html(response);
            $("#status").html("");
        });     
    });
    $("#Submit").click(function(){
        e.preventDefault();
        $("#status").html("<p></p><p style=\"margin-left:15px\">Please Wait...</p><img src=\"images/hrs2.gif\"/>");
        $.post('register.php', $(this).serialize(), function(response){
            $("#status").html(response);
        });
    });
});

@customer.php

<?php
include("db.php");
if(empty($_GET['q'])){
    echo "<option value=''>Select Population Error</option>";
}else{
    if($result=$con->query("SELECT `Name` from users.customers WHERE `Server ID`=".intval($_GET['q'])." ORDER BY `Name`"){
    echo "<option value=''>Select Customer</option>";
    while($row=$result->fetch_assoc()){
        echo "<option>",htmlentities($row['Name'],ENT_COMPAT),"</option>";
    }
}
?>

@register.php

<?php
echo "<pre>";
var_export($_POST);
echo "</pre>";
if(empty($_POST['Name']) || empty($_POST['Surname']) || empty($_POST['Email']) || empty($_POST['Password']) || empty($_POST['Server']) || empty($_POST['Company']) || empty($_POST['AccountM']) || empty($_POST['Premium'])){
    echo "<div>Whoops! Something's missing!</div>";
}else{
    echo "<div>FINALLY!</div>";
}

Upvotes: 1

Syscall
Syscall

Reputation: 19780

After all comments above, it seems that the server() function damages the DOM, then your <select id='customer'> tag is no longer valid and couldn't be sent. Try to secure your HTML sent by PHP using htmlentities() :

while ($row = mysqli_fetch_array($result)) {
    echo "<option value='" . htmlentities($row['Name'], ENT_QUOTES) . "'>"
         . htmlentities($row['Name'], ENT_QUOTES)
         . "</option>";
}

Try also this :

$(document).ready(function() {
$("#submit").click(function() {
// To Display progress bar
$("#loading").show();
var name = $("#Name").val();
var surname = $("#Surname").val();
var email = $("#Email").val();
var password = $("#Password").val();
var company = $("#customer").val();
var server = $("#Server").val();
var premium = $("#Premium").val();
var accountM = $("#accountM").val();

var postobject = {
    name: name,
    surname: surname,
    email: email,
    password: password,
    company: company,
    server: server,
    accountM: accountM,
    premium: premium
    }; 
console.log(postobject);

// Transfering form information to different page without page refresh
$.post("register.php", postobject, function(status) {
        $("#loading").hide(); // To Hide progress bar
            alert(status);
        });
    });
});

Upvotes: 1

Related Questions