Post Data with jquery/ajax

Question

I am trying to retrieve data from my form when I post(submit) the data. But I have some ignorance about ajax with jquery.

Today, my code looks like this:

$(function() {
    $(".apply_up").submit(function(e){    
        $.post("controller/ajax.php", function(data) {
            alert("Data Loaded: " + data);
        }); 
    });
});

And here's my HTML:

<form name="Apply" class="apply_up" method="Post">
    <input type="image" src="img/t_up.png" id="ajax" name="t_up" value="1 ">
</form>

I want to pick up value = "1"

Just use the normal jquery selectors like $("#ajax").attr("value") — 23tux
– 23tux, Commented Mar 25, 2013 at 10:54
For value it's better to use val(). Also, for code longevity, it's better to use prop(). — BenM
– BenM, Commented Mar 25, 2013 at 10:55
can anyone advise on how I should send value to a php function then? — Max Torstensson
– Max Torstensson, Commented Mar 25, 2013 at 11:15

BenM · Accepted Answer · 2013-03-25 10:53:41Z

1

You need to access the value and then pass it through:

$(".apply_up").submit(function(e){    
    var the_val = $('#ajax').val();
    $.post("controller/ajax.php", { 'value': the_val }, function(data) {
        alert("Data Loaded: " + data);
    }); 
});

answered Mar 25, 2013 at 10:53

BenM

53.3k26 gold badges116 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jai · Accepted Answer · 2013-03-25 11:14:34Z

1

Try like this one:

 $(".apply_up").submit(function(e){  
    e.preventDefault();
    var imgVal = $('#ajax').val();  
    $.post("controller/ajax.php", {value : imgVal}, function(data) {
        alert("Data Loaded: " + data.value);
    }, "json"); 
});

edited Mar 25, 2013 at 11:14

answered Mar 25, 2013 at 11:02

Jai

74.8k12 gold badges77 silver badges104 bronze badges

5 Comments

BenM Over a year ago

How does that differ from my answer?

BenM Over a year ago

The OP didn't include it, so you don't know that it's required ;)

Jai Over a year ago

@MaxTorstensson You should try with getjson instead. or add the "json" in the post.

Max Torstensson Over a year ago

i change "data" to "imgval". can anyone advise on how I should send value to a php function then?

Jai Over a year ago

@MaxTorstensson just updated the answwer you can try that one.

bipen · Accepted Answer · 2013-03-25 11:00:14Z

0

and use serialize().. if you have lots of fields in your form

html

<form name="Apply" id="apply" class="apply_up" method="Post">
...

jquery

$(".apply_up").submit(function(e){    
   $.post("controller/ajax.php",$(this).serialize(), function(data) {
   ...

  //OR
    $.post("controller/ajax.php",$("#apply").serialize(), function(data) {
        alert("Data Loaded: " + data);
    }); 
});

answered Mar 25, 2013 at 11:00

bipen

36.6k9 gold badges51 silver badges62 bronze badges

1 Comment

BenM Over a year ago

I'd probably be tempted to recommend $(this).serialize() for the OP's situation.

Seimen · Accepted Answer · 2013-03-25 11:07:18Z

0

Proper solution for most forms:

HTML

<form action="controller/ajax.php" name="Apply" class="apply_up" method="Post">
    <input type="image" src="img/t_up.png" id="ajax" name="t_up" value="1 ">
</form>

JS

$(".apply_up").on('submit', function(e){
    e.preventDefault();

    var formAction = this.action,
        formData = $(this).serialize();

    $.post(formAction, formData, function(data) {
       alert("Data Loaded: " + data);
    }); 
});

edited Mar 25, 2013 at 11:07

answered Mar 25, 2013 at 11:00

Seimen

7,2942 gold badges30 silver badges42 bronze badges

4 Comments

BenM Over a year ago

Not necessarily. POST requests have a max size, and sending superfluous data could be expensive in the long run.

Seimen Over a year ago

Is that a question to my answer or to the comment the OP already deleted?

BenM Over a year ago

It was the OP's comment that he's deleted. Sorry for the confusion.

Seimen Over a year ago

To your first comment: sure the requests have a max size, which is per default 8MB. You can imagine how many inputs your form would have to have to exceed this limit in a json string...

Collectives™ on Stack Overflow

Post Data with jquery/ajax

4 Answers 4

Comments

5 Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related