Jquery - Variable not updating into another variable-CodePudding

first of all i'm not a programmer of any kind, so i please need you to fix my issue.

I have a contact form which have inside a place where i can add more input fields till a maximum of 10. Each field i add it has inside the code a class that i called "pers", and i want that this class pers has an incremental number near to it, as pers1, 2, 3 and so go on.

Getting the incremental value was easy but the problem is that the class "pers" wont update the variable keeping the first number on document load.

Here is the code

<script type="text/javascript">
  window.s = 1;
</script>

<script type="text/javascript">
  $(document).ready(function() {
    var addButton = $('.add_button');
    var wrapper = $('.field_wrapper');
    var maxField = 10;
    var fieldHTML = '<div style="margin-top:5px;"><input type="text3" name="pers'   window.s   '" placeholder="Nome e Cognome"/><input type="time" style=margin-left:3.5px; autocomplete="off"><input type="time" style=margin-left:3.5px; autocomplete="off"><a href="javascript:void(0);" title="Rimuovi"><img src="IMG/less_icon.png"></a></div>';

    $(addButton).click(function() {
      if (window.s < maxField) {
        window.s  ; //Increment field counter
        $(wrapper).append(fieldHTML); //Add field html
      }
    });

    $(wrapper).on('click', '.remove_button', function(e) {
      e.preventDefault();
      $(this).parent('div').remove(); //Remove field html
      s--; //Decrement field counter
    });
  });
</script>

There is a global variable "window.s" because it was my last try to get the var updated.

The fields adds correctly till 10 as it should be, but the "window.s" or when it was only "s" still keeps his first value of 1, and so "pers" is always "pers1". I thought that exposing a global variable i would have fix the problem, but nothing.

What am i doing wrong?

Thank you very much for your help guys.

CodePudding user response：

The problem with your code is because you only set fieldHTML once, when the page loads. At this point window.s is 1, so this is the value that's used every time you reference fieldHTML. The quick fix to this would be to put the fieldHTML definition inside the click() event handler.

However the better approach it to entirely remove the need for the incremental variable at all. Use the same name on all the fields you dynamically generate. This way you don't need to maintain the count (eg. if there have been 5 added and someone deletes the 3rd one, you'll currently end up with 2 per5 elements). Because of this it also simplifies the JS logic. In addition you should put the HTML to clone in a <template> element, not the JS, so that there's no cross-contamination of the codebase.

Here's a working example of the changes I mention:

jQuery($ => {
  var $addButton = $('.add_button');
  var $wrapper = $('.field_wrapper');
  var maxFields = 10;
  var fieldHTML = $('#field_template').html();

  $addButton.click(() => {
    if ($('.field_wrapper > div').length < maxFields) {
      $wrapper.append(fieldHTML);
    }
  });

  $wrapper.on('click', '.remove_button', e => {
    e.preventDefault();
    $(e.target).closest('div').remove();
  });
});

.field_wrapper>div {
  margin-top: 5px;
}

.field_wrapper input.time {
  margin-left: 3.5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button >Add</button>
<div ></div>

<template id="field_template">
  <div>
    <input type="text3" name="pers[]" placeholder="Nome e Cognome" />
    <input type="time" name="time1[]"  autocomplete="off" />
    <input type="time" name="time2[]"  autocomplete="off" />
    <a href="#"  title="Rimuovi">
      <img src="IMG/less_icon.png">
    </a>
  </div>
</template>

You can then receive all the input values as an array in your PHP code, like this.

CodePudding user response：

It's because you have not used the updated value there.

First, you assign a value to window.s, and then you create a variable that uses the value of window.s from the initial state, and on each addition, it just appends the same fieldHtml. So, you are getting the same value.

Here is the answer, you are looking:

<div><button >click me</button></div>
<div ></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
  window.s = 1;
</script>

<script type="text/javascript">
  $(document).ready(function() {
    var addButton = $('.add_button');
    var wrapper = $('.field_wrapper');
    var maxField = 10;


    $(addButton).click(function() {
      if (window.s < maxField) {
        window.s  ; //Increment field counter
        let fieldHTML = generateLine(window.s);
        $(wrapper).append(fieldHTML); //Add field html
      }
    });

    $(wrapper).on('click', '.remove_button', function(e) {
      e.preventDefault();
      $(this).parent('div').remove(); //Remove field html
      s--; //Decrement field counter
    });
  });
  
  function generateLine(lineNumber){
      return '<div style="margin-top:5px;"><input type="text3" name="pers'   lineNumber   '" placeholder="Nome e Cognome"/><input type="time" style=margin-left:3.5px; autocomplete="off"><input type="time" style=margin-left:3.5px; autocomplete="off"><a href="javascript:void(0);" title="Rimuovi"><img src="IMG/less_icon.png"></a></div>';
  }
</script>