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

送信タイプの入力があり、それをクリックすると、フォームタグが調べられてどこに行くかが決定されます。

この方法で行う場合は、アクション コマンドをフォームに追加し、そのアクション コマンドで新しいページを指定する必要があります。このようなもの..

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

これにより、送信を押すとサーバーに get リクエストが送信され、クエリ文字列にフォームの要素が含まれる新しいページが表示されます。

一方、javascript 関数を呼び出してフォームのフィールド値を自分で取得したい場合は、フォーム タグからボタンを取り出し、通常のボタン (送信ボタンではなく) にして、次のように呼び出します。あなたが今のようにonclickのjavascript関数。

于 2013-08-27T13:15:44.020 に答える
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>
于 2013-08-27T13:34:35.227 に答える