I want to create a form where if I choose a name from a selection.
The next input field will be autofilled.
It works with the value of the selected item, but I can't get it work with data tags.
Here is some simplified HTML:
<select class="select" id="test " name="" onchange="myFunction(event)">
<option disabled selected>Choose Database Type</option>
<option data-adr="xyz" value="id1">Test name1</option>
<option data-adr="fsd" value="id2">Test name2</option>
<option data-adr="sss" value="id3">Test name3</option>
</select>
<input class="form-control" id="myText" type="text" value="-">
JavaScript (this works):
function myFunction(e) {
document.getElementById("myText").value = e.target.value;
}
JavaScript (this doesn't work):
function myFunction(e) {
document.getElementById("myText").value = e.target.options[event.target.selectedIndex].dataset.adr;
}
The second JavaScript example works, but only if I don't use the class="select" tag on the selection. So there must be something in the CSS that could interfere with the JavaScript part?
Is there another method to get the data tag from the selected item?
Pass in the select as the parameter, then do select.options[select.selectedIndex] to get the element. This limits the amount of code needed for the job. The rest is self explanatory.
function myFunction(e) {
document.getElementById("myText").value = e.options[e.selectedIndex].getAttribute("data-adr");
}
<select class="select" id="test " name="" onchange="myFunction(this)">
<option disabled selected>Choose Database Type</option>
<option data-adr="xyz" value="id1">Test name1</option>
<option data-adr="fsd" value="id2">Test name2</option>
<option data-adr="sss" value="id3">Test name3</option>
</select>
<input class="form-control" id="myText" type="text" value="-">
Related
I have a pick list like the following:
<select multiselect="false" name="some.name" size="1" id="queuePicklist"
onchange="setQueue();" required="true">
<option id="selectOption" hidden="true" disabled="true" selected="true" value=""
style="display: none">Select an option</option>
<option value="1" label="Support">Support</option>
<option value="2" label=" Team Sales">Team Sales</option>
<option value="1" label="Individual Sales">Individual Sales</option>
<option value="1" label="Billing">Billing</option>
<option value="1" label="Other">Other</option>
</select>
I want to know if it's possible that in setQueue() function select one of the options without using the value? So instead of document.getElementById("queuePicklist").value = 'Support';
Can I add a data attribute to the options and select the option that way so I can keep the values as they are. Note: as seen in the example four of the options have the same value.
I know I can put these values (1,2,1,1,1) into the data attribute and use unique values in the 'value' field and that was my first approach but since I'm working with some legacy code, that change made other parts of other codes to break.
I'm not exactly sure what or how you want to get an option, but you can access the text like this.
function setQueue() {
var selectEle = document.getElementById("queuePicklist");
// .options returns an HTMLOptionsCollection object.
// use the selectedIndex property to get the selected option, then
// you can access the text or value.
console.log(selectEle.options[selectEle.selectedIndex].text);
}
<select multiselect="false" name="some.name" size="1" id="queuePicklist" onchange="setQueue();" required="true">
<option id="selectOption" hidden="true" disabled="true" selected="true" value="" style="display: none">Select an option</option>
<option value="1" label="Support">Support</option>
<option value="2" label=" Team Sales">Team Sales</option>
<option value="1" label="Individual Sales">Individual Sales</option>
<option value="1" label="Billing">Billing</option>
<option value="1" label="Other">Other</option>
</select>
I want to create a selection button. There are two options, traveled date and issued date. So when the user click traveled date. There will be an alert for traveled date and vice versa to the issued date. I already create the function inside the selection button but, the alert still didn't work?
function myFunction() {
document.getElementById("myInput").alert("try");
}
function myFunction1() {
document.getElementById("myButton").alert("fefetry");
}
<select class="form-control" name="insurance_id">
<option value="" id="myInput" onclick="myFunction()">Travel Date</option>
<option value="" id="myButton" onclick="myFunction1()">Issued Date</option>
</select>
You can refactor it by listening event on change of select[name=insurance_id] then alert value accordingly like below
$("select[name=insurance_id]").on("change", function(){
alert($(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="insurance_id">
<option value="Travel Date" >Travel Date</option>
<option value="Issued Date" >Issued Date</option>
</select>
You don't need the document.getElementByID() since you assigned the click handler in the HTML tag.
Change your javascipt code to
<script>
function myFunction() {
alert("try");
}
function myFunction1() {
alert("fefetry");
}
</script>
You don't use onclick on options but onchange listener on select.
Supposed that you don't use the options value you can use them as the alert placeholder:
<select class="form-control" name="insurance_id" onchange="alert(this.options[this.selectedIndex].value);">
<option value="try" id="myInput">Travel Date</option>
<option value="fefetry" id="myButton">Issued Date</option>
</select>
Alternatively, you can use data_attributes and dataset property to fetch it:
<select class="form-control" name="insurance_id" onchange="alert(this.options[this.selectedIndex].dataset.alert);">
<option data-alert="try" value="" id="myInput">Travel Date</option>
<option data-alert="fefetry" value="" id="myButton">Issued Date</option>
</select>
alert is a global Window method but you are trying to access that on an element.
You can try something like the following way:
<select class="form-control" name="insurance_id" onchange="myFunction(this)">
<option value="" id="myInput">Travel Date</option>
<option value="" id="myButton">Issued Date</option>
</select>
<script>
function myFunction(sel) {
var text = sel.options[sel.selectedIndex].text
alert(text);
}
myFunction(document.querySelector('select'));
</script>
Using jQuery:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="insurance_id">
<option value="" id="myInput">Travel Date</option>
<option value="" id="myButton">Issued Date</option>
</select>
<script>
$('select').change(function(){
alert($(this).find('option:selected').text());
}).trigger('change');
</script>
In this case, only primary dropdown will change, other dropdowns' values will change automatically according to it (so users wont be changing them) I'm trying to get the Option's TEXT value using PHP with $_POST. But i can only get it when i manually changed the other dropdown .
I have tried to use the trigger() method, but it fails to get the option text value. Any idea why the code fails to work. Thank you.
function setDropDown() {
var index_name =
document.getElementsByName('ForceSelection')[0].selectedIndex;
var others = document.querySelectorAll('.secondary');
for (var i = 0; i < others.length; i++) {
others[i].selectedIndex = index_name;
}
}
<!-- try to get the option text value and pass it to input field-->
<!-- Then in the php code use $_POST[] to retrieve the input value-->
function setTextField(ddl) {
document.getElementById('make_text').value = ddl.options[ddl.selectedIndex].text;
}
$("select").trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div><b>Primary dropdown:</b>
<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();">
<option value="" selected>Select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</div>
<div>
<b>Other dropdown 1</b>:
<select class='secondary' id="Qualifications" name="Qualifications" onChange="setTextField(this)">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select></div>
<input id="make_text" type="hidden" name="make_text" value="" />
<div> <b>Other dropdown 2</b>:
<select class='secondary' id="Qualifications2" name="Qualifications2">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</form>
PHP Code
$value =$_POST['make_text'];
Html element <select> onchange doesn't fire for programmatic changes, you need to fire it yourself with
$(".secondary").trigger("change");
or by Id
$("#Qualifications").trigger("change");
The problem is that your hidden <input> never had the value. if you remove the hidden it on your code you can check it.
So when you POSTED the values the value on make_text was empty string. So if you fire the trigger after the for loop then it will work.
function setDropDown() {
var index_name = document.getElementsByName('ForceSelection')[0].selectedIndex;
var others = document.querySelectorAll('.secondary');
for (var i = 0; i < others.length; i++) {
others[i].selectedIndex = index_name;
}
$("#Qualifications").trigger("change");
}
function setTextField(ddl) {
document.getElementById('make_text').value = ddl.value;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div><b>Primary dropdown:</b>
<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();">
<option value="" selected>Select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</div>
<div>
<b>Other dropdown 1</b>:
<select class='secondary' id="Qualifications" name="Qualifications" onChange="setTextField(this)">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select></div>
<input id="make_text" name="make_text" value="" />
<div> <b>Other dropdown 2</b>:
<select class='secondary' id="Qualifications2" name="Qualifications2">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</form>
I have to say that I don't see any need to use a hidden input text to POST data to PHP because you can just post the value of the <select> and retrieve it in PHP like this $force = $_POST["ForceSelection"];.
Otherwise, if you want to continue what you started, you can change your setDropDown() function to this :
function setDropDown() {
#Get the selected value of the ForceSelection select :
var index_name = $('#ForceSelection').val();
#Change the value of the other secondary select :
$(".secondary").each(function( index ) {
$(this).val(index_name).change();//This will change the value and trigger the change event.
});
}
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()