0

我的 html 代码中的提交按钮不响应 onclick 事件。请查看我的 html 代码，请让我知道我哪里出错了。我通常使用 location.href，但是，这在这里也不起作用。我使用该功能根据单选按钮选项“是”或“否”在 2 个 URL 之间切换。

提前致谢。

<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>
4

3 回答 3

1

您需要在表单上使用 onsubmit 而不是 onClick：

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

return false 将阻止提交表单的默认行为并转到同一页面（如果您没有操作）。

于 2013-08-27T13:23:45.787 回答
1

当您有一个类型为 submit 的输入并单击它时，将查看表单标签以确定去哪里。

如果您打算这样做，则需要将操作命令添加到表单中，并在该操作命令中指定新页面。像这样的东西。。

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

当您点击提交时，这将向服务器发送一个获取请求，并将您带到带有查询字符串中表单元素的新页面。

另一方面，如果您决定确实要调用 javascript 函数并自己获取表单的字段值，只需将按钮从表单标签中取出，使其成为常规按钮（而不是提交按钮），然后调用onclick 中的 javascript 函数就像你现在一样。

于 2013-08-27T13:15:44.020 回答
0

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>
于 2013-08-27T13:34:35.227 回答