2

私はJqueryの初心者です。練習するための簡単な例をいくつか実行しようとしています。この例では、POST変数をphpフォームからインターネットで見つけたJquerymodaleポップアップに送信しようとしています。

私の問題は、送信リンクをクリックしてphpフォームを送信すると、フォーム変数をmodaleポップアップに送信できないことです。

私の場合、$nameの場合はvarなしでポップアップが表示されます。

ここに私のコード：

Index.php：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="test.css" />
<script type="text/javascript" src="script.js"></script>

<form method = "POST" id = "formm" name="form1" action="recep.php" > 

<input type="text" name="nom"/> <br>

<a href="#?w=500" rel="popup_name" class="poplight" name="nom" onclick="openwindow(this)";">test</a><br>

</form>

そして最後に私のscript.js：

$(document).ready(function() {

$('a.poplight[href^=#]').click(function() {
    var popID = $(this).attr('rel'); //Trouver la pop-up correspondante
    var popURL = $(this).attr('href'); //Retrouver la largeur dans le href

    //Récupérer les variables depuis le lien
    var query= popURL.split('?');
    var dim= query[1].split('&');
    var popWidth = dim[0].split('=')[1]; //La première valeur du lien

    $('#' + popID).fadeIn().css({
        'width': Number(popWidth)
    })
    .prepend('');

    var popMargTop = ($('#' + popID).height() + 80) / 2;
    var popMargLeft = ($('#' + popID).width() + 80) / 2;

    $('#' + popID).css({
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });

    $('body').append(''); 
    //Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) 
    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();

    return false;
});

$('a.close, #fade').live('click', function() { //Au clic sur le bouton ou sur le calque...
    $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove(); 
    });
    return false;
}); 

});
});

recep.php

<div id="popup_name" class="popup_block">
    <h2>Developpez.com</h2>
    <p>Soh Tanaka est traduit sur dev.com.<?php  if (isset($_POST['nom'])) { $nom = $_POST['nom']; echo 'la var est'.$nom; } ?></p>
</div>

script.jsにsubmit（）条件を追加する必要があると思います。これは、リンクをクリックしたときにJqueryがhrefのみを選択するため、フォームを送信しないためです。

何か案が ？？:(

ありがとうございました ！！！

4

1 に答える 1

0

フォームを送信しようとしているように見えますが、送信していません。recep.php で取得しようとしている値は、送信されないアンカーにあります。また、入力とアンカーの両方に name="nom" があります。また、アンカーがクリックされたときに呼び出される関数が 2 つあります。そのため、分離したいことがたくさん起こっています。

まず、必要な関数を呼び出すために jQuery、javascript、またはその両方を使用しているかどうかを判断する必要があります。Jquery を使用している場合は、ページが読み込まれたときに要素を呼び出す方法が必要です。

$('.whateverClass').click(function() { etc });

この場合、class または id 属性を使用します。onclick を使用している場合は、javascript 関数を呼び出します。この場合、必要なすべてのパラメーターを配列として渡す必要があります

onclick="callTheFunction(this , '{put an array here with what you want?}')"

したがって、このアンカーはフォームの下部にありますが、フォームの一部にはなりません。フォームを送信したくないので、それで問題ありません...フォームからすべてのパーを取得し、jQuery または javascript hhtp post/get request を使用して値をサーバーに ajax します。

jQueryを使いたいので、次のようにします

<input type="text" name="nameField" id="nameInput" /> <br>
<a href="#?w=500" rel="popup_name" id="popLight">test</a> <br>

<script>
$(document).ready(function() {

    $('.popLight').click(function() {

        //Get the form input value
        var nameInput = $('#nameInput').val(); 

        //Get the anchor attributes
        var href = $('#popLight').attr('href');

        //Do your stuff with the attr parameters, if you really need this here
        //...

        //Send your stuff to the server
        $.post("recep.php", { pars: "Your pars here"},
               function(receivedData) {
               //open whatever you want with the html from the server
                $('#whateverId').html('receivedData');
        });
    });
});
</script>

フォームを使用して値を取得するには、フォームに id を付けて、関数 var $input = $('#form :input').val(); から呼び出します。

于 2012-10-17T13:46:32.223 に答える