Hi, I’m trying to retrieve the data inserted by the user from a form. I’m using the method:
app.form.getFormData
but it doesn’t work.
The div elements are inserted into the form dynamically through an
append()
The user can add the form to compile clicking on an href in the page. When the user clicks on the link the form appears on the page. Finished this task, the user can save the data inserted clicking on a button named Save.
After having recovered the data I will have to send them to the server through a request, but before doing this, I’m checking if the method retrieves the data… but as I said previously I can’t retrieve the data inserted by the user. The method return me a void array.
The html page
<div data-name="first-step" class="page">
<div class="page-content pg-no-padding">
<div class="row justify-content-center">
<div class="col-100 tablet-100 desktop-80">
<div class="block">
<form class="list" id="form-first-step">
<div class="row justify-content-center">
<h1> Compile...</h1>
</div><!--row-->
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="block-title">
<h3>Select the form that you need to compile</h3>
</div>
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-auto"> <div class="list">
<ul>
<li>
<a href="javascript:addInfo1();" class="link">
<div class="item-inner">
<div class="item-title">Info1</div>
</div>
</a>
</li>
<li>
<a href="javascript:addInfo2();" class="link">
<div class="item-inner">
<div class="item-title">Info2</div>
</div>
</a>
</li>
<li>
<a href="javascript:addInfo3();" class="link button-round" >
<div class="item-inner">
<div class="item-title">Info3</div>
</div>
</a>
</li>
</ul>
</div><!--list-->
</div><!--col-->
</div><!--row-->
</div><!--card-content-->
</div><!--card-->
</div><!--col-->
</div><!--row-->
<div class="row" id="info1"></div>
<div class="row" id="info2"></div>
<div class="row" id="info3"></div>
</form>
</div><!--block-->
<div class="block">
<a class="col button button-fill" id="send-data-first-step" onclick="getDataFirstStep()">Save</a>
</div>
</div><!--col-100-->
</div><!--row-->
</div> <!-- ./ page-content-->
the JS file that I included it on index.html
const addInfo1 = () =>{
$$("#info1").append(`
<div class="col-100 tablet-auto desktop-auto">
<div class="block-title">
<h2> Info1</h2>
</div>
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Cars</div>
<div class="item-input-wrap">
<select name="cars">
<option disabled selected value> --- Seleziona ---</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Age</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="age">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Name Car</div>
<div class="item-input-wrap">
<input type="text" placeholder="" name="car_name">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
</div><!--col-->
</div><!--row-->
</div><!--card-content-->
</div><!--card-->
</div><!--col-->
`);
}
const addInfo2 = () =>{
$$("#info2").append(`
.... code ....
`);
}
const addInfo3 = () =>{
$$("#info3").append(`
.... code ....
`);
}
const getDataFirstStep = () =>{
$$('#send-data-first-step').on('click', function(){
var storedData = self.app.form.getFormData('#form-first-step');
if(storedData) {
alert(JSON.stringify(storedData));
}
else {
alert('void array');
}
});
}
Thank you in advance