4

名前と場所を収集するための html フォームがあり、ユーザーがフォームを送信すると、php エコーを使用してページの下部に出力が表示されます

私の要件は、

output divフォーム送信前とユーザーがデータを入力して送信した後に非表示にすると、 output divphp echo を使用してフォーム出力を表示できるようにする必要があります

ここに私のHTMLコードがあります:

<div class="main">
    <form id="main" name="main" action="#text" method="post">
        <div class="input">
            <div id="name">
                <div class="block">
                    <div class="input-quest">Your Name</div>
                    <div class="input-resp"><span><input  class="textbox" id="nm" name="nm" type="text"  value="" /></span> 
                    </div>
                </div>
            </div>
            <div id="place">
                <div class="block">
                    <div class="input-quest">Your Place</div>
                    <div class="input-resp"><span><input  class="textbox" id="pl" name="pl" type="text" value="" /></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="submit">
            <input id="generate" type="submit" name="script" value="generate" />
            <input type="submit" id="clear" name="clear" value="clear" />
        </div>
    </form>
    <div class="output">
        <?php $name = $_POST['nm']; $place = $_POST['pl']; echo "Hello, I am $name and I am from $place"; ?>
    </div>
</div>

セクションに PHP エコー コードが含まれていますoutput div。

以前の質問で解決策を検索し、そこに記載されている以下の方法を試しました

output div1.非表示にするためのインラインcssタグを追加

<div id="output" style="display: none;">
    <!-- echo php here -->
</div>

送信中に関数を呼び出すためのJavaScriptを追加しました

$('main').submit(function(){
    $('#output').show();  
});

うまくいきませんでした。

2.以下のJavaScriptコードで試しました

$('main').submit(function(e){
    $('#output').show();
    e.preventDefault();
});

うまくいきませんでした。

3.非表示にする出力divのインラインcssを削除し、同じものをcssスタイルシートに追加しました

<div id="output">

そしてスタイルシートで

#output{
    display:none;
}

送信時にJavaScriptコードの下で使用されます

$('main').submit(function(){
    $('#output').css({
        'display' : 'block'
    }); 
});

うまくいきませんでした。

  1. フォーム送信とともにonclick機能を追加

ボタンのコードを送信します。

<input  id="generate" type="submit"  name="script" value="generate" onclick="showoutput()"/>

およびJavaScript：

showoutput(){
    $('#output').slideDown("fast");
}

そして

showoutput(){
    $('#output').show();  
}

うまくいきませんでした。

これを行うための解決策を提案してください。

4

4 に答える 4

4

これに js/css を使用する必要がある理由がまったくわかりません。変数が投稿されているかどうかを確認し、投稿されている場合はエコーします (同じページを指すようにフォーム アクションを設定する必要があります)。

<?php if (!empty($_POST['nm']) && !empty($_POST['pl'])) { ?>
  <div class="output">
    Hello, I am <?php echo $_POST['nm']; ?>, and I am from <?php echo $_POST['pl']; ?>
  </div>
<?php } ?>

div.output実際にフォームを送信せずに名前と場所を表示するだけの場合は、次のようにします。

$('#main').submit(function(e) {
  e.preventDefault(); // prevent form from being submitted
  $('div.output').text('Hello, I am ' + $('#nm').val() + ', and I am from ' + $('#pl').val());
});

ここにフィドルがあります

于 2013-08-02T14:52:23.933 に答える