Hi I have an selection form which also changes between forms, meaning it's to choose between a product (also is the certain product) and post data after that.
<select class="select" name="product" style="width: 270px" onchange="location = this.options[this.selectedIndex].value;">
<option name="Product 1" selected value="orderform1.html">Product 1</option>
<option name="Product 2" value="orderform2.html">Product 2</option>
</select>
Switch between the product works fine, but post posts the data from the value, so i tried to to switch name and value and
location = this.options[this.selectedIndex].name;
But thats not working, any ideas hints what ever, thx for any help :)
Related
I want user to select a state just from this list :
<input list="states">
<datalist id="states">
<option value="Pendiente">Pendiente</option>
<option value="Frenada">Frenada</option>
<option value="Finalizada">Finalizada</option>
</datalist>
but also I don't want to use <select>, i know that but I want to keep the ability to type (and search among the options) but at last, one of the options must be selected.
please help me with this. I want to use it in react
You can set the value attribute of the input with the option value you want to be selected:
<input list="states" value="Pendiente">
<datalist id="states">
<option value="Pendiente">Pendiente</option>
<option value="Frenada">Frenada</option>
<option value="Finalizada">Finalizada</option>
</datalist>
I have this option selector which updates url adding ?type=size, type depends on option selected. I use $_GET to then get the data from url.
The problem is, after entering value in inputs (name, price, etc) before, then on selection part the page refreshes and the input data I entered before is gone.
<label>Type</label>
<select name="type" onchange="location = this.value;">
<option>Select...</option>
<option value="?type=size">Size</option>
<option value="?type=weight">Weight</option>
<option value="?type=dimension">Dimension</option>
</select>
How can I fix this?
I have a page where rows can be added which include drop downs (select) fields. each one of those fields is dynamically created with an id of "drop1, drop2, drop3" etc.
I'm wanting to achieve pulling some data from mysql with ajax, problem i'm having is knowing which drop down has changed to pull the data.
ive used this to know how many select fields there are currently, but don't know how to decide which one has changed. any help is appreciated.
var myCount = $("select[id^=drop]").length;
here is the row that gets added.
var n=($('.detail tr').length-0)+1;
var tr = '<tr>'+
'<td>'+n+'</td>'+
'<td><select id="drop'+n+'" name="prodService[]"></select></td>'+
'<td id="desc'+n+'"></td>'+
'<td>Delete</td>'+
'</tr>';
The whole idea around the select input it's like any input accepts all events. Any input takes click, change, input...etc let's say we have 3 select dropdown.
How to detect if any of them has changed and get the new value
$('.select-list').on('change', function(evt) {
console.log($(this).val()); // get the select value - new value if changed
console.log($(this).attr('id')); // just for implementation purposes and debugging
});
Going further you can implement something like: When the user selects an item from a dropdown, send a request to a server to get some data. You can do that with the value="" attribute, put keyword/key-trigger (just to differentiate between them) to send different request depending on what item has been selected.
$('.select-list').on('change', function(evt) {
console.log($(this).val()); // get the select value - new value if changed
console.log($(this).attr('id')); // just for implementation purposes and debugging
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select-list" name="items" id="itemsList1">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
<option value="4">item4</option>
</select>
<select class="select-list" name="items" id="itemsList2">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
<option value="4">item4</option>
</select>
<select class="select-list" name="items" id="itemsList3">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
<option value="4">item4</option>
</select>
I am trying to swap all the options between two Harvest Chosen select boxes. The scenario is I want to record details of a phone call. The call can either be inbound or outbound. If the call is outbound the I populate a select box (caller) with a list of possible values of those users that can make outbound calls and a second box (callee) with a list of possible values of those users they can make calls to. If the user updates the call type to be inbound then I want to swap the select boxes around so that the callee's are in the caller box and vice versa.
I very nearly have this working except each time I change the call type it keeps appending the values onto the end of the select options in each respective caller/callee select rather than completely clearing them and replacing all values.
Would appreciate some help as to why this is happening.
See http://jsfiddle.net/RyHFK
HTML
<label for="call_type">Call Type:</label>
<select name="call_type" id="call_type" class="chosen">
<option value="OUTGOING">Outgoing</option>
<option value="INCOMING">Incoming</option>
</select>
<label for="caller">Caller:</label>
<select name="caller" id="caller" class="caller chosen">
<option value="Caller 1">Caller 1</option>
<option value="Caller 2">Caller 2</option>
<option value="Caller 3">Caller 3</option>
<option value="OTHER">Other</option>
</select>
<label for="caller">Callee:</label>
<select name="callee" id="callee" class="callee chosen">
<option value="Callee 1">Callee 1</option>
<option value="Callee 2">Callee 2</option>
<option value="Callee 3">Callee 3</option>
<option value="OTHER">Other</option>
</select>
The way it's written, you are appending to the same arrays every time there is a change. Move your calleeOptions and callerOptions variables inside your change handler:
// on call type change
$('#call_type').change(function(){
var callerOptions = [];
var calleeOptions = [];
Here's a jsFiddle.
Here is the issue.
I have a select dropdown list.
<select name="listingtype" id="speedD" style="width:210px;">
<option>For Sale</option>
<option>For Rent</option>
</select>
And another select drop down list where the prices appear , which on page load it is empty..
So if user clicks For Sale: then the other select drop down list, loads price list like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
<option value="250000">$250,000</option>
And if they choose For Rent. Select drop down is propagated like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="100">$100</option>
<option value="150">$150</option>
<option value="200">$200</option>
<option value="250">$250</option>
<option value="300">$300</option>
</select>
I need this code to be client side, no need for server side. And just wanted to know what the cleanest method for doing this is.
Cheers.
First of all I recommend setting the value attribute in your option elements.
Example:
<option value="sale">For sale</option>
<option value="rent">For rent</option>
If you have not already heard of or seen the JavaScript library known as jQuery I strongly recommend checking it out! It can be very helpful when creating a dynamic site like this using minimal JavaScript.
I would do something like the following:
<html>
...
<body>
<div id="fillme"></div>
<script type="text/javascript">
if (document.yourformname.listingtype.value == "sale") {
//it is for sale
$('#fillme').html('<select name="valueA" id="speedF" style="width:200px;"><option value="Any" selected="selected">Any</option><option value="50000">$50,000</option><option value="100000">$100,000</option><option value="150000">$150,000</option><option value="200000">$200,000</option><option value="250000">$250,000</option></select>');
} else {
//fill it with the other elements
}
</script>
</body>
</html>
Now of course you could load it more dynamically with JSON or XML but that is up to you. I really recommend checking out the library:
http://jQuery.com
Use JavaScript to fill the empty select with options when the user selects an option (either onchange or onselect, forget which) in the For Sale/For Rent select.
EDIT: More specifically, have that second box be empty when the page loads. Store the options in arrays. Use a loop to create new OPTION elements based on each array item.