Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-08-12T14:19:57.563Z
Answers.LastActivityDate: 2017-08-12T14:19:57.563Z
Answers.UserDisplayName: CreateSean
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-08-10T22:29:19.083Z
Answers.Text: doing this I get an Uncaught TypeError: $(..).replace is not a function --- actually with my original code I get that too.. just checked.
Answers.UserDisplayName: CreateSean
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-08-11T00:22:46.343Z
Answers.Text: 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`).
Answers.UserDisplayName: jasonetco
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-08-10T21:52:02.307Z
Answers.LastActivityDate: 2017-08-10T21:52:02.307Z
Answers.UserDisplayName: jasonetco
Body: <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>
  
Tags: <ajax><javascript><entry-form>
Title: How to update front end Craft new row - stuck on JavaScript
ThreadText: # 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:**
  
  ```
  <div class="matrixblock">
      <p>
      block id: new_0
  </p>
  
  <div class="col-sm-6">
      <input type="text" name="fields[staffProfiles][new_0][fields][employeeName]" value="" placeholder="Full Name">
  </div><!-- /.col-sm-6 -->
  <div class="col-sm-6">
      <input type="text" name="fields[staffProfiles][new_0][fields][jobTitle]" value=""  placeholder="Job Title">
  </div><!-- /.col-sm-6 -->
  
  <a href="" class="remove-row"><i class="fa fa-times"></i></a>
  
  </div><!-- /.matrixblock -->
  
  ```
  
  **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 = "<div class='newperson'></div>";
      $('.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 = "<div class='newperson'></div>";
      $('.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 = "<div class='newperson'></div>";
    $('.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`).  
  
  ---
  
  