I have 2 selections and a textbox. I want to change the onBlur value of the textbox when i select one of the selections. Here is my code:
function changeBlurValue(){
$selection = document.getElementById("searchtype")
$onblurvalue= document.getElementById("searchbox")
if ($selection.value="location"){
$onblurvalue.value="Enter a location name";
};
}
//html
<select name= "searchtype" id="searchtype" onclick="changeBlurValue()">
<option value="gymname">Gym Name
<option value="location">Location
</select><br><br>
<input name="searchterm" type="text" size="39" style="color:#888;" id="searchbox"
value="Enter a gym name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />
The problem is that the selection is permanent at "Location" and I can't change it to "Gym Name"
Thanks for the help.
The problem lies here:
if ($selection.value="location"){
You should change it to
if ($selection.value=="location"){
because you are making a comparision.
I would try using onChange instead of onClick for your select.
<select name= "searchtype" id="searchtype" onchange="changeBlurValue()">
Also close your <option> tags, as such:
<select name= "searchtype" id="searchtype" onchange="changeBlurValue()">
<option value="gymname">Gym Name</option>
<option value="location">Location</option>
</select>
Related
I can't get the form action to change based on a user's drop-down selection. What I want to do is have the form redirect to a different page, then the default for the form if a user selects "Student Loans" from the select field named "agency".
In other words, what I want to do is that if someone select "student loans" for the agency, I want the page to submit to /quote/quotes-sl.php instead of quote/quotes.php (the default of the form).
Here is my form code:
<form id="tdhcustom-pre-1-form" accept-charset="UTF-8" onsubmit="submit_function(this)" action="/quote/quotes.php" method="post" name="tdhcustom-pre-1-form">
<input id="edit-lead-source-description" name="lead_source_description" type="hidden" value="test" />
<label class="edit-owed" for="edit-owed"> Amount Owed: <span class="form-required" title="This field is required.">*</span>
</label><select id="owed" class="form-select required" name="owed">
<option selected="selected" value="">Select...</option>
<option value="$10,000 to $14,999">$10,000 to $14,999</option>
<option value="$15,000+">$15,000+</option>
</select>
<label class="edit-agency" for="edit-agency"> Problem With: <span class="form-required" title="This field is required.">*</span>
</label><select id="agency" class="form-select required" name="agency">
<option selected="selected" value="">Select Agency...</option>
<option value="Student Loan" data-action="/quote/quotes-sl.php">Student Loan</option>
<option value="FEDERAL">Federal Taxes</option>
<option value="STATE">State Taxes</option>
</select></div>
<input id="edit-submit" class="form-submit" height="31" name="submit" src="test.com/test.jpg" type="image" value="Submit" width="214" />
<input id="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" name="form_build_id" type="hidden" value="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" />
<input id="edit-tdhcustom-pre-1-form" name="form_id" type="hidden" value="tdhcustom_pre_1_form" />
</form>
Here is the javascript:
<script>
function submit_function(form) {
var selected = document.getElementById('Agency');
var dataset = selected[selected.selectedIndex].dataset;
if (dataset.action) {
form.action = dataset.action;
}
return true;
};
</script>
Add trigger on selected option val = "Student Loan" , then change attribute "action" form to url "/quote/quotes-sl.php"
$('#agency').on('change',function(){
var selected = $(this).val();
if(selected == "Student Loan")
$('#tdhcustom-pre-1-form').prop('action',"/quote/quotes-sl.php");
});
CMIIW :D
You want to change the form action based on an onchange event from your <select> ... but you'll also want to remove the onsubmit attribute from your form, like so:
<form id="tdhcustom-pre-1-form" accept-charset="UTF-8" action="/quote/quotes.php" method="post" name="tdhcustom-pre-1-form">
Assuming you're going to have data attributes on all the options like this:
<select id="agency" class="form-select required" name="agency">
<option selected="selected" value="">Select Agency...</option>
<option value="Student Loan" data-action="/quote/quotes-sl.php">Student Loan</option>
<option value="FEDERAL" data-action="/quote/quotes-s2.php">Federal Taxes</option>
<option value="STATE" data-action="/quote/quotes-s3.php">State Taxes</option>
</select>
You can just replace your <script> block with:
<script>
(function() {
var theForm = document.getElementById('tdhcustom-pre-1-form');
var theSelector = document.getElementById('agency');
theSelector.onchange = function() {
theForm.action = theSelector[theSelector.selectedIndex].getAttribute('data-action');
}
})();
</script>
That's pure JavaScript - so without jQuery (or any other framework).
I have used the concept of multiple textboxes having same class fill with the multiple dropdown option selection which also having same class.I have facing problems in it.when i click the first dropdown option then it change the second textbox value.I want that if i click on first dropdown option it changes the values of first textbox not other or if click the second dropdown option it will change the value of second textbox.
<form action="" method="post">
<select name="drop[]" id="budget" class="drop">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
</select>
<input type="text" name="txt" id="txt" class="txt" value="text1"><br>
<select name="drop[]" id="budget1" class="drop">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
</select>
<input type="text" name="txt" id="txt1" class="txt" value="text2">
</form>
$('input[name="txt"]').each(function () {
$('.drop').on('change', function(){
var total = $(this).val();
$('input[name="txt"]').val($(this).find("option:selected").attr("value"));
});
});
You need to find out the next input element which should be updated when you change a select element. You can use the below code to achieve this.
$('.drop').on('change', function(){
var total = $(this).val();
$(this).next("input:first").val($(this).find("option:selected").attr("value"));
});
Plunker : https://plnkr.co/edit/qFjuFtwhHBvDE9zxAup2?p=preview
I'm trying to use an auto complete dropdown menu using the HTML5 datalist attribute, without JQuery. But I want each suggestion, when selected, goes to an specific link (or when pressed enter, goes to the first suggestion).
What I have right now is:
<form action="www.site.com/search?q=" method="get">
<input name="q" type="text" id="txtAutoComplete" list="languageList"/>
<datalist id="languageList">
<option value="OPTION1" />
<option value="OPTION2" />
</datalist>
</form>
In this case, it performs a search in the site. I want each option to open a specific link, OR to use value at the end of the link http://www.hitsebeats.ninja/search/label/VALUE_HERE, which goes to the correct label in Blogger. In this last case, I thought about adding the event onclick:
<datalist id="languageList" onclick='location=this.options[this.selectedIndex].value;>
<option value='http://www.hitsebeats.ninja/search/label/OPTION1'>
OPTION1
</option>
</datalist>
But no success.
Adding another answer after OP feedback in the comments. This should redirect only if the typed option exists in the datalist.
<script>
function redirect(value) {
var options = document.getElementById("languageList").options;
for(var i = 0; i < options.length; i++) {
if (options[i].value == value)
window.location='http://www.example.com/' + value;
};
}
</script>
<form action="http://www.example.com/search?q=" method="get">
<input name="q" type="text" id="txtAutoComplete" list="languageList" onchange="redirect(this.value)" />
<datalist id="languageList">
<option value='OPTION1'>OPTION1</option>
<option value='OPTION2'>OPTION2</option>
</datalist>
</form>
First Attempt
Using oninput on the input element you can change the location depending on what option you choose.
<form action="http://www.example.com/search?q=" method="get">
<input name="q" type="text" id="txtAutoComplete" list="languageList" onchange="window.location='http://www.example.com/' + this.value" />
<datalist id="languageList">
<option value='OPTION1'>OPTION1</option>
<option value='OPTION2'>OPTION2</option>
</datalist>
</form>
Tell me if it is what you expected or not.
So just you know, datalist doesn't have selected events, it's not a user control. But you can listen to the input change event and them use it to change the url.
<FORM METHOD="POST" ACTION="mailto:mariamcsorley#hotmail.com">
<p> Name: <INPUT TYPE="text" NAME= "name" SIZE="30"> </p>
<p> Email: <INPUT TYPE="text" NAME= "email" SIZE="30"> </p>
<p> Phone: <INPUT TYPE="text" NAME= "telephone" SIZE="30"> </p>
<p> Practice: <SELECT NAME= "practice" SIZE="1">
<OPTION SELECTED>*Select Practice*
<OPTION>Dungannon
<OPTION>Cookstown
<OPTION>Coalisland
<OPTION>Portnaglone
<OPTION>Aughnacloy
</SELECT> </p>
<p> Species: <SELECT NAME= "species" SIZE="1">
<OPTION SELECTED>*Select Species*
<OPTION>Small Animal
<OPTION>Equine
<OPTION>Farm
<OPTION>Pig
<OPTION>Poultry
</SELECT> </p>
<p> Preferred Date: <SELECT NAME= "day" SIZE="1">
<OPTION SELECTED>*Day* <OPTION>01 <OPTION>02 <OPTION>03 <OPTION>04 <OPTION>05 <OPTION>06 <OPTION>07 <OPTION>08 <OPTION>09 <OPTION>10 <OPTION>11 <OPTION>12 <OPTION>13 <OPTION>14 <OPTION>15 <OPTION>16 <OPTION>17 <OPTION>18 <OPTION>19 <OPTION>20 <OPTION>21 <OPTION>22 <OPTION>23 <OPTION>24 <OPTION>25 <OPTION>26 <OPTION>27 <OPTION>28 <OPTION>29 <OPTION>30 <OPTION>31 </SELECT>
<SELECT NAME="month" SIZE="1">
<OPTION SELECTED>*Month* <OPTION>Jan <OPTION>Feb <OPTION>Mar <OPTION>Apr <OPTION>May <OPTION>Jun <OPTION>Jul <OPTION>Aug <OPTION>Sep <OPTION>Oct <OPTION>Nov <OPTION>Dec </SELECT>
<SELECT NAME="year" SIZE="1">
<OPTION SELECTED>*Year* <OPTION>2016 <OPTION>2017 <OPTION>2018 <OPTION>2019 <OPTION>2020 <OPTION>2021 <OPTION>2022 <OPTION>2023 <OPTION>2024 <OPTION>2025 <OPTION>2026 <OPTION>2027 </SELECT> </p>
<p> Preferred Time: <SELECT NAME="hour" SIZE="1">
<OPTION SELECTED>*Hour* <OPTION>08 <OPTION>09 <OPTION>10 <OPTION>11 <OPTION>12 <OPTION>13 <OPTION>14 <OPTION>15 <OPTION>16 <OPTION>17 <OPTION>18 <OPTION>19 <OPTION>20 </SELECT>
<SELECT NAME="minute" SIZE="1">
<OPTION SELECTED>*Minute* <OPTION>00 <OPTION>15 <OPTION>30 <OPTION>45 </SELECT> </p>
<p> Details: <TEXTAREA NAME="details" ROWS=6 COLS=40>
</TEXTAREA> </p>
<INPUT TYPE="submit">
</form>
Hi there, Is there any way at all that I can use php or a function in order to change the email as the practice is changed. For example when Dungannon is selected from the practice drop down menu that dungannon#dungannon.com is emailed and when Coalisland is selected it emails the form to coalisland#coalisland.com?
I know nothing about this and so have been trying to figure it out and googling solutions but I cant seem to get anything to work - any help is appreciated greatly... thank you!
Change your html code
<INPUT TYPE="text" id="email" NAME= "email" SIZE="30"> <br>
and
Practice: <SELECT NAME= "practice" SIZE="1"onChange="getData(this);">
<OPTION SELECTED>*Select Practice*
<OPTION>Dungannon
<OPTION>Cookstown
<OPTION>Coalisland
<OPTION>Portnaglone
<OPTION>Aughnacloy
</SELECT>
Javascirpt code
function getData(title)
{
var selectedText = title.options[title.selectedIndex].text
var emailValue="";
if(selectedText=="Dungannon")
{
emailValue = "dungannon#dungannon.co.uk";
}
else if(selectedText=="Cookstown"){
emailValue= "cookstown#cookstown.co.uk";
}
document.getElementById("email").value = emailValue;
}
Here is working codepen
To set the email address in your form element, modify the html to include the onchange event handler as below and then add the javascript below.
<p> practice: <select name="practice" onchange='setemail(this.value)'>
<option selected hidden='true'>*select practice*
<option value='dungannon'>dungannon
<option value='cookstown'>cookstown
<option value='coalisland'>coalisland
<option value='portnaglone'>portnaglone
<option value='aughnacloy'>aughnacloy
</select> </p>
<script>
function setemail(value){
/* to change form action */
document.querySelectorAll('form[name="frmhot"]')[0].setAttribute('action','mailto:'+value+'#'+value+'.co.uk' );
/* to set value of text field called `email` */
document.querySelectorAll('form[name="frmhot"] input[type="text"][name="email"]')[0].value=value+'#'+value+'.com';
}
</script>
I notice that the form method has been changed to your email address - I'm not 100% sure that this will work as you expect but if you wish to change the form action instead of / or as well as changing the value of the email field in the form then a slight modification to the javascript function is required.
Setting the form action as a mailto will most likely invoke the mail client on the client computer ( not sure how it would work on a mobile ) - is that the intended method of operation or is it supposed to send the email directly?
From #OP:
It's for an app so I have one page of code to do this on so would have to put the tag in if I was to do a function. I am clueless but when you click submit I want it to be able to change to email the practice.. am i explaining this correctly?
This question already has answers here:
Show datalist labels but submit the actual value
(6 answers)
Closed 7 years ago.
I am using a <input type='text'> Element together with a <datalist> to provide user name suggestions for a form. Everything works as expected and all my user show up.
However, when the user submits the form I would like select the right user in my data storage based on the input. Unfortunately, names are not unique and there is a chance for duplicates. To avoid this, all my users have a unique ID that is also part of the <datalist>'s <options> tags.
Is there any way I can read anything else but the input's text value? Is there a reference to the selected datalist element? Can I retrieve a user's id based on the text input?
<input type="text" class="form-control" name="userName" placeholder="Type a user's name" value="" list="user-datalist" required autofocus>
<datalist id="user-datalist">
<option id="53c911ea609252c600632dfe" value="Mr Smith">Mr Smith</option>
<option id="53c911ea60925sdfs4e444eg" value="John Snow">John Snow</option>
<option id="53c911ea6034534535k345th" value="John Snow">John Snow</option>
<option id="53c911ea60925234234234er" value="Mickey Mouse">Mickey Mouse</option>
</datalist>
As you said name are not unique. so i have added a duplicate name to your datalist.
<input type="text" class="form-control" name="userName" placeholder="Type a user's name" value="" list="user-datalist" required autofocus>
<datalist id="user-datalist">
<option id="53c911ea609252c600632dfe" value="Mr Smith">Mr Smith</option>
<option id="53c911ea60925sdfs4e444eg1" value="John Snow">John Snow</option>
<option id="53c911ea60925sdfs4e444eg2" value="John Snow">John Snow</option>
<option id="53c911ea60925234234234er" value="Mickey Mouse">Mickey Mouse</option>
</datalist>
<input type="button" id="sub" value="sub"/>
and getting the id of name
$('#sub').on('click',function(){
var g=$('input[type="text"]').val();
var id = $('#user-datalist').find('option').filter(function() { return $.trim( $(this).text() ) === g; }).attr('id');
alert(id);
});
DEMO
try this (JQuery AutoComplete):
dont forget to reference Jquery.js and JqueryUI.js on your project
HTML
<input id="input_autocomplete" type="text" class="form-control" name="userName" placeholder="Type a user's name" value="" required autofocus>
<datalist id="user-datalist">
<option id="53c911ea609252c600632dfe" value="Mr Smith">Mr Smith</option>
<option id="53c911ea60925sdfs4e444eg" value="John Snow">John Snow</option>
<option id="53c911ea6034534535k345th" value="John Snow">John Snow</option>
<option id="53c911ea60925234234234er" value="Mickey Mouse">Mickey Mouse</option>
</datalist>
JAVASCRIPT AND JQUERY
function GetValues() {
$list = [];
$('#user-datalist').children().each(function () {
var value = $(this).val();
var id = $(this).attr('id');
var item = {
id: id,
value: value
};
$list.push(item);
});
return $list;
}
$(document).ready(function () {
$('#input_autocomplete').autocomplete({
source: GetValues(),
change: function (event, ui) {
alert(ui.item.id)
}
});
});