1

フォーム データを送信した後、非表示の div を表示しようとしています

以下は私のフォームhtmlで、入力セクションにはデータを入力するためのフォームがあり、フォームを送信した後、非表示の出力セクションを表示し、そこに結果を表示する必要があります

html コード:

<div id="input">


----- some form datas here ----

<div id="submit">
        <input type="submit"  id="generate" name="script" value="generate" />

    </div>

</div>


<div id="output" style="display: none;">


--- php echo from above form------

</div>


</form>

CSS:

#input{
width:800px;
margin: auto;
border-width:1px;
border-style:solid;
border-color:#ddd;

}


#output{
width:800px;
margin: auto;
border-width:1px;
border-style:solid;
border-color:#ddd;

}

同じトピックに関する以前の議論を経た後、以下はこれに対する回答済みの解決策の1つです

フォーム送信後に非表示の div を表示するような JavaScript を作成します。

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

});

また

$('form').submit(function(e){
    $('#output').hide();  
    e.preventDefault();
    // Or with: return false;        
});

しかし、両方のソリューションが機能していません.2番目のソリューションは非表示のdivを表示できますが、output実際のフォームデータは表示されません.

どうすれば正しく表示できますか？フォーム送信後にこれを表示する必要があります(type="submit")

アップデート：

  1. インライン CSS を削除して div を非表示にしました

  2. div を非表示にするためにスタイル シートに css 関数を追加しました

    #output{
display:none;
width:800px;
margin: auto;
border-width:1px;
border-style:solid;
border-color:#ddd;
}

  3. フォーム送信時にdivを表示するためにjqueryの下に追加

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

});

それでも私は結果を達成することができません。ここに手がかりはありますか？

4

7 に答える 7

3

使用する

<form id="form" action="">
</form>

出力を表示するには

 $(document).ready(function() {
        $('#output').hide();
        $('#form').submit(function(){
                 $('#output').show();   
        });
    });
于 2013-08-01T09:01:41.910 に答える
1 
$('form').submit(function(e){
    $('#doutput').hide();  
    e.preventDefault();
    // Or with: return false;        
});

ここで、スクリプトでは doutput と綴っています。出力に置き換えます

.css() 関数を使用しdisplay: block !important;て表示するには、インライン スタイルで表示したため定義します。これをオーバーライドするには、!important を設定する必要があります。

または、インライン スタイルで使用する代わりにスタイルシートで定義display: none;し、残りは !important を設定せずに行います

于 2013-08-01T08:54:24.297 に答える
0

を介して CSS 属性を編集するのではなく.hide()、 とを使用できます。.show().css()

$('document').ready(function() {
    $('#output').hide();
    $('form').submit(function(e) {
        $('#output').show();
        e.preventDefault();
    });
});
于 2013-08-01T09:02:04.847 に答える
0

私が正しければ、ページをリロードしたくありません。この場合、ajax 呼び出しを介してフォーム データを送信する必要があります。応答と非表示の div を表示できます。

CSS

#output {
    display:none;
}

jQuery

$(document).ready(function(){

    $('form').submit(function(e){

        // Prevent the default submit
        e.preventDefault();

        // Collect the data from the form
        var formData =  $('form').serialize();

        //Send the from
        $.ajax({
            type: "POST",
            url: "generator.php",
            data: formData,

            success: function(msg){
                // Insert the response into the div
                $('#ajaxResponse').html(msg);

                // Show the hidden output div
                $('#output').slideDown();
            }
        });    
    });

});

HTML

<div id="output">

    --- php echo from above form------

    <div id="ajaxResponse"></div>

</div>
于 2013-08-01T09:56:14.970 に答える
0

DIV 内に結果を表示する場合は、さまざまな方法があります。

  1. Javascript すべてのフォーム データに ID を付与し、JavaScript 関数を記述して、前述の DIV に回答を入力します。
  2. Ajaxフォームをajaxに投稿し、応答をDIVに返します
  3. 新しいページのリクエスト 送信後、$_POST が設定されているかどうかを確認し、$_POST の内容を含む div を表示します。
于 2013-08-01T09:02:36.310 に答える
0

フォーム要素の「アクション」属性を使用してみるか、送信直後にフォーム要素で jquery serializeArray メソッドを試すことができます。

<form>
    <input type="text" name="giveNameHere" />
    <input type="submit"  id="generate" name="script" value="generate" />
</form>
<div id="output" style="display: none;">
    Output Content
</div>

$('form').submit(function () {
    $('#output').show();
    console.log($(this).serializeArray());
    return false;
});

このjsfiddleを見てください

于 2013-08-01T09:03:44.797 に答える