Display value in input field from multiple select field - javascript

<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">

Related

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>

Html-Javascript form Validation not working

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>

Set selected option to multiple list using jQuery

I have a list from DB which is displayed in select multiple tags:
<select multiple="multiple" id="list" name="color">
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
<option value="4">Magenta</option>
<option value="5">Black</option>
<option value="6">Cyan</option>
<option value="7">Yellow</option>
</select>
Given an array of values from DB, need to select only those items that are found in the DB array, for example [2,4,7]. How do I push, with jQuery, attr('selected') to these option tags?
<select multiple="multiple" id="list" name="color">
<option value="1">Red</option>
<option value="2" selected="selected">Green</option>
<option value="3">Blue</option>
<option value="4" selected="selected">Magenta</option>
<option value="5">Black</option>
<option value="6">Cyan</option>
<option value="7" selected="selected">Yellow</option>
</select>
Like above.
You've just to use the .val() method to achieve that :
$('#list').val([2,4,7]);
$('#list').val([2,4,7]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple" id="list" name="color">
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
<option value="4">Magenta</option>
<option value="5">Black</option>
<option value="6">Cyan</option>
<option value="7">Yellow</option>
</select>
For the sake of completeness, I thought I would add a plain javascript solution.
Here's what I came up with, using an array, a loop, document.querySelector and setAttribute:
var preSelected = [2,4,7];
for (var i = 0; i < preSelected.length; i++) {
var option = document.querySelector('#list option[value="' + preSelected[i] + '"]');
option.setAttribute('selected','selected');
}
<select multiple="multiple" id="list" name="color">
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
<option value="4">Magenta</option>
<option value="5">Black</option>
<option value="6">Cyan</option>
<option value="7">Yellow</option>
</select>

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.

How to enable/disable drop down list box in HTML + Javascript/JQuery?

I have 2 drop down lists of pairs of name IMEI's and cities, as following:
<HTML>
<body>
Select Programming font:
<select name="IMEI">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">$</option>
</select>
<select name ="city">
<option value="jhansi">Jhansi</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kanpur">Kanpur</option>
</select>
</body>
</html>
The desired behavior is: when one selects a city name, the IMEI list enables; otherwise it is disabled.
How can I achieve this?
Thanks in advance!
Fiddle Demo
$(function () {
var sel_imie = $('select[name="IMEI"]');
sel_imei.prop('disabled', true); //disable IMEI select
$('select[name ="city"]').change(function () {
sel_imei.prop('disabled', false); //enable when value of city select is changed
});
});
.change()
Try this,
<select name="IMEI" disabled="disabled" id="IMEI">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">$</option>
</select>
<select name ="city" id="city">
<option value="jhansi">Jhansi</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kanpur">Kanpur</option>
</select>
Script
$('#city').on('change',function(){
$('#IMEI').attr('disabled',false);
});
Demo:http://jsfiddle.net/khmSm/
Select Programming font:
<select name="IMEI" disabled="disabled">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">$</option>
</select>
<select name="city">
<option value="">Select...</option>
<option value="jhansi">Jhansi</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kanpur">Kanpur</option>
</select>
document.getElementsByName('city')[0].addEventListener('change', function(e){
var imei = document.getElementsByName('IMEI')[0];
var city = e.target;
imei.disabled = city.value != '' ? '' : 'disabled';
});
try this way
HTML CODE:
CITY :<select name="city">
<option value="jhansi">Jhansi</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kanpur">Kanpur</option>
</select>
<br/>
IMEI :<select name="IMEI">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">$</option>
</select>
JQUERY CODE:
$('select[name=IMEI]').prop('disabled',true);
$('select[name=city]').on('change',function () {
$('select[name=IMEI]').prop('disabled',false);
});
LIVE DEMO:
http://jsfiddle.net/dreamweiver/TvpRF/7/
Happy Coding :)
<select name="IMEI" disabled="disabled" id="IMEI">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">$</option>
</select>
<select name ="city" id="city">
<option value ="choose">Choose a city</option>
<option value="jhansi">Jhansi</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kanpur">Kanpur</option>
</select>
Here is the link : http://jsfiddle.net/khmSm/1/
Disable select and update the plugin. Use trigger chosen:updated to disable the select widget.
$('#RefundType').prop('disabled', true).trigger("chosen:updated");

Categories

Resources