CODEWITHSUNDEEP
html
Intelwalk
Intelwalk

Reputation: 671

Graying out HTML form element

I want to let the user select one "row" to use to submit the request with for a report type. How can I put radio buttons in the first column of a table and whichever is selected is the active row that gets sent to the next page via the submit button?

<form action = "issuereporting.php" method="post">
    <h2>Please select your search criteria</h2>
    <table>
        <tr>
            <td><input type ="radio" name ="report" value ="select1" /></td>
            <td>Single Date:</td>
            <td><script>DateInput('orderdate', true, 'DD-MON-YYYY')</script></td>
        </tr>
        <tr>
            <td><input type="radio" name="report" value="select2" /></td>
            <td>Date Range:</td>
            <td>Start Date</td>
            <td>End Date</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td><script>DateInput('begdate', true, 'DD-MON-YYYY')</script></td>
            <td><script>DateInput('enddate', true, 'DD-MON-YYYY')</script></td>
        </tr>
        <tr>
            <td><input type="radio" name="report" value="select3" /></td>
            <td>Application:</td>
            <td><select name = "application">
                    <option value = "default">default</option>
                    <option value = "2">2</option>
                    </select></td>
        </tr>
        <tr>
            <td><input type="radio" name="report" value="select4" /></td>
            <td>Application and Date:</td>
            <td><select name = "application">
                    <option value = "default">default</option>
                    <option value = "2">2</option>
                    </select></td>
        </tr>
        <tr>
            <td><input type = "submit" value = "Submit"></td>
        </tr>
    </table>
</form>

I tried using this js file from a previous question but I could not get it to work correctly. I know it needs to be expanded but I couldn't get it to gray out the date fields. Thanks for the help!

$("input[name=report]").click(function() {
    $(this).closest('table').find("input[name=orderdate]").attr("disabled", "disabled");
    $(this).closest('tr').find('input[name=textfield]').removeAttr('disabled');
});

Upvotes: 0

Views: 219

Answers (2)

Abdul Munim
Abdul Munim

Reputation: 19217

Use this:

$("input[name=report]").click(function() {
    $(this).closest('table').find("input[type=text],select").prop("disabled", true);
    $(this).closest('tr').find('input[type=text],select').prop("disabled", false);
});

Check this live example on JsFiddle

Upvotes: 2

Pete Wilson
Pete Wilson

Reputation: 8694

One way to do it would be to have an onclick handler for the row-select radio button and, in that handler, find the TR which is the parent of the button TD. That's your selected row.

Upvotes: 0

Related Questions