Question

我的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>

Answer 1

当您输入提交类型并单击它时，会查看表单标记以确定要去哪里。

如果要以这种方式执行操作，则需要将action命令添加到表单中，并在该action命令中指定新页面。像这样......

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

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

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

Answer 2

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

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

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

Answer 3

它的工作......

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

HTML提交按钮不会导航到相应的URL

3 个答案: