I am trying to select a option based on the input given by the user in my select with a chosen plugin. My code works when I remove the data-rel="chosen". This is my code.
function editUser () {
var tldArray = new Array();
$("select#extname > option").each(function(){
tldArray.push($(this).val());
});
for (index = 0;index < tldArray.length;index++) {
if (tldArray[index] == document.getElementById('extselect').value) {
$('#extname').val( $.trim( tldArray[index] ) );
}
}
}
this is my select:
<select id="extname" data-rel="chosen" class="input-small" data-placeholder="Ext. Name">
<option value=""></option>
<option value="SR">SR</option>
<option value="JR">JR</option>
<option value="3rd">3rd</option>
<option value="4th">4th</option>
<option value="5th">5th</option>
<option value="6th">6th</option>
<option value="7th">7th</option>
<option value="8th">8th</option>
<option value="9th">9th</option>
<option value="10th">10th</option>
</select>
and this is my input
<input class="input focused" id="extselect" style="margin-top:-15px" type="text" placeholder="First Name">
<button value='$key->id' class='btn btn-mini btn-info' href='#' onclick='editUser(this)'>
How can I make this work with a chosen plugin?
Changes made to a select initialized with chosen won't display in the html generated by the chosen plugin until you call
$('#extname').trigger('chosen:updated');
Related
this is my html,
I have two select if one select contains a value, then the required attribute is deleted,and the third select must be required
<select class="form-control costume-{{$stud}}" name="subject-{{$stud}}[]" id="sub1" disabled="disabled">
<option value="" selected> --------Select-------- </option>
<option value="math,indonesia">Math (Indonesia)</option>
<option value="math,english">Math (English)</option>
</select>
<select class="form-control costume-{{$stud}}" name="subject-{{$stud}}[]" id="sub2" disabled="disabled">
<option value="" selected> --------Select-------- </option>
<option value="science,indonesia">Science (Indonesia)</option>
<option value="science,english">Science (English)</option>
</select>
<select class="form-control select-long costume-{{$stud}}" name="location_id[{{$stud}}]" disabled="disabled">
<option value="" selected> -----Select------</option>
#foreach ($venue as $row)
<option value="{{$row['location_id']}}">{{$row['location_name']}}</option>
#endforeach
</select>
<input type="checkbox" id="enableSelect-{{$stud}}" onclick="getCheck({{$stud}});">
and this is my jquery
function getCheck(id){
var e = document.getElementById("sub1");
var sub1 = e.options[e.selectedIndex].value;
console.log(sub1);
if($('#enableSelect-' +id).is(':checked')) {
$('.costume-' +id).prop("disabled", false);
$('.costume-' +id).prop("required", true);
$('.visibility').show();
}else{
$('.costume-' +id).prop("disabled", true);
$('.costume-' +id).prop("required", false);
$('.visibility').hide();
}
}
Your JS doesn't correspond to the HTML, the selectors don't match up.
I would check form values and set the required like this :-
$('select').on('change', function() {
if($(this).val() != ""){
$('select').prop('required',false);
}
});
This would work with your HTML as by default the select value is ""
You would also need required="true" on the and your default option should be something like this -
<option value="" disabled selected>Select your option</option>
on the select elements by default.
<span id="s_home_country">
<select name="Home Country" id="home_country">
<option value="Select one" selected="selected">Select one</option>
<option value="h1">Home1</option>
<option value="h2">Home2</option>
<option value="h3">Home3</option>
<option value="h4">Home4</option>
</select>
</span>
and I have another data that i want to incorporate, when Home1 is selected, I want this to show 21-dec into another textbox automatically. and so on..
var Home_country = [
"21-Dec",
"01-Jan",
"01-Jan",
"01-Jan",
];
You could use an object and an event listener.
var home_country = {
"h1":"21-Dec",
"h2":"01-Jan",
"h3":"01-Jan",
"h4":"01-Jan",
};
var selectbox = document.getElementById('home_country');
var textbox = document.getElementById('home_country_date');
selectbox.addEventListener('change', function(e){
textbox.value = home_country[this.value]
})
<span id="s_home_country">
<select name="Home Country" id="home_country">
<option value="Select one" selected="selected">Select one</option>
<option value="h1">Home1</option>
<option value="h2">Home2</option>
<option value="h3">Home3</option>
<option value="h4">Home4</option>
</select>
</span>
<input type="text" id="home_country_date">
Please find below snippet just add another attribute data-attr1 and on change of select list find selected option and get its attribute with name data-attr1 and pass attribute's value to textbox
$("#home_country").on("change",function(){
$(".txtvalue").val($(this).find("option:selected").attr("data-attr1"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="s_home_country">
<select name="Home Country" id="home_country">
<option value="Select one" selected="selected">Select one</option>
<option data-attr1="21-Dec" value="h1">Home1</option>
<option data-attr1="01-Dec" value="h2">Home2</option>
<option data-attr1="02-Dec" value="h3">Home3</option>
<option data-attr1="03-Dec" value="h4">Home4</option>
</select>
</span>
<input type="text" class="txtvalue" />
Add an event listener to your select input which outputs the relevant value from your array when an option is selected:
var el = document.getElementById('home_country');
var textbox = document.getElementById('your_textbox_el');
el.addEventListener('change', function(e){
if (e.target.value == 'h1') {
textbox.value = Home_country[0];
} else if (e.target.value == 'some other condition') {
// do something else
}
}
Unless I'm misunderstanding you, you can just put the values of the Home_country array inside the value properties of the options like so:
<span id="s_home_country">
<select name="Home Country" id="home_country">
<option value="Select one" selected="selected">Select one</option>
<option value="21-Dec">Home1</option>
<option value="01-Jan">Home2</option>
<option value="01-Jan">Home3</option>
<option value="01-Jan">Home4</option>
</select>
</span>
Now, when you do get the value of your select element, it will be the value in the array that you gave.
if the select drop-down menu has value of NULL, it should stop the page from loading. The jQuery works alerting the user of the issue, however the page still continues to the next page. Any assistance would be superb. Thanks
Luke
<fieldset class="form-group">
<label for="question-1">1. What age group are you?</label> <br>
<select class="drop-down" id = "ageChoice">
<option value="">Please Select</option>
<option value="16minus">16 or below</option>
<option value="16-18">16 to 18</option>
<option value="19-25">19 to 25</option>
<option value="26-34">26 to 34</option>
<option value="35-42">35 to 42</option>
<option value="43-50">43 to 50</option>
<option value="51-60">51 to 60</option>
<option value="61plus">61+</option>
</select>
</fieldset>
<input class="btn btn-primary" type="button" id= "next" value="Next" onClick="location.href='first-test.html' ">
$("#next").click(function () {
var age = $('#ageChoice');
if (age.val() === '') {
event.preventDefault();
alert("Please select your age group, thank you.");
}
else
return;
});
Ok, so because you have two click handlers, the event is being processed twice. The 'Default' you are trying to prevent is not the onClick="location.href='first-test.html' . That is being processed after your jQuery click function. So we take the onClick out of the html. and add the functionality to the jQuery click event (we could do it either way, but becuase you already have most of the code set up already we'll do it this way)
Here is the reworked code:
<fieldset class="form-group">
<label for="question-1">1. What age group are you?</label> <br>
<select class="drop-down" id = "ageChoice">
<option value="">Please Select</option>
<option value="16minus">16 or below</option>
<option value="16-18">16 to 18</option>
<option value="19-25">19 to 25</option>
<option value="26-34">26 to 34</option>
<option value="35-42">35 to 42</option>
<option value="43-50">43 to 50</option>
<option value="51-60">51 to 60</option>
<option value="61plus">61+</option>
</select>
</fieldset>
<input class="btn btn-primary" type="button" id= "next" value="Next">
and the jquery:
$("#next").on('click', function (event) {
var age = $('#ageChoice');
if (age.val() === '') {
alert("Please select your age group, thank you.");
} else {
location.href='first-test.html'
}
});
I'm working on a small website and I currently have two dropdowns in my form, both are below:
<select name="classType" id="classType" required>
<option value="" disabled selected>Select Your Class Type</option>
<option value = "Beginner">Beginner</option>
<option value = "Intermediate">Intermediate</option>
<option value = "Advanced">Advanced</option>
</select>
<br/>
<select name="studentType" id="studentType" required>
<option value="" disabled selected>Select Your Student Type</option>
<option value = "lowerLevel">Lower Level</option>
<option value = "upperLevel">Upper Level</option>
</select>
<br/>
I've experimented with some javascript but only at a beginner level. I was wondering if there's a way to disable a specific value in the studentType dropdown.
So for example if i select "Beginner" in the first dropdown then the option for "UpperLevel" in the second dropdown should be disabled.
This is what I tried, but it was not working:
var dropdown = document.getElementById("classType");
dropdown.onchange = function(event){
if (dropdown.value == "Beginner") {
// .....
Any ideas?
Thanks!
You can achieve this by hooking an event handler to the change event of the first select which sets the disabled property of the relevant option in the second select based on the chosen option, something like this:
$('#classType').change(function() {
$('#studentType option[value="upperLevel"]').prop('disabled', $(this).val() == 'Beginner')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="classType" id="classType" required>
<option value="" disabled="true" selected="true">Select Your Class Type</option>
<option value="Beginner">Beginner</option>
<option value="Intermediate">Intermediate</option>
<option value="Advanced">Advanced</option>
</select><br/>
<select name="studentType" id="studentType" required>
<option value="" disabled="true" selected="true">Select Your Student Type</option>
<option value="lowerLevel">Lower Level</option>
<option value="upperLevel">Upper Level</option>
</select><br/>
This should fit your needs:
http://codepen.io/themeler/pen/yOjWXB
<select name="classType" id="classType" required>
<option value="" disabled selected>Select Your Class Type</option>
<option value = "Beginner">Beginner</option>
<option value = "Intermediate">Intermediate</option>
<option value = "Advanced">Advanced</option>
</select>
<br/>
<select name="studentType" id="studentType" required>
<option value="" disabled selected>Select Your Student Type</option>
<option value="lowerLevel">Lower Level</option>
<option value="upperLevel">Upper Level</option>
</select>
<br/>
$(function () {
var $class = $('#classType'),
$student = $('#studentType');
$class.on('change', function () {
var $this = $(this),
$ul = $student.find('[value="upperLevel"]');
// clear value of student type on class type change
$student.find(':selected').prop('selected', false);
$student.find('option:first-child').prop('selected', true);
// lock / unlock position
if ($this.val() === 'Beginner') {
$ul.prop('disabled', true);
} else {
$ul.prop('disabled', false);
}
});
});
By jQuery:
$('#studentType option[value="upperLevel"]').attr('disabled','disabled');
Here is how I would do it, add a data-enabled tag to each option like this:
<select name="classType" id="classType" required>
<option value="" disabled selected>Select Your Class Type</option>
<option value = "Beginner" data-enabled="lowerLevel">Beginner</option>
<option value = "Intermediate" data-enabled="lowerLevel,upperLevel">Intermediate</option>
<option value = "Advanced" data-enabled="upperLevel">Advanced</option>
</select>
<br/>
<select name="studentType" id="studentType" required>
<option value="" disabled selected>Select Your Student Type</option>
<option value = "lowerLevel">Lower Level</option>
<option value = "upperLevel">Upper Level</option>
</select>
<br/>
And on change of the drop down, disable all options in the other drop down, then loop through and see if they're either in the enabled tag of the selected, or blank like this:
$('#classType').on('change', function(){
var allowed = $('#classType option:selected').attr('data-enabled').split(',');
$('#studentType option').attr('disabled','disabled');
$('#studentType option').each(function(){
if (allowed.indexOf($(this).val()) > -1 || !$(this).val()) {
$(this).removeAttr('disabled');
}
});
});
I am working on a Formstack form. I need to use Javascript to change the value of a dropdown box to whatever the value being typed into a text field is once a match is made.
<input type="text" id="field35497729" name="field35497729" size="50" value="" class="fsField">
<select id="field35497839" name="field35497839" size="1" class="fsField">
<option value=""> </option>
<option value="CIPSmember">CIPSmember</option>
<option value="TECHCONNEXmember">TECHCONNEXmember</option>
<option value="TCBCpreferred">TCBCpreferred</option>
<option value="TCBCcomp2015">TCBCcomp2015</option>
</select>
So as soon as someone types in CIPSmember into the text field, the dropdown should be selected with the same value. If there is no match, the dropdown has no selection.
I used the following jQuery on jsFiddle, but it is not working on Formstack:
$('#field35497729').keyup( function() {
$("#field35497839").val($('#field35497729').val());
}
);
Here is one Javascript method I am trying on jsFiddle that does not work:
document.getElementByID('field35497729').onkeyup = function() {
document.getElementById('field35497839').value = document.getElementByID('field35497729').value;
};
I checked here, here and maybe 10 other places but I can't get it to work. There are plenty of tutorials on how to get a text field to change when a dropdown selection change, but not nearly as many on the opposite.
misspelled ID in getElementById
missing end bracket on the jQuery version
simplified to use this and $(this)
I am however curious. Perhaps you want an autocomplete instead?
Here are your fixed versions
Plain JS version
window.onload=function() {
document.getElementById('field35497729').onkeyup = function() {
document.getElementById('field35497839').value = this.value;
}
}
<input type="text" id="field35497729" name="field35497729" size="50" value="" class="fsField">
<select id="field35497839" name="field35497839" size="1" class="fsField">
<option value=""> </option>
<option value="CIPSmember">CIPSmember</option>
<option value="TECHCONNEXmember">TECHCONNEXmember</option>
<option value="TCBCpreferred">TCBCpreferred</option>
<option value="TCBCcomp2015">TCBCcomp2015</option>
</select>
jQuery version
$(function() {
$('#field35497729').on("keyup",function() {
$("#field35497839").val($(this).val()); // or (this.value)
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="field35497729" name="field35497729" size="50" value="" class="fsField">
<select id="field35497839" name="field35497839" size="1" class="fsField">
<option value=""> </option>
<option value="CIPSmember">CIPSmember</option>
<option value="TECHCONNEXmember">TECHCONNEXmember</option>
<option value="TCBCpreferred">TCBCpreferred</option>
<option value="TCBCcomp2015">TCBCcomp2015</option>
</select>