issue with jquery .post() not working

Question

so I am new to using jquery .post() however I am not using methods i haven't already used before.

I am trying to post two hidden input values when a button is clicked:

$('#button').live('click', function() {
    $.post('export_file.php', { group: form.group.value , test: form.test.value },
    function(output)    {
        $('#return').html(output).show();
    });
});

i have tested the button event is firing successfully and currently all I trying to do in export_file.php is echo something.

here is my form:

<form name="form">
<input type="hidden" name="group" value="<?echo $group;?>">
<input type="hidden" name="test" value="<?echo $test_id;?>">
<input type="button" class="Mybutton" id="button" name="btnSubmit" value="Export Results">
</form>

i have got my div on the original page:

<div id='return'></div>

export_file.php:

<?php

echo "whatever, something!";

?>

Could anyone point out where I am going wrong. Many thanks,

What does Firebug console tell you? Any JS error? – Michael Lumbroso May 17 '11 at 15:55 — Michael Lumbroso, May 17 '11 at 15:55
see demo i added in my answer – Naftali May 17 '11 at 15:59 — Naftali, May 17 '11 at 15:59

score 4 · Answer 1 · answered May 17 '11 at 15:55

4

Try:

$('#button').live('click', function() {
    $.post('export_file.php', { group: $("input[name='group']").val() , test: $("input[name='test']").val() },
    function(output)    {
        $('#return').html(output).show();
    });
});

answered May 17 '11 at 15:55

Dormouse

5,130
1
26
42

that would make it apply to **any** input with the `name=test` and any one with the `name=group` – Naftali May 17 '11 at 16:03
@Neal: And his current form only has one. C'mon, why does this have to be so overly complex? Don't assume requirements that aren't there. – mellamokb May 17 '11 at 16:04
@mellamokb i code to what i believe the OP will do in the future. – Naftali May 17 '11 at 16:05
1

@Neal, in that case why haven't you validated the input for him as well? Why haven't you added in an autocomplete function as well? – Dormouse May 17 '11 at 16:11
1

In fact, why haven't you also coded a small plugin for him that will ajaxsubmit any form he likes using serialized form data? I mean you surely "believe" that he'll want to submit a form via AJAX in the future, no? – Dormouse May 17 '11 at 16:17

Naftali · Accepted Answer · 2011-05-17T15:58:43.590

3

Fix this line:

$.post('export_file.php', { group: form.group.value , test: form.test.value },

Change it to something like this:

var group_val = $('input[name="group"]', 'form[name="form"]').get(0).value;
var test_val = $('input[name="test"]', 'form[name="form"]').get(0).value;
$.post('export_file.php', { group: group_val , test: test_val },

Fiddle: http://jsfiddle.net/maniator/cQ2vZ/

edited May 17 '11 at 15:58

answered May 17 '11 at 15:52

Naftali

144,921
39
244
303

@downVoter anyone want to explain it? – Naftali May 17 '11 at 16:01

score 1 · Answer 3 · answered May 17 '11 at 15:54

1

I've added ids to your form elements in your HTML:

<form name="form">
    <input type="hidden" name="group" id="group" value="<?echo $group;?>">
    <input type="hidden" name="test" id="test" value="<?echo $test_id;?>">
    <input type="button" class="Mybutton" id="button" name="btnSubmit" value="Export Results">
</form>

Then amended the jQuery to get the values from these fields by ID, and use these in the parameters of your AJAX call:

$('#button').live('click', function() {
    var groupValue = $("#group").val();
    var testValue = $("#test").val();

    $.post('export_file.php', { group: groupValue , test: testValue },
    function(output)    {
        $('#return').html(output).show();
    });
});

answered May 17 '11 at 15:54

Rory McCrossan

331,213
40
305
339

They do not need ids, see my answer below – Naftali May 17 '11 at 15:55
you are missing `.val()` in assignments: `var groupValue = $("#group").val();` – morgar May 17 '11 at 15:56
You mean your answer above :P – mellamokb May 17 '11 at 15:56
@Neal all respect, your answer was overly complex, there's pretty much no need to set variables in such a simple case – Dormouse May 17 '11 at 15:56
@Neal, true they do not need ids to work, but the Id selector is by far the quickest, so I always suggest people use that when possible, rather than `INPUT[name=foo]`. At the end of the day they all work, it's just personal preference. – Rory McCrossan May 17 '11 at 15:57
thanks this works, could I ask, why did mine not work in this case? i got it from a tutorial, and worked previously for me? – dapperwaterbuffalo May 17 '11 at 15:58
@BenStephenson this user also used variables :-P – Naftali May 17 '11 at 15:59
@buymypies In plain javascript you can get the value of a field by using `document.formName.fieldName.value`, or `document.forms[index].fieldName.value`. – Rory McCrossan May 17 '11 at 16:01

score 0 · Answer 4 · answered Nov 17 '12 at 08:56

try this one

$('#button').live('click', function() {
    var group_val = $("input[name='group']").val(); // gets the value of hidden field with the name group
    var test_val = $("input[name='test']").val(); // gets the value of hidden field with the name test and store it in test_val variable
    $.post('export_file.php', { group: group_val  , test: test_val  },
    function(output)    {
        $('#return').html(output).show();
    });
});

issue with jquery .post() not working

4 Answers4