How to prompt user for a detail in js and store in sql db with php

moanon said:

Hi,

first of all your input will need a name attribute:

HTML:

<input type="hidden" id="reason" name="reason" />

second your form is missing an action attribute. This defines where the POST data is sent to on submit:

HTML:

<form action="order.php" method="post" id="form">

But whats the point of the prompt anyways? why don't you just use a text input instead of the hidden one so the user can input it there directly?

You could go with something like this:

Code:

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['name']) && trim($_POST['name']) != '') {
    //database code goes here
    //also send HTML back to let the user know he succeeded
} else {
    ?>
    <form action="order.php" method="post" id="form">
        <input type="text" id="name" name="name" placeholder="Enter your name"></input>
        <input type="submit" value="Take Lectures"></input>
    </form>
    <?php
}

dont know where your "reason" comes from though. But this would be a form for entering a name and saving it to your database.
But you could still add a hidden input inside the form.

Should be in the same file ('order.php') otherwise you'd need to redirect back if nothing is entered.
Better way would be to double check the input values first with js so it cant be submitted with empty data and another time on the server to be sure.

Hope that helps a bit.

Cheers, Mo

Click to expand...

moanon said:

remove the href attribute from the link so the onclick function get's triggered and add 'order.php' as form action.

Click to expand...

moanon said:

I think the prompt is not working because there'll be a syntax error in the js because you wrote the <form> tag inside the js function.

Code:

<script>
function yourname() {
    var fname = prompt("Input Your Full Name");
    if (fname != null) {
         document.getElementById("reason").value = reason; document.getElementById("form").submit(); }
}
</script>
<form method="post" id="form"> <input type="hidden" id="reason" /> </form>

Click to expand...

moanon said:

But still, you're not passing the entered name anywhere. You're assigning the hidden input a value from the variable reason which isn't defined anywhere.

To really help you I'd need more information. Is this all on the same page (order.php) ?
Where does the $rname come from?

And what I just saw:

Code:

if($rname==empty()){
   echo"<a href=\"order.php\" class=\" btn btn-primary btn-lg\" onclick=\"yourname()\"> Take lectures</a>";
    }

Should be:

Code:

if(empty($rname)){
   echo"<a href=\"order.php\" class=\" btn btn-primary btn-lg\" onclick=\"yourname()\"> Take lectures</a>";
    }

But make sure empty() does the right check for you. http://php.net/manual/de/function.empty.php for example " " (space between) wouldn't count as empty. be careful with this kind of details

Click to expand...

moanon said:

could you post your new code here again with the changes you've made so far?

Click to expand...

<?
if ($_POST) {
$userdata =isset($_POST["reason"]);
mysql_query("update users set name='$userdata') or die(mysql_error());

   echo"<a class=\" btn btn-primary btn-lg\" onclick=\"yourname()\"> Take lectures</a>";
     
?>
<script>
function yourname() {
    var fname = prompt("Input Your Full Name");
    if (fname != null) {
         document.getElementById("reason").value = reason; document.getElementById("form").submit(); }
      
          <form method="post" action="order.php" id="form"> <input type="hidden" id="reason" name="reason" /> </form>

}
</script>

moanon said:

1. $userdata will always be boolean (true or false) since it contains the return of isset(...) and not the actual $_POST["reason"].
2. try

Code:

 echo "<a href=\"#\" class=\"btn btn-primary btn-lg\" onclick=\"yourname()\">Take lectures</a>";

3. move the whole <form> tag OUTSIDE of the script tag like mentioned in my reply above. The form tag is HTML and not JavaScript so this will give you a syntax error and your function will not work at all (therefor no prompt)

Click to expand...

RightFootFanatic said:

Folllowing should do the trick - but is untested, as previous poster said sanitize that stuff on your own.

Code:

<?php
// check for post
if($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['name']) && trim($_POST['name']) != '') {
    //database code goes here
    // redirect user to a thank you page to avoid multiple form submission by page reload
}
else {

    // fetch user data here


    // check if user has "name" set
    if ($rname == '') {
        // show the form
        ?>
        <form action="order.php" method="post" id="myForm">
            <input type="text" id="name" name="name" placeholder="Enter your name">
            <input type="submit" value="Take Lectures">
        </form>

        <script>
            // add an event listener
            document.getElementById("myForm").addEventListener("submit", function(event){
                // get user name
                var tName = document.getElementById("name").value;

                // if user name not set on submit prompt user and prevent form submission
                // otherwise let form submit
                if (typeof tName == 'undefined' || tName == '') {
                    // prevent the form submit
                    event.preventDefault();

                    // prompt the user
                    tName = prompt("Please enter your name", "");

                    // check if prompt came back filled
                    if (tName != null) {
                        // set name field
                        document.getElementById("name").setAttribute('value', tName);
                    }

                    // submit the form if user has entered name it will go through
                    // otherwise prompt will show up again
                    document.getElementById("myForm").submit();
                }

            });
        </script>
        <?php
    }
 
}

Click to expand...