CODEWITHSUNDEEP
javascripthtml
user2639146
user2639146

Reputation: 43

HTML submit button doesnt nvigate to the respective URL's

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>

Upvotes: 0

Views: 189

Answers (3)

Sasidharan
Sasidharan

Reputation: 3740

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>

Upvotes: 0

jcubic
jcubic

Reputation: 66488

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).

Upvotes: 1

Limeoats
Limeoats

Reputation: 426

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.

Upvotes: 1

Related Questions