[SOLVED] Retrieve data method from a form doesn't work

Questions
1

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

1 Like
2

Hi, i think that the method you are looking for is this

convertToData(formId)
as the doc says, this methos converts your form into an object

app.form.convertToData(form)- convert form fields values to data object

form - HTMLElement or string (with CSS Selector) of form that should be converted to data object. Required.
Method returns object

var storedData = app.form.convertToData('#form-first-step');

the one you are using is for retrieving a previous saved form. as the doc says:

https://framework7.io/docs/form.html#form-storage-app-methods

Here i made a jsfiddle so you can see how it works. i change the code a little, to use it in jsfiddle.

or the question was that you were trying to retrieve a previous saved form, and got undefined?

3 Likes
3

Hi Pvtallulah, I did not understand the documentation well… thank you so much for your help! :slight_smile: your revision works!

1 Like