PHP HTML Javascript design issue

Question

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?

Answer 1

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) { ... });

Answer 2

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