Use count in loop to update variable javascript

Question

I try to make a dynamic input form group to add extra rows. Adding rows in the input group works!

Now I would like to send a variable back with the number of rows. I have a working for loop that counts the rows. But the variable stays the same.

    $(document).ready(function(){

        var max_fields = 16;
        var add_input_button = $('.add_input_button');
        var field_wrapper = $('.field_wrapper');
        var input_count = 4;
        var new_field_html = // html code with input_count(works but stays on 4)

// Add button dynamically
        $(add_input_button).click(function(){
            if(input_count < max_fields){
                input_count++;
                console.log(input_count);
                $(field_wrapper).append(new_field_html);
            }
        });

I can see in my console log the correct loop!

How can I change the code to update the input_count on return value? screenshot of the problem

You must update the new_field_html variable in your click callback function — Arkerone
– Arkerone, Commented Aug 23, 2019 at 12:22

Ritesh Kumar · Accepted Answer · 2019-08-23 12:31:42Z

1

You should move this line within the click event, as this line gets called only once on page load. So to use the input_count incremented value within the new field, it should also be formed every time the click is performed.

var new_field_html = // html code with input_count(works but stays on 4)

Here I have designed a rough page what you are trying to achieve, please read out the comments to understand.

    <!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>The HTML5 Herald</title>


</head>

<body>
    <form>
    <div  class="field_wrapper">
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
          </div>
            <button type="button" class="btn btn-primary add_input_button">Submit</button>
      </div>
    </form>

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

$(document).ready(function(){

        var max_fields = 16;
        var add_input_button = $('.add_input_button');
        var field_wrapper = $('.field_wrapper');
        var input_count = 4;
        // html code with input_count(works but stays on 4)
        console.log("Outside ======> " + input_count); // Executes only on page load
        // Add button dynamically
        $(add_input_button).click(function(){
            if(input_count < max_fields){
                input_count++;
                var new_field_html = '<div class="form-group"><button type="button" class="btn btn-primary" class="add_input_button">Submit-' + input_count + '</button></div>';
                $(field_wrapper).append(new_field_html);
                console.log("Inside ======> " + input_count); // Executed everytime the button is clicked
            }
        });
        console.log("Outside-2 ======> " + input_count); // Executed only on page load
    });

</script>
</body>
</html>

answered Aug 23, 2019 at 12:31

Ritesh Kumar

1146 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hindrik Vonk Over a year ago

Thanks for the help! It works now! :) Is it possible to use value="<?= $_SESSION["spelers"]['+input_count+'][0] ?> in the new_field_html?

Ritesh Kumar Over a year ago

No I guess, you need to understand that when you load the page first all the server side script will execute then client side script will execute. But if if want to achieve what you want can be done by below comment.

Ritesh Kumar Over a year ago

You can do one thing, assign $_SESSION["spelers"] value to a javascript variable outside the click event (means within document.ready), say var arr = $_SESSION["spelers"], now arr is an javascript array so you can use it like, value=arr[input_count] , but make sure you should have all the values in $_SESSION["spelers"], I mean collection of values should be passed before hand. Let me know if any doubt.

Hindrik Vonk Over a year ago

Thank you! 1 problem when I use a "clean" array I get a value with " undefined " is it possible to fix this?

Collectives™ on Stack Overflow

Use count in loop to update variable javascript

1 Answer 1

var new_field_html = // html code with input_count(works but stays on 4)

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

var new_field_html = // html code with input_count(works but stays on 4)

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related