www.webdeveloper.com
Results 1 to 3 of 3

Thread: getElemenById question

  1. #1
    Join Date
    Jan 2008
    Posts
    13

    getElemenById question

    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>

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,655
    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>

  3. #3
    Join Date
    Jan 2008
    Posts
    13
    Beautiful! I didn't think about using arrays. Works great! Much appreciated!!

    - Steve

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles