2013-08-27 64 views
0

在我的HTML代碼中的提交按鈕不響應onclick事件 。請看看我的html代碼,請讓我知道我錯了哪裏.. 我使用的位置.href通常,但是,這也不能在這裏工作。 我使用該功能在基於單選按鈕選項「是」或「否」的2個URL之間切換。HTML提交按鈕沒有運行到相應的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> 
+0

請編輯您的帖子在這裏只顯示相關信息:您的提交在HTML和你的JS – Bigood

+2

你已經調用了按鈕單擊的方法..但是沒有定義它。 – Sasidharan

+0

什麼是$('input:dropdown-menu')? – VahidNaderi

回答

1

當您輸入submit類型的輸入並單擊它時,會查看錶單標籤以確定去哪裏。

如果要這樣做,需要將操作命令添加到表單中,並在該操作命令中指定新頁面。事情是這樣的..

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

這將發送一個GET請求到服務器,當你點擊提交,併爲您帶來新的頁面,在查詢字符串形式的元素。另一方面,如果您決定要調用JavaScript函數並自行獲取表單的字段值,只需從表單標記中取出按鈕,將其設置爲常規按鈕(而不是提交按鈕),並像在現在一樣在onclick中調用javascript函數。取而代之的onClick的

1

你需要在表格上使用的onsubmit:

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

返回false將阻止submiting形式的默認行爲,並去到同一個頁面(如果你沒有行動)。

0

它的工作...

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

只需複製並粘貼此代碼..將工作.. – Sasidharan