CODEWITHSUNDEEP
javascripthtmlforms
jan0s1k
jan0s1k

Reputation: 13

Input boxes disable/enable box when there is form specified

I'm trying to get form in table with enabling and disabling inputs by checkbox. When I realized, that <form> is not working in tables I put form argument in inputs, but now disabling/enabling doesn't working (my js skill is kinda poor)

My checkbox to disable/enable inputs look like:

<td>
    <input type="checkbox" onclick="this.form.elements['bleh'].disabled = this.form.elements['bleh2'].disabled = !this.checked" />
    <input type="submit" value="Edytuj"/>
</td>

And my input boxes for now are:

<td><input type="text" name="bleh" form="id7" value="default" disabled=disabled></td>
<td><input type="text" name="bleh2" form="id7" value="admin" disabled=disabled></td>

Upvotes: 0

Views: 85

Answers (2)

Bhavik
Bhavik

Reputation: 4904

Demo Fiddle

  1. When you have your table within the form

    <form action="#"> <table> <tr> <td> <input type="text" name="bleh" value="default" disabled="disabled" /> </td> <td> <input type="text" name="bleh2" value="admin" disabled="disabled" /> </td> <td> <input type="checkbox" onclick="this.form['bleh'].disabled = this.form['bleh2'].disabled = !this.checked" /> <input type="submit" value="Edytuj" /> </td> </tr> </table> </form>

  2. When you declare your form elements outside the form

    <table> <tr> <td> <input type="text" name="bleh" form="id7" value="default" disabled="disabled" /> </td> <td> <input type="text" name="bleh2" form="id7" value="admin" disabled="disabled" /> </td> <td> <input type="checkbox" onclick="document.forms['id7']['bleh'].disabled = document.forms['id7']['bleh2'].disabled = !this.checked" /> <input type="submit" value="Edytuj" /> </td> </tr> </table> <form name="id7" id="id7" action="#"></form>

Upvotes: 0

Pete
Pete

Reputation: 58432

if you give your form a name you can reach the elements like this:

document.FORM_NAME.ELEMENT_NAME.disable

Eg

document.id7.bleh.disabled

So you can change your onclick to

<input type="checkbox" onclick="document.id7.bleh.disabled = document.id7.bleh2.disabled = !this.checked" />

Example

Using form attribute to external form

Upvotes: 2

Related Questions