javascript - Grab dynamic input value in react -


this form view:

my form

and dynamic input form code:

  ...   let subjudulinput = []; // variable render   (var = 0; < this.props.subtitleinput.index; i++) {      let index = + 1;      subjudulinput.push(         <div key={'formgroup' + index} class="form-group">            {(i === 0) ? <label for="subjudulinput">sub judul</label>:false}            <input key={'input' + index} type="text" class="form-control" placeholder={`masukan sub judul ${index}`}/>         </div>      );   }   ... 

if click plus button, new input form show..

this form handler:

   onaddingtitle(event) { // if submit button pressed       let formdata = {subjudul:[]};       event.preventdefault();        console.log(event.target.elements);     } 

how can grab of dynamic input value? (best ways) formdata object. this:

let formdata = {subjudul:[    'sub judul 1 value here',    'sub judul 2 value here',    'sub judul 3 value here',    'next new input' ]}; 

add name attribute text field: name={"textbox-"+index}

try below code expected values

    onaddingtitle(event) {        event.preventdefault();     let formelements = event.target.elements;     let formdata = {       subjudul: []     };     object.keys(formelements).foreach((key) => {       if (formelements[key].type == 'text') {         formdata.subjudul.push(formelements[key].value)       }     });     console.log('formdata', formdata);    } 

explanation:

  • get form elements (which object)
  • loop through object elemets using keys
  • check type of field, if textbox(add per need) push value of field array.

Comments

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -