getElemenById question

**webphotogeek** · 07-03-2010 09:06 AM

Hello. I am trying to redirect the user to different URLs using HTML radio buttons and the Javascript getElementById, but it the value seems to only remain with the 1st item. Here's my code. Any help would be appreciated:

<html>
<head>
<title>Customer Query Form</title>
<script type="text/javascript">
function queryIt() {
var query1 = document.getElementById('query');
if(query1.value == "new") {alert (query1.value);
window.location="new_customer.php"; }
else
if(query1.value == "existing") { alert (query1.value);
window.location="existing_customer.php"; }
else
if(query1.value == "search") {alert (query1.value);
window.location="existing_customer.php"; }
}
</script>
<style>
body { font-size: 12pt; font-family: Verdana, Arial, Helvetica, sans-serif; }
p.indent { padding-left: 15px; }
</style>
</head>

<body>
<h2>Please Select an Option</h2>
<form method="post" onSubmit="queryIt()">
<p class="indent">
<label>
<input type="radio" id="query" name="query" value="new">
New Customer</label>
<br />
<label>
<input type="radio" id="query" name="query" value="existing">
Existing Customer</label>
<br />
<label>
<input type="radio" id="query" name="query" value="search">
Customer Search</label>
<br /><br />
<input type="submit" value="Submit" />
</p>
</form>
</body>
</html>

**Padonak** · 07-03-2010 01:05 PM

Code:

<html>
<head>
<title>Customer Query Form</title>
<script type="text/javascript">
var redir = [
'new_customer.php',
'existing_customer.php',
'existing_customer_search.php'
];

function qIt() {
var q = document.getElementsByName('q');
for(var i = 0; i < q.length; i++){
if(q[i].checked !== true){continue;}
else{alert(redir[q[i].value]);}
/*
you can replace alert with location.href = redir[q[i].value];
*/
}
}
</script>
<style>
body { font-size: 12pt; font-family: Verdana, Arial, Helvetica, sans-serif; }
p.indent { padding-left: 15px; }
</style>
</head>

<body>
<h2>Please Select an Option</h2>
<form id="myform" name="myform" onsubmit="return false" action=""> 
<p class="indent">
<input type="radio" name="q" value="0"><label>New Customer</label>
<br />
<input type="radio" name="q" value="1"><label>Existing Customer</label>
<br />
<input type="radio" name="q" value="2"><label>Customer Search</label>
<br /><br />
<input type="button" value="Submit" onclick="qIt();" />
</p>
</form> 
</body>
</html>

**webphotogeek** · 07-03-2010 01:47 PM

Beautiful! I didn't think about using arrays. Works great! Much appreciated!!

- Steve

Thread: getElemenById question

Thread Tools

Display

getElemenById question

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions