We Keep Coding

How to post the same value from other options to the server

In my React app I have a select box with different options. Two of these options has the same value to post to the server:
<div className="form-group">
<label>Category</label>
<select className="form-control" onChange={this.handleCategorySelect} value={this.state.category}>
<option></option>
<option value="temperature">Temperature</option>
<option value="humidity">Humidity</option>
<option value="temperature">Water temperature</option>
<option value="smoke">Smoke</option>
</select>
</div>
Problem 1: when I select a "Water temperature" option, I get a "Temperature" in an option field
Problem 2: how to make handleCategorySelect function working correctly? I mean, how to select "Water temperature" option with the same value as "Temperature" option and send it to the server?
handleCategorySelect:
handleCategorySelect = e => {
this.setState({ category: e.target.value })
}
Problem 3: I want to disable "Frequency" form field when user select a "Water temperature" option in Category, how to do that? Any "if" statement inside or something?
<div className="form-group">
<label>Category</label>
<select className="form-control" onChange={this.handleCategorySelect} value={this.state.category}>
<option></option>
<option value="temperature">Temperature</option>
<option value="humidity">Humidity</option>
<option value="temperature">Water temperature</option>
<option value="smoke">Smoke</option>
</select>
</div>
<div className="form-group">
<label>Frequency</label>
<select className="form-control" onChange={this.handleFrequency} value={this.state.frequency}>
<option></option>
<option value="seconds">Seconds</option>
<option value="minutes">Minutes</option>
<option value="hours">Hours</option>
<option value="days">Days</option>
</select>
</div>

Both Temperature and Water Temperature has the same value "temperature"
<option value="temperature">Temperature</option>
<option value="temperature">Water temperature</option>
Change the Water Temperature value to something else
<option value="waterTemperature">Water temperature</option>

Autoselect HTML hidden option value based on previous option

I have 2 select tags which come with the same option, male and female. One of the select, "age" is hidden.
<select name="gender">
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<select name="age" style="display:none;">
<option value="12">Male</option>
<option value="18">Female</option>
</select>
When user select "male" in "gender", I wish the "age" will automatically select "male" as well. I expect the same thing as "female". How to achieve this through javascript?

You can attach an event change to your select gender and set the value of age on every change.
Note that both elements should be loaded with a default selected value for case that the end user do not select nothing and also check that it is better to move inline styling style="display:none;" to a separated css file.
Code:
var gender = document.getElementsByName('gender')[0],
age = document.getElementsByName('age')[0];
gender.addEventListener('change', function() {
age.value = (gender.value == 1) ? 12 : 18;
console.log('Gender:', gender.value);
console.log('Age:', age.value);
});
<select name="gender">
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<select name="age" style="display:none;">
<option value="12">Male</option>
<option value="18">Female</option>
</select>

