0

I'm attempting to create a table using PHP from a jQuery post method and I am failing miserably.

PHP/HTML

<tr>
  <td>Name: </td>        
  <td>                  
    <select id="name" onchange="showUserInfo()">  
      <option value="">Please select a person...</option>                       
      <?php $names = getUserName($db); foreach($names as $key => $value) { ?>                        
      <option value="<?php echo $key ?>"><?php echo $value ?></option>
      <?php }?>
    </select>
  </td>
</tr>
...
<div id="editUserTable">hi</div>

jQuery

function showUserInfo() {
    var str = $('#name option:selected').text(); // THIS VARIABLE IS NOT BEING SET
    $.post('/TrakFlex/functions/getUserInfo.php', { input: str }, function(data) {
        $('#editUserTable').html(data);
    })
}

Now I know this variable is not being set because if I replace 

var str = $('#name option:selected').text();

With an actual username like this

var str = 'De Bug';

Everything works perfectly the table loads into the form with all the user information.

As it is now, the div 'editUserTable' shows "hi" when the form loads but when I select a user "hi" disappears and nothing is showing.

It should be noted I have tried this and it does not work

var str = $('#name').val();

So again, the question is, why is this variable not being set to the inner HTML or 'text' of the selected <option>. Any help is appreciated

EDIT If I view the page source after I select a user this is what I see

<select id="name" onchange="showUserInfo()">  
  <option value="">Please select a person...</option>                       
  <option value="0">De Bug</option>
  <option value="1">Jon Doe</option>
  <option value="2">A Name</option>                                               
</select>

EDIT 2

If I hard code the name of the user in my jQuery everything loads in my html page.

this is the original

function showUserInfo() {
        var str = $('#name option:selected').text(); // THIS VARIABLE IS NOT BEING SET
        $.post('/TrakFlex/functions/getUserInfo.php', { input: str }, function(data) {
            $('#editUserTable').html(data);
        })
    }

if I change it to this, it works

function showUserInfo() {
        var str = 'De Bug'; // I can also use 'A Name' or 'Jon Doe' they all work
        $.post('/TrakFlex/functions/getUserInfo.php', { input: str }, function(data) {
            $('#editUserTable').html(data);
        })
    }
Improve this question
24
  • Remember to simplify/focus questions. This has nothing to do with AJAX: an unexpected value, perhaps. Replace $.post with alert (or use debugger), verify the behavior, and update the question. Commented Jul 23, 2013 at 0:36
  • How do you know its not being set? Commented Jul 23, 2013 at 0:37
  • PHP is pretty strict with the use of ; Commented Jul 23, 2013 at 0:38
  • @Musa please read the post. It says "Now I know this variable is not being set because if I replace var str = $('#name option:selected').text(); With an actual username like this var str = 'De Bug'; Everything works perfectly Commented Jul 23, 2013 at 0:49
  • @RokoC.Buljan did I miss a ; or add a ; somewhere I wasn't supposed to? Commented Jul 23, 2013 at 0:50

3 Answers 3

Reset to default
1

Some browsers may fire onchange before updating the DOM, so the option is currently not :selected.

Please try this solution, based on the selectedIndex property of the select element:

function showUserInfo() {
    var i = $('#name')[0].selectedIndex;
    var str = $('#name option').eq(i).text();
    $.post('/TrakFlex/functions/getUserInfo.php', { input: str }, function(data) {
        $('#editUserTable').html(data);
    });
}
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

This did not work either. I added an alert below var str =... that looks like this alert (str); and it's always blank
when you do alert(i); what does that say?
you have there a very odd problem. are you sure you have only one element of id name?
OMG! I just did a control F to find anything with the id="name"... there was a field input I totally forgot about with the id="name". Please just kill me now. 3 hours of my life I will never get back. Thank you sir a million times over
I'm sleeping with ViewSource and Ctrl+F ;) btw. in Firefox you can easily see markup errors, just like validation by W3C but alot faster!
1

The issue is with the onchange not firing from the HTML select, but if you use the jQuery document ready function and then attach to the change event for the select, then it will work, like this:

$(document).ready(function () {
    $('#name').change(function () {
        var str = $('#name option:selected').text(); // THIS VARIABLE IS NOT BEING SET
        $.post('/TrakFlex/functions/getUserInfo.php', { input: str }, function(data) {
            $('#editUserTable').html(data);
        })
    });
});

Here is a jsFiddle

I have no idea why the regular JavaScript event is not firing.

Improve this answer

3 Comments

This still isn't working. Is it possibly because of how I'm setting the <option> values with $key and $value?
Well have you viewed the source of your HTML page after the select options render? I do not know anything about PHP so I am of little help with that part, sorry.
the problem here is the document as metadings mentioned up top. I also tried $(window).load and that did not work either.
1

The problem sits where you create your list.

As a value you echo the $key. You should be echo-ing $value instead.

<?php

$names = getUserName($db);
foreach($names as $key => $value) {
    ?><option value="<?php echo $value ?>"><?php echo $value ?></option><?php
}

?>

Then just replace the line where you set str with:

var str = $('#name').val();
Improve this answer

2 Comments

I thought you might of had it, unfortunately that does not work either
I suggest to test using Chrome's console. Does it give any errors?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.