Home/ Questions/Q 8887673
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T21:52:06+00:00

I’m using jquery for adding fields to a form, repeatable fields with add more

  • 0

I’m using jquery for adding fields to a form, “repeatable” fields with “add more” button

The code is

       $(".add-attacker-scores").click(function() { 

            count = count + 1;

            $('#atacker_score_items').append('<li><span class="sort hndle"><label>team :<input type="text" name="attacker_scores[' + count + '][team]" size="30" value=""/></label><label>flags :<input type="text" name="attacker_scores[' + count + '][flags]" size="10" value=""/></label><label>phone homes :<input type="text" name="attacker_scores[' + count + '][phone]" size="10" value=""/></label><label>Injects :<input type="text" name="attacker_scores[' + count + '][injects]" size="10" value=""/></label><span class="remove">Remove</span></li>');

            var temp = <? echo implode('',explode("\n",Print_attacker_scores('count') )); ?>;
                temp = temp.replace(/count/g, count);
                $('#atacker_score_items').append(temp);

            return false;
        });

The code for Print_attacker_scores is

function Print_attacker_scores($cnt, $p = null) {
if ($p === null){
    $a = $b = $c = $d = '';
}else{
    $a = $p['team'];
    $b = $p['flags'];
    $c = $p['phone'];
    $d = $p['injects'];
}
return  <<<HTML
<li><span class="sort hndle"></span>
    <label>team :
    <input type="text" name="attacker_scores[$cnt][team]" size="30" value="$a"/>
    </label>

    <label>flags :
    <input type="text" name="attacker_scores[$cnt][flags]" size="10" value="$b"/></label>

    <label>phone homes :
    <input type="text" name="attacker_scores[$cnt][phone]" size="10" value="$c"/></label>

    <label>injects :
    <input type="text" name="attacker_scores[$cnt][injects]" size="10" value="$d"/></label>

    <span class="remove">Remove</span>
</li>
HTML
;
}

In firefox its working but in chrome it doesn’t work.

Then i realized that it throws an error:
NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMDocumentFragment.appendChild]

Why is happening this?
I’ve copied the code from around the web but i can fix it because i don’t understand this lines:

var temp = <? echo implode('',explode("\n",Print_attacker_scores('count') )); ?>;
                temp = temp.replace(/count/g, count);

so this is reading the html generated by the Print_scores_function and creating an array with each line.Then generates a string with all the items in the array.
Then replaces the count number¿? i don’t understand why it is doing this.
Maybe there’s a another way of doing it more simple?

(/count/g, count) is a regular expression?

What am i doing wrong?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is not a complete answer since I cannot reproduce the jQuery error. However as it stands you seem to be calling PHP from JavaScript which will not work since the scripting languages exist on different parts of the stack.

    As I see it, there are two ways of doing this.

    The PHP way

    Have a PHP file which generates the JavaScript function like so:

    <?php
function Print_attacker_scores($cnt, $p = null) {
  if ($p === null){
    $a = $b = $c = $d = '';
  } else{
    $a = $p['team'];
    $b = $p['flags'];
    $c = $p['phone'];
    $d = $p['injects'];
  }

  $html = <<<HTML
<li><span class="sort hndle"></span>
<label>team :<input type="text" name="attacker_scores[$cnt][team]" size="30" value="$a"/></label>
<label>flags :<input type="text" name="attacker_scores[$cnt][flags]" size="10" value="$b"/></label>
<label>phone homes :<input type="text" name="attacker_scores[$cnt][phone]" size="10" value="$c"/></label>
<label>injects :<input type="text" name="attacker_scores[$cnt][injects]" size="10" value="$d"/></label>
<span class="remove">Remove</span>
</li>
HTML;

  return preg_replace('/\s\s+/', ' ', $html);
}
?>
<script type="text/javascript">
var count = 0;

$(".add-attacker-scores").click(function() {
  count++;

  var temp = '<? echo Print_attacker_scores('count'); ?>';
  temp = temp.replace(/count/g, count);
  $('#atacker_score_items').append(temp);

    return false;
});
</script>

    where I have added quotes around the var temp = assignment since you require the markup as a JavaScript string. The function now also removes any newlines since the function was returning an invalid multi-line JavaScript string – see Remove new lines from string

    You are correct that the temp.replace(/count/g, count) is replacing all occurrences (the g part) of the word “count” with the JavaScript variable count, which is incremented each time the function is called.

    This PHP script, when served by a Web server with a PHP processor module results in the valid JavaScript:

    <script type="text/javascript">
var count = 0;
$(".add-attacker-scores").click(function() {
  count ++;

  var temp = '<li><span class="sort hndle"></span> <label>team :<input type="text" name="attacker_scores[count][team]" size="30" value=""/></label> <label>flags :<input type="text" name="attacker_scores[count][flags]" size="10" value=""/></label> <label>phone homes :<input type="text" name="attacker_scores[count][phone]" size="10" value=""/></label> <label>injects :<input type="text" name="attacker_scores[count][injects]" size="10" value=""/></label> <span class="remove">Remove</span> </li>';
  temp = temp.replace(/count/g, count);
  $('#atacker_score_items').append(temp);

    return false;
});
</script>

    that I have used with the HTML

    <ul id="atacker_score_items" class="custom_repeatable ui-sortable"></ul>
<a href="#" class="add-attacker-scores">add more</a>​

    to create this demo

    The (pure) JavaScript way

    Use your existing function which already contains the generated HTML and handles the “count” → number variable replacement. In this version you do not need the PHP function call or regular expression.

    var count = 0;

$(".add-attacker-scores").click(function() { 
    count++;

    $('#atacker_score_items').append('<li><span class="sort hndle"><label>team :<input type="text" name="attacker_scores[' + count + '][team]" size="30" value=""/></label><label>flags :<input type="text" name="attacker_scores[' + count + '][flags]" size="10" value=""/></label><label>phone homes :<input type="text" name="attacker_scores[' + count + '][phone]" size="10" value=""/></label><label>Injects :<input type="text" name="attacker_scores[' + count + '][injects]" size="10" value=""/></label><span class="remove">Remove</span></li>');

    return false;
});​

    Hope this helps! Please let me know if you are still getting the JavaScript error as I could not reproduce the problem.

    • 0