Question

Basically, I’ve got a form that submits a post to my wordpress blog depending what’s in the form. When submitted, it hides the form from the page using ajax (as below). This works only when I have 1 form on the page.

What I am trying to do is make multiple forms work the same way on a page… Each one hides only itself when it’s submitted.

• contact_form is the DIV ID of the singular form that works

• I added <div id="form'.$formnumber.'"> to the html page, so now there are multiple forms with IDs of form1, form2, form3, etc. form_no is the number on the end that gets sent to this script.

I don’t know ajax/javascript very well – How do I make it work on multiple divs? Here’s what I have at the moment (I’ve simplified as much as possible). Thanks!

---

$(".button").click(function() {
    var form_no = $("input#form_no").val();
    }

…further down the page…

$.ajax({
    type: "GET",
    url: "mypage.php",
    data: dataString,
    success: function() {
        $('#contact_form').html("<div id='message'></div>");
        $('#message').html("")
        .append("")
        .hide()
        .fadeIn(1500, function() {
        });
    }
});
return false;

Answer 1

This does the job:

$(".button").click(function() {
  var form_no = $("input#form_no").val();

  $('#form' + form_no).hide();
});