0

I am developing a wordpress plugin that will create a contact form and then submit the details through an ajax request.

        jQuery.ajax({

            type:"post",
            dataType:"json",
            url: ajaxurl,
            data: {action: 'submit_data', info: info},
            success: function(response) {
                alert("Success");
            }
        });

This is the function that handles the ajax request:

add_action("wp_ajax_submit_data", "submit_data");
add_action("wp_ajax_nopriv_submit_data", "submit_data");

function submit_data() {


echo "<script> alert('Hello');</script>";

die();
}

The link that the user will click to submit the form is :

$link = admin_url('admin-ajax.php?action=submit_data');
<a  class="button" href="'.$link.'" style="background-color:white;color:black;">    <strong>Submit</strong></a>

Once the submit link is clicked I recieve the Hello alert and then get taken to a blank page with the URL

http://localhost:81/wordpress/wp-admin/admin-ajax.php?action=submit_data

Why is it taking me to a blank page rather than updating the current page?

EDIT -------------------------------------------------

Here is the full jquery function :

$(".button").click(function() {

            $(".error").hide();

            var name = $(":input.name").val();
            if (name == "") {

                $("label#nameErr").show();
                $(":input.name").focus();
                return false;
            }

            var email = $(":input.email").val();
            if (email == "") {

                $("label#emailErr").show();
                $(":input.email").focus();
                return false;
            }


            var phone = $(":input.phone").val();
            if ((phone == "") || (isNaN(phone))) {

                $("label#phoneErr").show();
                $(":input.phone").focus();
                return false;
            }

            var info = 'name:' + name + '&email:' + email + '&phone:' + phone;

            alert(info);

            jQuery.ajax({

                type:"post",
                dataType:"json",
                url: ajaxurl,
                data: {action: 'submit_data', info: info},
                success: function(response) {
                    if (response.type == "success") {

                        alert("success");
                    }
                    else {

                        alert("fail");
                    }
                }
            });

            return false;


        });
  • Because you're linking it like a page - you should use a click handler and listen for the button click $('a.button').click(function(){$.ajax({...})); so that it's entirely dynamic. You'll need to pass your data to the ajax call and then get them in you php function via $_POST – Howdy_McGee Apr 3 '14 at 17:06
  • If I use a click handler though then it doesn't seem to run the submit_data function as I get no Hello alert? I pass the data in the ajax call through the info: info line I think – Bob Apr 3 '14 at 17:13
  • why are you returning false instead of calling preventDefault() on the event thats passed as an arg to the function? – Tom J Nowell Apr 3 '14 at 17:24
  • I followed a basic tutorial on using ajax posts in wordpress, would preventDefault work better? – Bob Apr 3 '14 at 18:39
1

You should remove the link from the anchor tag:

<a  class="button" href="#" style="background-color:white;color:black;"> 
  <strong>Submit</strong>
</a>

Then your jQuery part should be:

$('a.button').click(function(event){
    event.preventDefault();

    //your ajax gets here:
    jQuery.ajax({
            type:"post",
            dataType:"json",
            url: ajaxurl,
            data: {action: 'submit_data', info: info},
            success: function(response) {
                alert("Success");
            }
        });
});
  • My jQuery does actually wait for a button click event, thats why I set the class of the link to button. I used a link because of a tutorial I read which was using links wp.smashingmagazine.com/2011/10/18/how-to-use-ajax-in-wordpress – Bob Apr 3 '14 at 17:18
  • What do you mean by button? the <button> element? Could you post more of your code? – RRikesh Apr 3 '14 at 17:20
  • Tried dropping the link but still no luck, still get no Hello alert from the submit_data function – Bob Apr 3 '14 at 17:21
  • Posted the full jquery function – Bob Apr 3 '14 at 17:22
  • The reason you're not alerting that information is because when you echo back from that PHP function, it returns that echoed data back to your ajax call. You need to go from there and console.log() your output. The reason you saw it before was because it would load that function and thus the script, then the blank page. @RRikesh - by Button I believe he means the button class he has on the link, so he's referring to that as a button. – Howdy_McGee Apr 3 '14 at 17:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.