php - Jquery 関数が php フォームと競合する

Question

最初のコード:

<script type="text/javascript">



(function($){

 $countForms = 1;

      $.fn.addForms = function(idform){

                    var myform = "<table>"+
                     "  <tr>"+
                     "     <td>Field A ("+$countForms+"):</td>"+
                     "     <td><input type='text' name='field["+$countForms+"][a]'></td>"+
                     "     <td>Field B ("+$countForms+"):</td>"+
                     "     <td><textarea name='field["+$countForms+"][b]'></textarea></td>"+
                     "     <td><button>remove</button></td>"+
                     "  </tr>"+
                     "</table>";



                    if(idform=='mybutton'){

                        myform = $("<div>"+myform+"</div>");
                        $("button", $(myform)).click(function(){ $(this).parent().parent().remove(); });
                        $(this).append(myform);
                        $countForms++;
                    }

      };
})(jQuery);         



$(function(){
    $("#mybutton").bind("click", function(e){
    e.preventDefault();
    var idform=this.id;

        if($countForms<3){
            $("#container").addForms(idform);
        }       
    });
});

    <?php
$ligax=mysqli_connect('localhost','root');
if(!$ligax){
    echo '<p> Falha na ligação.'; exit;
}
mysqli_select_db($ligax,'dados_arrays');

    if ( isset( $_POST['field'] ) )
{
    echo '<table>';
    foreach ( $_POST['field'] as $diam )
    {
        // here you have access to $diam['top'] and $diam['bottom']
        echo '<tr>';
        echo '  <td>', $diam['a'], '</td>';
        echo '  <td>', $diam['b'], '</td>';
        echo '</tr>';
    }
    echo '</table>';
}       
?>

<body>

<div id="container"><div>
<form method="post" name="b" >
<table>
    <tr>
        <td>Field A</td>
        <td><input type='text' name='field[0][a]'></td>
        <td>Field B</td>
        <td><textarea name="field[0][b]"></textarea></td>
        <td><button>remove</button></td>
    </tr>
</table>
</div>
</div>
<button id="mybutton">add form</button>

<div align="center">
<p><input type="submit" value="Registar" name="registar"></p>
</div>

<?php

    if($ligax) mysqli_close($ligax);

?>
</body>

コードの最初の部分は、必要に応じてフォームのフィールドを複製する jquery 関数です。2 つ目は、フォーム自体と、フォームから値を受け取る $_POST メソッドです。

私の問題は、この部分「 foreach ( $_POST['field'] as $diam )」が jquery の重複フィールドからの値を取得していないことです。たぶん、ページが実行された後に表示されるものなので、わかりません。だからこそ、助けと提案が必要なのです。jqueryによって生成された入力からの値を取得するにはどうすればよいですか?

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

score 1 · Accepted Answer

探している単語は.noConflictAPI です: http://api.jquery.com/jQuery.noConflict/

多くの JavaScript ライブラリは、jQuery と同様に $ を関数または変数名として使用します。jQuery の場合、$ は単なる jQuery のエイリアスであるため、すべての機能は $ を使用しなくても利用できます。jQuery と一緒に別の JavaScript ライブラリを使用する必要がある場合は、$.noConflict() を呼び出して、$ の制御を他のライブラリに戻すことができます。

http://api.jquery.com/jQuery.noConflict/

jQuery.noConflict();
(function($) { 
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);
// other code using $ as an alias to the other library

「非競合」モードでは、$ ショートカットは使用できず、jQuery がより長く使用されます。例えば：

$(document).ready(function(){
     $(#somefunction) ...
});

なる:

jQuery(document).ready(function(){
    jQuery(#somefunction) ...
});

$ のデフォルトの jQuery ショートカットを使用するには、コードの周りに次のラッパーを使用できます。

jQuery(document).ready(function($) {
    // $() will work as an alias for jQuery() inside of this function
});

そのラッパーにより、ページの読み込みが完了するとコードが実行され、$ は jQuery の呼び出しに機能します。なんらかの理由で、(DOM Ready イベントを待機するのではなく) コードをすぐに実行したい場合は、代わりにこのラッパーメソッドを使用できます。

(function($) {
    // $() will work as an alias for jQuery() inside of this function
})(jQuery);

よく読んでください: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers

さらにあなたが熱心なら：

$はjQueryで何を意味しますか?

これは喉の渇きを癒すのに役立つはず:)です。これが役立つことを願っています!

$ の代わりに iife で $ と jQuery を理解する

更新他の場所を注意深くチェックしてこれを行う必要があることに注意してください。残りの競合は解決されます。

jQuery.noConflict();
(function($){

 $countForms = 1;

      $.fn.addForms = function(idform){

                    var myform = "<table>"+
                     "  <tr>"+
                     "     <td>Field A ("+$countForms+"):</td>"+
                     "     <td><input type='text' name='field["+$countForms+"][a]'></td>"+
                     "     <td>Field B ("+$countForms+"):</td>"+
                     "     <td><textarea name='field["+$countForms+"][b]'></textarea></td>"+
                     "     <td><button>remove</button></td>"+
                     "  </tr>"+
                     "</table>";



                    if(idform=='mybutton'){

                        myform = $("<div>"+myform+"</div>");
                        $("button", $(myform)).click(function(){ $(this).parent().parent().remove(); });
                        $(this).append(myform);
                        $countForms++;
                    }

      };
})(jQuery);

score 0 · Accepted Answer

問題は、フィールドを追加する場所にあります。フォームの外側にフォームフィールドを追加しています。

フォームを追加するロジック:

if(idform=='mybutton'){
    myform = $("<div>"+myform+"</div>");
    $("button", $(myform)).click(function(){
        $(this).parent().parent().remove();
    });
    $(this).append(myform);
    $countForms++;
}

次のようにする必要があります。

if(idform=='mybutton'){
    myform = $("<div>"+myform+"</div>");
    $("button", $(myform)).click(function(){
        $(this).parent().parent().remove();
    });
    $("formelement").append(myform);
    $countForms++;
}

の id を割り当てるようにフォームマークアップを変更すると仮定しますformelement。必要に応じて調整します。

php - Jquery 関数が php フォームと競合する

2 に答える 2

Related

Reference