I have this javascript to see if the drop-down is selected. If not an error message is displayed. The problem is that the code works in IE9 and 8, but not in Chrome.
The simple solution to this is to add the "required" attribute to the tag, but I want to know the reason that code isn't working.
<form name="form1" action="insert.php" method="post" onsubmit="return validateForm()">
<table name="table1">
<tr>
<td>
<select name="fruits">
<option selected disabled>Please Select</option>
<option value="banana>banana</option>
<option value="apple>apple</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="Submit"/>
</form>
<script type="text/javascript">
function validateForm()
{
var x=document.forms["form1"]["fruits"].value;
if (x==null || x=="")
{
alert("Please Select Fruit");
return false;
}
}
</script>
please review this code,required is the html5 attribute and by default check for empty values
<form name="form1" action="insert.php" method="post" onSubmit="return validateForm()">
<table name="table1">
<tr>
<td>
<select name="fruits">
<option value=" " disabled>Please Select</option>
<option value="banana">banana</option>
<option value="apple">apple</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="Submit" />
</form>
<script>
function validateForm() {
var x = document.forms["form1"]["fruits"].value;
if (x == null || x == " ") {
alert("Please Select Fruit");
return false;
}
}
</script>
Demo here: http://jsfiddle.net/2zgGM/
Related
Hope you all are fine . I have a problem my javascript function is not being called i dont know why
I am very confused why the function is not calling I used this same flow in my another form too that was also working fine but here Its a mess
Kinldy have a look on code and help me
Thanks
javascript:
function checkPriceValidation(){
var flight=document.getElementById('flightno').value;
var type=document.getElementById('type').value;
var price=document.getElementById('price').value;
if(flight==="volvo"){
alert("Please select flight number !!");
return false;
}
else if(type==="default"){
alert("Please select type!!");
return false;
}
else if(price===""){
alert("Please select the price !!");
return false;
}
return false;
}
html :
<form
class=""
method="post"
onsubmit="return javascript:checkPriceValidation();"
action="<%=response.encodeURL(request.getContextPath()+"/FillList")%>"
>
<div style="color:red;font-size:18px ">${error}</div>
<% session.setAttribute("error", "");%>
<table>
<tr>
<td>
<div class="form-control" style="width: auto">
<select style="color: black" name="flightno" >
<option value="volvo">Select Flight</option>
<%
ArrayList<FlightClass> list;
list = (ArrayList<FlightClass>) request.getSession().getAttribute("list");
for (FlightClass post : list) {
%>
<option><%=post.getID()%></option>
<% } %>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-control" style="width: auto">
<select style="color: black" name="type">
<option value="default">Select Type</option>
<option>Economy</option>
<option>Business</option>
<option>First Class</option>
</select>
</div>
</td>
<td>
<input
type="number"
min="0"
step="1"
class="form-control"
name="price"
id="price"
placeholder="Price"
/>
</td>
</tr>
</table>
<br/>
<button input-type="submit" value="Submit" class="btn btn-lg btn-primary" >SET</button>
</form>
In your onsubmit attribute, you should just use return checkPriceValidation(). Try out the code below and see the difference
function submitThis(){
alert('Hi there');
return false;
}
<form onsubmit="return javascript:submitThis()">
<button>This form will be submitted</button>
</form>
<form onsubmit="return submitThis()">
<button>This form will not be submitted</button>
</form>
I want the visitors to be able to open the search form in a new tab when they selckt the checkbox.
And I have trouble getting TARGET = "_ blank" in the select menu to work.
Thanks in advance!
<html>
<head>
<title></title>
<script language="JavaScript">
function dosearch() {
var sf=document.F;
var submitto = sf.sengines.options[sf.sengines.selectedIndex].value + escape(sf.searchit.value);
window.open(submitto,'bottom');
return false;
}
</script>
</head>
<body onLoad="document.F.searchit.focus();">
<table width="100%" border="0"><tr align="left" valign="top"><td width="200">
<form name="guideform">
In:
<select name="guidelinks" onChange="window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value + document.F.searchit.value">
<option value="downloads.html?downloads=selected&searchit=">Downloads</option>
</select>
</form></td>
<td><form name="F" onSubmit="return dosearch();">
Search:
<select name="sengines">
<option value="http://download.cnet.com/s/" >Download.com</option>
<option value="http://filehippo.com/search?q=" TARGET="_blank">Filehippo</option>
</select>
For:
<input name="searchit" value="" type="text" size="45">
<input type="submit" name="SearchSubmit" value="Search">
<input type="checkbox" name="Newtab" target="_blank">New tab
</form></td>
<td width="1"></td></tr></table>
</body>
</html>
Try:
<option>
Filehippo
</option>
There are about 6-7 <select> items in a <table> column. In order to press Submit button, the condition is all <select> items should be selected. So how this can be done using Javascript..?
The sample code seems to be like this:
<table>
<tr>
<td><select name="name1" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "10" >10</option>
</select>
</td>
</tr>
<tr>
<td><select name="name2" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "20" >20</option>
</select>
</td>
</tr>
<tr>
<td><select name="name3" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "30" >30</option>
</select>
</td>
</tr>
</table>
<table id="mytable">
<tr>
<td>
<select name="name1" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "10" >10</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="name2" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "20" >20</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="name3" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "30" >30</option>
</select>
</td>
</tr>
</table>
<form action="" method="post" onsubmit="if(!check()) return false;">
<input type="submit" />
</form>
<script type="text/javascript">
function check() {
elements=document.getElementById("mytable").getElementsByTagName("select");
for(i=0;i<elements.length;i++){
if(elements[i].value == "--") { return false; }
}
return true;
}
</script>
var arr=new Array();
status=true;
function fnc()
{
elements=document.getElementById("atable").getElementsByTagName("option");
for(i=0;i<elements.length;i++)
{
arr=elements[i].value;
if(Number(arr)=='NaN')
{
status=false;
break;
}
console.log(Number(arr));
}
if(status==true)
document.getElementById("formname").submit();
}
you also give your table an id
<table id="atable">
One option is to use the jQuery validation plugin, then add "required" to all your select fields.
<form id="my_form">
<select name="select1" class="required"> ... </select>
<select name="select2" class="required"> ... </select>
<select name="select3" class="required"> ... </select>
....
</form>
Then the javascript is as simple as -
$('#my_form').validate();
All you need to do to use the plugin is include the jQuery and jQuery validation scripts in the page head
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
....
</head>
UPDATE
Obviously your requirement is a pretty simple one, and adding a full js library to your site for this use case is definitely over-kill. If this is the only validation you're going to do I'd recommend a pure js solution (such as polin's answer). However if you're likely to have further validation requirements on your site, then the jQuery validation plugin is quite powerful.
I have the following code that when i change the drop down it doesnt matter which i choose it always puts the first part as the selected....
<script type="text/javascript">
function changeValue(){
var option=document.getElementById('block').value;
if(option=="1"){
document.getElementById('a').value="18005551212";
document.getElementById('b').value="PW";
}
else if(option=="2"){
document.getElementById('a').value="5551212";
document.getElementById('b').value="Collector";
}
if(option=="3"){
document.getElementById('a').value="3";
document.getElementById('b').value="3";
}
else if(option=="4"){
document.getElementById('a').value="4";
document.getElementById('b').value="4";
}
}
</script>
<form method="post">
<table> <tr><b>Add new data using form below</b></tr>
<tr><td> Keyword: </td><td> <input type="text" name="keyword" id="keyword"><br></td></tr>
<tr><td> Block?: </td><td><select name="block" id="block" onchange="changeValue();">
<option id="block1" value="1">Block 1</option>
<option id="block2" value="2">Block 2</option>
<option id="block3" value="3">Block 3 </option>
<option id="block4" value="4">Block 4</option>
<option id="block5" value="5">Block 5</option>
</select><br></td></tr>
<tr><td> Phone #:</td><td> <input type="text" name="phone" id="a"><br></td></tr>
<tr><td> Reason: </td><td> <input type="text" name="reason" id="b"><br></td></tr>
<tr><td> </td><td align="left"> <input type="submit" name="submit" value="Submit Data"></td></tr>
</table>
</form>
So when i select option 2 it should show collector and phone #...
You're missing a <td colspan="2"> in your first row, but regardless, your code works fine. Test here.
Go on jsfiddle.net and paste your code in. The code you provided works.
I'd like to show / hide a div within a td tag based on the select value chosen. I cannot get the label text to appear, only the textbox. Can someone please give me a hand with this?
Here is my code so far
<script>
function toggleOther(chosen){
if (chosen == 'oth') {
document.myform.other.style.visibility = 'visible';
} else {
document.myform.other.style.visibility = 'hidden';
document.myform.other.value = '';
}
}
</script>
<form name="myform">
<tr>
<td>
<select name="values" size="1" onchange="toggleOther( document.myform.values.options[ document.myform.values.selectedIndex ].value );">
<option value=" " selected="selected"> </option>
<option value="name">Name</option>
<option value="age">Age</option>
<option value="oth">Other</option>
</select>
</td>
<td>
<div style="visibility:hidden">
<label>adfdasfgsfg</label>
<input type="text" name="other" value="" size="25" />
</div>
</td>
</tr>
</form>
Give the element an id:
<div id="Other" style="visibility:hidden">
Now you can easily access it in the code:
document.getElementById('Other').style.visibility = 'visible';
Edit:
Here's the code with the changes, tested and working:
<script>
function toggleOther(chosen){
if (chosen == 'oth') {
document.getElementById('Other').style.visibility = 'visible';
} else {
document.getElementById('Other').style.visibility = 'hidden';
document.myform.other.value = '';
}
}
</script>
<form name="myform">
<tr>
<td>
<select name="values" size="1" onchange="toggleOther( document.myform.values.options[
document.myform.values.selectedIndex ].value );">
<option value=" " selected="selected"> </option>
<option value="name">Name</option>
<option value="age">Age</option>
<option value="oth">Other</option>
</select>
</td>
<td>
<div id="Other" style="visibility:hidden">
<label>adfdasfgsfg</label>
<input type="text" name="other" value="" size="25" />
</div>
</td>
</tr>
</form>
The problem is that you have set visibility on your containing <div> to hidden but your javascript is only showing your input. (document.myform.other.style.visibility)
To make it work, simply give your <div> an id and show and hide that instead:
// ... snip ...
function toggleOther(chosen){
var piece_to_hide = document.getElementById("otherValues");
if (chosen == 'oth') {
piece_to_hide.style.display = 'block';
} else {
piece_to_hide.style.display = 'none';
document.myform.other.value = '';
}
}
// ... snip ...
<div id="otherValues" style="display:none">
<label>adfdasfgsfg</label>
<input type="text" name="other" value="" size="25" />
</div>