I have four radio buttons to select a country. When a user clicks on any of the radio button, I use Ajax to get the states of that country. In order to show the end user that we are processing the data, I use a roller image(gif).
When any user clicks on of country radio, in the method (onclick event of radio), loadStates(), I enable the roller image by setting it's display property to 'inline'.
Then send a request to the server using Ajax(for showing a working example, I have removed that code and have inserted a "sleep" instead, just to show that it takes some time).
Right after getting the result, I put back the display property to 'none'.
However it is not working. Can anybody tell me how to fix it ?
PS : I dont want to use jQuery for the time being, only Javascript please.
<html>
<head>
<script type="text/javascript">
window.onload = init;
function init() {
countryFunctions();
}//init
function countryFunctions() {
var inputElems = document.forms[0].getElementsByTagName('input');
for (var i = 0, j = inputElems.length; i < j; i++) {
var elemName = inputElems[i].name;
if ( typeof elemName != 'undefined' && elemName === 'country' ) {
//inputElems[i].onmouseup = showRoller;
inputElems[i].onclick = loadStates;
}//if
}//for
return;
}
function loadStates() {
var action = 'get_states';
document.getElementById("fSpinner").style.display = "inline";
//alert("hi........");
var result = doLoad(action);
document.getElementById("countryStates").innerHTML = result;
document.getElementById("fSpinner").style.display = "none";
}
function doLoad(action) {//A dummy function just show what it returns (actually it is Ajax)
sleep(7000);
var value = "\
<p>\
Which state of the country would you like to go?\
</p>\
<select name=\"state\">\
<option value=\"1362\">Delhi</option>\
<option value=\"481\">Kerala</option>\
<option value=\"666\">Punjab</option>\
<option value=\"668\">Kashmir</option>\
</select>";
return(value);
}
function sleep(ms) {
var unixtime_ms = new Date().getTime();
while(new Date().getTime() < unixtime_ms + ms) {}
}
</script>
<style type="text/css">
#fSpinner { display:none; }
</style>
</head>
<body>
<form>
<p>What country do you belong to?</p>
<p>
<input name="country" value="in" type="radio"> India
<input name="country" value="au" type="radio"> Australia
<input name="country" value="nz" type="radio"> New Zealand
<input name="country" value="my" type="radio"> Malaysia
<span id="fSpinner">
<img style="vertical-align:text-bottom;" src="http://107.20.148.146/shak/images/roller.gif">
</span>
</p>
<div id="countryStates"></div>
</form>
</body>
</html>
The sleep function "blocks" the browser, the page is not refreshed until the function returns.
To simulate an asynchronous process, like an AJAX call, use setTimeout instead:
function loadStates() {
var action = 'get_states';
document.getElementById("fSpinner").style.display = "inline";
setTimeout( function() {
var value = "\
<p>\
Which state of the country would you like to go?\
</p>\
<select name=\"state\">\
<option value=\"1362\">Delhi</option>\
<option value=\"481\">Kerala</option>\
<option value=\"666\">Punjab</option>\
<option value=\"668\">Kashmir</option>\
</select>";
document.getElementById("countryStates").innerHTML = value;
document.getElementById("fSpinner").style.display = "none";
}, 7000) ;
}
Related
Javascript and I will never be best friends.
I try to set a checkbox to checked by changing the elements from a dropdownlist.
This is the snippet
<select name="change_status_to" id="sel">
<option>....</option>
<option>....</option>
</select>
<input type="checkbox" name="do_status_change" value="on">
How could I use Javascript with the onchange-event to set the checkbox to the state checked?
You can set its .checked property:
document.getElementById("do_status_change").checked = true;
document.getElementById("do_status_change").checked = false;
However, you need to set an id; the name attribute will not suffice.
> Example <
Here is an example of why you should be friends with javascript.
JSFiddle - http://jsfiddle.net/juc7Q/1/
HTML
You're feeling toward Javascript
<select name="friends" id="friends">
<option value="love">I love JS</option>
<option value="weird">JS is weird</option>
<option value="misunderstood">Are we speaking the same language?</option>
</select>
<button id="selectWeird">Keep JS Weird</button>
<div>
<input type="checkbox" id="we_friends"> - Friends?
</div>
JavaScript
//Select this using js
var list = document.getElementById('friends');
var cb = document.getElementById('we_friends');
//Add event when change happens
list.onchange = function () {
var value = list.value;
if(value == 'love') {
alert('I knew you would come around');
cb.setAttribute('checked', '');
} else if(value == 'weird') {
alert('And I like being weird :-)!!');
cb.removeAttribute('checked');
} else {
alert('And you think I understand you?');
cb.removeAttribute('checked');
}
}
//Change to 'Weird' when I click on it
var btn = document.getElementById('selectWeird');
btn.onclick = function () {
list.options.selectedIndex = 1;
}
For a project I am working on, I need a multiple input list with a one click (de)selection, which work with the Internet Explorer (10). I found and modified this code, which is working very well:
But there is a problem:
The value of the selected options should be sent through the Post-Method to a PHP-script, but it sends only one selected value. After searching the web, I found out that I needed to name the NAME of my <select> like an array. So I changed NAME="sel_current" to NAME="sel_current[]". But with this change, this script stopped to work.
I hoped a change in document.forms[0].sel_current in init() to document.forms[0].sel_current[] would fix it, but it doesn't.
<HTML>
<HEAD>
<TITLE>Multi-select test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var multiSelect_current = new Object();
function storemultiSelect_current_current(obj) {
var name = obj.name;
multiSelect_current[name] = new Array();
for (var i=0; i<obj.options.length; i++) {
multiSelect_current[name][i] = obj.options[i].selected;
}
}
function changemultiSelect_current(obj) {
var name = obj.name;
for (var i=0; i<obj.options.length; i++) {
if (obj.options[i].selected) {
multiSelect_current[name][i] = !multiSelect_current[name][i];
}
obj.options[i].selected = multiSelect_current[name][i];
}
}
function init() {
storemultiSelect_current_current(document.forms[0].sel_current);
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<FORM>
<SELECT NAME="sel_current" MULTIPLE METHOD="post" SIZE=10 onChange="changemultiSelect_current(this)">
<OPTION value="1">1111</OPTION>
<OPTION value="2" selected>2222</OPTION>
<OPTION value="3">3333</OPTION>
<OPTION value="4">4444</OPTION>
<OPTION value="5" selected>5555</OPTION>
<OPTION value="6">6666</OPTION>
<OPTION value="7">7777</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
You can use JSON.stringify(multiSelect_current[name]) finally, when sending to your server.
In the function storemultiSelect_current_current's for loop, modify this : multiSelect_current[name][i][obj.options[i].innerText] = (obj.options[i].selected == true);
screenshot :
What I'm trying to do is this:
When a job is selected from a drop-down list, I want to populate the hourlyRate field in the totals table with an amount.
This is my dropdown list:
<fieldset>
<legend>What is your position?</legend>
<select name="job" id="job">
<option value="job0">Please select a position:</option>
<option value="job1">Server/Bartender</option>
<option value="job2">Greeter/Busser</option>
<option value="job3">Kitchen Support</option>
</select>
</fieldset>
This is my totals table:
<div id="totals">
<table width="408">
<tr>
<td width="214">Hourly Rate:</td><td width="57" id="hourlyRate"></td></tr>
</table>
</div>
This is my javascript:
var $ = function (id) {
return document.getElementById(id);
}
function rateChange () {
var rate="";
if ($('job').value == 'job0') {
rate = '0';
}
if ($('job').value == 'job1') {
rate = '12';
}
if ($('job').value == 'job2') {
rate = '10';
}
if ($('job').value == 'job3') {
rate = '11';
}
$('hourlyRate').innerHTML = "$ " + rate;
}
window.onload = function () {
$('job').onchange = rateChange();
}
So if someone selects server/bartender from the dropdown list, I want the hourlyRate field in my totals table to display $12. I cannot figure out what I am doing wrong!
It looks like you're calling your function straight away, instead of telling it to be called on the onchange event:
$('job').onchange = rateChange();
So the return value of rateChange (nothing) is assigned to the onchange event.
Try this:
$('job').onchange = rateChange;
Now the rateChange function is the function that will be run when the onchange event fires.
if you want to add an handlerfunction to your event you must not add the brackets...
you have to wirte:
$('job').onchange = rateChange;
just tried... works fine.
if you're adding the brackets the function will be called only one time in window.onload...
I have some javascript which is taking an input from a URL such as...
www.mydomain.com/?dropdown=Alpha
This will then pre-select Alpha from the dropdown box located at myform -> mydiv
function show(choice) {
var success = -1;
for (var i=0; i < document.myform.mydiv.length; i++) {
if (document.myform.mydiv.options[i].text == choice)
success = [i];
}
document.myform.mydiv.selectedIndex=success;
}
var choice = (location.href.split("?")[1] || '').split("=")[1];
Everything works fine apart from if you visit the url with no extension so www.mydomain.com - It then throws the following error...
document.myform.mydiv is undefined
The drop down html is...
<form name="myform">
<select name="mydiv">
<option value="1">Alpha</option>
<option value="2">Beta</option>
<option value="3">Gamma</option>
<option value="4">Delta</option>
</select>
</form>
<script>
show(choice);
</script>
This is pretty self explanatory and I understand that this is because it is undefined, my question is how do I add a check to fix?
I think your java script Function called before the Form Tag elements implementation... So only this error occurs...
Try to call that function from any one of the form element Events... Then it will work...
Just like below...
<html>
<head>
<script>
var urlpath = "www.mydomain.com/?dropdown=Alpha"
var choice = (urlpath.split("?")[1] || '').split("=")[1];
function show()
{
var success = -1;
for (var i=0; i < document.myform.mydiv.length; i++) {
if (document.myform.mydiv.options[i].text== choice)
success = i;
}
document.myform.mydiv.selectedIndex=success;
}
</script>
</head>
<body>
<form name="myform">
<select name="mydiv" onchange="show();">
<option value="2">Beta</option>
<option value="3">Gamma</option>
<option value="4">Delta</option>
<option value="1">Alpha</option>
</select>
</form>
</body>
</html>
Ok so i am trying to get a textarea where a user can type in text. select a delimiter from a dropdown list. Hit count and it will count how many times it splits.
I cant seem to get my code to split at all. here is my code.
JavaScript
window.onload = function() {
document.getElementById("change").onclick = function() {
var paragraph = document.getElementById('box').value;
var x = document.getElementById("changeCase");
var getInfo = document.getElementById('ParaWrite');
var LowerCase = " ";
var splitAT = " ";
alert("above the for loop");
if (x.checked === true)
{
LowerCase = paragraph.toLowerCase();
}
else
{
LowerCase = paragraph;
}
for (var i = 0; i <document.form1.split.options.length; i++)
{
if (document.form1.split.options[i].selected === true)
{
splitAT = paragraph.split(options[i]);
}
}
document.write(splitAT);
doc write is just so i can see if it even makes it that far in the code and it does not.
here is my HTML
<form name="form1" id="form1">
<textarea type="text" id="box" value=""/></textarea>
<input type='checkbox' name='write' id='changeCase' value='Check'/><br>
<input type='button' value="Count" id="change"/>
<select name="split" id="split">
<option value="like">like</option>
<option value="monkey">monkey</option>
<option value="I">I</option>
<option value=".">.</option>
<option value=",">,</option>
<option value="?">?</option>
<option value=" ">[Space]</option>
</select>
</form>
<div id="ParaWrite">
</div>
options is not defined.
splitAT = paragraph.split(document.form1.split.options[i]);
http://jsfiddle.net/ExplosionPIlls/KeZEd/