up vote 0 down vote favorite

I'm hoping someone can help me with my design issue. I have index.php:

which contains a javascript piece of code:

<script type="text/javascript">
$(function() {
    $.getJSON('http://localhost/getData.php', function(data) {

    foo...

index.php also contains a form that updates the screen:

<form action="index.php" method="post" />
<input type="submit" name="action" value="update" /></p>

Now my problem is I need to pass some variables to getData.php to update the screen. getData works fine with the static info, but based upon the choices on the form, the data will change.

What's the best way for me to pass variables?

Or am I designing this incorrectly?

Thanks

My updated javascript looks like this:

<script type="text/javascript">
$(function() {
$.getJSON('http://localhost/getData.php', {
group_value: $('#group_id option:selected').val(),
updatedb_value: $('#update_db_id').val() 
}, function(data) {

Then my form looks like this:

<form id="myform" action="index.php" method="post" />
<select id="group_id" name="group">
<option value="0">Atlanta</option>
<option value="1">Chicago</option>
<option value="2">Los Angeles</option>
<option value="3">New York</option>
</select>
<input type="submit" name="action" value="Update" />
<input type="checkbox" id="update_db_id" name="update_db" value="1" />Update DB?<br />
</form>

No matter what I select or check, When ever I click the update button, the JS console shows that 

GET http://localhost/getData.php?group_value=0&updatedb_value=1

Any suggestions?

share|improve this question
0% accept rate
I would suggest changing http://localhost/getData.php to simply /getData.php - localhost won't work if you deployed this as-is to a real server. That, and unless you're using JSONP, all your URLs should be relative to the root domain anyway. – Tieson T. Apr 30 at 0:48
Thanks for the suggestion, but same result. No matter what I select on the form, I get the following results: GET http://localhost/getData.php?group_value=0&updatedb_value=1. – Peaceful_Warrior Apr 30 at 13:17
Does anyone have any other suggestions? Thanks – Peaceful_Warrior May 2 at 0:36
feedback

2 Answers

up vote 2 down vote

You can use $(input_selector).val() to get the value of a form input, and you can pass it to getJSON as an object, like this:

$.getJSON('http://localhost/getData.php', {
    some_value: $(some_input).val(),
    other_value: $(other_input).val()
}, function(data) { ... });

You can also use serialize to pass all the form data:

$.getJSON('http://localhost/getData.php', $(form_selector).serialize(), function(data) { ... });
share|improve this answer
How would I access this from getData.php which is an all php script? – Peaceful_Warrior Apr 27 at 13:50
@Peaceful_Warrior, the data will be available in the $_GET variable. See php.net/manual/en/reserved.variables.get.php – Ben Lee Apr 27 at 16:33
I can't get this to work. I did this $.getJSON('http://localhost/getData.php', $('#myform').serialize(), function(data) { ... }); then this <form id="myform" action="index.php" method="post" /> <input type="submit" name="action" value="update" /> Then, when I go to getData.php & do this if (isset($_GET["action"])) { do stuff } nothing happens. What am I doing wrong? – Peaceful_Warrior Apr 28 at 14:52
Look into the value of $('#myform').serialize() in your js console. It's possible serialize doesn't take into account the value of the submit button, I'm not sure. If it doesn't, you'll have to pass that in manually using the first method I posted. – Ben Lee Apr 29 at 4:17
Ben this isn't working. I'm going to put the full code of what I have & see if you can tell me what I'm doing wrong. – Peaceful_Warrior Apr 29 at 15:58
show 3 more comments
feedback
up vote 0 down vote

Hmm. Look very closely at this line:

<form id="myform" action="index.php" method="post" />

Oops. You self-closed your form. That may be causing issues with how the input/select elements update. Try changing it to:

<form id="myform" action="index.php" method="post">

You also don't actually need the complex selector on the select element. This will also get you the selected value:

$('#group_id').val()
share|improve this answer
Thanks, I've taken all the suggestions you guys have provided & still can't seem to get it to work. I still get GET http://localhost/getData.php?group_value=0&updatedb_value=1 in JS Console. – Peaceful_Warrior May 2 at 14:02
feedback

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.