Html Input Arrays

HTML input arrays

There are some references and pointers in the comments on this page at PHP.net:

Torsten says

"Section C.8 of the XHTML spec's compatability guidelines apply to the use of the name attribute as a fragment identifier. If you check the DTD you'll find that the 'name' attribute is still defined as CDATA for form elements."

Jetboy says

"according to this: http://www.w3.org/TR/xhtml1/#C_8 the type of the name attribute has been changed in XHTML 1.0, meaning that square brackets in XHTML's name attribute are not valid.

Regardless, at the time of writing, the W3C's validator doesn't pick this up on a XHTML document."

HTML/PHP - Form - Input as array

Simply add [] to those names like

 <input type="text" class="form-control" placeholder="Titel" name="levels[level][]">
 <input type="text" class="form-control" placeholder="Titel" name="levels[build_time][]">

Take that template and then you can add those even using a loop.

Then you can add those dynamically as much as you want, without having to provide an index. PHP will pick them up just like your expected scenario example.

Edit

Sorry I had braces in the wrong place, which would make every new value as a new array element. Use the updated code now and this will give you the following array structure

levels > level (Array)
levels > build_time (Array)

Same index on both sub arrays will give you your pair. For example

echo $levels["level"][5];
echo $levels["build_time"][5];

How can I get a array as an input value inserted into an HTML input field?

How about just using JSON.parse() and waiting to get the value of the input until you actually click the button?

Also (FYI), label requires that you either nest the element that it is a label for within it or that you add the for attribute and give it the value of the id of the element that it is a label "for".

var input= document.getElementById('arrays'); //["book", 3, "pin", 4];//var btn = document.getElementById('objectify');var output = document.getElementById('results');
btn.addEventListener("click", function () {  let myArray = JSON.parse(input.value);  output.textContent = myArray;  console.log(myArray);});

<label for="arrays">Input values</label><input id="arrays" placeholder="Enter Array" value='["book", 3, "pin", 4]'><button id="objectify" type= "button">Click</button><div id="results"></div>

HTML Input Array: How to get html input array values with javascript

You could simply target the form element inside your onclick handler, query all input elements to iterate over them and build the array you are looking for.

Here is an example of what you could do to build an array of objects holding each input elements name and value, excluding disabled once and the submit element.

function get(evt){  var fields = [];  event.target.parentElement  .querySelectorAll('input:not([disabled]):not([type="submit"])').forEach(function(e) {    fields.push({name: e.name, value: e.value});   })  console.log(fields);  return false;}

<form>  <input type="text" name="firstname" placeholder="Name"><br>  <input type="text" name="lastname" placeholder="Surename"><br>  <input type="text" name="foo" value="foo will be excluded" disabled><br>  <input type="submit" onclick="return get();"></form>

Html Form With Array

An array is a list of data, it has no built-in visual representation (largely because it has no guaranteed structure within it). You need to decide how you want to display that data and write some code to loop through the array and output the data in the format you want.

At the absolute simplest you can just output each item on a separate line, or separated by commas. For that you need to build up the mail body string gradually so you can concatenate the values together. To make for less repetition, a function would be useful here, so you can use it to display the contents of all the arrays in a consistent way.

Something like this should work:

function arrayToString($arr)
{
  $output = "";
  foreach ($arr as $item) $output .= $item."<br>";
  return $output;
}

$mail->Body ="

<p><h3> | ORÇAMENTO - ONLINE PEDIDO</h3></p>


<p><h3>⇰ Informação Cliente:</h3></p>


<h3>▪ Tipo de cliente ( 0 = Particular | 1 = Empresa):</h3> $empresa  <br>
<h3>▪ Nome Empresa:</h3> $empresa_nome <br>
<h3>▪ Montagem ( 0 = Nao Quero Montagem | 1 = Quero Montagem):</h3> $montagem  <br>
<h3>▪ Local de montagem:</h3> $morada_montagem <br>
<h3>▪ Primeiro Nome:</h3> $name <br>
<h3>▪ Ultimo Nome: </h3>$nomeultimo <br>
<h3>▪ Email:</h3> $email <br> 
<h3>▪ Nº Telefone:</h3> $phone <br> 
<h3>▪ NIF:</h3> $nif <br> 
<h3>▪ Morada: </h3>$morada <br>
<h3>▪ Cidade: </h3>$localidade <br>
<h3>▪ Código Postal:</h3> $codigopostal  <br>

<p><h3>⇰ Informação Produto:</h3></p>
 ---------------------------------------------<br>
 
 
 

<p><h3>⇰ Produtos:</h3></p>
 <h3>▪ Tipo de Estore:</h3>".arrayToString($Caracteristicas)."
<h3>▪ Largura:</h3> ".arrayToString($Largura)." 
<h3>▪ Altura: </h3>".arrayToString($Altura)."
<h3>▪ Quantidade:</h3>".arrayToString($Quantidade)."<br> 
---------------------------------------------<br>


 <h3>▪ Acionamento:</h3> $adicionamento <br>

<h3>▪ Visita do Tecnico:</h3> $tecnico  <br>

<h3>▪ Mensagem :</h3> $message<br>
<p><h3>Cliente aceita (política de privacidade)</h3>$politicaprivacidade<br></p>

 <p><img src=\"cid:logoimg\" /></p>";

How to Append Value to an Array from Input Text in Javascript?

What you are doing is almost correct, just make sure you call the filter and set the textcontent when clicking the button. Also the value is a string, you will have to parseInt() it to do the even / odd calculation. It is also safer to use textcontent instead of innerHTML.

const inputBtn = document.getElementById("btn")
const myText = document.getElementById("myText")
const result = document.getElementById("result")

const nums = [1, 2, 3];
inputBtn.addEventListener("click", function() {
  nums.push(parseInt(myText.value));
  myText.value = '';
  const answer = nums.filter(evenNums);
  function evenNums(nums) {
    if (nums % 2 == 0) {
      return nums
    }
  }
  result.textContent = answer;
});

<label for="text">Enter Text</label>
<input id="myText" type="text" />
<button id="btn">Click Me</button>
<div id="result"></div>

submit multiple arrays from html and combine their attribute into seperate collections and store in Laravel App

A single for() or foreach() loop can be used to save these to the database:

for method:

for($i = 0; $i < count($request->input('tw_name')); $i++) {
  Bet::create([
    'name' => $request->input('tw_name')[$i],
    'price' => $request->input('tw_price')[$i]
  ]);
}

foreach method:

foreach($request->input('tw_name') as $index => $twName) {
  Bet::create([
    'name' => $twName,
    'price' => $request->input('tw_price')[$index]
  ]);
}

As long as both tw_name[] and tw_price[] arrays are the same length, this code will create a Bet instance for each pair of uploaded values.

Html Input Arrays