Passing values to formmail.cgi without refresh (HTML form PHP handling)

Question

My host has a formmail.cgi script to send html form data to emails (http://formmail.dreamhost.com/), but I dont understand how to pass it values that it understands.

Ive tried using this method to pass form values:

HTML:

<form  id="contact_form" action="http://formmail.dreamhost.com/cgi-bin/formmail.cgi" method="POST"> 

 <input type=hidden name="recipient" value="info#raphaelguilleminot.com">
 <input type="hidden" name="subject" value="Message from Raphael's portfolio site" />
 <input type=text id="email" class="email default-value" name="email" value="Your email">
 <label class="error" for="email" id="email_error">your email is required</label> 
 <textarea id="message" class="contact_message default-value" name="message" value="your message">Tell me whats on your mind!</textarea><br/> 
 <input class="submit button" type="submit" value="Send" /> 

</form>

Jquery:

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

var dataString = 'recipient=info#raphaelguilleminot.com' + 'name='+ name + '&email=' + email + '&message=' + message; 

$.ajax({  
 type: "POST",  
 url: "http://formmail.dreamhost.com/cgi-bin/formmail.cgi",  
 data: dataString,  
 success: function() {  
  $('#contact_form').hide().fadeIn(1500) 
  }  
  });  
  return false;
  });
 }); 

Any ideas?

Answer 1

In order for it not to refresh the page, you need to add $('#contact_form').submit(function(){ return false; });

One thing I noticed is that you didn't prefix & for the name attribute, while constructing your own url encoded string is nice, you could use jquery to do it for you automatically.

Set Id's for each form input, then get the values by using:

msg = $('#message').val(); replyto = $('#email').val();

and for the data section:

data:({ recipient:info#raphaelguilleimnot.com, subject:'Message from Raphael's portfolio site', email:replyto, message:msg })

Answer 2

The way you defined your dataString is not correct.

var dataString = 'recipient=info#raphaelguilleminot.com' + 'name=' (...)

should actually be

var dataString = 'recipient=info#raphaelguilleminot.com' + '&name=' (...)

Also, you should rather use an array or an object to pass your data parameters, such as

var data = {
  recipient: 'info#raphaelguilleminot.com',
  name: name,
  (...)
}

jQuery would ensure automatically that your parameters are escaped correctly.

Finally, you should prevent the default behavior of the submit button so that your ajax call can be made. Otherwise, your page will load the CGI script, actually sending the data twice (if the ajax call has been lucky to get by).

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

Should do the trick.