0

首先是代码：

<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 函数，它在我需要时复制表单的字段。第二个是表单本身和用于接收来自表单的值的 $_POST 方法。

我的问题是这部分“foreach ($_POST['field'] as $diam)”没有从 jquery 的重复字段中捕获值。也许是因为它是在页面运行后出现的东西，我不知道。这就是为什么我需要帮助和建议。我如何捕获来自 jquery 生成的输入的值？

谢谢！

4

2 回答 2

1

您正在寻找的词是.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 就绪事件），那么您可以使用此包装器方法：

(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 中理解 $ vs. 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);
于 2012-07-11T21:51:09.033 回答
0

您的问题在于您附加字段的位置。您正在表单之外添加表单域。

您附加表格的逻辑：

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。根据需要进行调整。

于 2012-07-17T14:14:33.460 回答