Here's an option using jQuery.
$(document).ready(function() {
$("#age").val("12");
$("#gender").change(function() {
var userselected = $(this).find(':selected').text();
if (userselected == "Male") {
$("#age").val("12");
} else {
$("#age").val("18");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="gender" id="gender">
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<select name="age" style="display:inherit;" id="age">
<option value="12">Male</option>
<option value="18">Female</option>
</select>

Add a text field to html dropdown

I have a html dropdown field where there should be a text field added at the bottom naming other.The text typed in this field should come as other:text
drop down html is :
<select name="drop">
<option selected="selected">Please select ...</option>
<option value="car">car</option>
<option value="bike">bike</option>
<option value="Other">Other</option>
</select>
Here other should be text field.For understanding i kept other as option,but i want that to be a input text field where value is given by user.
Thanks in advance

You could add hidden input field by default for other text :
<input type='text' id='other' name='other' style="display:none"/>
And capture the change on select in your js then check if selected option value equal Other and show the field or hide it :
$('select').on('change', function(){
if($(this).val()=='Other'){
$('#other').show().focus();
}else{
$('#other').val('').hide();
}
})
Hope this helps.
$('select').on('change', function(){
if($(this).val()=='Other'){
$('#other').show().focus();
}else{
$('#other').val('').hide();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="drop">
<option selected="selected">Please select ...</option>
<option value="car">car</option>
<option value="bike">bike</option>
<option value="Other">Other</option>
</select>
<input type='text' id='other' name='other' style="display:none" value='other:'/>

<script type="text/javascript">
function showfield(name){
if(name=='Other')document.getElementById('div1').innerHTML='Other: <input type="text" name="other" />';
else document.getElementById('div1').innerHTML='';
}
</script>
<select name="drop" id="drop" onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="car">car</option>
<option value="bike">bike</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>

you could go the other way and make all options accessible by the text field - but giving an autocomplete option as the user types. This can be done with jQuery autocomplete plugins etc or the new html5 datalist. This ties a predetermined set of options to the textfield - allowing the user to select from it if theinput value matches the value, but also allows for alternative text to be entered if there are no matches. Just note though that Safari (and possible other browsers) do not support this feature yet. But its very cool when it is supported.
<input id="transportOptions" list="transport">
<datalist id="transport">
<option value="Car">
<option value="Bike">
<option value="Scooter">
<option value="Taxi">
<option value="Bus">
</datalist>

How to validate multiple drop down list in jquery

HTML :
<select type="text" class="que_ans" name="answer[12]" id="answer_12" size="1">
<option value="0" selected> -- Select Response -- </option>
<option value="1">Not Satisfied</option>
<option value="2">Somewhat Satisfied</option>
</select>
<select type="text" class="que_ans" name="answer[13]" id="answer_13" size="1">
<option value="0" selected> -- Select Response -- </option>
<option value="1">Not Satisfied</option>
<option value="2">Somewhat Satisfied</option>
</select>
How to validate the drop down list using array name answer[12] ?

Add class and title attributes on your dropdown element like:
<select type="text" class="que_ans required" name="answer[12]" id="answer_12" size="1" title="This is required field" >
<option value="0" selected> -- Select Response -- </option>
<option value="1">Not Satisfied</option>
<option value="2">Somewhat Satisfied</option>
</select>
<select type="text" class="que_ans required" name="answer[13]" id="answer_13" size="1" title="This is required field">
<option value="0" selected> -- Select Response -- </option>
<option value="1">Not Satisfied</option>
<option value="2">Somewhat Satisfied</option>
</select>
And add following script at the end of your page
<script>
$('select.required').each(function () {
var message = $(this).attr('title');
if($(this).val() == '' || $(this).val() == 0) {
alert(message);
$(this).focus();
breakout = true;
return false;
}
}
});
</script>
I hope, it will fulfill your requirement.

you could use attribute selector $(select[name="answer[12]"]) for specific ones
or more generic $(select[name]) to select all <select> with name attribute.
also val() method can be used for the getting the selected item.
eg: $(select[name="answer[12]"]).val()

how to change jquery drop down value

On the basis of selection of Issue type i want to show 2nd drop down. if someone is select Board i want to show 2nd drop down and if someone select Branding i want to show different option. pls help
<label for="Issue Type">Issue Type</label>
<select name="issue_type" id="issue_type">
<option value=""> Select </option>
<option value="Board">Board</option>
<option value="Branding/Clipon">Branding/Clipon</option>
</select>
<label for="Issue Type">Issue</label>
<select name="send_to" id="send_to">
<option value=""> Select </option>
<option value="Light Not Working">Light Not Working</option>
<option value="Broken Letter">Broken Letter</option>
<option value="Transit of Board from One address to Another">Transit of Board from One address to Another</option>
<option value="Broken Board">Broken Board</option>
</select>
<select name="send_to" id="send_to">
<option value=""> Select </option>
<option value="Pasting Problem">Pasting Problem</option>
<option value="Clip-on light not working">Clip-on light not working</option>
</select>

In your select
<select name="issue_type" id="issue_type" onchange="change('issue_type');">
In your js file
$(document).ready(function(){
function change(id) {
//check condition if as
if ($('#' + id).val() == 'Board') {
//hide select except your required select
//like
$("#send_to").show().siblings().hide();
} else if () { // your next condition
//so on
}
}
});

here's jquery
$(document).ready(function(){
function changeVisibleSelect(elem){
var vis = $(elem).val() == 'Board';
$('#send_to' + (vis ? '_board' : '')).removeClass('hidden');
$('#send_to' + (vis ? '' : '_board')).addClass('hidden');
}
$('#issue_type').change(function(){
changeVisibleSelect(this);
});
changeVisibleSelect($('#issue_type'));
});
and minor edit to your html
<label for="Issue Type">Issue Type</label>
<select name="issue_type" id="issue_type">
<option value=""> Select </option>
<option value="Board">Board</option>
<option value="Branding/Clipon">Branding/Clipon</option>
</select>
<label for="Issue Type">Issue</label>
<select name="send_to" id="send_to">
<option value=""> Select </option>
<option value="Light Not Working">Light Not Working</option>
<option value="Broken Letter">Broken Letter</option>
<option value="Transit of Board from One address to Another">Transit of Board from One address to Another</option>
<option value="Broken Board">Broken Board</option>
</select>
<select name="send_to" id="send_to_board">
<option value=""> Select </option>
<option value="Pasting Problem">Pasting Problem</option>
<option value="Clip-on light not working">Clip-on light not working</option>
</select>
i changed the id of second select
css:
.hidden{display:none}
here's working jsfiddle: http://jsfiddle.net/MXjmY/1/