Disabling Certain Elements

kb posted this at 15:02 — 15th July 2003.

Joined: Feb 2002

Hey guys...

Basically, what i want to do is disable certain elements of a form if a radio button is clicked...in this example i want everything with the id of "child" to be disabled if the radio button with the id of "single" is currently selected:

<tr><td><p>Type of Membership:</p></td><td><input id="single" type="radio" name="membership" value="single">Single</input><br /><input id="married" type="radio" name="membership" value="family">Married</input></td</tr>
<tr><td colspan="2"><hr /></td></tr>
<tr><td><p><br />Name(s):</p></td><td><p><br />Date of Birth:</p></td></tr>
<tr><td>Child 1:&nbsp;&nbsp;&nbsp;<input id="child" type="text" maxchar="15" size="15" name="child1" /></td><td>
<select  id="child" name="month1"><option><br /></option><option>Janurary</option><option>Feburary</option><option>March</option><option>April</option><option>May</option><option>June</option><option>July</option><option>August</option><option>September</option><option>October</option><option>November</option><option>December</option></select>
<select  id="child" name="date1"><option><br /></option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option></select>

i figured it had to do with JS, and i was looking here, but i couldn't wrap my head around it

i'm not asking necessarily for code, as i would like to figure it out myself. if you guys could point me in the right direction, that would be great (my JS skills are minimal, so links would help as well)

thanks

KeithMcL posted this at 18:51 — 15th July 2003.

He has: 176 posts

Joined: Oct 1999

Have a read of the articles below:

http://www.javascriptkit.com/javatutors/deform.shtml
http://tech.irt.org/articles/js131/
http://www.webdevelopersjournal.com/articles/javascript_validate_form.html

Hope they help

kb posted this at 15:20 — 16th July 2003.

He has: 1,380 posts

Joined: Feb 2002

Ok, I changed what I wanted to do...

if "single" (radio button) is selected, and they have text inside a field called "child", then an alert comes up...but how do I check for a radio button to be selected? the below code is what i have:

