How can I transfer value from selectbox to textbox? - javascript

I'm using a database and there are 3 columns such as id, bname, and author.
Selectbox takes its value from database's bname column. I can send bname value to textbox by using "onchange="this.form.author.value=this.options[this.selectedIndex].value". But I want to call author value into textbox by taking from database when selectbox changed. How can I do this?
<td>Book name :<select name="bname">
<% do while not a.eof %>
<option value="<%=a("bname")%>"><%=a("bname")%></option>
<% a.movenext
loop%></select></td>
<td>Author: <INPUT TYPE="text" NAME="author"></font></td>

I think you are asking how to append the author's name to your textbox. You can use your same code with one little change, add the +=:
<select name="bname" onchange="this.form.dsayi.value+=this.options[this.selectedIndex].innerHTML">

Related

jQuery Fetch/Display data to dropdown when an id or data is selected on edit

I'm trying to fetch the data into my dropdown when I edit an id or data, right now the value that is being fetched is null or none of the options that I have in my dropdown. Kindly help on how can I fetch the data using jquery / javascript.
So my final output should be, when I choose an ID, the value of the dropdown should be displayed
here is my html code below, I have the dropdown input
<select id="position" name="position" class="form-control">
<option>Select Role</option>
<option value="Admin" data-id="1">Admin</option>
<option value="Staff" data-id="2">Staff</option>
</select>
here is my script code below,which I use to choose an id to edit or view
variable I declare
var position = $('input[name=position]');
my ajax code
success: function(data){
$('input[name=position]').val(data.position); // here is the value from the dropdown
}
You aren't selecting the <select> element, your selector should be
$('select[name=position]').val(data.position);
Your original selector was looking for an <input> tag, while you might consider a <select> as an input control the selectors operate on the tag name which is select

Auto fill form using javascript - get data from datalist

I have an autocomplete field that receives it's data from a database:
<datalist id="custlist">
<?php
$q_cust=mysql_query("select * from customer where rowstatus='0' order by id");
if (mysql_num_rows($q_cust)>0) {
while ($row=mysql_fetch_array($q_cust)){
print '<option value="'.$row['id'].'">'.$row['name'].'</option>';
}
}
?>
</datalist>
Below is my HTML for the codelist:
<tr>
<td></td>
<td><h3>Field 1</h3></td>
<td>:</td>
<td><input class="awesomplete" required="required" id="cust" name ="custnama" list="custlist" /></h3></td>
<td></td>
</tr>
The autocomplete works fine (I'm using the awesomplete widget) and when I select one of the customer names, the input 1 field will automatically show the ID of the customer.
What I want to do is having another field, let's say "input 2" that will show the customer name when the user selects the ID from the input 1 field.
Since I already stored the name as well on the data list, can I just get it from the datalist and show it in the input 2 field based on the value of input 1 using JavaScript?
If i can't do that please explain me the simplest way to get it done.

Customize html datalist dropdown

I want to customize the way datalist drop down shows. I have the following datalist right now
<input type="text" id="employee" list="employee">
<datalist id="employee">
<option value="John Doe">John Doe (ID: 1)</option>
<option value="Jane Doe">Jane Doe (ID: 2)</option>
<option value="John Jane">John Jane (ID: 3)</option>
</datalist>
When I type on the input box, I see the output like this
But my requirement is to make it look like below and
When the drop down is selected, only the name should be selected (without the id). Something like this:
How can I do this? Basically I want to show more details in the dropdown but select only the Name and not the Id for submitting the form. Also, I dont want 2 columns (darker and lighter) in the dropdown. I just want the value with more information.
Here is the JSFiddle which I used for this question.
P.S. - I am generating this datalist dynamically from Ajax Call based on the user input in text field. Also, I cannot use jquery to manipulate anything. It has to be native javascript.
The second column is appearing because you are putting content between the opening and closing tags. Change:
<option value="John Doe">John Doe (ID: 1)</option>
to:
<option value="John Doe"></option>
to remove the second column.
This can be done on receiving the data via the AJAX call, simply, create the option in JavaScript:
var option = document.createElement("option");
option.value = name + " (ID: " + id + ")";
document.getElementById("my-datalist").appendChild(option);
The above code will make one column, however, it contains the ID in the value field. You would have to remove that before submitting if you didn't want it submitted with the form. Or you can have two columns one for the name (value attribute) and one for the ID (text content).
For more information, refer to this link.

Determining selected value in cfselect and setting it to a variable

I have a couple of dropdown menus using cfselect e.g. city and country. I'm wondering how I determine the selected value and set variables to those values for use in another cfform.
Thanks.
Form1.cfm
<cfselect name="city">
<cfselect name="country">
After submitting the form to form2.cfm, city and country are available in the form scope and contain the selected choices by the user. No different than an HTML form?
Form2.cfm
<cfinput name="chosenCity" value="#form.city#">
<cfinput name="chosenCountry" value="#form.country#">

Display selected option

I have a drop-down list. After a user selects a language, the selected language is sent to the server. I want to show the selected values on the selected option button.
For example, a user selects a "de", I wish "de'" is displayed on the form, instead of "en".
How can I do this? Thanks
<form name="languages" method="post">
<select name="langSelect" onchange="">
<option>en (default)</option>
{% for ele in comments.languages.all %}
<option>{{ele.lang}}</option>
{% endfor %}
</select>
<div><a onclick="submitform()">Submit</a></div>
</form>
First off, why is your button not a Submit button? If it submits the form you should use <input type="submit">Submit</input>
If you use jQuery, then you can say:
var selectedVal = $("#langSelect").val();
$("#languages submit").val(selectedVal);
I would put this in one statement but did it like this for clarity.
One other thing, you should use the id attribute as well/instead of just Name.
Value of select box will contain selected option value.
var selectedValue = document.getElementById("langSelect").value
Better use jQuery to achieve that, IE may have some issues (as always): http://www.impressivewebs.com/avoiding-problems-with-javascript-getelementbyid-method-in-internet-explorer-7/
In jQuery just type
$('[id=langSelect]').val();
for getting a value and
val('myValue')
for setting it. So you may set your name by
$('[id=selectedOptionButton]').val($('[id=langSelect]').val());

Categories

Resources