Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Dropdown, Select, Required 1

Status
Not open for further replies.
berkshirea

berkshirea

Technical User
Mar 22, 2009
97
GB
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>
 
Sort by date Sort by votes
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';
   [COLOR=#EF2929]document.form1.submit();[/color]
}

</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>
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Dropdown (option) using Anguarjs
Replies
0
Views
398
TheLazyPig
TheLazyPig
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
456
malpa
malpa
mayamanako
  • Locked
  • Question
Only Visible Radio Buttons Are Required 1
Replies
4
Views
146
mayamanako
mayamanako
damipera
  • Locked
  • Question
Checkboxes - At Least 1 is Selected? 1
Replies
2
Views
124
damipera
damipera
bach1
  • Locked
  • Question
How to get value from popup window to parent window by clicking from database selection?
Replies
2
Views
139
Offera
Offera

Part and Inventory Search

Sponsor

Back
Top