How to pass getElementById to PHP that can store data to database

Question

I have write a coding that it can generate the total quantity automatically base on the gender.I write it by using a javascript. But I dont know how to get that data to be store into the database by using php All the coding is in one page.

Here is my code

     <script type = "text/javascript">
     function updateTotal() {
     var genderPart=0;
     var totalPart =0;

    function checkGender(){
    if(document.getElementById('gender').value=='GIRL'){
    genderPart+=1;
    }
    if(document.getElementById('gender').value=='BOY'){
    genderPart+=2;
    }
    }//end of checking gender part

     checkGender();

     var totalPart= genderPart; 
     document.getElementById('totalPart').innerHTML = totalPart;

      }//end of my main  total function
    </script>

     <form action="" method="post" name="nomineeform">
     <table align="center" width="800" border="2" >
     <tr>
     <td align="right"><b>Gender :</b></td>
     <td><select name="gender" id="gender"  onchange="updateTotal()">
                  <option selected="selected" value="">--Choose--</option>
                  <option value="GIRL" >GIRL</option>
                  <option value="BOY" >BOY</option>
                </select></td> 
            </tr>

             <tr>
                <td align="right"><b>Type of Animal :</b></td>
                <td><select name="animal" id="animal" onchange="updateTotal()">
                <option selected="selected" value="">--Jenis Haiwan--</option>
                <?php
                    $get_animal = "select * from animal";

                    $run_animal = pg_query($get_animal);

                        while ($row_animal=pg_fetch_array($run_animal))
                        {
                            $animal_id = $row_animal['animal_id'];
                            $animal_name = $row_animal['typeanimal'];

                            echo "<option value='$animal_id'>$animal_name</option>";
                        }
                    ?>
                </select></td>
            </tr>

             <tr>
                <td align="right"><b>Quantity :</b></td>
                <td><input type="text" name="quantity" size="60" value = "<?php echo $_GET['totalPart'];?>" required="required"/></td>

            </tr>
            <tr></tr>
            <tr align="center">
                <td colspan="8"><input type="submit" name="nominee" class="btn btn-info" value=" TERUSKAN " onclick="return val();"/></td>


            </tr>


    </table>

</form>

            <?php 
if(isset($_POST['nominee']))
    {
        $connection = pg_connect("user = postgres password = syafiqah26 port = 5433 dbname = bengkel2 host = localhost");
          $name = pg_escape_string($_POST['name']);
        $gender =pg_escape_string($_POST['gender']);
        $age= pg_escape_string($_POST['age']);
        $cust_id= pg_escape_string($_POST['hidden']);
        $animal= pg_escape_string($_POST['animal']);
        $quantity= pg_escape_string($_POST['quantity']);


        $query = "INSERT INTO nominee(name,age,gender,cust_id,animal,quantity)
        VALUES('$name','$age','$gender','$cust_id','$animal','$quantity')";
        $result = pg_query($connection,$query);
       }

PHP Executes before any of your page loads. It is a server-side scripting language, unlike Javascript, which is client-side. The only way you can send variables for PHP to handle is by passing them before you load the page. (i.e. using `GET` and `POST` parameters). You can make your website say to submit a form to another PHP page that will handle your parameters, but another page will have to be loaded one way or another. Does this answer your question? — robere2, Dec 07 '16 at 18:49
where is that totalPart element? is the innerHtml of this element that you want to send to php? — leoap, Dec 07 '16 at 18:56
@bugfroggy can you give me a sample code?so that it can make me more clear about that. — SySyBy, Dec 07 '16 at 18:57
@leo_ap yes, I want send value of the totalPart which is innerHtml to the php — SySyBy, Dec 07 '16 at 19:00
@SySyBy you want to send this information when? when the form is submitted? — leoap, Dec 07 '16 at 19:04
@leo_ap I want to display it before submit and send this information when the form is submitted. — SySyBy, Dec 07 '16 at 19:07
You've already gotten some answers so hopefully those will help you. It looks like you've included your database password in the question, though. I'd change your password when you're done here if I were you. — robere2, Dec 07 '16 at 19:19

score 0 · Answer 1 · answered Dec 07 '16 at 19:07

The way to do what you're trying to do is via AJAX. The idea being that you can take all the stuff you just did in JavaScript and call a PHP page to send the results without having to actually render the page.

And example how how this works:

checkGender();
var totalPart= genderPart; 

sendTotalPart(totalPart);

