Cannot select form with jquery

Question

I have inherited a project, that provides an order form to a customer.

The order form is a table, and the adding to cart is (meant to be!) handled with jQuery.

Code I have to work with looks something like this:

<table>
    <form id="prod1" method="post" action="">
        <tr>
            <td>Prod Name</td><td><input type="text" name="prod1qty" id="prod1qty" /></td><td><input type="button" id="prod1add" /></td>
        <tr>
    </form>
    <form id="prod2" method="post" action="">
        <tr>
            <td>Prod Name</td><td><input type="text" name="prod2qty" id="prod2qty" /></td><td><input type="button" id="prod2add" /></td>
        <tr>
    </form>
    <form id="prod3" method="post" action="">
        <tr>
            <td>Prod Name</td><td><input type="text" name="prod3qty" id="prod3qty" /></td><td><input type="button" id="prod3add" /></td>
        <tr>
    </form>
</table>

I am trying to select all the input type="button" elements within forms with id's starting "prod" with jQuery so I can give them a click function...

$("form[id^='prod'] :input[type='button']").click(function(){
    console.log(this);
});

But its failing...I tried to see if it was reaching the element by replacing .click() with .css('border', '1px solid red') but it wasn't picking it up.

I then noticed in firebug that the <form> was greyed-out, and closed on the same line, ie:

<form id="prod1" method="post" action="" />
<tr>
    <td>Prod Name</td><td><input type="text" name="prod1qty" id="prod1qty" /></td><td><input type="button" id="prod1add" /></td>
<tr>
<form id="prod2" method="post" action="" />
<tr>
    <td>Prod Name</td><td><input type="text" name="prod2qty" id="prod2qty" /></td><td><input type="button" id="prod2add" /></td>
<tr>

It seems that the code is valid HTML (put it through the validator), so why is this happening?

Thanks! Josh

Answer 1

If I understood your question. Perhaps if you use 'class=prod' and check $('.prod').click(function (){}); might get you the access to the elements inside your clicked form.

Answer 2

Thought I'd better close this question properly...

The comment by David Dorward answered my question.

Thanks for the suggestions!