2

画面の中央にあるポップアップウィンドウでフォームが送信されたことをユーザーに知らせるページを開こうとしています。ポップアップ ウィンドウで開くページを取得しましたが、現在のコードでウィンドウを中央に配置する方法がわかりません (ポップアップを開いた/中央に配置する別の js コードを使用していましたが、引き続き同じ情報を持つ新しいページ)。

現在のフォームのコードは次のとおりです...

 <form method="post" action="php/sendmail.php" target="POPUPW" onsubmit="POPUPW = window.open('about:blank','POPUPW','width=600,height=175');" id="contact">
    <h2>Name: (required)</h2><br />
            <input name="name" type="text" size="55" class="required error"><br />
            <h2>Email: (required)</h2><br  />
            </span><input name="email" type="text" size="55" class="required email"/><br />
            <h2>Phone:</h2><br />
            <input name="phone" type="text" size="55" /> <br />
            <h2>Comments:</h2><br />
            <textarea name="comments" rows="15" cols="47"></textarea><br />
            <br />
    <input type="submit" value="Submit" />
     </form>

このページは現在http://www.concept82.com/DIS/contact.htmlにあります。

私はこれがおそらく本当に単純であることを知っていますが、私は新しいjavascriptとphpコーディングです。本当にありがとう！！！

4

3 に答える 3

1

まず第一に、それがあなたが選択したルートであれば、jqueryを使ってajax呼び出しを行うべきです。リダイレクトなしでサーバー側の php スクリプトにポストできる唯一の方法は、Ajax を使用して非同期でポストすることです。これには jquery の ajax メソッドを使用することを強くお勧めします。これを実現するには、すべてのフォーム入力値を変数に保存し、それらを使用してデータ オブジェクトを作成する必要があります。そのデータ オブジェクトは、ajax 呼び出しを介してサーバーに送信されます。

<form method="" action="">
<h2>Name: (required)</h2><br />
        <input name="name" type="text" size="55" class="required error name"><br />
        <h2>Email: (required)</h2><br  />
        </span><input name="email" type="text" size="55" class="required email"/><br />
        <h2>Phone:</h2><br />
        <input name="phone" type="text" size="55" class="phone" /> <br />
        <h2>Comments:</h2><br />
        <textarea name="comments" rows="15" cols="47" class="comments"></textarea><br />
        <br />
<input type="submit" value="Submit" class="submitBtn" />
 </form>

あなたのhtmlは、アクションとメソッドを取り出してフォームを変更しただけでなく、jqueryでセレクターとして使用できるクラスを入力要素に追加したという点で少し異なります。

$(document).ready(function(){
    $('.submitBtn').click(function(e){
        e.preventDefault();
        var name = $('.name').val();
        var email = $('.email').val();
        var phone = $('.phone').val();
        var comments = $('.comments').val();

        var dataObject = {
            name: name,
            email: email,
            phone: phone,
            comments: comments
        }

        $.Ajax({
        url: php/sendmail.php,
        type: 'post',
        dataType: "json",
        contentType: "application/json",
        data: dataObject,
        success: function(data){
                 var createdDiv = '<div class="divToBeCentered"><p class="dataText">' + data + '</p></div>';
                 $('body').append(createdDiv);
            };
        });
    });

});

css で div を中央に配置するには、このようなことをするだけです。

.divToBeCentered{
    height: 100px;
    width:40%;
    margin:auto;
}
于 2013-03-22T15:31:33.483 に答える
1

質問で既存のコードを使用すると、次のことがわかりました。

FF 19.0.2 および IE 7 でテスト済み

pop.htm の URL を適切な位置に変更しました。

変数 w = 200; // ピクセル単位の幅
var h = 200; // 高さ (ピクセル単位)

<script>
function popupwindow(url, title, w, h) {
    var w = 200;
    var h = 200;
    var left = Number((screen.width/2)-(w/2));
    var tops = Number((screen.height/2)-(h/2));

window.open("pop.htm", '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+tops+', left='+left);
}

</script>

<form method="post" action="php/sendmail.php" onsubmit="popupwindow()"; id="contact">
<h2>Name: (required)</h2><br />
        <input name="name" type="text" size="55" class="required error"><br />
        <h2>Email: (required)</h2><br  />
        </span><input name="email" type="text" size="55" class="required email"/><br />
        <h2>Phone:</h2><br />
        <input name="phone" type="text" size="55" /> <br />
        <h2>Comments:</h2><br />
        <textarea name="comments" rows="15" cols="47"></textarea><br />
        <br />
<input type="submit" value="Submit" />
</form>
于 2013-03-22T15:25:06.157 に答える