function sendTotalPart(totalPart) {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
         //document.getElementById("demo").innerHTML = xhttp.responseText;
        }
      };
      xhttp.open("GET", "YourPHPPage.php?totalPart="+ totalPart, true);
      xhttp.send();
    }

score 0 · Accepted Answer · edited May 23 '17 at 11:52

You need to do 2 things:

Give the INPUT an ID.

Update the INPUT using a different method (document.getElementById("totalPart").setAttribute("value", totalPart);)

Source: Javascript set value of an input field

I made notes in the code using "<-- I CHANGED THIS". It may not be obvious because of long lines but you have to remove those to test.

<script type = "text/javascript">
    function updateTotal() {
        var genderPart=0;
        var totalPart =0;

        function checkGender(){
            if(document.getElementById('gender').value=='GIRL'){
                genderPart+=1;
            }
            if(document.getElementById('gender').value=='BOY'){
                genderPart+=2;
            }
        }//end of checking gender part

        checkGender();

        totalPart = genderPart;
        document.getElementById("totalPart").setAttribute("value", totalPart); <-- I CHANGED THIS

    }//end of my main  total function
</script>

<form action="" method="post" name="nomineeform">
    <table align="center" width="800" border="2" >
        <tr>
            <td align="right"><b>Gender :</b></td>
            <td><select name="gender" id="gender"  onchange="updateTotal()">
                    <option selected="selected" value="">--Choose--</option>
                    <option value="GIRL" >GIRL</option>
                    <option value="BOY" >BOY</option>
                </select></td>
        </tr>

        <tr>
            <td align="right"><b>Type of Animal :</b></td>
            <td><select name="animal" id="animal" onchange="updateTotal()">
                    <option selected="selected" value="">--Jenis Haiwan--</option>
                    <?php 
                    $get_animal = "select * from animal";

                    $run_animal = pg_query($get_animal);

                    while ($row_animal=pg_fetch_array($run_animal))
                    {
                        $animal_id = $row_animal['animal_id'];
                        $animal_name = $row_animal['typeanimal'];

                        echo "<option value='$animal_id'>$animal_name</option>";
                    }
                    ?>
                </select></td>
        </tr>

        <tr>
            <td align="right"><b>Quantity :</b></td>
            <td><input type="text" name="quantity" size="60" id="totalPart" value = "0" required="required"/></td> <-- I CHANGED THIS

        </tr>
        <tr></tr>
        <tr align="center">
            <td colspan="8"><input type="submit" name="nominee" class="btn btn-info" value=" TERUSKAN " onclick="return val();"/></td>


        </tr>


    </table>

</form>

<?php
if(isset($_POST['nominee']))
{
    $connection = pg_connect("user = postgres password = syafiqah26 port = 5433 dbname = bengkel2 host = localhost");
    $name = pg_escape_string($_POST['name']);
    $gender =pg_escape_string($_POST['gender']);
    $age= pg_escape_string($_POST['age']);
    $cust_id= pg_escape_string($_POST['hidden']);
    $animal= pg_escape_string($_POST['animal']);
    $quantity= pg_escape_string($_POST['quantity']);


    $query = "INSERT INTO nominee(name,age,gender,cust_id,animal,quantity)
        VALUES('$name','$age','$gender','$cust_id','$animal','$quantity')";
    $result = pg_query($connection,$query);
}

Thank you very much!! I use this code and successfully enter the data !!! Thank you once again!! — SySyBy, Dec 07 '16 at 19:33

score 0 · Answer 3 · edited May 23 '17 at 12:08

By the comments on OP:

1º You want to display the information of totalPart.

For this you just need to create an input in your form, and make it read-only to forbid user edits.

<tr>
    <td align="right"><b>Total Parts:</b></td>
    <td><input id="totalPart" type="text" name="totalPart" size="60" readonly/></td>
</tr>

You need to set the ID attribute to it, so you can set its value through document.getElementById like this:

var totalPart= genderPart; 
document.getElementById('totalPart').value = totalPart;

see this post: Set the value of an input field

2º You want to send the information when form is submitted.

There's nothing much to do here, since the totalPart is already an input of your form, it will be sent to PHP naturally when the form is submitted.

Thank you for helping me! I have run this code but it does not display the totalpart. Its okay, I already find the answer.Thanks once again ^_^v — SySyBy, Dec 07 '16 at 19:44

How to pass getElementById to PHP that can store data to database

3 Answers3