Add input fields dynamically but fields are generated by external PHP functions

Question

This question might seem like a repeat, but I really couldn't find something similar. Things work here but are not dynamic here:

    var counter = 0;
function addInput(divName){
      var newdiv = document.createElement('div');
      newdiv.innerHTML = "Member " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
      document.getElementById(divName).appendChild(newdiv);
      counter++;
 }

but here I am giving it a little bit of a twist:

    var counter = 0;
function addInput(divName){
      var newdiv = document.createElement('div');
      newdiv.innerHTML = "Member " + (counter + 1) + addmore();
      document.getElementById(divName).appendChild(newdiv);
      counter++;
 }

so, the new function addmore() here is returning the fields generated by the external PHP code which is being called with the help of AJAX..

The function addmore(); is something like this:

addmore(){
        $jd.ajax({
          url: "<?php echo JURI::root(); ?>",
          type: "POST",
          data: {'option':'com_joomd', 'view':'itempanel', 'task':'loadfields', 'typeid':<?php echo $this->cparams->typeid; ?>, 'catid[]':checked, 'id':<?php echo (int)$this->item->id; ?>, "<?php echo jutility::getToken(); ?>":1, 'abase':1},
          beforeSend: function()    {
            $jd(".poploadingbox").show();
          },
          complete: function()  {
            $jd(".poploadingbox").hide();
          },
          success: function(res)    {
          
                $jd('#fieldtable_id').html(res);
          },
          error: function() {
              alert('error');                 
          }
    });
}

Obviously the part $jd('#fieldtable_id').html(res); is doing the actual job, but I am not able to use it to introduce the new field here dynamically.

Please guide me.

score 3 · Accepted Answer · answered Jul 20 '12 at 16:34

3

Your function addmore() isn't returning anything because

There is no return "value" in your function
You're making an asynchronous call with $jd.ajax()

You should do like this :

var counter = 0;
function addInput(divName){
      addmore(divName);
}

and :

function addmore(divName){
        $jd.ajax({
          url: "<?php echo JURI::root(); ?>",
          type: "POST",
          data: {'option':'com_joomd', 'view':'itempanel', 'task':'loadfields', 'typeid':<?php echo $this->cparams->typeid; ?>, 'catid[]':checked, 'id':<?php echo (int)$this->item-        id; ?>, "<?php echo jutility::getToken(); ?>":1, 'abase':1},
          beforeSend: function()    {
            $jd(".poploadingbox").show();
          },
          complete: function()  {
            $jd(".poploadingbox").hide();
          },
          success: function(res)    {
             var newdiv = document.createElement('div');
             newdiv.innerHTML = "Member " + (counter + 1) + res;
             document.getElementById(divName).appendChild(newdiv);
             counter++;

          },
          error: function() {
              alert('error');                 
          }
    });
}

answered Jul 20 '12 at 16:34

N. Hodin

1,056
6
12

Perfect.. and so quick, and now it makes me feel that that was easy and now i little bit more understand things as well as i am not good at ajax and javascript.. please give me little advice on learning them.. – harry Jul 20 '12 at 17:32
By the way.. this customization of code has disabled the form to save all the entries to the database.. As the first set of inputs could be saved to database but now only the last set of inputs are being send to the datase.. Obviously the receiving end has to be modified to get the result.. which was saving an array previously has now to be used to save an of arrays.. little hint may work here too please – harry Jul 20 '12 at 18:02
About your second comment, if you don't receive all the values from the inputs when saving the form, you must check if you have a different name for each input, maybe there is a problem with the counter variable. – N. Hodin Jul 20 '12 at 19:56
well.. in the dynamically generated fields, as we have kept the things same so they all have same names and ids.. i tried it as `var newdiv = document.createElement('div'+counter);` thinking that if the counter would change id of div, it will help but it didn't solve the problem.. – harry Jul 23 '12 at 08:45

score 1 · Answer 2 · edited May 23 '17 at 12:04

1

If you want to return values from an ajax call . set async to false and use responseText to return value from the ajax call. Then return that variable from addmore function.

Returning values from jquery ajax call.

edited May 23 '17 at 12:04

Community

1
1

answered Jul 20 '12 at 16:41

Umair Khan

258
2
12

score 0 · Answer 3 · answered Jul 20 '12 at 16:36

try this to add/remove input fields dynamically (using jquery):

<script>$(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;

        $('#addScnt').live('click', function() {
                $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
                i++;
                return false;
        });

        $('#remScnt').live('click', function() {
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });
});</script>

<style>
* { font-family:Arial; }
h2 { padding:0 0 5px 5px; }
h2 a { color: #224f99; }
a { color:#999; text-decoration: none; }
a:hover { color:#802727; }
p { padding:0 0 5px 0; }
input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }
</style>


<div id="ContentWrapper">  
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>
<form id="cat" method="POST" action="">
<div id="p_scents">
    <p>
        <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    </p>
</div>

Post name of new fields will be: p_scnt_1, p_scnt_2 etc...

well this was little bit out of the context and am trying to save time here.. so couldn't even try your precious response.. thanks by the way.. — harry, Jul 20 '12 at 17:35

Add input fields dynamically but fields are generated by external PHP functions

3 Answers3

Linked