0

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!

user1511579
  • 1,517
  • 6
  • 26
  • 42
  • can you dump the post variable and see what it is holding after you submit a form? – Steve Buzonas Jul 12 '12 at 13:27
  • i insert "aaa" and "bbb" on the inputs of the html, and "ccc", "ddd" on the generated inputs of jquery. The result of dump variable: array(2) { ["field"]=> array(1) { [0]=> array(2) { ["a"]=> string(3) "aaa" ["b"]=> string(3) "bbb" } } ["registar"]=> string(8) "Registar" } No sign from the inputs of jquery :/ – user1511579 Jul 12 '12 at 16:06

2 Answers2

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);
Community
  • 1
  • 1
Tats_innit
  • 33,991
  • 10
  • 71
  • 77
  • Damn, jquery problems again? My fear is that any changes will conflict with other jquery plugins i'm using. Anyway, regarding your sugestions, the last one you gave is the one i'm using as you can see in the code above. Isn't she supposed to work fine? – user1511579 Jul 11 '12 at 21:57
  • @user1511579 lol, Neah aint a Jquery prob, its an `awesomeness` and thoughtfullness that we are served with `noConflict` API to deal with any conflict `:)` its just few lines of change and you will be out rocking!, use `Jquery.noConflict` at the start of script, hope this helps. – Tats_innit Jul 11 '12 at 22:03
  • just this? jQuery.noConflict(); what about the rest of the code? no changes? – user1511579 Jul 11 '12 at 22:09
  • @user1511579 see this bruv `jQuery.noConflict(); (function($) { $(function() { // more code using $ as alias to jQuery }); })(jQuery);` yep in your case just wack in the `Jquery.noConflict` and it should work fiune with in the condition you got. `:)` Please not hope you don't have other script that needs the same, anyhoo above links should make it much clear if you keen. – Tats_innit Jul 11 '12 at 22:11
  • Sorry so many questions. By that are you telling me to put the $(function(){ ... i have inside the (function($) { ... ? – user1511579 Jul 11 '12 at 22:14
  • @user1511579 put this in front of your loop `jQuery.noConflict();` wait will update my post, `:)` – Tats_innit Jul 11 '12 at 22:15
  • @user1511579 cool updated the post, please make sure you have done same for other scripts carefully, `:)` **Also** If I may please take you time and read the above post and material it will help you how it works, else you will make small mistakes and spend hours finding it out :) – Tats_innit Jul 11 '12 at 22:18
  • At this page i don't have other scripts running, but this page is to merge with other code next. I added jQuery.noConflict(); but now the script is not working, the form doesn't duplicate :/ – user1511579 Jul 11 '12 at 22:21
  • @user1511579 `:)` you have another script just under the `.noConflict` script, I would also recommend put an `alert` or `debug` inside your script and see that code is getting compioled, but surely trust me it will be way more relaxing when you get it right `:)` – Tats_innit Jul 11 '12 at 22:25
  • i put an alert on the second script "$(function(){..." but it wasn't called so i replace on this second scritp the "$(function(){..." by "jQuery(document).ready(function(){" and replace every $ by jQuery (only on this second script). The plugin started working again, however when i click in the button to submit data he $Post still doesn't caught the data from the inputs included on the first script. – user1511579 Jul 11 '12 at 22:32
  • @user1511579 Saweet so it works now `:)` yay , hmm not sure sure how do you mean `$Post` – Tats_innit Jul 11 '12 at 22:34
  • When i created this question the plugin was already working. My problem always was that on the second part of the code, the one related to retrieve data from the inputs generated by the jquery. The "foreach ( $_POST['field'] as $diam )..." i have there does not caught the data from the inputs created with jquery. – user1511579 Jul 11 '12 at 22:38
  • @user1511579 Cool is that `$_Post` php variable? – Tats_innit Jul 11 '12 at 22:40
  • yes, my problem is that when i do the echo of the table i don't get the values written in the inputs generated by the jquery functions :/ – user1511579 Jul 11 '12 at 22:42
  • @user1511579 Bruver my `PHP` is not that awesome but I usually use my c# objects like this `<%= Objhect.Foo %>` rest of Jquery – Tats_innit Jul 11 '12 at 22:44
  • @user1511579 yeah bruv, so the `PHP` object is not accessible now inside Jquery, now, try re-taging PHP guys as well please, I will see if I can understand this and help you out. **OR** You can ask different question as rethink as you got your `conflict` resolved. `:)` which ever way suits you but put some thought in it. – Tats_innit Jul 11 '12 at 22:49
  • i tagged php. i will search and wait for people to say anything here. Thanks anyway. – user1511579 Jul 11 '12 at 22:53
0

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.

Steve Buzonas
  • 5,300
  • 1
  • 33
  • 55