HTML submit button doesnt nvigate to the respective URL's

Question

The submit button in my html code doesnt respond to the onclick event .please take a look at my html code and please let me know where i went wrong.. I use location.href usually, but, that too doesnt work here. I used the function to switch between 2 URL's based on the radio button options "yes" or "No".

thanks in advance.

<html>
<head>
<style type="text/css">
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
 margin:0 auto;
width:400px;
padding:10px;
}


/* ----------- stylized ----------- */
 #stylized{
border:solid 2px #000000;
background:#ebf4fb;
 width:500px;
height:350px;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}

 #stylized label{
display:block;
font-weight:bold;
text-align:left;
width:140px;
float:left;
}

 #stylized form{
float:left;
font-size:12px;
<!--padding:4px 2px;-->
<!-- border:solid 1px #aacfe4;-->
width:100px;
margin:2px 0 20px 10px;
}
#stylized table, th, td 
{
font-size:12px;
width:400px;
border: 1px solid black;
}
th
 {
width:10%;
background-color: black;
color: white;
 }
#stylized button.custom-submit {
float: left;
clear: none;
margin-left: 50px;
}

  </style>
  <script>
   $(function(){

   $('myform').submit(function(event){
  event.preventDefault();
  window.location = $('input[type=radio]:checked').val();
  });
  });
  </script>

  </head>


 <body>
 <div id="stylized" class="myform">
 <form id="form" name="form">


 <label>New Data set  :
  </label>
  <input type="radio" name="url" value="Inputs1.html" /> Yes
  <input type="radio" name="url" value="ResultsPage.html" /> No

  <br>
  <label>Dataset description:
  </label>
   <input type ="text" name= "Dataset" size="30"><br><br><br>
  <table id="Previous Datasets">
  <tr>
   <th>Check</th>
  <th>Token Number</th>
<th>Dataset description</th>
 </tr>
 <tr>
  <td><input type="checkbox"> </td>
  <td>234567</td>
<td>MHEX North America Dataset</td>
 </tr>
 <tr>
  <td><input type="checkbox"> </td>
  <td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox"> <td>
<td></td>

 </tr>
 <tr>
 <td><input type="checkbox"> </td>
 <td></td>
<td></td>
 </tr>
 <tr>
  <td><input type="checkbox"> </td>
  <td></td>
<td></td>
 </tr>
 </table>
 <div style="text-align: center"><br>
 <input type="Submit" name="submit" value="Submit" class="submit" onClick="gotoResults()">
 <div class="spacer"></div> 
</form>
 </div>
</body>

Please edit your post to show only the relevant informations here: your submit in HTML and your JS — Maen
– Maen, Commented Aug 27, 2013 at 13:12
U have called a method in button click..but there is no definition for it. — Sasidharan
– Sasidharan, Commented Aug 27, 2013 at 13:12
The example is full of syntax errors.. < <script> and for example </script>--> Also, pressing the submit button is not the only way to submit a form... — Ron van der Heijden
– Ron van der Heijden, Commented Aug 27, 2013 at 13:26

Limeoats · Accepted Answer · 2013-08-27 13:15:44Z

1

When you have an input of type submit and you click it, the form tag is looked at to determine where to go.

You need to add the action command to the form if you are going to do it this way, and specify the new page in that action command. Something like this..

<form id="form" name="form" action="newpage.html" method="get">

This will send a get request to the server when you hit submit, and bring you to the new page with the form's elements in the query string.

On the other hand, if you decide you do want to call a javascript function and grab the form's field values on your own, just take the button out of the form tags, make it a regular button (not a submit button), and call the javascript function in the onclick like you are now.

answered Aug 27, 2013 at 13:15

Limeoats

4261 gold badge5 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jcubic · Accepted Answer · 2013-08-27 13:23:45Z

1

Instead of onClick you need to use onsubmit on the form:

<form id="form" name="form" onsubmit="gotoResults(); return false;">

return false will prevent default behavior of submiting a form and go to the same page (if you don't have action).

answered Aug 27, 2013 at 13:23

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

Comments

Sasidharan · Accepted Answer · 2013-08-27 13:34:35Z

Its working...

javascript

$(document).ready(function () {
            $("#sub").click(function () {
                var x = $("#select").val();
                if (x == "yes") {
                    window.location.href = "http://www.google.com";
                }
                else {
                    window.location.href = "http://www.yahoo.com";
                }
            })
        });

css

body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
 margin:0 auto;
width:400px;
padding:10px;
}


/* ----------- stylized ----------- */
 #stylized{
border:solid 2px #000000;
background:#ebf4fb;
 width:500px;
height:350px;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}

 #stylized label{
display:block;
font-weight:bold;
text-align:left;
width:140px;
float:left;
}

 #stylized form{
float:left;
font-size:12px;
<!--padding:4px 2px;-->
<!-- border:solid 1px #aacfe4;-->
width:100px;
margin:2px 0 20px 10px;
}
#stylized table, th, td 
{
font-size:12px;
width:400px;
border: 1px solid black;
}
th
 {
width:10%;
background-color: black;
color: white;
 }
#stylized button.custom-submit {
float: left;
clear: none;
margin-left: 50px;
}

html

<div>
        <div id="stylized" class="myform">
            <form id="form" name="form" method="post">
            <label>
                New Data set :
            </label>
            <select id="select">
                <option value="Yes">Yes</option>
                <option value="No">No</option>
            </select>
            <br>
            <br>
            <label>
                Dataset description:
            </label>
            <input type="text" name="Dataset" size="30"><br>
            <br>
            <br>
            <table id="Previous Datasets">
                <tr>
                    <th>
                        Check
                    </th>
                    <th>
                        Token Number
                    </th>
                    <th>
                        Dataset description
                    </th>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>
                        234567
                    </td>
                    <td>
                        MHEX North America Dataset
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    <td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
            <div style="text-align: center">
                <br>
                <input id="sub" type="Submit" name="submit" value="Submit" class="submit">
                <div class="spacer">
                </div>
            </div>
            </form>
        </div>
    </div>

Collectives™ on Stack Overflow

HTML submit button doesnt nvigate to the respective URL's

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related