[SOLVED] help with checkbox and textfield in form

[BRONIC]

I am having trouble in getting this form to work.
i am trying to make sure that if the 'other' checkbox is checked and the other textbox is empty then an alert tells the user they need to fill in the box, and when the box is not checked it does nothing.


here is my form:

HTML: Select all

<script type="text/javascript">
function showHide(id){ 
   el = document.getElementById(id); 
   el.style.display = (el.style.display != 'block')? 'block' : 'none';
}
</script>

<form name="change" action="resize.php?action=change" id="change" method="POST">
	<p>Your Style: <input type='text' 	name='style'></p>
	<p>Your Bio(less than 300 words):<br><textarea name="bio" cols="100" rows"10"></textarea></p>
	<p>What categories would you like to display?<br>
	<Input type = 'Checkbox' Name ='web' value= '1'> Websites<br>
	<Input type = 'Checkbox' Name ='art' value= '1'> Traditional Artwork<br>
	<Input type = 'Checkbox' Name ='ani' value= '1'> Animations<br>
	<Input type = 'Checkbox' Name ='vid' value= '1'> Video<br>
	<Input type = 'Checkbox' Name ='pho' value= '1'> Photography<br>
	<Input type = 'Checkbox' Name ='mus' value= '1'> Music<br>
	<input name ='oth' type = 'Checkbox' onClick="showHide('other_text')" value= '1'> 
	Other<br>
    <div id="other_text" style="display:none">If other, please specify:
      <input type='text' name='other'></div>
    <p>
	</p>
	Choose a background color:<br>
	<Input type = 'Radio' Name ='color' value= 'red'> Red<br>
	<Input type = 'Radio' Name ='color' value= 'blue'> Blue<br>
	<Input type = 'Radio' Name ='color' value= 'green'> Green<br>
	<Input type = 'Radio' Name ='color' value= 'black'> Black<br>
	<Input type = 'Radio' Name ='color' value= 'grey'> Grey<br>
	<Input type = 'Radio' Name ='color' value= 'orange'> Orange<br>
	<Input type = 'Radio' Name ='color' value= 'purple'> Purple<br>
	<Input type = 'Radio' Name ='color' value= 'yellow'> Yellow<br>
  <p><input type='submit' name='Submit' value='Update Page' onClick=""></p>
</form>

here is the link to the page:
here

[spinal007]

<input type='submit' onclick="{PUT YOUR VALIDATION HERE}"

[BRONIC]

Well i know that but im having trouble checking that the box is checked AND the text field is filled in.

[aso186]

Gather all the checkboxes in an array and add the values. If the total is equal to zero, no checkbox was selected. For the text field, just check the value length is greater than or equal to one.

Code: Select all

if (checkboxes.total == 0 || textfield.value <= 1) {
    return false;
}

[BRONIC]

Originally Posted by aso186

Gather all the checkboxes in an array and add the values. If the total is equal to zero, no checkbox was selected. For the text field, just check the value length is greater than or equal to one.

Code: Select all

if (checkboxes.total == 0 || textfield.value <= 1) {
    return false;
}

yes but then if any of the check boxes were checked then you would have to fill out the text field, but it is only shown when the 'other' chkbox is checked.

[spinal007]

- Add an id to your checkbox:
<input name='oth' id='oth'

- Add an id to your textbox:
<input type='text' name='other' id='other'

- Use this to checked whether the 'other' textbox is selected:
document.getElementById('oth').checked

- Slight change to aso's suggestion, which will work on if textfield.value is empty or null
(textfield.value || '').length <= 0

- Another change to aso's suggestion: checked AND empty (not OR)

- Then you end up with this:

Code: Select all

if(document.getElementById('oth').checked && (document.getElementById('other').value || '').length <= 0) {
 return false;
}

You should be able to make this work now...

[BRONIC]

HTML: Select all

<script type="text/javascript">
function showHide(id){ 
   el = document.getElementById(id); 
   el.style.display = (el.style.display != 'block')? 'block' : 'none';
}
function check(form)
    if(document.getElementById('other_check').checked && (document.getElementById('other_textbox').value || '').length <= 0) {
         alert('The box labeled "Other" was checked but you didn\'t enter a category into the text box');
    else {
        form.submit();
    }
}
</script>

<form name="change" action="resize.php?action=change" id="change" method="POST">
    <p>Your Style: <input type='text'     name='style'></p>
    <p>Your Bio(less than 300 words):<br><textarea name="bio" cols="70" rows"50"></textarea></p>
    <p>What categories would you like to display?<br>
    <Input type = 'Checkbox' Name ='web' value= '1'> Websites<br>
    <Input type = 'Checkbox' Name ='art' value= '1'> Traditional Artwork<br>
    <Input type = 'Checkbox' Name ='ani' value= '1'> Animations<br>
    <Input type = 'Checkbox' Name ='vid' value= '1'> Video<br>
    <Input type = 'Checkbox' Name ='pho' value= '1'> Photography<br>
    <Input type = 'Checkbox' Name ='mus' value= '1'> Music<br>
    <input name ='oth' type = 'Checkbox' id="other_check" onClick="showHide('other_text')" value= '1'> 
    Other<br>
    <div id="other_text" style="display:none">If other, please specify:
      <input type='text' id="other_textbox" name='other'></div>
    <p>
    </p>
    Choose a background color:<br>
    <Input type = 'Radio' Name ='color' value= 'red'> Red<br>
    <Input type = 'Radio' Name ='color' value= 'blue'> Blue<br>
    <Input type = 'Radio' Name ='color' value= 'green'> Green<br>
    <Input type = 'Radio' Name ='color' value= 'black'> Black<br>
    <Input type = 'Radio' Name ='color' value= 'grey'> Grey<br>
    <Input type = 'Radio' Name ='color' value= 'orange'> Orange<br>
    <Input type = 'Radio' Name ='color' value= 'purple'> Purple<br>
    <Input type = 'Radio' Name ='color' value= 'yellow'> Yellow<br>
  <p><input type='submit' name='Submit' value='Update Page' onClick="try{ check(this.form); }catch(e){}; return false;"></p>
</form>

[spinal007]

I'm sorry, I edited your post when I meant to copy your code. Bad moderator! bad!

Here's what I think you should have:

HTML: Select all

<script type="text/javascript">
function showHide(id){ 
   el = document.getElementById(id); 
   el.style.display = (el.style.display != 'block')? 'block' : 'none';
}
function check(form)
    if(document.getElementById('other_check').checked && (document.getElementById('other_textbox').value || '').length <= 0) {
         alert('The box labeled "Other" was checked but you didn\'t enter a category into the text box');
    else {
        form.submit();
    }
}
</script>

<form name="change" action="resize.php?action=change" id="change" method="POST">
    <p>Your Style: <input type='text'     name='style'></p>
    <p>Your Bio(less than 300 words):<br><textarea name="bio" cols="70" rows"50"></textarea></p>
    <p>What categories would you like to display?<br>
    <Input type = 'Checkbox' Name ='web' value= '1'> Websites<br>
    <Input type = 'Checkbox' Name ='art' value= '1'> Traditional Artwork<br>
    <Input type = 'Checkbox' Name ='ani' value= '1'> Animations<br>
    <Input type = 'Checkbox' Name ='vid' value= '1'> Video<br>
    <Input type = 'Checkbox' Name ='pho' value= '1'> Photography<br>
    <Input type = 'Checkbox' Name ='mus' value= '1'> Music<br>
    <input name ='oth' type = 'Checkbox' id="other_check" onClick="showHide('other_text')" value= '1'> 
    Other<br>
    <div id="other_text" style="display:none">If other, please specify:
      <input type='text' id="other_textbox" name='other'></div>
    <p>
    </p>
    Choose a background color:<br>
    <Input type = 'Radio' Name ='color' value= 'red'> Red<br>
    <Input type = 'Radio' Name ='color' value= 'blue'> Blue<br>
    <Input type = 'Radio' Name ='color' value= 'green'> Green<br>
    <Input type = 'Radio' Name ='color' value= 'black'> Black<br>
    <Input type = 'Radio' Name ='color' value= 'grey'> Grey<br>
    <Input type = 'Radio' Name ='color' value= 'orange'> Orange<br>
    <Input type = 'Radio' Name ='color' value= 'purple'> Purple<br>
    <Input type = 'Radio' Name ='color' value= 'yellow'> Yellow<br>
  <p><input type='submit' name='Submit' value='Update Page' onClick="try{ check(this.form); }catch(e){}; return false;"></p>
</form>

[BRONIC]

Originally Posted by spinal007

I'm sorry, I edited your post when I meant to copy your code. Bad moderator! bad!

Thats ok, thanks for the help. it worked great.

Thanks
-BRONIC