In a "contact us" form, I need to insert a country code (ie 972, 1, 91) to the phone input field after choosing the country from the select list.
For example;
If a user chooses "US" from the list, than the phone input field will start with the number "1" and than the user will continue to write his number. How do I do that with jQuery?
Thank you
You can do this buy adding the value as code of the Country like for US the value of option should be 1
Your HTML should be,
<select id="country">
<option value="">Select Country</option>
<option value="1">US</select>
<option value="91">IN</select>
</select><br/>
Code: <input type="text" id="code" />
Jquery
$(function(){
$('#country').on('change',function(){
$('#code').val(this.value);// changing the code textbox value by current country value
});
});
HTML:
<select id="country">
<option value="">Select Country</option>
<option value="1">US</option>
<option value="+44 ">UK</option>
</select>
<input id="phone" type="text" name="phone">
jQuery:
$(function() {
$('#country').on('change', function() {
$('#phone').val($(this).val());
});
});
<select id="country">
<option value="">Select Country</option>
<option value="1">US</option>
<option value="91">IN</option>
</select>
<br><br>
Code: <input type="text" id="code" />
$(function() {
$('#country').on('change', function() {
$('#phone').val($(this).val());
});
});`enter code here`
Related
I have created an HTML form that is generated from a PHP script. The PHP script outputs an HTML dropdown based on data held in a database. The number of dropdowns being displayed on the page varies as it is based on the number of lines in a MySQL database. All the dropdowns have the same ID inputDropdown
I am trying to create a jquery script that prevents the form from being submitted until all the dropdown boxes have been completed (So whenever the value doesn't equal No Response).
This is the HTML code outputted from the PHP Script. Please note the number in the name (E.G. "1" in dropdown_1) is generated based on the ID of a row in the database.
<select name="dropdown_1" id="inputDropdown" class="form-control">
<option value="No Response" selected>Blank - Please Select A Option</option>
<option value="No">No</option>
<option value="Full">Yes</option>
</select>
<select name="dropdown_2" id="inputDropdown" class="form-control">
<option value="No Response" selected>Blank - Please Select A Option</option>
<option value="No">No</option>
<option value="Full">Yes</option>
</select>
<select name="dropdown_3" id="inputDropdown" class="form-control">
<option value="No Response" selected>Blank - Please Select A Option</option>
<option value="No">No</option>
<option value="Full">Yes</option>
</select>
I tried the following jquery Code, however, this only worked for the first of the dropdowns and didn't check the other dropdown values.
$(document).ready(function () {
$("#update-form").submit(function (e) {
if ($('#inputDropdown').val() == 'No Response') {
alert('Please complete all the boxes');
}
e.preventDefault(e);
});
$("#inputDropdown").change(function () {
$("#inputDropdown").submit();
return false;
});
});
Please, could someone advise of an efficient way on how to do this?
Thank you in advance!
Your first issue is that you have repeated the same id in the DOM, which is invalid. Use a class to group the elements instead.
Then you can use filter() to find how many of the selects still have the first option selected when the form is submit. If any of them do, show the alert(). You also need to call preventDefault() at this point only. Try this:
jQuery(function($) {
$("#update-form").submit(function(e) {
var unselected = $('.inputDropdown').filter(function() {
return $(this).find('option:selected').index() == 0;
}).length;
if (unselected != 0) {
e.preventDefault(e);
alert('Please complete all the boxes');
}
});
$(".inputDropdown").change(function() {
$("#update-form").submit();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="update-form" action="#">
<select name="dropdown_1" class="form-control inputDropdown">
<option value="No Response" selected>Blank - Please Select A Option</option>
<option value="No">No</option>
<option value="Full">Yes</option>
</select>
<select name="dropdown_2" class="form-control inputDropdown">
<option value="No Response" selected>Blank - Please Select A Option</option>
<option value="No">No</option>
<option value="Full">Yes</option>
</select>
<select name="dropdown_3" class="form-control inputDropdown">
<option value="No Response" selected>Blank - Please Select A Option</option>
<option value="No">No</option>
<option value="Full">Yes</option>
</select>
</form>
I have the db called rec where i store records like:
Id Name Surname
1 John smith
2 Roger jhonson
I wish to display all records in 2 drop-down menus. Say if I select Roger then the value of surname should be changed to Jhonson if it was already on Smith.
If I select John then value of the surname should go back to smith but if I want I should be able to change the surname of John to Jhonson which should not change the value of Name, the selected value should remain as John Jhonson.
Can someone please show me how this can be done?
Really appreciate your kind help and time in advance.
HTML
<select name="cname" class="float-right ralign" id="cname">
<option value="" disabled selected>--select name--</option>
<option value="1">John</option>
<option value="2">Roger</option>
</select>
<select name="surname" class="float-right ralign" id="surname">
<option value="" disabled selected>--select surname--</option>
<option value="1">smith</option>
<option value="2">jhonson</option>
</select>
Use jQuery Onchange Event
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function(){
$("#cname").change(function(){
var cname = $(this).val();
$('#surname option').eq(cname).prop('selected', true);
});
});
$( document ).ready(function(){
$("#cname").change(function(){
var cname = $(this).val();
$('#surname option').eq(cname).prop('selected', true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select name="cname" class="float-right ralign" id="cname">
<option value="" disabled selected>--select name--</option>
<option value="1">John</option>
<option value="2">Roger</option>
</select>
<select name="surname" class="float-right ralign" id="surname">
<option value="" disabled selected>--select surname--</option>
<option value="1">smith</option>
<option value="2">jhonson</option>
</select>
I have problem, I tried several tries I could but nothing works.
I have this select name category
$("#category").change(function() {
if ($(this).val() == "Strings") {
$("#instrument").show();
$(".Label").show();
$("#instrument2").hide();
$("#instrument3").hide();
$("#instrument4").hide();
} else if ($(this).val() == "Percussion") {
$("#instrument2").show();
$(".Label").show();
$("#instrument").hide();
$("#instrument3").hide();
$("#instrument4").hide();
} else if ($(this).val() == "Keyboard") {
$("#instrument3").show();
$(".Label").show();
$("#instrument").hide();
$("#instrument2").hide();
$("#instrument4").hide();
} else if ($(this).val() == "Woodwind") {
$("#instrument4").show();
$(".Label").show();
$("#instrument").hide();
$("#instrument3").hide();
$("#instrument2").hide();
} else {
$(".Label").hide();
$("#instrument").hide();
$("#instrument2").hide();
$("#instrument3").hide();
$("#instrument4").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="category" class="form-control" rows="1" name="category" required>
<option value="Strings">Strings</option>
<option value="Percussion">Percussion</option>
<option value="Keyboard">Keyboard</option>
<option value="Woodwind">Woodwind</option>
</select>
And this select name instrument
<br>
<select id="instrument" class="form-control" rows="1" name="instrument" required>
<option value="Guitar">Guitar</option>
<option value="Violin">Violin</option>
<option value="Cello">Cello</option>
</select>
<select id="instrument2" class="form-control" rows="1" name="instrument" required>
<option value="Drum">Drum</option>
<option value="Xylophone">Xylophone</option>
</select>
<select id="instrument3" class="form-control" rows="1" name="instrument" required>
<option value="Harpsichord">Harpsichord</option>
<option value="Piano">Piano</option>
</select>
<select id="instrument4" class="form-control" rows="1" name="instrument" required>
<option value="Flutes">Flutes</option>
<option value="Saxophone">Saxophone</option>
</select>
The problem is whatever I choose on select option it gives me a value of 'Flutes' ,also I have a css to hide those not chosen by category, and show instrument on category change.
crude, short answer:
1) Put a data-property on category options:
<option data-instrument='instrument2'>Percussion</option>
2) Get data-attribute of selected category option:
var selectedInstrument = $('#category option:selected').data('instrument');
3) hide all instruments
$('select[name=instrument]').hide();
4) show instrument from selected category
$('#' + selectedInstrument).show();
Thank you everyone
I already solved it by using dom id to set name instrument or disable
document.getElementById("sub_title8").name='disabled';
document.getElementById("sub_title8").name='instrument';
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>
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()