Html-Javascript form Validation not working - javascript

I am trying to validate that all fields of my form are filled out with Javascript, but it is just not working. I am new to web development, any help is greatly appreciated. Here is my HTML:
<form name="form" action="actionFG.php" method="post" onsubmit="return val()";>
<p>First Quarter Grade:</p>
<select name = "q1"><option selected value="0" disabled="disabled"> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<p>Second Quarter Grade:</p>
<select name = "q2">
<option selected value="0" disabled="disabled"> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<p>Third Quarter Grade:</p>
<select name = "q3">
<option selected value="0" disabled="disabled"> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<p>Fourth Quarter Grade:</p>
<select name = "q4">
<option selected value="0" disabled="disabled"> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<p><input type="submit" value="Enter"></p>
</form>
And here is my JavaScript:
function val(){
if (form.q1.selectedIndex == 0) {
alert('Please Enter Your Grade for Quarter 1');
return false;
} else if (form.q2.selectedIndex == 0) {
alert('Please Enter Your Grade for Quarter 2');
return false;
} else if (form.q3.selectedIndex == 0) {
alert('Please Enter Your Grade for Quarter 3');
return false;
} else if (form.q4.selectedIndex == 0) {
alert('Please Enter Your Grade for Quarter 4');
return false;
}
return true;
}

Working code without javascript:
<form>
<p>First Quarter Grade:</p>
<select required>
<option value=""> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<p>Second Quarter Grade:</p>
<select required>
<option value=""> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<p>Third Quarter Grade:</p>
<select required>
<option value=""> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<p>Fourth Quarter Grade:</p>
<select required>
<option value=""> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<button type="submit">submit</button>
</form>
I have just added the required attribute to the select elements, this marks them as required.
Edit
Added snippet instead of JS Bin - Thanks to evolutionxbox

Your code works for me. I had the < script > in the < head >.
Of course, I had to add this...
<input type="submit" />
</form>
Other than that, I got form validation and valid submit when all fields were filled in Chrome, IE and Firefox.

Here is a native HTML5 example how to get simple validation without using Javascript.
This simple example works fine without Javascript. What I 've done? The select elements got the required attribute. So a user has to select a value. If the value of these select elements is empty when the form is submitting, you will get an error message as a tooltip next to the empty select element.
This is the simplest way. Beyond that every modern browser handels the validation different. The tooltips with the error messages are displayed different from browser to browser. If you want a consistent layout, you have to deal with the Constraint Validation API of HTML5.
<form>
<p>
<label for="select-1">Select 1</label>
<select name="select-1" id="select-1" required>
<option hidden>choose</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</p>
<p>
<label for="select-2">Select 2</label>
<select name="select-2" id="select-2" required>
<option hidden>choose</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</p>
<button type="submit">submit</button>
</form>

Related

How to select from dropdown and reflect on the url like this sample.com/past_questions/chemistry/?exam_div=gce&exam_year=2018

