Complete Javascript Ajax php confusion

Question

Hi all I am developing a site in Codeigniter and I have a form that I am posting using PHP and this is absolutely fine. However I have a small dropdown on the side of my page which I am using to jump between pages - in order to do this I am simply using a href and passing variables within the URL.

I need to POST some data however when they click on the link. I don't wish to use a button and was wondering whether this could be acheived using an ajax onclick() event?? - the data I need to post however is within the form. The code structure is roughly:

<form action="main/postback" method="post">
<input type="hidden" name="pagereference" value="2" />
<input type="hidden" name="supervariable" value="7" />
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">

</form>
<div>
<ul>
<li><a href = 'http:localhost/landing'>click me</a></li>
</ul>
</div>

When someone clicks on the link I want to send an Ajax Post request, but In the php file that I am posting the data I want to be able to retrieve data from within the form. Is this possible? if so could someone please provide an example AJAX request and how to retrieve the data in PHP as I am majorly confused. I tried the following:

<li><a onclick='myFunction()'>click me</a></li>


<script type="text/javascript">
                function myFunction()
                {
                    var "test";
                     $.ajax({
                           type: "POST",
                           url: "http://localhost/ciproject/assessment/test",
                           dataType: String,
                           success: function(msg){
                                alert( "Data Saved: " + msg ); //Anything you want
                           }
                         });
                     window.alert("TEST");
                }
            </script>   

Any ideas would be much appreciated, many thanks

Answer 1

You will probably run into problems using complete urls (with the domain name) due to CORS so I would recommend removing that, but you can easily do what you want using something like:

<li><a class="postFormLink">click me</a></li>

<script type="text/javascript">
$('.postFormLink').on('click', function() {
    $.ajax({
       type: "POST",
       url: "/ciproject/assessment/test",
       data: $('form').serialize(),
       success: function(msg){
            alert( "Data Saved: " + msg ); //Anything you want
       }
    });
    window.alert("TEST");
}
</script>

If you have more than one form on your page, you should add an ID or a class to target it instead of using $('form') .

Note that I have also removed the inline event handler.

Answer 2

Try the following:

<form action="main/postback" method="post" id="form1">
    <input type="hidden" name="pagereference" value="2" />
    <input type="hidden" name="supervariable" value="7" />
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
</form>

<li><a id="clickme">click me</a></li>


<script type="text/javascript">

 $(function () {
  $("#clickme").click(function () {

    var form_data = $('#form1').serialize();

    $.ajax({
        type: "POST",
        dataType: "text",
        url: "ciproject/assessment/test",
        data: form_data,
        success: function(response){
            alert('Job well done');
        }

     })

   })
 })
</script>

Answer 3

The following should work, if you put it into your ajax options. You will need to identify your form, the easiest way is to use an id.

data: $("#theFormId").serialize()