I’m struggling to show some options when u type a match and others if you don’t. I'm new in coding in general.
I just cant make it work how I want.
test html:
<input class="form-control input-lg email" type="email"
name="useremail[]" required />
<select class="form-control" name="youchoose[]" required>
<option value=""></option>
<optgroup class="groupa" label="Group A">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</optgroup>
<optgroup class="groupb" label="Group B">
<option value="option4">option4</option>
<option value="option4">option5</option>
</optgroup></select>
<br><br>
<hr>
<br>
<input class="form-control input-lg email" type="email"
name="useremail[]" required />
<select class="form-control" name="youchoose[]" required>
<option value=""></option>
<optgroup class="groupa" label="Group A">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</optgroup>
<optgroup class="groupb" label="Group B">
<option value="option4">option4</option>
<option value="option4">option5</option>
</optgroup></select>
the js:
$('.email').on("input", function(){
$("optgroup.groupa").toggle(/hotmail/ig.test(this.value) )
var _this = $(this);
if ( _this.val() == 0 )
$('optgroup.groupa').show();
else {
$('optgroup.groupb').hide();
$('optgroup.' + _this.val()).show();
}
});
How is this working? I'm to noob.
How can I avoid when you input in input1, input2 changes also? I’m going to have lots of inputs since I add them dynamically and you can have 1 row or tons of rows.
How do I keep select hidden until match/or not match is inputted? I don’t want to show options since u can pick them before you input something in the box.
Thanks
How can I avoid when you input in input1, input2 changes also? I’m
going to have lots of inputs since I add them dynamically and you can
have 1 row or tons of rows.
Your code didn't produce this issue, but both of your inputs are identical which is likely related to your question here. Give your second input different attributes to distinguish it from the first.
<input class="input2" type="text" name="input2" required />
How do I keep select hidden until match/or not match is inputted? I
don’t want to show options since u can pick them before you input
something in the box.
The solution below should provide the logic you need. It's a pretty odd use case, but you're describing displaying or toggling a group of options based on matching user input.
jQuery .on() is an event handler. Get the user input by accessing event.target.value inside the handler and conditionally show or hide what you need.
Run the below code and type "Group A" into the input. Then, you'll see the options for group A appear in the select list. When the input no longer matches, those options are hidden again. I've checked the user input against the group label here to illustrate. You can adjust the logic and what elements to target as needed.
<input
class="form-control input-lg email"
type="email"
name="useremail[]"
required
/>
<select class="form-control options" name="youchoose[]" required>
<option value=""></option>
<optgroup hidden class="groupa" label="Group A">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</optgroup>
<optgroup hidden class="groupb" label="Group B">
<option value="option4">option4</option>
<option value="option4">option5</option>
</optgroup>
</select>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script>
$('.email').on('input', function (event) {
$('optgroup').each(function () {
console.log(event.target.value);
if (this.label === event.target.value) {
console.log('match');
$(this).removeAttr('hidden');
} else {
$(this).attr('hidden', true);
}
});
});
</script>
Related
I am doing to change 2nd select tag name by javascript.
this is my HTML
1st select
<select name="bank" id="bank" class="select" onchange="myFunction(event)">
<option value="Bank Account" a="required">Bank Account</option>
<option value="UPI" a="hidden">UPI</option>
</select>
2nd Select
<select name="bank1" class="select" id="bank1" required>
<option disabled selected>Choose Bank Name</option>
<option value="SBI">SBI</option>
<option value="PNB" >PNB</option>
</select>
this is my javascript
function myFunction(e) {
document.getElementById("bank1").name = e.target.a
but i want to change in 2nd select required to hidden
probably you are looking for setAttribute.
document.getElementById("bank1").required = false;
And for style mutation. As #Kokodoko had already written.
document.getElementById("bank1").classList.add("hidden")
Do you want to hide the second select box completely?
function myFunction(e) {
document.getElementById("bank1").classList.add("hidden")
}
CSS
#bank1.hidden {
display:none;
}
I want to make my 2 <select> change their values based on a single <select>, for example:
I want my kodethnajaran and kodesemester change their options value based on my selection on kodematkul.
Here is my code:
<div class="form-group">
<label>Mata Kuliah</label>
<select class="form-control" name="kodematkul" id="kodematkul" required>
<option value="null" selected="selected">-- Pilih --</option>
<option value='mk001'>Mobile Programming</option>
<option value='mk003'>Matematika Dasar</option>
<option value='mkl001'>Logika dan Pemrograman</option>
</select><br>
</div>
<div class="form-group">
<label>Tahun Ajaran</label>
<select class="form-control" name="kodethnajaran" id="kodethnajaran" required>
<option value="-" selected="selected">-- Pilih --</option>
<option value='thn001'class='mk001'>2017</option>
<option value='thn001'class='mk003'>2017</option>
<option value='thn001'class='mkl001'>2017</option>
<option value='thn002'class='mk003'>2016</option>
</select><br>
</div>
<div class="form-group">
<label>Semester</label>
<select class="form-control" name="kodesemester" id="kodesemester" required>
<option value="-" selected="selected">-- Pilih --</option>
<option value='sem002'class='mk001'></option>
<option value='sem001'class='mk003'></option>
<option value='sem001'class='mkl001'></option>
<option value='sem002'class='mkl001'></option>
<option value='sem002'class='mk003'></option>
</select><br>
</div>
The code above basically contains only my <select>, with data from sql. The script that I tried is:
$("#kodethnajaran,#kodesemester").chained("#kodematkul");
I'm not sure if this is applicable, because I tried to implement it based on this demo:
http://www.appelsiini.net/projects/chained/demo.html
it seems it can only change 'kodethnajaran' but doesnt change 'kodesemester' value.
Here's the fiddle...
https://jsfiddle.net/vu671ubm/
Ok so I investigated a little and the reason why your solution was not working as in example was jQuery version, You should use 1.10 to have chained working
Here goes codePen http://codepen.io/kejt/pen/NdzZqv?editors=1111
Also I have changed your code a little to work on classes
$(".form-control").each(function() {
$(this).chained($("#kodematkul"));
});
The class I have used is just an example, you can add new class for all selects that need to depend on given one. For example dependant-select and add this class to all select which should change on the first one update
Disable/enable text field and list box as per user selected value from parent list box.
Condition:
if user don't know programming then list box and text box must disable.
However it is not working, I know I am missing something.only Javascript please
function check()
{
//if(document.drop_list.choice[1].checked){
if(document.getElementById("mt").value === 'N'){
document.getElementById("no").disabled=true;
document.getElementById("txt").disabled=true;
}else{
document.getElementById("no").disabled=false;
document.getElementById("txt").disabled=false;
}
}
<form name="drop_list" action="listbox-validation-demock.php" method="post" id='f1'>
Do you want to learn Web programming languages ?
<select name="Category" id="mt" onChnage="check()">
<option value='Y'>Y</option>
<option value="N">N</option>
</select>
<br /><br />
<select name="Category" id="no">
<option value=''>Select One</option>
<option value="PHP">PHP</option>
<option value="ASP">ASP</option>
<option value="JavaScript">JavaScript</option>
<option value="HTML with design">HTML</option>
<option value="Perl">Perl</option><option value="MySQL">MySQL</option></select>
<br /><br />
Age<input type="text" size="20" id="txt">
</form>
It should have been :
<select name="Category" id="mt" onChange="check()">
Your script works, the only problem is a typo:
<select name="Category" id="mt" onChnage="check()">
-----------------------------------^^^-------------
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>
I have a text input as follows:
<input class="input-large" form="form" type="text" name="product_data[product]" id="product_description_product" value="{$product_data.product}" />
Unfortunately I want the information entered into this field to be very specific. The best solution I can think for this, is to provide 3 drop down menus with a range of options.
I can edit the HTML and add JavaScript as necessary, but can't edit the form processing script or the database, so the value I need to get back from the 3 select menus needs to be concatenated into a single form field value.
What do you reckon?
I think I almost have it but it isn't working. I would copy the whole form but it is very long and hopefully this bit is the only bit needed
<form>
<input form="form" type="hidden" name="product_data[product]" id="product_description_product" value="{$product_data.product}" />
<script type="text/javascript">
$(all_three_select_tags).change(function(){
concatenated_string = $(#product_description_product_1).val() + $(#product_description_product_2).val() + $(#product_description_product_3).val();
$("#product_description_product").val(concatenated_string);
})
</script>
<select id="product_description_product_1">
<optgroup label="Box size">
<option value="Extra small">Extra small</option>
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="Extra Large">Extra Large</option>
</optgroup>
</select>
<select id="product_description_product_2">
<optgroup label="Speciality">
<option value="organic">organic</option>
<option value="seasonal">seasonal</option>
<option value="locally grown">locally grown</option>
<option value="exotic">exotic</option>
<option value="gourmet">gourmet</option>
</optgroup>
</select>
<select id="product_description_product_3">
<optgroup label="Type of box">
<option value="veg box">veg box</option>
<option value="fruit box">fruit box</option>
<option value="fruit & veg box">fruit & veg box</option>
</optgroup>
</select>
</form>
I'm going to try to update this based on the code you provided. Your script tag contents should be this:
<script type='text/javascript'>
$("#product_description_product_1, #product_description_product_2, #product_description_product_3").change(function(){
concatenated_string = $("#product_description_product_1").val() + $("#product_description_product_2").val() + $("#product_description_product_3").val();
$("#product_description_product").val(concatenated_string);
})
</script>
Also your hidden field tag should look something like this (I'm assuming the top line, of the second block of code, was intended to be the hidden field):
<input type='hidden' value='' id="product_description_product">
Here is a jsfiddle with this an example as well http://jsfiddle.net/eNNZX/
Please keep in mind the div with id "temp_display" is not required, its only so you can see the value after each change.
This way anytime any of the selects are changed the hidden input is updated with the concatenated version of all 3. Then when you submit the page, just look at the parameter referencing the hidden input for your desired value.
Hope this helps!