HTML to PHP arrays

Question

good evening everyone,

I've been searching and trying for a while to build a small program, I want the user to input an unknown amount of numbers (he can enter as much as he would like), and I want to make an array out of them, everywhere on the internet keeps using many "input type="text"...." boxes but I don't know how many the user will input. and I don't want the page to keep refreshing so if possible I'd like to send all the numbers at once to the same page or another page, create an array out of them so I can complete the program using functions based on that array.

EDIT: i first used a <form action="process.php" method=POST> insert values here: <input type="number" name=num><br> <input type="submit" value="send"> </form>

and didn't know what to do after that then I read about files and used this piece of code, and it worked. thank you to the member who answered using jquery but I am yet to learn java so I couldn't really use it now. I started last year as a software engineering student and still don't really know and understand much so I am embarrassed when I read codes by others and don't understand

` $h = fopen("numtext.txt", "r");

if($h) {
    while (($data = fgetcsv($h, 1000, " ")) !== FALSE) {
        foreach($data as $num)
            $numbers[] = $num;
    }
    fclose($h);
}

print_r($numbers);
echo count($numbers);`

Answer 1

Here a simple approach using jQuery

var InputHandler = function( $el ){
  var t = this;
  this.$el = $el;
  this.sendToServerButton = $el.find("button.sendToServer");

  var newInputElement = '<input type="text" /><br>';

  this.$el.append(newInputElement);

  
  /**
    on enter:
      add newInputElement and
      change focus to the new
  **/
  this.$el.on("keyup", "input", function(e){
    if (e.which !== 13) {
      return false;
    }
    t.$el.append(newInputElement);
    t.$el.find("input:last").focus();
  });

  
  /**
    send to the backend "script.php" as a "stringify" array
  **/
  this.sendToServer = function(numberArray){

    console.log("sending numbers to the server: ", numberArray);
    var stringForServer = JSON.stringify(numberArray);
    
    $.ajax({
      url: "script.php",
      type: "POST",
      data: ({numberArrayString : stringForServer}),
      success: function(msg){
        alert("send to server" + msg);
      }
    });


    /**
      on the server side in PHP (above called "script.php") do:
      $numberArray= json_decode($_POST['numberArrayString']); // create PHP array from stringify-json string
    **/

  }
  

  /**
    on click:
      collect numbers from the input fields and send them to the server
  **/
  this.sendToServerButton.on("click", function(){
    var numbers = [];
    $el.find("input").each(function(){
      var numberAsString = $(this).val();
      var number = parseInt(numberAsString);
      numbers.push( number );
    });
    t.sendToServer(numbers);
  });

}


var inputHandler = new InputHandler( $(".inputs") );

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

<p>
  Enter numbers in the input field. 
  Press enter to add additional numbers.
</p>
<div class="inputs">
  <button class="sendToServer">send to server</button><br>
</div>