javascript unable to assign hidden input elements from HTML input tag

Question

i am trying to grab the hidden input value from a form i have. The form passes all the elements properly EXCEPT for the HIDDEN elements. I know they are declared because if I choose "view source" on the page it shows me the correct values (basically the user credentials).

<form name="addExperienceForm" id="addExperienceForm" style="display:none;">
                Title:<input type="text" name="title" id="title" />
                From:<input type="text" name="startDate" id="startDate" />
                To:<input type="text" name="endDate" id="endDate" />
                Description:<textarea type="message" name="description" id="description"></textarea>
                <input type="button" value="Submit" onclick="addUserExp()"/>
                <input type="hidden" value="<?=$_SESSION['userID']?>" id="userID" />
                <input type="hidden" value="<?=$_SESSION['email']?>" id="email" />

function addUserExp(){

    //get info
    var title = document.getElementById('title').value;
    var startDate = document.getElementById('startDate').value;
    var endDate = document.getElementById('endDate').value;
    var userID = document.getElementById('userID').value;
    var email = document.getElementById('email').value;
    var description = document.getElementById('description').value;

    //construct POST string with name value pair
    var str = "title="+title+"start="+startDate+"end="+endDate+"userID="+userID+"email="+email+"desc="+description;

    //establish XMLHTTP object
    var req = getXMLHTTP();

    if(req){

        req.onreadystatechange = function(){
            if (req.readyState == 4) {
                // only if "OK"
                if (req.status == 200) {                        
                    document.getElementById('addNewExp').innerHTML=req.responseText;    


                } else {
                    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                }
            }
        }
    }
    req.open("post", "addExperience.php", true);
    req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    req.send(str);
}

PHP

   <?php


$title = $_POST['title'];
$startDate = $_POST['start'];
$endDate = $_POST['end'];
$userID = $_POST['userID'];
$email = $_POST['email'];
$description = $_POST['desc'];

$sql = "INSERT INTO `user_experience`(`user_id`, `email`, `experience_title`, `experience_desc`, `start_date`, `end_date`) 
            VALUES ('$userID', '$email', '$title', '$startDate', '$endDate', '$description')";

echo $sql;

?>

I am echoing out the MYSQL statement so you can see that the fields are not being populated. The output of the above produces the following when data is entered into the form:

INSERT INTO `user_experience`(`user_id`, `email`, `experience_title`, `experience_desc`, `start_date`, `end_date`) VALUES ('', '', 'test', 'Feb-2013', 'May-2013', 'test')

Are you sure that those elements have their values set by the PHP that generates the form (view source)? You are echoing in them in the PHP that is supposed to receive them, have you tried echoing them in the browser before you send the AJAX query to see if the JS correctly read the .value? Assuming the userID and email are already stored in the session and the script that processes the AJAX is in the same PHP instance, couldn't you just use $_SESSION in the script that processes the AJAX instead of passing them in the query? +1 because it's not a bad question. — Useless Code
– Useless Code, Commented Feb 19, 2013 at 15:33

War10ck · Accepted Answer · 2013-02-04 16:44:01Z

3

There's a few things I can see wrong from the start.

(1) <type="text" name="endDate" id="endDate" />

I'm guessing this should be <input type="text" name="endDate" id="endDate" />.

(2) Your inputs have no name attributes. id attributes are nice for styling and gathering values. However, only name attributes are recognized by a form conducting a submit.

(3) You have no method attribute on your form. By default, the browser will use GET. You however are expecting POST. Either change the PHP to use $_GET instead of $_POST or (the better option) supply the form with a method attribute.

A couple things to be mindful of (and a few pet peeves of mine):

(1) It's always a good idea to specify the method of the form attribute. Browser's should default to GET but just to be clear to anyone who may be following in your foot steps, it would be nice to see clarity.

(2) Please, please, please don't use the PHP <? short tags. One this is not clear, two it's not supported in all installations of PHP as it's based on a PHP .ini file setting and three it's just three more characters you have to add. Let's not be lazy folks.

Hope this helps.

answered Feb 4, 2013 at 16:44

War10ck

12.5k7 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Frank Castle Over a year ago

name attributes are not needed here, the details of this form are beinging posted to a JS-AJAX script. the JS script then passes the values to the php script. I am forced to use POST due to the character limitations of GET. also, there is no METHOD specified due to this being AJAX related. as i mentioned, everything is working with the exception of the hidden elements not being passed.

War10ck Over a year ago

@massimorai this is true. My apologies I missed that little tid-bit. It still however, is a nice thing to have for clarity sake as forms normally use the name attribute. You make a valid point though. My apologies for the confusion.

FibreFoX · Accepted Answer · 2013-02-04 16:30:59Z

1

dont build that sql-string yourself, use prepared statements please, would be better for your security ;)
it would be better for compatibility-reasons to use a library for ajax (like jquery)

answered Feb 4, 2013 at 16:30

FibreFoX

2,8581 gold badge21 silver badges42 bronze badges

Comments

Satya · Accepted Answer · 2013-02-04 16:28:05Z

0

 <?php


$title = $_POST['title'];
$startDate = $_POST['start'];
$endDate = $_POST['end'];
$userID = $_POST['userID'];
$email = $_POST['email'];
$description = $_POST['desc'];

$sql = "INSERT INTO `user_experience`(`user_id`, `email`, `experience_title`, `experience_desc`, `start_date`, `end_date`) 
            VALUES ('$userID', '$email', '$title', '$startDate', '$endDate', '$description')";

echo $sql;

?>

change all $_POST to $_GET and you should be through.

answered Feb 4, 2013 at 16:28

Satya

8,9016 gold badges41 silver badges57 bronze badges

1 Comment

Frank Castle Over a year ago

I cant do that due to the character limitations of GET over POST. not to mention this is user specific data that should be more secure.

Queen johniek · Accepted Answer · 2013-02-04 16:35:13Z

0

you need added "name" attr in you form

<input type="hidden" name="userID" value="<?=$_SESSION['userID']?>" id="userID" />
<input type="hidden" name="email" value="<?=$_SESSION['email']?>" id="email" />

you have sql-injection, use:

array_map('mysql_real_escape_string',$_POST);

edited Feb 4, 2013 at 16:35

answered Feb 4, 2013 at 16:29

Queen johniek

1711 gold badge1 silver badge7 bronze badges

2 Comments

Quentin Over a year ago

mysql_real_escape_string is part of the deprecated mysql_* library. Don't use it. Use PDO or mysqli instead.

Frank Castle Over a year ago

the name attribute will make no difference here. as mentioned in my question the only thing not working is the hidden input elements. I will be sure to use prepared SQL statements moving forward to avoid possible SQL injects. cheers!

Collectives™ on Stack Overflow

javascript unable to assign hidden input elements from HTML input tag

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related