<div class="row" style="margin-bottom:40px">
<div class="col-xs-12 col-sm-6">
<p><strong><label> Examination Division</strong></label>
</p>
<div>
<select type="text" name="exam_div" onchange="location = this.options[this.selectedIndex].value;" class="form-control" style="margin-bottom:15px;padding:0px 10px;font-size:16px;">
<option value selected>Select exam division </option>
<option value="https://sample.com/past-questions/chemistry/?&exam_div=jamb">JAMB</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_div=gce"> GCE</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_div=alevel">A LEVEL</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<p><strong><label>Examination Year</strong></label>
</p>
<div>
<select type="text" name="exam_div" onchange="location = this.options[this.selectedIndex].value;" class="form-control" style="margin-bottom:15px;padding:0px 10px;font-size:15.5px;">
<option value selected>Select an exam year</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2018">2018</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2017">2017</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2016">2016</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2015">2015</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2014">2014</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2013">2013</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2012">2012</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2011">2011</option>
</select>
</div>
combine the two drop downdowns into a single url that includes both the division and year
Keep it simple:
put only the div/year values on the option value, not the whole url
add the base url to a findable location with data-
add events with jquery, not onclick=
use .on("change"... on both the selects and check that both values have been entered
combine all 3 (url+2x values) into a url and redirect (commented out below)
$(".selection select").on("change", function() {
var division = $("#exam_div").val();
var year = $("#exam_year").val();
if (division === "" || year === "")
return;
var url = $(".selection").data("url") + "?exam_div=" + division + "&exam_year=" + year;
//location.href = url;
console.log(url);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='selection' data-url='https://sample.com/past-questions/chemistry'>
<div>
<p><strong>Examination Division</strong></p>
<div>
<select name="exam_div" id="exam_div">
<option value selected>Select exam division </option>
<option value="jamb">JAMB</option>
<option value="gce"> GCE</option>
<option value="alevel">A LEVEL</option>
</select>
</div>
</div>
<div>
<p><strong>Examination Year</strong>
</p>
<div>
<select name="exam_year" id="exam_year">
<option value selected>Select an exam year</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
</select>
</div>
</div>
</div>
from a UX perspective, this would be better with the click of a "GO" button rather than select on change and the change event fires when changing select options with the keyboard.
<select type="text" name="exam_div" id="examdiv" class="form-control" style="margin-bottom:15px;padding:0px 10px;font-size:15.5px;">
<option value selected>Select an exam year</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2018">2018</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2017">2017</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2016">2016</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2015">2015</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2014">2014</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2013">2013</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2012">2012</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2011">2011</option>
</select>
use jquery try this
$(document).on('click', '#examdiv', function(){
window.location.replace($('this').val());
});

grab all selected answers from a form

I am trying to grap all selected values from a page and push them into an array.
I have tried the following:
values = $.map(answers ,function(option) {
return option.value;
});
//it was working at somepoint, but apparently not anymore. is there a easier way to get this accomplished?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
</div>
<div class="input-field select2">
<p>q2</p>
<select>
<option value="" disabled selected>Choose your option</option>
<option value="2">a</option>
<option value="5">b</option>
<option value="7">c</option>
<option value="10">d</option>
<option value="12">e</option>
</select>
<!-- <label>Materialize Select</label> -->
</div>
<div class="input-field select3">
<p>What do you Find More Interesting?</p>
<select>
<option value="" disabled selected>a</option>
<option value="1">b</option>
<option value="3">c</option>
</select>
</div>

Echoing HTML select value not giving same value set

I have this html select value that I used with AngularJS in building. Anytime I print the value selected from html in php, I keep getting a different thing. Eg. I selected Computer from the select group and the value="computer", when I echo in php, I get something like this:
? string: computer ?
I can't figure what the problem is.
HTML code below
<div class="form-group" form-group-sm>
<label>Faculty/School:</label>
<select name="faculty" class="form-control" ng-model="tfaculty">
<option value="Engineering">Faculty of Engineering</option>
<option value="Medicine">Faculty of Medicine</option>
<option value="Agriculture">Faculty of Agriculture</option>
<option value="Bioscience">Faculty of Bioscience</option>
<option value="Physical Science">Faculty of Physical Science</option>
<option value="Law">Faculty of Law</option>
<option value="Mgt Tech">Faculty of Management Sci./Tech.</option>
<option value="Soc. Science">Faculty of Social Science</option>
<option value="Health Sci.">Faculty of Health Sci. and Tech.</option>
<option value="Envt Tech">Faculty of Environmental Sci./Tech.</option>
<option value="Education">Faculty of Education</option>
<option value="Arts">Faculty of Arts</option>
</select>
</div>
<!--this section shows to choose department-->
<div class="form-group" form-group-sm>
<span ng-show="tfaculty == 'Engineering'">
<label>Department:</label>
<select name="department" class="form-control" ng-model="tdepartment">
<option value="Elect Elect Eng">Electrical and Electronics</option>
<option value="Computer Eng">Computer Engineering</option>
<option value="Chemical Eng">Chemical Engineering</option>
<option value="Civil Eng">Civil Engineering</option>
<option value="Petroleum Eng">Petroleum Engineering</option>
<option value="Mechanical Eng">Mechanical Engineering</option>
<option value="Polymer Eng">Polymer and Textile</option>
<option value="Met Mat Eng">Material and Metallurgical</option>
<option value="Agric and Bio">Agric and BioResources</option>
<option value="Mechatronics Eng">Mechatronics Engineering</option>
</select>
</span>
<span ng-show="tfaculty == 'Medicine'">
<label>Department:</label>
<select name="department" class="form-control" ng-model="tdepartment">
<option value="Surgery">Surgery</option>
<option value="Anaesthesiology">Anaesthesiology</option>
<option value="Chemical Pathology">Chemical Pathology</option>
<option value="Haematology">Haematology</option>
<option value="Histopathology">Histopathology</option>
<option value="Medicine">Medicine</option>
<option value="pthamology">Opthamology</option>
<option value="Paediatrics">Paediatrics</option>
<option value="Radiology">Radiology</option>
<option value="Medical Microbiology">Medical Microbiology</option>
<option value="Anatomy">Anatomy</option>
<option value="Physiology">Physiology</option>
</select>
</span>
<span ng-show="tfaculty == 'Agriculture'">
<label>Department:</label>
<select name="department" class="form-control" ng-model="tdepartment">
<option value="Agric Economics">Agric Economics and Extension</option>
<option value="Crop Science">Crop Science and Horticulture</option>
<option value="Animal Science">Animal Science</option>
<option value="Forestry">Forestry and Widelife</option>
<option value="Fisheries">Fisheries and Aquaculture</option>
<option value="Food Science">Food Science and Technology</option>
<option value="Soil Science">Soil Science and Land Resources</option>
</select>
</span>
Php code below:
if (isset($_POST['search'])) { //narrowing d search by department
$department = $_POST['department'];
echo $department;}

Display value in input field from multiple select field

<select name="place_have" class="form-control" multiple>
<option value="locker">locker</option>
<option value="storage">storage</option>
<option value="bathroom">bathroom</option>
<option value="food">food</option>
<option value="parking">parking</option>
<option value="play ground">play ground</option>
<option value="smoking room">smoking room</option>
</select>
Values selected above should display in another input text field below. Any help?
Using jQuery:
$("select[name='place_have']").change(function(){
var value = $(this).val();
$("input#optionOutput").val(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="place_have" class="form-control" multiple>
<option value="locker">locker</option>
<option value="storage">storage</option>
<option value="bathroom">bathroom</option>
<option value="food">food</option>
<option value="parking">parking</option>
<option value="play ground">play ground</option>
<option value="smoking room">smoking room</option>
</select>
<input type="text" id="optionOutput">

Control Multiple dropdown box by one main dropdown box

I am trying to create a main drop down box which control multiple drop down box. This multiple drop down box created in loop so i need dynamic script which works on class or id.
example -
<form method="post" name="postage">
Select All
<select id="options1" name="se1" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
Select Manually-
<select id="options2" name="se2" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
<select id="options3" name="se3" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
<select id="options3" name="se4" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
<input type="submit" name="submit_result" />
</form>
I found one script but i don't know where to change -
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
$('.west-yorkshire').change(function({
var value = $(this).val();
$('.className').each(function(
$(this).val(value);
alert(value);
));
}));
}//]]>
</script>
Is this what you were trying to achieve ? http://jsfiddle.net/9R9DV/2/
Changed some JS code
$(document).ready(function(){
$('#options1').change(function(){
var value = $(this).val();
$('.manual').each(function(){
$(this).val(value);
});
});
});
and classes to HTML code
<select class="manual" id="options2" name="se2" >
...
<select class="manual" id="options3" name="se3" >
...
etc.

Categories

Resources