将javascript onclick消息添加到php动态列表

Question

I have a dynamically-generated list of plants that I have gotten from a MySQL query. In each row of the resulting list, I have a select dropdown list of plant sizes to allow users to change the size of each plant.

I would like to warn the user upon clicking on the dropdown list that they need to click the submit button to update when they change the size any given plant. The current JavaScript I have plugged in displays the correct message only in the first row of results, no matter which row I click the select dropdown in.

Here is the code that currently works and will only appear the first row of the list. I realize this is old syntax, but I see so much diverse information out there, that I'm having a hard time sorting out what to do. I am much better at php than JavaScript.

$(document).ready(function() { 
$(".plantSize").click(function() { 
    $("#reCalc").css({ color:"red" }).html("Click button to update after making changes.").width(400); 
});});



echo '<td>

            <select class="plantSize" name="size_' . $row_count . '" value="' . $size . '">
                  <option value=".5"' . ($size == .5 ? ' selected="selected"' : '') . '>.5 feet</option>
                  <option value="1"' . ($size == 1 ? ' selected="selected"' : '') . '>1 foot</option>
                  <option value="2"' . ($size == 2 ? ' selected="selected"' : '') . '>2 feet</option>
                  <option value="3"' . ($size == 3 ? ' selected="selected"' : '') . '>3 feet</option>
                  <option value="4"' . ($size == 4 ? ' selected="selected"' : '') . '>4 feet</option>
                  <option value="5"' . ($size == 5 ? ' selected="selected"' : '') . '>5 feet</option>
                  <option value="6"' . ($size == 6 ? ' selected="selected"' : '') . '>6 feet</option>
                  <option value="7"' . ($size == 7 ? ' selected="selected"' : '') . '>7 feet</option>
                  <option value="8"' . ($size == 8 ? ' selected="selected"' : '') . '>8 feet</option>
                  <option value="9"' . ($size == 9 ? ' selected="selected"' : '') . '>9 feet</option>
                  <option value="10"' . ($size == 10 ? ' selected="selected"' : '') . '>10 feet</option>
            </select>
    </td>

    <td>'; 
              $peak_water = $peak_et * $etaf * 0.7854 * 1 * .623;
              echo number_format($peak_water,1) . ' gal./wk.</td>'; 
    </td>

    <td><input type="submit" name="Submit" value="Calculate" />
                <span class="recalcwarning" id="reCalc"></span>
    </td>

    </tr>'; 

Answer 1

The ID field is supposed to be unique for ENTIRE DOCUMENT. Not just on each row. JQuery is matching all of the #reCalc ID in the whole table, then is only applying the HTML text only to the first matched #reCalc which is the one in the first row. Here are a couple of ways to fix it.

1) If you can't modifiy the ID, look for the reCalc ID in only the row of the click.

$(".plantSize").click(function() { 
    //finds the closest TR up-DOM of the clicked object, then finds the span with ID reCalc within that TR.
    var span = $(this).closest("tr").find("span#reCalc"); 
    span.css({ color:"red" }).html("Click button to update after making changes.").width(400); 
});

2) But really, you shouldn't use the ID field for this. ID's are really meant to be unique. Instead, use the class name then employ the above code again, but a slightly modified selector.

<span class="recalcwarning"></span>

$(".plantSize").click(function() { 
    //finds the closest TR up-DOM  of the clicked object, then finds the span with class recalcwarning within that TR.
    var span = $(this).closest("tr").find("span.recalcwarning"); 
    span.css({ color:"red" }).html("Click button to update after making changes.").width(400); 
});

update

On further review, I did notice a potential invalid HTML issue. In the line echo number_format($peak_water,1) . ' gal./wk.</td>' echo number_format($peak_water,1) . ' gal./wk.</td>' I see that the TD tag is ended there, but then on the next line, you have another end TD tag.

Here is a link to a workin JSFiddle example based on your sample code. http://jsfiddle.net/7v90kj9p/