从输入的html表单到javascript对象收集所有值

Question

Normally if I add a new input tag I also have to add in Javascript.

I try to collect all value from input tag, So how to pass value into an object by loop use tag input name to be object key name also.

Try to use for count

document.getElementById("form1").elements.length

seem it collected the button tag also, how to void it

<form name="form1">
 <input type="text" name="value1">
 <input type="text" name="value2">
 <input type="text" name="value3">
 <input type="text" name="value4">

 <input type="button" id="save" onClick="fc1()" value="Save">
</form>


for(i=0;......)
{
    obj.value+'i' =  document.forms["form1"]["value"+ (i+1)].value;
}

---

Same result as this.


function fc1(){

   this.value1 = document.forms["form1"]["value1"].value;
   this.value2 = document.forms["form1"]["value2"].value;
   this.value3 = document.forms["form1"]["value3"].value;
   this.value4 = document.forms["form1"]["value4"].value;


   const obj = {
      "value1": this.value1,
      "value2": this.value2,
      "value3": this.value3,
      "value4": this.value4
   };

} 

Answer 1

I usually grab inputs by their ID or class:

<input type="text" id="value1">

then grab the value:

const value1 = document.getElementById('value1').value

to cut down on code, maybe throw it in an array:

const valueArray = [value1, value2, value3]

then you can do something like this:

const allValues = {}

valueArray.forEach((value, index) => {
  allValues[`value${index + 1}`] = value
})

now when you log allValues you should have what you want. Note, I am using some es6.

Answer 2

What about this ?

var obj = {};
 var form = document.getElementById("form1");
    form.children.forEach(function(elm){
    if(elm.type === 'text'){
        obj[elm.name] = elm.value;
      }
  });
  console.log(obj);

Answer 3

try giving same 'class' or 'name' attribute to the text fields. try var x = document.getElementsByClassName("example");

which gives you the list of all elements with the class name as "example'. Then you can loop around based on the length of x.

References:

https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

Answer 4

document.querySelectorAll is made for this.

document.querySelectorAll("form[name='form1'] input[type='text']")

will return all input fields of type text in form1 as HTML nodes.

let elements = document.querySelectorAll("form[name='form1'] input[type='text']");

elements.forEach(e => console.log(e.value));

...logs the values of the input fields. Don't make things harder on yourself by hard coding classes or ID's, and this will allow you to target the input elements you need without additional checks or without fetching every input on the page.

Example:

 const values = {}; document.querySelectorAll("form[name='form1'] input[type='text']").forEach(element => values[element.name] = element.value); console.log(values); 

 <form name="form1"> <input type="text" name="value1" value=1> <input type="text" name="value2" value=2> <input type="text" name="value3" value=3> <input type="text" name="value4" value=4> <input type="button" id="save" onclick="fc1()" value="Save"> </form> 

Answer 5

This is an alternative solution done with jQuery.

Hope this is what you were looking for. Happy to explain or help in a better solution if needed.

 //jQuery solution const obj = {} $('#save').click(function(e){ var form = $(this).parent(); var inputs = form.children().not(':input[type=button]'); $.each( inputs, function(){ obj[$(this).attr('name')] = $(this).val(); }); console.log(obj); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h2>jQuery solution</h2> <form name="form1"> <input type="text" name="value1"> <input type="text" name="value2"> <input type="text" name="value3"> <input type="text" name="value4"> <input type="button" id="save" value="Save"> </form> 

JS Solution

 //JS Solution const objs = {} var button = document.getElementById('savejs'); var form = document.getElementById('formjs'); var element = {}; button.addEventListener('click', function(){ inputs = form.children; for(i=0; i < inputs.length; i++){ if(inputs[i].name != ""){ objs[inputs[i].name] = inputs[i].value; } } console.log(objs); }) 

 <h2>JS solution</h2> <form name="form1" id='formjs'> <input type="text" name="value1"> <input type="text" name="value2"> <input type="text" name="value3"> <input type="text" name="value4"> <input type="button" id="savejs" value="Save"> </form> 

Answer 6

try this:

 var input = document.forms[0].querySelectorAll('input[type=text]'); var result = Array.from(input).reduce((r, ele) => { r[ele.name] = ele.value; return r; }, {}); console.log(result); 

 <form name="form1"> <input type="text" name="value1" value=1> <input type="text" name="value2" value=2> <input type="text" name="value3" value=3> <input type="text" name="value4" value=4> <input type="button" id="save" onclick="fc1()" value="Save"> </form> 

Answer 7

If you used something like .. I think it will work. :)

var myObj = {};
var elems = document.getElementsByTagName('input'), i;
for (i in elems) {
    myObj[value + i] = myObj[i].value;
}

return from getElementsByTagName is an array of all matching tags. there are some wizard answers in here ha. :)