×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Dropdown, Select, Required

Dropdown, Select, Required

Dropdown, Select, Required

(OP)
Hi guys,

I have this code. It's a required dropdown. When a user selects 'Red' or 'Blue', the form should submit. When the user selects 'web' a textfield appears and that textfield is required to be filled in. My problem is, when the user selects 'Red' or 'Blue', the form does not submit. Can you please give me some idea of how to go about it? Thanks guys.

CODE

<html> 
<head>  
<script type="text/javascript">
function CheckColors(val){
 var element=document.getElementById('weburl');
 if(val=='web')
   element.style.display='block';
 else  
   element.style.display='none';
}

</script> 
</head>
<body>
<form id="form1" name="form1" method="post" action="dfgdfgdfgd.html">
  <select name="color" onchange='CheckColors(this.value);'> 
    <option>pick a color</option>  
    <option value="red">RED</option>
    <option value="blue">BLUE</option>
    <option value="web">web</option>
  </select>
<input type="text" name="weburl" required id="weburl" placeholder="URL here please" style='display:none;'/>
<input type="submit" id="Submit" name="Submit" value="Submit" />
</form>
</body>
</html> 

RE: Dropdown, Select, Required

you need to call the submit in the CheckColors function.

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006
http://www.greggriffiths.org/livelink/

RE: Dropdown, Select, Required

(OP)
Hi Ggriffit,

I've tried to call the 'submit' in the CheckColors function. Something is not right with what I've done. When I selected anything on the dropdown, it automatically submits without me clicking the Submit button. I still want users to be able to click the Submit button and also fill in the required textfield when they selected the 'web' from the dropdown.

I've added the red bit below. I've tried different things but not really working. I'm a bit stuck.

CODE

<html> 
<head>  
<script type="text/javascript">
function CheckColors(val){
 var element=document.getElementById('weburl');
 if(val=='web')
   element.style.display='block';
 else  
   element.style.display='none';
   document.form1.submit();
}

</script> 
</head>
<body>
<form id="form1" name="form1" method="post" action="dfgdfgdfgd.html">
  <select name="color" onchange='CheckColors(this.value);'> 
    <option>pick a color</option>  
    <option value="red">RED</option>
    <option value="blue">BLUE</option>
    <option value="web">web</option>
  </select>
<input type="text" name="weburl" required id="weburl" placeholder="URL here please" style='display:none;'/>
<input type="submit" id="Submit" name="Submit" value="Submit" />
</form>
</body>
</html> 

RE: Dropdown, Select, Required

sounds like you need an OnSubmit event for the form rather than the field to check that all the appropriate fields have been populated.

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006
http://www.greggriffiths.org/livelink/

RE: Dropdown, Select, Required

(OP)
Hi Ggriffit, I've tried putting onSubmit but doesn't seem to work. I am just doing it wrong I think. Can you show me how to do it in the context of the above code please? Thanks

RE: Dropdown, Select, Required

(OP)
anybody got other ideas guys?

RE: Dropdown, Select, Required

(OP)
Hi guys, I've got this code below working (somehow) except that the textfield is always showing.

I want the textfield to only show when 'web' is selected. Integrating with the original code above (element.style.display='block' & element.style.display='none') doesn't seem to work.

Can anybody give me a helping hand? thanks guys.

CODE

<html> 
<head>  
<script type="text/javascript">
function CheckColors(val){
 var element=document.getElementById("weburl");
 if(val=="web")
   element.required = true;
 else  
   element.required = false;
}

</script> 
</head>
<body>
<form id="form1" name="form1" method="post" action="dfgdfgdfgd.html">
  <select name="color" required onchange="CheckColors(this.value);" required> 
    <option value="">pick a color</option>  
    <option value="red">RED</option>
    <option value="blue">BLUE</option>
    <option value="web">web</option>
  </select>
<input type="text" name="weburl" id="weburl" placeholder="URL here please"/>
<input type="submit" id="Submit" name="Submit" value="Submit" />
</form>
</body>
</html> 

RE: Dropdown, Select, Required

try this, its a very simplified example for you, and there may be cleaner ways etc :

CODE -->

<html>
<head>
<script type="text/javascript">

function CheckColors(val){
 if(val=="web")
 {
   element.style.display = "block"
 }
 else
 {
 	element.style.display = "none";
 	element.value = "";
 }
}

function doSubmit()
{
	debugger;
	// check if the field is shown
	var isShown = (element.style.display == "block");

	// check if the field is empty
	var isEmpty = (element.value.length == 0);

	// if shown and empty error
	if ((isShown) && (isEmpty))
	{
		alert("wrong");
	}
	else
	{
		document.form1.submit();
	}
}

</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="dfgdfgdfgd.html">
  <select name="color" required onchange="CheckColors(this.value);" required>
    <option value="">pick a color</option>
    <option value="red">RED</option>
    <option value="blue">BLUE</option>
    <option value="web">web</option>
  </select>
<input type="text" name="weburl" id="weburl" placeholder="URL here please"/>
<input type="button" id="Submit" name="Submit" value="Submit" onclick="doSubmit()" />
</form>

<script language="javascript">
// shortcut to the field, has to go at the end as it wont be in the DOM before
var element=document.getElementById("weburl");

// hide the textbox to begin with
element.style.display = "none";
</script>
</body>
</html> 

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006
http://www.greggriffiths.org/livelink/

RE: Dropdown, Select, Required

(OP)
hi ggriffit, i've adopted your code and it's now working as i wanted it. thanks very much for your help mate! have a good day!


CODE

<html> 
<head>  
<script type="text/javascript">

function CheckColors(val){
 if(val=="web")
 {
   element.style.display = "block"
   element.required = true;
 }
 else
 {
 	element.style.display = "none";
 	element.value = "";
	element.required = false;
 }
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="dfgdfgdfgd.html">
  <select name="color" required onchange="CheckColors(this.value);" required> 
    <option value="">pick a color</option>  
    <option value="red">RED</option>
    <option value="blue">BLUE</option>
    <option value="web">web</option>
  </select>
<input type="text" name="weburl" id="weburl" placeholder="URL here please"/>
<input type="submit" id="Submit" name="Submit" value="Submit" />
</form>
<script language="javascript">
// shortcut to the field, has to go at the end as it wont be in the DOM before
var element=document.getElementById("weburl");

// hide the textbox to begin with
element.style.display = "none";
</script>
</body>
</html> 

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close