Use drop down list as query string - javascript

I have a drop-down list inside a form
<form id="myForm">
<select>
<option>ABC</option>
<option>xyz</option>
</select>
</form>
When an item is clicked, I want the user to be directed to a new page (i.e. 'newPage.aspx'), and this page will display the chosen option, e.g. inside a label (Label1)
I also have the 2 options stored in an array ->
myArray = new Array("ABC", "xyz"), if that helps

jQuery it:
$('select','#myForm').change(function() {
document.location.href = "/newPage.aspx?value=" + $(this).val();
});
Better solution (submitting the form, more friendly to search engines) would be:
HTML:
<form id="myForm" method="get" action="newPage.aspx">
<select name="mySelect">
<option value="ABC">ABC</option>
<option value="xyz">xyz</option>
</select>
</form>
javascript:
$('select','#myForm').change(function() {
$('#myForm').submit();
});

Make your drop-down list an ASP.NET server control (since you're using aspx)
In your codebehind, get the selected value from the dropdown list
In your codebehind, Response.Redirect to the URL (newpage.aspx?value=ABC)

Currently untested, but I think this should work:
var sel = document.getElementById('myForm').getElementsByTagName('select')[0];
sel.onchange() = function(){
var val = this.getElementsByTagName('option')[this.selectedIndex],
url = 'http://newPage.aspx?option=',
queryUrl = url + encodeURIComponent(val);
window.location = queryUrl;
});
References:
document.getElementById().
element.getElmentsByTagName().
element.onchange().
encodeURIComponent().
window.location.

Related

Dynamically set the value of select dropdown using query string paramater

To begin with, I'm new to Javascript.
I have a form with a select element with various options and I do not have access to change the form. There are no id's to the options, but just the values as shown in the code below.
<form>
<select class="country" name="country" id="countryid">
<option value="usa" selected="selected">USA</option>
<option value="canada">Canada</option>
<option value="japan">Japan</option>
<option value="china">China</option>
</select>
</form>
My goal is to populate the field in the above form automatically based on the url parameters.
For example, www.example.com?country=china should populate China in the form field. The following is the javascript code:
<script>
var param1var = getQueryVariable("country");
function displayresult(){
//document.getElementById(param1var).selected=true; //if there was id given in the form field
//cannot use document.getElementByValue(param1var).selected=true;
//document.querySelectorAll('input[value=' + param1var + ']').selected=true; does not work
}
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
}
</script>
I cannot use document.getElementById(param1var) because there is no id.
Javascript does not support document.getElementByValue(param1var).
document.querySelectorAll is not working.
Is there a way that I can reference the element using the option value?
Thanks!
You can just do it this way by setting the value of the select element. Also note that value is case sensitive, plus make sure that the function displayresult runs on onload or after the element appeared in the html.
document.getElementById("countryid").value=param1var;
Demo

customize java script function from particular page when that method is used by many pages

I have a drop down like
<select>
<option value="">Select</option>
<option value="1">ABC</option>
<option value="2">DEF</option>
</select>
I have the same select box in more than 10 places in different pages.This is populating through ajax.But when i am calling this from a particular page i need to select ABC by default.But i don't want in remaining places.
I don't want to write the code again in my page.Is there any possibility for this.
Thanks in advance...
It's going to be a very generic answer that you'll have to modify for your needs, but if the select and all other markup is the same on all pages, which is very unlikely, you have to check the URL to see if you're on a certain page.
At the bottom of the page, before </body>, you can do something like :
if ( window.location.href.indexOf('/mysite.html') != -1 ) {
document.getElementsByTagName('select')[0].value = '1';
}
This will set the default value of the first select on the page to 1, and show ABC, if the URL contains mysite.html.
FIDDLE
Here you have another example (with JQuery) taking into account the comment you did about loading your combos with options obtained with ajax: Try if yourself
JQUERY:
var options = "<option value=\"\">Select</option><option value=\"1\">ABC</option><option value=\"2\">DEF</option>";
function test() {
// Populate select with ID destiny 1 without selecting a value
populate("#destiny1", null, options);
// Populate select with ID destiny 2, selecting the value of the first index
populate("#destiny2", 1, options);
}
function populate(destiny, indexOption, options) {
$(destiny).html(options);
if (indexOption != null) {
$(destiny + " option")[indexOption].selected = true;
$(destiny).trigger("change");
}
}
HTML:
<select id="destiny1"></select>
<select id="destiny2"></select>
<input type="button" onclick="test()" value="TEST"></input>

How to set action value in form depending on the value of select?

