问题
first the code:
<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>
The first part of the code is a jquery function that duplicates the fields of my form when i need. The second one is the form itself and the $_POST method to receive the values coming from the form.
My problem is that this part "foreach ( $_POST['field'] as $diam )" doesn't caught the values from the duplicated fields of jquery. Maybe because it's something it appears after the page is running i don't know. That's why i need help and suggestions. How can i caught the values that come from the inputs generated by jquery?
Thank you!
回答1:
Word you are looking for is .noConflict API: http://api.jquery.com/jQuery.noConflict/
Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.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
In "no-confict" mode, the $ shortcut is not available and the longer jQuery is used. For example:
$(document).ready(function(){
$(#somefunction) ...
});
Becomes:
jQuery(document).ready(function(){
jQuery(#somefunction) ...
});
In order to use the default jQuery shortcut of $, you can use the following wrapper around your code:
jQuery(document).ready(function($) {
// $() will work as an alias for jQuery() inside of this function
});
That wrapper will cause your code to be executed when the page finishes loading, and the $ will work for calling jQuery. If, for some reason, you want your code to execute immediately (instead of waiting for the DOM ready event), then you can use this wrapper method instead:
(function($) {
// $() will work as an alias for jQuery() inside of this function
})(jQuery);
Good read: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers
Further if you keen:
What does $ mean in jQuery?
This should help to quench your thirst :) might be hope this helps!
understanding $ vs. jQuery in iife instead of $
UPDATE please note you need to carefully check other places and do this and rest the conflict will be resolved.
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);
回答2:
Your problem lies within where you are appending the fields. You are adding form fields outside of your form.
Your logic to append the forms:
if(idform=='mybutton'){
myform = $("<div>"+myform+"</div>");
$("button", $(myform)).click(function(){
$(this).parent().parent().remove();
});
$(this).append(myform);
$countForms++;
}
Should be:
if(idform=='mybutton'){
myform = $("<div>"+myform+"</div>");
$("button", $(myform)).click(function(){
$(this).parent().parent().remove();
});
$("formelement").append(myform);
$countForms++;
}
Assuming you modify the form markup to assign an id of formelement. Make adjustments as needed.
来源：https://stackoverflow.com/questions/11441981/jquery-function-conflicts-with-php-form