<p>In the end I didn't get this working with replacing the new_0 in the fields array of the ajax content. </p>

<p>I opted instead to limit adding new people to one at a time by having the new person button fade out when clicked and a message appearing stating:</p>

<blockquote>
  <p><strong>You must save your entry to add more staff</strong></p>
</blockquote>

<p>In the end this forces the store manager to save their work more often, which is always a good thing, and keeps the javascript simpler. Functionality that is required is working. Would be nice to add multiple people at a time, but for now a solution that everyone is happy with.</p>

<p>new javascript code is below. the .addMorePeople fadein contains the message about saving the entry.</p>

<pre><code>// add a new person
$('#addPerson').click(function(e){
    e.preventDefault();
    console.log('clicked addPerson');

    var newPerson = "&lt;div class='newperson'&gt;&lt;/div&gt;";
    $('.newBlock').append(newPerson);
    $('.newBlock .newperson:last-child').load('/store/newperson');

    // hide add button so that they must save to add more
    $(this).fadeOut("slow", function(){
        $this.remove();
    });
    $('.addMorePeople').fadeIn('slow');

    {# load redactor on the new row #}
    {% includeJs "$('.newperson:last-child .employeeBio').redactor();" %}

})
</code></pre>

CC BY-SA 3.0
2017-08-12T14:19:57.563Z
2017-08-12T14:19:57.563Z
CreateSean
<p>You can get the number of rows you already have from the DOM, then use that to determine how many you'll have after you add a new one.</p>

<pre><code>$('#addPerson').click(function(e){
  e.preventDefault();
  console.log('clicked addPerson');

  var newPerson = "&lt;div class='newperson'&gt;&lt;/div&gt;";
  $('.newBlock').append(newPerson);
  $('.newBlock .newperson:last-child').load('/store/newperson');

  var blocknum = $('.newBlock .newperson').length;
  $('.newBlock .newperson:last-child').replace('new_0','new' + blocknum);
});
</code></pre>

<p><del>Also note that in your example you were replacing using <code>$blocknum</code>, but you had defined it to be <code>blocknum</code> without the <code>$</code>.</del> You've already fixed this :)</p>

<p>Hope this works out!</p>

CC BY-SA 3.0
2017-08-10T22:29:19.083Z
doing this I get an Uncaught TypeError: $(..).replace is not a function --- actually with my original code I get that too.. just checked.
CreateSean
CC BY-SA 3.0
2017-08-11T00:22:46.343Z
Ah I see; if you're trying to update the `name` attribute, you'd want to define it as a separate variable. It'll be a string, and you can use the string's `replace()` method. Then, set the `name` attribute to be the new one you just made (using `replace`).
jasonetco
CC BY-SA 3.0
2017-08-10T21:52:02.307Z
2017-08-10T21:52:02.307Z
jasonetco
<p>I'm building out a front end entry form with a Natrix and everything is coming along fine. However when users create a new row each new row needs to be unique in order to be saved. This is where I'm stuck.</p>

<p><strong>Simplified HTML:</strong></p>

<pre><code>&lt;div class="matrixblock"&gt;
    &lt;p&gt;
    block id: new_0
&lt;/p&gt;

&lt;div class="col-sm-6"&gt;
    &lt;input type="text" name="fields[staffProfiles][new_0][fields][employeeName]" value="" placeholder="Full Name"&gt;
&lt;/div&gt;&lt;!-- /.col-sm-6 --&gt;
&lt;div class="col-sm-6"&gt;
    &lt;input type="text" name="fields[staffProfiles][new_0][fields][jobTitle]" value=""  placeholder="Job Title"&gt;
&lt;/div&gt;&lt;!-- /.col-sm-6 --&gt;


&lt;a href="" class="remove-row"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/a&gt;


&lt;/div&gt;&lt;!-- /.matrixblock --&gt;
</code></pre>

<p><strong>JS:</strong> </p>

<pre><code>var blocknum = 0;

// add a new person
$('#addPerson').click(function(e){
    e.preventDefault();
    console.log('clicked addPerson');

    //iterate blocknumber
    blocknum = blocknum+= 1;
    console.log('blocknum is ' + blocknum);

    var newPerson = "&lt;div class='newperson'&gt;&lt;/div&gt;";
    $('.newBlock').append(newPerson);
    $('.newBlock .newperson:last-child').load('/store/newperson');

    // replace all instances of new_0 with new1, new2 etc.. as rows added
    // this line doesn't do anything, why?
    $('.newBlock .newperson:last-child').replace('new_0','new' + blocknum);

})
</code></pre>

<p><code>console.log('blocknum is ' + blocknum);</code> is showing that the blocknum is increasing with each row. the <strong>Replace</strong> in the last line of javascript is just not doing anything.</p>

<p>The new person row gets added via ajax correctly but each time it's added [new_0] needs to be unique, but nothing I'm trying is working.</p>

<ajax><javascript><entry-form>
How to update front end Craft new row - stuck on JavaScript
# How to update front end Craft new row - stuck on JavaScript

(Asked by: username_0 on 2017-08-10)

I'm building out a front end entry form with a Natrix and everything is coming along fine. However when users create a new row each new row needs to be unique in order to be saved. This is where I'm stuck.
Simplified HTML:

    
    block id: new_0



    


    








JS: 
var blocknum = 0;

// add a new person
$('#addPerson').click(function(e){
    e.preventDefault();
    console.log('clicked addPerson');

    //iterate blocknumber
    blocknum = blocknum+= 1;
    console.log('blocknum is ' + blocknum);

    var newPerson = "";
    $('.newBlock').append(newPerson);
    $('.newBlock .newperson:last-child').load('/store/newperson');

    // replace all instances of new_0 with new1, new2 etc.. as rows added
    // this line doesn't do anything, why?
    $('.newBlock .newperson:last-child').replace('new_0','new' + blocknum);

})

console.log('blocknum is ' + blocknum); is showing that the blocknum is increasing with each row. the Replace in the last line of javascript is just not doing anything.
The new person row gets added via ajax correctly but each time it's added [new_0] needs to be unique, but nothing I'm trying is working.

**Tags:** ajax, javascript, entry-form


---

## 2 answers

### Answer by username_0 on 2017-08-12. Score: 1 | Accepted answer

In the end I didn't get this working with replacing the new_0 in the fields array of the ajax content. 
I opted instead to limit adding new people to one at a time by having the new person button fade out when clicked and a message appearing stating:

You must save your entry to add more staff

In the end this forces the store manager to save their work more often, which is always a good thing, and keeps the javascript simpler. Functionality that is required is working. Would be nice to add multiple people at a time, but for now a solution that everyone is happy with.
new javascript code is below. the .addMorePeople fadein contains the message about saving the entry.
// add a new person
$('#addPerson').click(function(e){
    e.preventDefault();
    console.log('clicked addPerson');

    var newPerson = "";
    $('.newBlock').append(newPerson);
    $('.newBlock .newperson:last-child').load('/store/newperson');

    // hide add button so that they must save to add more
    $(this).fadeOut("slow", function(){
        $this.remove();
    });
    $('.addMorePeople').fadeIn('slow');

    {# load redactor on the new row #}
    {% includeJs "$('.newperson:last-child .employeeBio').redactor();" %}

})


---

### Answer by username_1 on 2017-08-10. Score: 1

You can get the number of rows you already have from the DOM, then use that to determine how many you'll have after you add a new one.
$('#addPerson').click(function(e){
  e.preventDefault();
  console.log('clicked addPerson');

  var newPerson = "";
  $('.newBlock').append(newPerson);
  $('.newBlock .newperson:last-child').load('/store/newperson');

  var blocknum = $('.newBlock .newperson').length;
  $('.newBlock .newperson:last-child').replace('new_0','new' + blocknum);
});

Also note that in your example you were replacing using $blocknum, but you had defined it to be blocknum without the $. You've already fixed this :)
Hope this works out!

> **Comments:**
> **username_0**: doing this I get an Uncaught TypeError: $(..).replace is not a function --- actually with my original code I get that too.. just checked.  
> **username_1**: Ah I see; if you're trying to update the `name` attribute, you'd want to define it as a separate variable. It'll be a string, and you can use the string's `replace()` method. Then, set the `name` attribute to be the new one you just made (using `replace`).  

---