How to set action value in form depending on the value of select?
<form action="/my-url/{{design.id}}" method="get">
<select name="producttype">
<option value="lite">Select one of option</option>
<option value="a">Option a</option>
<option value="b">Option b</option>
<option value="c">Option c</option>
</select>
</form>
How to create something like this:
If select option have value a my form action will be: <form action="/my-url/{{design.id}}/a" method="get">
If select option have value b my form action will be: <form action="/my-url/{{design.id}}/b" method="get">
this should work:
$("select[name='producttype']").change(function(){
var form = $("form");
var action = "/my-url/{{design.id}}/" + $(this).val();
form.attr("action", action);
});
Couple of things to note:
If you have multiple forms on the page, then you need a more accurate way of selecting the correct form - perhaps an id attribute
What is {{design.id}}? Is this meant to be generated dynamically?
A solution to Note 2 could be to include the base URL as a data-* attribute, something like this:
<form action="/my-url/{{design.id}}" data-baseurl="/my-url/{{design.id}}/" method="get">
and then change the above javascript to be like this:
var action = form.data("baseurl") + $(this).val();
Here is a working example
Try
$('select[name="producttype"]').change(function(){
var $this = $(this);
$this.closest('form').attr('action', '/my-url/' + $this.val())
})
You can try:
var producttype = document.getElementsByName("producttype")[0];
producttype.onchange = function() {
var form = document.getElementsByTagName("form")[0];
form.action = "/my-url/{{design.id}}/" + this.value;
}

How to get selected value in combo box?

If I have a form like this.
<form name="myform" action="" method="POST">
<select name="mydropdown">
<option value="A">AAA</option>
<option value="B">BBB</option>
<option value="C">CCC</option>
</select>
</form>
For radio buttons I would do
var type = $(this).find('input:radio[name="ctype"]:checked').val() || '';
but this can't I get to work on combo boxes.
How can I get the value of the selected option in a combo box?
Update
It is called on a webpage with many forms, so I need the selected value from this particular combo box.
Here is how I get the values from text boxes and radio buttons.
$('form').live('submit', function(){
var title = this.elements.title.value;
var type = $(this).find('input:radio[name="ctype"]:checked').val() || '';
var sect = ?
...
Simply :
$('select[name="mydropdown"]').val();
UPDATE:
And when inside one of the forms :
$('form').live('submit', function(){
var value_of_dropdown = $(this).find('select[name="mydropdown"]').val();
...
For select boxes its enough to use val() to get the selected value.
$('select[name="mydropdown"]').val();
EDIT: I edited the response because I could have sworn there was an id named mydropdown :)
$('select[name="mydropdown"] option:selected').val()
UPDATE:
$('form').live('submit', function(){
var value_of_dropdown = $(this).find('select[name="mydropdown"] option:selected').val();
...
});
Using jQuery, just go for it like:
$('select').val();
$('select[name="mydropdown"]').change(function() {
$('select[name="mydropdown"]').val();
});
Get value selected with javascript:
var countsw=document.getElementById("controlid").options[document.getElement.getElementById("controlid").selectedIndex].value;
With this code you can get value selected combobox even if client-side control has this attribute runat="server" that use in server-side.

Select box to change url

I want to use a select to change the query on the end of a url to change it's sort options. e.g:
<select id="sort">
<option value="?order_by=date">Recent</option>
<option value="?order_by=random">Popular</option>
<option value="?order_by=random">Random</option>
<option value="">Staff Picks</option>
</select>
so for example by default a list of posts will be shown by date and then if a user chooses an option it will reload the page with the query string on the end of the URL. If possible looking to use jQuery to achieve this. Thanks.
Attach a handler to the change event for the select box that adds the value of the selected option to the current window location with everything after the ? snipped off:
$('#sort').change(function(e){
var locAppend = $(this).find('option:selected').val(),
locSnip = window.location.href.split('?')[0];
window.location.href = locSnip + locAppend;
});
Here's an example ࢐ (it doesn't redirect, but you get the idea...)
To have the appropriate value selected on page load, you can run the following function before you bind the change handler:
function selectCurSort() {
var match = window.location.href.split('?')[1];
$('#sort').find('option[value$="'+match+'"]').attr('selected',true);
}
selectCurSort();
I'm not quite sure why you aren't just using something like:
<form method="GET">
<input type="hidden" name="query" value="..." />
<select id="sort" name="order_by">
<option value="date">Recent</option>
<option value="popular">Popular</option>
<option value="random">Random</option>
<option value="staff">Staff Picks</option>
</select>
<input type="submit" value="Sort" />
</form>
And, for the JS, if any, just:
$('#sort').change(function() {
$(this).parents('form').submit();
});
Then, you don't require anyone to have JavaScript enabled.
Like this?
$("#sort").change(function(){
window.location = $(this).find("option:selected").val();
});
Add
onchange="if (this.value && /^\?/.test(this.value)) location = location.path + this.value"
to your <select>.
You might want to put a blank option at the top too.
$(function() {
$("#sort").change(function() {
var myVal = $(this).val();
window.location = "www.mywebsite.com/"+ myVal;
});
var qs = window.location.pathname;
$("#sort option").each(function() {
if(qs.contains($(this).val()))
$(this).addAttr("selected","selected");
});
});
Try that.

Categories

Resources