<!-- Begin Javascript Form Disabler -->
&lt;script type="text/javascript"&gt;
function checkifselected()
if {(document.form.single.value=!")
if (document.form.child1.value==")
alert("You can not have a single membership and a child listed.")
}
/* End Javascript Form Disabler */
&lt;/script&gt;

KeithMcL posted this at 20:50 — 16th July 2003.

He has: 176 posts

Joined: Oct 1999

Are you planning on having just the one radio button in the form or more?

kb posted this at 16:24 — 17th July 2003.

He has: 1,380 posts

Joined: Feb 2002

there are 2 radio buttons in this form, thats it

if the one (above mentioned) is "checked" then it does above (filled in=alert), but if the other one is "checked" then it does another JS alert, based on whether those text boxes are empty (empty=alert)

KeithMcL posted this at 20:29 — 18th July 2003.

He has: 176 posts

Joined: Oct 1999

OK, I think I got it now. Try the following code:

<!-- Begin Javascript Form Disabler -->
&lt;script type="text/javascript"&gt;
function checkifselected()
if { (document.form.getElementById("single").checked && document.form.child1.value != '')
alert("You can not have a single membership and a child listed.")
}
if { (document.form.getElementById("multiple").checked && document.form.child2.value == '')
alert("You can not have a multiple membership and not select a child.")
}
/* End Javascript Form Disabler */
&lt;/script&gt;

'Replace the word "multiple" with whatever you plan on calling the second radio button and the word "child2" with the name of the second text box. I'm only a beginner when it comes to jaavascript, so I'm not 100% sure this will work. LEt me know either way.

Abhishek Reddy posted this at 06:03 — 19th July 2003.

He has: 3,348 posts

Joined: Jul 2001

The code is somewhat out of order. Brackets misplaced?

<!-- Begin Javascript Form Disabler -->
&lt;script type="text/javascript"&gt;
function checkifselected()
  {
    if (document.form.getElementById("single").checked && document.form.child1.value != '') {
      alert("You can not have a single membership and a child listed.");
    }
    if (document.form.getElementById("multiple").checked && document.form.child2.value == '') {
      alert("You can not have a multiple membership and not select a child.");
    }
  }
/* End Javascript Form Disabler */
&lt;/script&gt;

'
Might work better.

KeithMcL posted this at 12:40 — 19th July 2003.

He has: 176 posts

Joined: Oct 1999

Thanks for cleaning it up

I'm still learning Javascript, so it's to be expected

Abhishek Reddy posted this at 13:55 — 19th July 2003.

He has: 3,348 posts

Joined: Jul 2001

I'm not certain that'll work either... I only fixed the obvious syntax errors... might have another look at it later.

kb posted this at 19:09 — 19th July 2003.

He has: 1,380 posts

Joined: Feb 2002

ok thanks...

i'll check it out and get back to you guys

kb posted this at 19:40 — 19th July 2003.

He has: 1,380 posts

Joined: Feb 2002

well, i tried it, and a few modifications, and it didn't work...and then i had a thought...probably because i haven't set it to work "onSubmit"...so heres the modifications:

&lt;script type="text/javascript" language="javascript"&gt;
onSubmit(function checkifselected());
  {
    if (document.form.getElementById("single").checked && document.form.getElementById("child1").value != '') {
      alert("You can not have a single membership and a child listed.");
    }
    if (document.form.getElementById("married").checked && document.form.getElementById("child1").value == '') {
      alert("You can not have a multiple membership and not select a child.");
    }
  }
/* End Javascript Form Disabler */
&lt;/script&gt;

'
all i did was add the onSubmit, which i am not sure is entirely right, but that doesn't work in any case...and i just changed the "name" field to get...byid

KeithMcL posted this at 20:10 — 19th July 2003.

He has: 176 posts

Joined: Oct 1999

Try adding onSubmit to the action of the form instead:

<form action="yourpage.html" method="post" onsubmit="return checkifselected(this);">

Abhishek Reddy posted this at 07:50 — 20th July 2003.

He has: 3,348 posts

Joined: Jul 2001

Also chance document.forms.getElementById to simply document.getElementById -- forms is unnecessary

kb posted this at 15:48 — 20th July 2003.

He has: 1,380 posts

Joined: Feb 2002

wow, this is really pathetic...i still can't get it to work...

forget this way, i'm gonna try something else. i'll post another thread if i need to. thanks anyways...lol

KeithMcL posted this at 00:40 — 22nd July 2003.

He has: 176 posts

Joined: Oct 1999

Kyle,

I decided not to give up on this and I eventually got it sorted
Here's the code:

<html>
<head>
<title>Disabling Certain Elements</title>
&lt;script type="text/javascript"&gt;
<!--
function checkifselected() {
var d = document.mbrship;
if ((d.membership[0].checked) && (d.child1.value != '')) {
alert("You can not have a single membership and a child listed.");
return false;
}
if (d.membership[1].checked && d.child1.value == '') {
alert("You can not have a family membership without entering a child.");
return false;
}
}
// -->
&lt;/script&gt;
</head>
<body>
<form action="#" method="post" onsubmit="return checkifselected();" name="mbrship">
<table>
	<tr>
		<td><p>Type of Membership:</p></td>
		<td>
		<input id="single" type="radio" name="membership" value="single">Single</input>
		<input id="married" type="radio" name="membership" value="family">Married</input>
		</td
	</tr>
	<tr>
		<td colspan="2"><hr />
		</td>
	</tr>
	<tr>
		<td>
		<p><br />Name(s):</p></td><td><p><br />Date of Birth:</p>
		</td>
	</tr>
	<tr>
		<td>Child 1: <input id="child" type="text" maxchar="15" size="15" name="child1" />
		</td>
		<td>
		<select id="child" name="month1">
		<option>&nbsp;</option>
		<option>Janurary</option>
		<option>Feburary</option>
		<option>March</option>
		</select>
		<select id="child" name="date1">
		<option>&nbsp;</option><option>1</option><option>2</option><option>3</option>
		</select>
		<input type="submit" name="submit" value="Submit" />
		</td>
	</tr>
</table>
</form>
</body>
</html>

'You'll have the add back in the rest of the select options, change the alert messages and add the action to the form, but it should work fine now.

I saw your other post for using PHP, but I still think you should incorporate client side validation too.

Let me know how it works out for you!

kb posted this at 17:07 — 22nd July 2003.

He has: 1,380 posts

Joined: Feb 2002

thanks, but i decided it will take less time and be easier on the visitors if it is all through PHP...i don't like alert boxes, personally...lol thanks for the help though! you helped me to better understand JS

KeithMcL posted this at 20:41 — 22nd July 2003.

He has: 176 posts

Joined: Oct 1999

Ok, I enjoyed working on it, caus it helped me better understand js too