I'd like to have a requiered Select for the "Brand car", the attribute is added but the problem is that I have already one value "Choose the brand name"
how can I make this work? (for the HTML5 checking)
$("#category").change(function() {
var category = parseInt($("#category").val(), 10);
switch (category){
case 2: //car
$("#car_part").show("slow");
$("#brand_car").prop('required',true);
}
....
}
<select name="category" id="category">
<option value="0">Choose the catecory</option>
<option value='2' id='cat2' > Cars </option>
<option value='88' id='cat88' > Trucks </option>
</select>
<select id="brand_car" name="brand_car">
<option id="0">Choose the brand name</option>
<option id="10" title="Audi">AUDI</option>
<option id="16" title="BMW">BMW</option>
</select>
You can add empty value to the select so it will be required if he chose "Choose the brand name"
the code will be like that:
<select name="category" id="category">
<option value="0">Choose the catecory</option>
<option value='2' id='cat2' > Cars </option>
<option value='88' id='cat88' > Trucks </option>
</select>
<select id="brand_car" name="brand_car">
<option value="" >Choose the brand name</option>
<option id="10" title="Audi">AUDI</option>
<option id="16" title="BMW">BMW</option>
</select>
How about this??
$("#category").change(function() {
var category = parseInt($("#category").val(), 10);
switch (category){
case 2: //car
$("#car_part").show("slow");
$("#brand_car").prop('required',true);
break;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select name="category" id="category">
<option value="0">Choose the catecory</option>
<option value='2' id='cat2' > Cars </option>
<option value='88' id='cat88' > Trucks </option>
</select>
<select id="brand_car" name="brand_car">
<option selected="true" style="display:none;">Choose the brand name</option>
<option id="10" title="Audi">AUDI</option>
<option id="16" title="BMW">BMW</option>
</select>
<!--If you want to display default text as option but want to disable it below will work-->
<select id="brand_car" name="brand_car">
<option selected disabled>Choose the brand name</option>name</option>
<option id="10" title="Audi">AUDI</option>
<option id="16" title="BMW">BMW</option>
</select>
Related
I have three list in my form where having same option while loading the form.
But my requirement is : as soon as user selects the first option it should be removed from second list and as user gives second option it should be removed from third list. So there are no chances to have duplicate choice.
<html>
<head>
<script language="JavaScript">
function enable_text(status)
{
status=!status;
document.f1.other_text.disabled = status;
}
</script>
</head>
<body onload=enable_text(false);>
<form name=f1 method=post>
<label>First Pref : </label>
<select name="Colors option 1">
<option value="">Select 1st</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="B">Yellow</option>
</select>
</br></br>
<label>Second Pref : </label>
<select name="Colors option 2">
<option value="">Select 2nd</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="B">Yellow</option>
</select>
</br></br>
<label>Third Pref : </label>
<select name="Colors option 3">
<option value="">Select 3rd</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="B">Yellow</option>
</select>
Here's jQuery event change on select boxes, which will disable selected option in other selects but not in selected one.
var selected = $(this).val();
$('select').not(this).find('option[value="'+selected+'"]').prop('disabled', true);
And after that will restart options that are disabled but not selected.
--I've also seted value "Y" for yellow.
$(function(){
$('select').on('change', function(){
var selected = $(this).val();
$('select').not(this).find('option[value="'+selected+'"]').prop('disabled', true);
// restart options that are disabled, but not selected anymore.
var selectedElements = "";
$('select option:selected').each(function(k,v){
selectedElements += (selectedElements!=""?",":"")+ '[value="'+$(this).val()+'"]';
});
$('select option:disabled').not(selectedElements).prop('disabled', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<form name=f1 method=post>
<label>First Pref : </label>
<select name="Colors option 1">
<option value="">Select 1st</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="Y">Yellow</option>
</select>
</br></br>
<label>Second Pref : </label>
<select name="Colors option 2">
<option value="">Select 2nd</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="Y">Yellow</option>
</select>
</br></br>
<label>Third Pref : </label>
<select name="Colors option 3">
<option value="">Select 3rd</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="Y">Yellow</option>
</select>
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>
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;}
<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">
Here I use 2 select option for show budget price,
when I select a price like 4000 then second select option show visible and display higher price than 4000.
What jquery code should I use?
Here is my code:
DEMO
pls check
<li>
<label>Budget</label>
<select name="budget_from" id="budget_from" onchange="setBudgetFinal('1','1', 'requiremant_frm','3999999','19999','5999','1');" onblur="" onfocus="" class="budget" style="width: 89px; visibility: visible;">
<option value="3999"><4000</option>
<option value="3000">3000</option>
<option value="5000">5000</option>
<option value="7000">7000</option>
<option value="9000">9000</option>
<option value="11000">11000</option>
<option value="13000">13000</option>
<option value="15000">15000</option>
<option value="17000">17000</option>
<option value="19000">19000</option>
<option value="21000">21000</option>
<option value="25000">25000</option>
<option value="30000">30000</option>
<option value="40000">40000</option>
<option value="45000">45000</option>
<option value="50000">50000</option>
<option value="55000">55000</option>
<option value="60000">60000</option>
<option value="65000">65000</option>
<option value="70000">70000</option>
<option value="75000">75000</option>
<option value="80000">80000</option>
<option value="85000">85000</option>
<option value="90000">90000</option>
<option value="95000">95000</option>
<option value="100000">1 Lac</option>
<option value="105000">1.05 Lacs</option>
<option value="110000">1.10 Lacs</option>
<option value="115000">>1.15 Lacs</option>
</select>
<span id="sc"> to</span>
<select style="visibility: visible;" disabled="" id="budget_to" name="budget_to" class="budget">
<option value="">Max Price</option>
</select>
</li>
Try this.
$('#budget_from option').on('click', function(){
$('#budget_to').find('option').not(':first').remove();
$(this).nextAll().clone(true).appendTo('#budget_to');
$('#budget_to').removeAttr('disabled');
});
Fiddle Demo