Question

Why is all the input that is submit blank? (see below). I believe this is due to an error in my JS file.

HTML Form that is getting submitted:

                <form method="post" id="FanDetail">
                        <textarea id="bio" name="fan_bio" cols="27" rows="3"></textarea><br />
                        <input id="dob" name="fan_dob" value="(e.g. 01/05/1965)" onFocus="clearText(this)" /><br />
                        <div class="ui-widget">
                            <input id="zip" name="term" value="What is your Zipcode?" onFocus="clearText(this)" /><br />
                            <input id="actualZip" type="hidden" name="actualzipval" value="" />
                        </div><!--ui-widget :: zip -->
                        <div class="ui-widget">
                            <input id="occup" type="text"  name="term2" value="e.g. Computer Programmer, etc" onFocus="clearText(this)" /><br />
                            <input id="actualOccup" type="hidden" name="actualOccupval" value="" />
                        </div><!--ui-widget :: occup -->
                        <input id="fbkurl" type="text"  name="fan_fbk" value="e.g. SportsFan12" onFocus="clearText(this)" /><br />
                        <input id="twiturl" type="text"  name="fan_twit" value="e.g. AboutSports2012" onFocus="clearText(this)" /><br />
                        <input id="phoNum" type="text"  name="fan_pho" value="cell or home phone" onFocus="clearText(this)" /><br />
                <input style="background-image:url('../../img/save.png');" type="submit" name="saveAbout" value="" id="submit" />
                </form>

The JS file that handles the input from the html form:

$(document).ready(function() {
        $("form#FanDetail").submit(function() {
        // store the values from the form input box, then send via ajax below
        var bio = $('#bio').val();
        var dob = $('#dob').val();
        var zip = $('#actualZip').val();
        var occup = $('#actualOccup').val();
        var fbkurl = $('#fbkurl').val();
        var twiturl = $('#twiturl').val();
        var phoNum = $('#phoNum').val();
        $.post(
                "../../src/php/registration/about/submitvalues_about_tab.php",
                $("form#FanDetail").serialize(),
                function(){
                    $('form#FanDetail').hide(function(){
                        $('div.success').fadeIn();
                });
              });
           return false;
        });
    });

The PHP file I’m using is getting the $fan_sess_id() variable value right, but none of the other inputs are working.

try {
    $sth = null; #kill any possible previous connections
    ///////////////////////////////////////////////
    ######## Get  Input to Submit ############## //
    ///////////////////////////////////////////////
    $fanBio=$_POST['bio'];
    $fanDob=$_POST['dob'];
    $zipval=$_POST['zip'];
    $occupval=$_POST['occup'];
    $facebookurl=$_POST['fbkurl'];
    $twitterurl=$_POST['twiturl'];
    $phoneNum=$_POST['phoNum'];
    //$fanID=1;
    $fan_sess_id = session_id(); // assign $fan_sess_id to the current sessionID

    ### DB Connection already established above.
    $dbh->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );  
    $sth = $dbh->prepare("
    UPDATE Fan 
    SET fanBio='$fanBio',fanDob='$fanDob',fanDetLocID='$zipval',occupID='$occupval',
    fanFbk='$facebookurl',fanTwit='$twitterurl',fanPho='$phoneNum'
    WHERE fansessID='$fan_sess_id';
    ");
    $sth->execute();
}

Finally, this is the output I get when running $sth->debugDumpParams(); in my php script above:

SQL: [152] 
    UPDATE Fan 
    SET fanBio='',fanDob='',fanDetLocID='',occupID='',
    fanFbk='',fanTwit='',fanPho=''
    WHERE fansessID='90707e4c37762a38ffb50883ce64ee1b';

Answer 1

You need to set the input’s name to the same value you use in your PHP code when accessing $_POST.

For example:
In <textarea id="bio" name="fan_bio" cols="27" rows="3"></textarea> change the attribute name to bio to get it’s value as $_POST["bio"].

When you submit a HTML form, the form element’s name-attribute is used to reference the value, not the id.