Multiple web service requests from single page in html - php

Question

I am trying to submit three forms in single page. But I stuck at one point.
I want to make verification of mobile Number in first Form. then use that Mobile Number in final Form submission
I have tried using this in single Form but then How can I send web request for sending verification pin with verify Mobile Button.
I have Three forms like this,
//First Form Take Mobile Number, web service will send verification Pin as reply to this action
<form name="PhoneVerification" action="url to phone verification web service" >
Phone Number: <input type="text" name ="number" id="phone">
<input type="submit" name ="submit1" id="submit1">Verify Mibile Number</input>
</form>
//Second Form verifies pin Locally which is sent by first service
<form name="PinVerification" action="verify pin came from previous web service">
Verification Pin(Sent on Mobile Number): <input type="text" name ="pin" id="pin">
<input type="submit" name ="submit2" id="submit2">Verify Pin</input>
</form>
//Third Form Will Take Mobile Number Previously Entered. and email/password and Complete Signup
<form action="web service call to complete signup">
Email: <input type="text" name ="email" id="email">
Password: <input type="text" name ="pass" id="pass">
PasswordAgain: <input type="text" name ="passAgain" id="passAgain">
<input type="submit" name ="submit3" id="submit3">Complete Signup</input>
</form>
The Problem is I am not able to get value of phone number as page is refreshed after that Form submission.
I read some threads about using AJAX , But How can I use Ajax in this type Of situation.
How can I achieve this. with AJAX, or using PHP.

Answer 1

Id must be unique in your html page. In above code id="phone" be present in first to forms. the second form in pinVerfication right but there is an same id = "phone" . please change it and make an another try. third form have also same problem
//Second Form verifies pin Locally which is sent by first service
<form name="PinVerification" action="verify pin">
Verification Pin(Sent on Mobile Number): <input type="text" name ="number" id="pin">
<input type="submit" name ="submit2" id="submit2">Verify Pin</input>
</form>
/Third Form Will Take Mobile Number Previously Entered. and email/password and Complete Signup
<form action="web service call to complete signup">
Email: <input type="text" name ="email" id="email">
Password: <input type="text" name ="pass" id="pass">
PasswordAgain: <input type="text" name ="passAgain" id="passAgain">
<input type="submit" name ="submit3" id="submit3">Complete Signup</input>
</form>

Answer 2

You can use cookies or sessions to achieve this task.
if you want to do it with only javascript, you can use cookies. you can get the best reference from w3schools
You can do it with server side script like php and use ajax.
In this case you can use session.
First form submission store number in cookies or session. and in another form you get that value from cookie or session and make use of it.
Note: Don't forgot to delete cookies or session after you finish all work.