i'm try to create a autocomplete with datalist html this is my code:
<input type="text" id="options" name="options" list="list_option">
<datalist id="list_option">
<option value="1">Op1</option>
<option value="2">Op2</option>
</datalist>
<input type="button" onclick="data($('#options').val());" value="getId">
<script>
function data(term){
alert(term);
}
</script>
the list show correct the problem is if i select a item from my datalist on the input show the value, dont the name...
and how i can get this value(id).. please any suggest..thanks
"...dont the name... and how i can get this value(id)."
I have no idea what you mean...or how it relates to autocomplete.
The following Demo will run callback function getData() when the change event is fired on #options. The console (not alarm because it's irritating) will log two items:
Text Box Value
Run callback function getID() when the click event is fired on :button. The console will log:
Text Box ID
Data List ID
As for autocomplete behavior, you just add the autocomplete attribute to the text box tag or not, because it's on by default. To test it, just type in a letter.
.autocomplete() is not a built-in method of JavaScript or jQuery. You need to load jQuery UI as Mr. Noyon commented or a plugin.
BTW, never use an onclick attribute event handler when you have jQuery loaded. That's like pushing a car instead of driving it.
Demo
$('#options').on('change', getData);
$(':button').on('click', getID);
function getID(event) {
var textID = $('#options')[0].id;
var listID = $('#list')[0].id;
console.log('Text Box ID: #' + textID);
console.log('List ID: #' + listID);
}
function getData(event) {
var val = this.value;
console.log('Text Box Value: ' + val);
}
<input type="text" id="options" name="options" list="list" autocomplete>
<datalist id="list">
<option value='wallet'>wallet</option>
<option value='hair'>hair</option>
<option value='coasters'>coasters</option>
<option value='book'>book</option>
<option value='clay pot'>clay pot</option>
<option value='twezzers'>twezzers</option>
</datalist>
<input type='button' value='getID'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Related
I'm using jquery.load() to get an html code. This html is a form with js inside.
My problem, I want to get selected value of an input inside this form, but it returned "" even if there is an selected value..
Main-page.html:
url = "http://url-to-get-info-div";
$('#info').load(url);
The Main-page.html then has then a form and script inside
<div id="info">
<select name="nature" title="" required="" class="form-control" id="id_nature">
<option value="">---------</option>
<option value="a-specifier">A spécifier</option>
<option value="perte">Perte</option>
<option value="dommage">Dommage</option>
<option value="retard" selected="">Retard</option>
<option value="non-livre">Contestation livraison</option>
</select>
</div>
<script type="text/javascript">
----some script who need $("#id_nature)---
function calcul_indemnisation(nature_litige = $("#id_nature").val()){
---some work who use id_nature value---
return montant_indemnisation
}
$("#calcul_indemnisation").click(function(){
montant_indemnisation = calcul_indemnisation();
}
</script>
the problem is when a click on the button "#calcul_indemnisation, the return value is not correct because id_nature value is not got correctly
I resolve it ! In fact, I had another select with the same id further in the code! so there was a conflict with the id name
Use .on() to wire up generated elements, or use .load() syntax and give one function as parameter.
function calcul_indemnisation(){
var option = $('#id_nature').find(':selected');
var value = option.val();
var text = option.text();
//perform the calculations
return value;
};
//.load(url, function)
$('#info').load('url-you-need', function(){
//create click event in #calcul_indemnisation
$('#calcul_indemnisation').click(function(){
console.clear();
console.log('triggered with load .click(): ' + calcul_indemnisation());
});
});
//create click event on #calcul_indemnisation inside #info.
$('#info').on('click','#calcul_indemnisation',function(){
let montant_indemnisation = calcul_indemnisation();
console.log('triggered with .on() click: ' + montant_indemnisation);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="info">
<select name="nature" title="" required="" class="form-control" id="id_nature">
<option value="">---------</option>
<option value="a-specifier">A spécifier</option>
<option value="perte">Perte</option>
<option value="dommage">Dommage</option>
<option value="retard" selected="">Retard</option>
<option value="non-livre">Contestation livraison</option>
</select>
<input type="button" id="calcul_indemnisation" value="Click me!"/>
</div>
here's my javascript
function disp(s)
{
var st=document.getElementById("stats");
st=st.options[st.selectedIndex].text;
document.getElementById("sp").innerHTML="this is changing :"+s;
if(st=="Other")
{
document.getElementById(s).style.display="inline";
}
else
document.getElementById(s).style.display="none";
}
and here's my front end
Rain Guage Status
<select id="stats" onchange="disp('oth')"><option>
Good
</option>
<option>
Bad
</option>
<option>
Other
</option></select>
<input type="text" placeholder="Please enter the status briefly" style="display:none" id="oth">
Exposure
</td>
<td><select id="expo" onchange="disp('othe')"><option>
Good
</option>
<option>
Bad
</option>
<option>
Other
</option></select>
<input type="text" placeholder="Please enter the exposure briefly" style="display:none" id="othe">
the problem i'm facing is that exposure texbox opens up only when rainguage textbox is displayed... there's no relation to both of dropdowns except for the function which takes the id of textbox to display.
like if rainguage tb is displayed and exposure tb is displayed, i cannot hide exposure tb unless i hide rainguage tb. please help
It's because you are getting the element by id stats. Instead you can pass the element with your function.
<select id="stats" onchange="disp(this, 'oth')">
<select id="expo" onchange="disp(this, 'othe')">
and Update your function like this :
function disp(ele,s)
{
//var st=document.getElementById("stats"); No need for this line
var st=ele.options[ele.selectedIndex].text; //use ele from here
document.getElementById("sp").innerHTML="this is changing :"+s;
if(st=="Other")
{
document.getElementById(s).style.display="inline";
}
else
document.getElementById(s).style.display="none";
}
use onchange event for multiple select as follows.
1.give same class name for all select as below.
<select id="stats" class='select-box">
<select id="expo" class='select-box">
2.use jquery onchange function
$( ".select-box" ).change(function() {
alert( "option selected" );
});
I have form with a textfield, a dropdown menu, some radiobuttons and a textarea.
everything works fine except the dropdown menu.
Here is it:
<select class="dropdown" id="employee" size="1" class="text" value="">
<option value="1" selected="selected">Heino</option>
<option value="2">Michael Jackson</option>
<option value="3">Tom Waits</option>
<option value="4">Nina Hagen</option>
<option value="5">Marianne Rosenberg</option>
</select>
<button id="send" class="btn">Send</button>
If i click the button my JS gets every value but the dropdown shows undefined
$('#send').click(function() {
var result=true;
var name = $('input[name=name]');
var employee = $('input[name=employee)';
var product = $('input[name=product]:checked');
var knowledge = $('input[name=knowledge]:checked');
var message = $('textarea[name=message]');
// Data
var data = 'name=' + name.val() +
'&employee=' + employee.val() +
'&product=' + product.val() +
'&knowledge=' + knowledge.val() +
'&message=' + encodeURIComponent(message.val());
product and knowledge are radiobuttons. they work. name and message also.
Is there a way like the "checked" for the radio buttons?
this script should show a little success message if the formular was send successfully as an email.
First think, you forget closing ] bracket. second, you search for input where dropdown is select element. Third, you didn't add name attribute to dropdown element.
Change this code:
$('input[name=employee)';
into
$("#employee");
or
$('select[id=employee]');
Correction:
Sorry, try this
$('#employee').find(":selected").text();
http://jsbin.com/fihizupoko/1/edit?html,js,output
Thanks guys.
Got the answer with your help!
Changed the dropdown to:
<select style="width:341.5px" class="dropdown" name="employee" id="employee" size="1" class="text" value="">
<option value="Heino" selected="selected">Heino</option>
<option value="Michael Jackson">Michael Jackson</option>
<option value="Tom Waits">Tom Waits</option>
<option value="Nina Hagen">Nina Hagen</option>
<option value="Marianne Rosenberg">Marianne Rosenberg</option>
</select>
(Names in the value field)
an the JS to:
var employee = $('select[name=employee]');
Here :
var employee = $('input[name=employee)';
) in ' '
Change at :
var employee = $('input[name=employee]');
I am looking to add text to a textbox with the selected text from the dropdown menu and place a ',' after.().
<select>
<option value="1">This</option>
<option value="2">is</option>
<option value="3">test</option>
</select>
Now when you select the option 'is' the textbox gets updated with 'is,'. Now still on the same page you select 'This' the textbox gets updated with 'is, This,'. Reload the page and do it the other way around and you get 'This, is,'.
Hope you understand what I am trying to do here, the will contains values from the database so I cannot know what the values are exactly.
Thanks in advance.
I think something like this should work:
<select id="dropdownId">
<option value="1">This</option>
<option value="2">is</option>
<option value="3">test</option>
</select>
<input id="textboxId" type="text" />
<script type="text/javascript">
$('#dropdownId').on('change', function () {
$('#textboxId').val($('#textboxId').val() + $('#dropdownId option:selected').text() + ', ');
});
</script>
Fiddle
Trying to figure out how I can produce text dynamically in a text box of a form using javascript.
I want to select a type of event from a dropdown list which I have made and on that selection a value be input in to the textbox of the form for eventprice.
So far this is what I have but I have no value being produced in the textbox any help appreciated.
function totalprice(){
if($('#type').val() == '3'){
$('#eventprice') == ("45");
}
}
<input type="text" disabled="" id="eventprice" onChange="totalprice();" name="eventprice" class="form-input" />
If you don't mind using jQuery, it is going to be a breeze: you'll simply need to add the data attribute price to every option. What this function does is:
Compares the value of all options to the value currently visible in the select box when the value is changed.
If the values are the same, copies the data-attribute to the other input.
Working demo: http://jsbin.com/acuyux/6/edit
The HTML
<select id="type">
<option data-price="25">Party</option>
<option data-price="35">Meeting</option>
<option data-price="45">Lounge</option>
</select>
<input type="text" id="eventprice" name="eventprice" disabled="" class="form-input" />
The JS
$('#type').change(function totalprice(){
$('option').each(function() {
if($(this).val() === $('#type').val()) {
$('#eventprice').val($(this).data('price'));
}
});
});
I would recommend using jQuery due to its efficient code.
HTML:
<input type="text" disabled id="eventprice" />
<select id="select">
<option data-cost="5">Event 1</option>
<option data-cost="10">Event 2</option>
</select>
jQuery:
$('#select').change(function () {
var str = $(this).find('option:selected').data('cost');
$('#eventprice').val(str);
});
// This code can be used to run it on load
// $('#select').trigger('change');
Code in action:
http://jsfiddle.net/LkaWn/
Hope this helps :)
Modify the 3rd/4th line of your code to be $('#eventprice').val("45"); as suggested, except that the suggestion had a syntax error.