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

[Jangga]

Hello guys, I'm stuck here. I only want to check a cell in my db and if empty, there should be a prompt for user to input the detail. I want to collect the detail and store in the cell in my db. Well, it's been like I'm missing things up in my code. Please, see Wat I've got already & pls pls pls assist me. I'm ur girl....

<?

if ($_POST) {
$userdata =isset($_POST["reason"]);
//I will write a code here to store $userdata in sql db

if($rname==empty()){
   echo"<a href=\"order.php\" 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" id="form"> <input type="hidden" id="reason" /> </form>

}
</script>

 

[Jangga]

Please guys.... I need help here

 

[moanon]

Hi,

first of all your input will need a name attribute:

<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:

<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:

<?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

 

[Jangga]

Hi,

first of all your input will need a name attribute:

<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:

<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:

<?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

Thanks man...... The thing is that I don't even get the prompt when I click on the link. I don't know why

 

[moanon]

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

 

[Jangga]

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

Man, I appreciate your replies but I beg of you to please understand me:

1. You asked why I needed a prompt. I don't want to put the input form for everyone to see. I want a form for only those that have an empty name cell in my db($rname) to see this prompt. You didn't consider an empty $rname when writing ur code

2. I want to use javascript to avoid creating another page just to entertain users who didn't put their name earlier.

Please, I hope u understand.


And I removed the href yet the prompt didn't turn up.... The thing is that my code I wrote have what I meant but not working in js

Plus I already added action to the form which is the order.php yet not working


Thanks in advance

 

[Jangga]

The most shocking thing is that the prompt command isn't even working... I'm dazed

 

[moanon]

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.

<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>

 

[moanon]

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:

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

Should be:

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

 

[Jangga]

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.

<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>

Man.... I tried it. Still to no avail... I'm stuck. I know I'm not good with javascript else, I would av spotted it. I'm a beginner. Pardon me

 

[moanon]

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

 

[Jangga]

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:

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

Should be:

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

The rname is the result of MySQL query from db which holds the empty cell. Inorder to debug my code, I took it off from my end now so that the empty check won't initialize. I only ran the jscript and it's still not working. I'm so pissed

 

[Jangga]

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

<?
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]

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

 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)

 

[Jangga]

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

 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)

Man... I did all these yet no result as I want. I know js is crap. I never really liked it thus I never learnt it. I am looking for alternative. Seems php will be the option to go for anyway

 

[Jangga]

Thanks.... Man..... I hope the misery will be solved tho

 

[moanon]

<?php

if ($_POST) {
    $userdata = $_POST["reason"];
    echo $userdata;
    exit;
    mysql_query("update users set name='$userdata'") or die(mysql_error());
}

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

here you go. $userdata now is the name entered in the prompt. (echoed it out since I don't have your db and for you to see.
You'll have to add the check if the

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

should be executed or not.

Still don't know why your hidden input is called reason and if this is the input you'll need the name to be inside of but looking at your mysql query I guess so.
If you want to have the db query in another php file you'll have to write the first if condition to the destination file and add the file name as form action.

 

[moanon]

Also I didn't do any sanitization on the input you should do that do prevent mysql injection and stuff like this.

 

[RightFootFanatic]

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

<?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
    }
 
}

 

[Jangga]

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

<?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
    }
 
}

Thanks alot... I deeply appreciate. U are great