1

ページが開いたときに要素を非表示にしてから、ボタンがクリックされたときに表示しようとしていますが、要素が表示されません。ボタンが押されるまでidextraFormのフォームを非表示にしたい

<!DOCTYPE html>
<head>

<script src="Javascripts/jquery.js"></script>
<script type="text/javascript">
$(function () {
$("#extraForm").hide()
});
$('#showForm').click(function(){
$('#extraForm').show();
});
</script>
<link rel='stylesheet' href='website.css'>
</head>
<body>
<form action="submit.php" method="post">
<table> <table border="1"> <tr>
<tr> <td> First Name:     </td> <td> <input type="text" name="firstName">  </td> </tr> 
<tr> <td> Last Name:      </td> <td> <input type="text" name="lastName">   </td> </tr>
<tr> <td> Dorm Name:      </td> <td> <input type="text" name="dormName">   </td> </tr>
<tr> <td> Room Number:    </td> <td> <input type="text" name="roomNumber"> </td> </tr>

<tr> <td> Pizza Type:     </td> <td> <input type="radio" name="pizzaType" value="Cheese">       
Cheese
<input type="radio" name="pizzaType" value="Pepperoni"> Pepperoni <br>
<input type="radio" name="pizzaType" value="Buffalo Chicken"> Buffalo Chicken </td>
<tr> <td> Number of Pizza's:  <td>   <input type="text" name="pizzaNumber"> </td> </tr>
<tr> <td> </td> <td>  <input type="submit"> </tr> </td>

<table> <table border="1" id="extraForm">
<tr> <td> <input type="radio" name="pizzaType" value="Cheese"> Cheese</td> </tr>
<tr> <td> <input type="radio" name="pizzaType" value="Buffalo Chicken"> Buffalo Chicken      
</td> </tr>
<tr> <td> <input type="radio" name="pizzaType" value="Pepperoni"> Pepperoni</td> </tr>
<input type="button" name="showForm" value="Add Pizza" id="showForm">
</table>


</table>

</form>

</body>
</html>
4

4 に答える 4

6

ページの読み込み時に不要な要素を非表示にするには、CSSを使用することをお勧めします

#extraForm { display: none }​

スクリプトの実行時にまだ存在していない要素にイベントリスナーをアタッチしようとしているため、スクリプトは機能しません。これを修正するには、jQueryはDOMの準備ができるまで待つ必要があります。

$(function() {
    $('#showForm').click(function() {
        $('#extraForm').show();
    });
});

デモ

于 2012-11-30T01:25:12.573 に答える
3

Since you need the form to be hidden when the page loads you could use CSS to hide it.

<table border="1" id="extraForm" style="display:none">

When you need the form to be displayed, simply use
$('#extraForm').show();

Here is a working demo

Dont forget to include the jquery library in your code.

于 2012-11-30T01:26:49.903 に答える
1

スクリプトとHTMLドキュメントの最後を配置するか、次のようにラップします。

$(document).ready(function(){
  // place code here
});
于 2012-11-30T01:22:31.753 に答える
0

これを試して：

<script type="text/javascript">
    $(document).ready(function () {
        $("#extraForm").hide()
        $('#showForm').click(function(){
            $('#extraForm').show();
        });
    });
</script>

$("#extraForm").hide()関数内にある必要はありません-ページが読み込まれたときに実行されます。

于 2012-11-30T01:22:50.557 に答える