Cookie Cookie - 5 months ago 15
jQuery Question

Selecting the correct form in javascript

I have an HTML form with at least two forms in, each with the class 'myform' applied. The input buttons in each have a different id, and once clicked should send the data to a database. The problem is the javascript, which stops the refresh and controls buttons states doesn't select the right form - it always sends the details of the form closest to the script... here are the html forms.

<div class="booking_box">
<form method="post" class='myform'>
<button class="button" id='b2' name = "8">Book room 8</button>
<input type="hidden" name="salutation" value="<?php echo $_SESSION["salutation"]?>">
<input type="hidden" name="firstname" value="<?php echo $_SESSION["firstname"]?>">
<input type="hidden" name="room" value="8">
<input type="hidden" name="period" value="1">
</form>
</div>

<div class="booking_box">
<form method="post" class='myform'>
<button class="button" id='b3' name = "7">Book room 7</button>
<input type="hidden" name="salutation" value="<?php echo $_SESSION["salutation"]?>">
<input type="hidden" name="firstname" value="<?php echo $_SESSION["firstname"]?>">
<input type="hidden" name="room" value="7">
<input type="hidden" name="period" value="1">
</form>
</div>


Here is the script at the bottom of the page. I've tried '.closest' and '.parent' but nothing seems to work. I've also tried adding these to the '$.post' section, but then the data is sent to the DB but it's empty fields. Confused...

<script>
$("button").click(function() {
var myID = ($(this).attr('id'));
var theName = ($(this).attr('name'));
var isAdd = $("#" + myID).text();

if (isAdd == "Book room " + theName){
$('#' + myID).text(isAdd ? 'Cancel room' + theName : 'Book room ' + theName);
$('#' + myID).closest('.myform').attr('action', isAdd ? 'bookRoom.php' : 'update.php');
} else {
$('#' + myID).text(isAdd ? 'Book room ' + theName : 'Cancel room ' . theName);
$('#' + myID).closest('.myform').attr('action', isAdd ? 'update.php' : 'bookRoom.php');

}

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

$.post(
$('.myform').attr('action'),
$('.myform :input').serializeArray(),
function(result){
$('#result').html(result);
}
);
});
</script>


As always, any help would be massively appreciated!

Answer

You should be able to use $(this).closest(".myform") to get the form that should be submitted.

It's also not necessary to use $("#" + myID), since that's the same as $(this).

And the submit handler that prevents normal submission should not be inside the click handler.

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

$("button").click(function() {
    var theName = ($(this).attr('name'));
    var isAdd = $(this).text();
    var form = $(this).closest(".myform");

    if (isAdd == "Book room " + theName){
        $(this).text(isAdd ? 'Cancel room' + theName : 'Book room ' + theName);
        form.attr('action', isAdd ? 'bookRoom.php' : 'update.php');
    } else {
        $(this).text(isAdd ? 'Book room ' + theName : 'Cancel room ' . theName);
        form.attr('action', isAdd ? 'update.php' : 'bookRoom.php');
    }

    $.post(
        form.attr('action'),
        form.serialize(),
        function(result){
            $('#result').html(result);
        }
    );  
});