Send POST Data using AJAX JQuery

Question

I want to send the selected item from Bootstrap dropdown in POST to my controller, but somehow it is not being sent.

In my dropdown I fetch records from the database in <li></li> tag, like this:

 <li class="dropdown">

      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Your Sites <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li ><a href="#"><?php

    foreach($sites as $site)
    {

    echo "<li class='specialLink' id='$site->site_key'>".$site->site_key."</li>";
    }?></a></li>

      </ul>
    </li>

This is my script to send POST data:

<script type="text/javascript">

$( ".specialLink" ).click(function() {
    var value = this.id; //get value for throw to controller
    alert(value);  

    $("#specialLink").submit(function(){
        $.ajax({
            type: "POST", //send with post
            url: "<?php echo site_url('customer/dashboard') ?>",  
            data: "value=" + value,
        });
    });
});

</script>

But I don't send anything in POST data at my controller, nor do I get any error message in the console.

Are you clicking on the element that has id #specialLink? Doing a .submit(function(){}) just sets the event handler it doesn't execute the function immediately — Patrick Evans
– Patrick Evans, Commented Feb 27, 2016 at 5:50
what is #specialLink? a form? if so.. no need to submit it.. just directly do $.ajax(... after your click function — roullie
– roullie, Commented Feb 27, 2016 at 5:51
@PatrickEvans i click on that <li> link and i want data to be passed as POST — Rajan
– Rajan, Commented Feb 27, 2016 at 5:52
Then just do the $.ajax call, don't put it in the event handler — Patrick Evans
– Patrick Evans, Commented Feb 27, 2016 at 5:53
This "," after "value", please take it out. If you don't have another property after "data:", this is not necessary and it is a syntax error. — Edvaldo Silva de Almeida Jr
– Edvaldo Silva de Almeida Jr, Commented Feb 27, 2016 at 5:53

Sohan Jain · Accepted Answer · 2016-02-27 05:53:43Z

1

I think you're not using submit correctly. The submit function binds an event handler to the submit javascript event. Read more at https://api.jquery.com/submit/.

You just want to do the ajax request when $(.specialLink) is clicked, so try:

 $( ".specialLink" ).click(function() {
    var value = this.id; //get value for throw to controller
    $.ajax({
      type: "POST", //send with post
      url: "<?php echo site_url('customer/dashboard') ?>",  
      data: "value=" + value, 
    });
});

answered Feb 27, 2016 at 5:53

Sohan Jain

2,3771 gold badge17 silver badges18 bronze badges

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

7 Comments

Rajan Over a year ago

i did this but in my profiler i dont see any POST data

Edvaldo Silva de Almeida Jr Over a year ago

This "," after "value", please take it out. If you don't have another property after "data:", this is not necessary and it is a syntax error.

roullie Over a year ago

@Rajan also be sure to put it after the html has loaded. Or enclose it with a $(document).ready

Sohan Jain Over a year ago

@Rajan, can you clarify what you mean when you say you don't see any POST data in your profiler? Do you see a POST request, but the request has no data sent along with it?

Rajan Over a year ago

@Sohan Codeigniter Profiler show GET AND POST DATA on browser. when i click on dropdown i dont see any data in that

|

Hamid hp · Accepted Answer · 2016-12-29 22:16:46Z

0

you can use this code instead to send your data to php file:

 <a href="#" onclick="postExample(); return false;">Your Link here</a>

     function postExample() {
     $.post('url', {"postfield1":"val1"}, function(resp) {
         //Do something with the AJAX response
     });
 }

or

 <a href="#" onclick="$.post('url', {"postfield1":"val1"},; return false;">Your Link here</a>

answered Dec 29, 2016 at 22:16

Hamid hp

93 bronze badges

Collectives™ on Stack Overflow

Send POST Data using AJAX JQuery

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related