ansaurus

Question

Jquery Post + run php file > hide the form > give message...

Answer 1

+2 A:

You can preventDefault on the button click or return false on the form's submit event:

$(function() {
    $("#btnsend").click(function(e) {
            e.preventDefault();
            var full_name = $('input["name=full_name"]').val();
            var dataString = 'fullname='+ full_name;
            $.ajax({
              type: "POST",
              url: "query.php?act=contact",
              data: dataString,
              success: function() {
                    $('#contact-form').hide();
                    $('#contact-form').html("<p>thanks!</p>")
                                      .fadeIn(1500, function() {$('#contact-form').append("");});
               }
        });
    });
});

or:

$('#commentForm').submit(function() {
    return false;
});

karim79 2009-09-28 11:50:05

tried and no action at all : (

artmania 2009-09-28 12:03:13

@artmania - full_name was not assigned anything, try now

karim79 2009-09-28 12:06:59

@artmania - also, you can safely remove the form's action attribute.

karim79 2009-09-28 12:10:40

Answer 2

+1 A:

Try:

$(function() {

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

        $.ajax({
          type: "POST",
          url: "query.php?act=contact",
          data: { fullname: $('input[name=full_name]').val() },
          success: function() {
        $('#contact-form').hide();
                $('#contact-form').html("<p>thanks!</p>")
        .fadeIn(1500, function() {$('#contact-form').append("");});
           } 

    });

    return false;
});
});

James Hall 2009-09-28 11:50:47

+1 - I think he'll also run into a problem because "btnSend" is a submit button.

Paul Suart 2009-09-28 11:52:54

@Paul Suart: Ahh yes, possibly. He is returning 'false' though, which may cancel the event.

James Hall 2009-09-28 11:55:52

tried, no action at all :(

artmania 2009-09-28 12:02:38

Answer 3

+2 A:

Your problem lies in: var dataString = 'fullname='+ escape(full_name);

Try: var dataString = 'fullname='+ escape(document.contact.full_name.value);

Eg:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <title>Example</title>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
 <script type="text/javascript">
  $(function() {
   $("#btnsend").click(function() {
    var dataString = 'fullname='+ escape(document.contact.full_name.value);

    $.ajax( {
     type: "POST",
     url: "query.php?act=contact",
     data: dataString,
     success: function() {
      $('#contact-form').hide();
      $('#contact-form').html("<p>thanks!</p>").fadeIn(1500, function() { 
       $('#contact-form').append("");
      });
       }  
    });

    return false;
   });
  });
 </script>
</head>

<body>
 <form id="commentForm" name="contact" method="post" action="">
  <ul id="contact-form">
   <li><label>Full Name: *</label><input type="text" name="full_name" class="txt_input required" /></li>
   <li><input type="submit" value="Send" id="btnsend" name="btnsend" class="btn_submit" /></li>
  </ul>
 </form>
</body>

Make sure query.php exists though else it won't execute the call back function at success.

Also make sure you click the button and not press the ENTER key as that will submit the form normally (you have only defined an event handler for click not keypress)

Sbm007 2009-09-28 12:04:07

oooohh! I can't believe! thanks so much.... my main was about query.php access :/ now it gives thanks message, with fading effect : )Now I'm going to work on the email action and form control!thanks!

artmania 2009-09-28 12:08:57

You're welcome.

Sbm007 2009-09-28 12:09:14

how can I run it with an another validation script? :/ I use the script at the link http://jquery.bassistance.de/validate/demo/custom-messages-metadata-demo.html .Probably I need to call this post script from the success case of validation script? or no way?

artmania 2009-09-28 12:17:13

If you're going to use jQuery, then use jQuery to get the value of the input as well. Also, you'd have to run the validator before doing the ajax post. The simplest way is to change to handle the submit event on the form and make sure the validator's handlers are applied before your ajax submit handler. That way your function will only be called if the form is valid.

tvanfosson 2009-09-28 12:28:37

Although I load jquery-post.js after the validation, it takes post action first. can it be because of I run post code on submit button click?  <script src="inc/validation/lib/jquery.js" type="text/javascript"></script><script src="inc/validation/jquery.validate.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#commentForm").validate(); }); </script> <script src="js/post-contact.js" type="text/javascript"></script>

artmania 2009-09-28 12:41:38

Answer 4

A:

I think that you have at least 3 problems here. First, you are referencing full_name as if it were a variable. I believe this is causing a javascript error which aborts the function and allows the default action (post) to proceed. Second, you probably need to encode ALL of the form parameters, including act. This is may be causing an invalid URL to be sent and thus the action appears not to have been invoked -- you can check this by looking at the request that is sent with Firefox/Firebug. Third, you are attempting to replace the contents of a list with a paragraph element. This is invalid HTML. I'd replace the entire list with the paragraph (and I don't get what appending an empty string does at the end so I've omitted it).

Note I've changed this to work on the submit event of the form -- so it won't matter how it's submitted. Also allows me a little jQuery niceness in not having to look up the form again.

 $('#commentform').submit(function() {
   var $this = $(this);
   $.ajax({
     url: "query.php",
     data:  { 'act': 'contact', 'full_name', $('input[name="full_name"]').val() },
     success: function() {
        $('#contact-form').remove();
        $this.hide().html("<p>thanks!</p>").fadeIn(1500);
     }  
  });
  return false;
}

tvanfosson 2009-09-28 12:13:59

Answer 5

A:

Sadee 2009-12-03 08:54:50

Answer 6

A:

this is very helpful, thanks...does anyone know how to keep the form from not disappearing after its submitted?

2010-09-04 18:22:57

ansaurus

tags:

views:

answers:

Jquery Post + run php file > hide the form > give message...

related questions