javascript - Grab dynamic input value in react -
this form view:
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
Post a Comment