CODEWITHSUNDEEP
javascripthtml
iblue95
iblue95

Reputation: 31

How to fill out information automatically in a form

I have an index page which displays the information for two seminars. Each seminar has its own unique reference number as shown in the code below. When the user clicks the apply now button in a specific section, it redirects the user to the registration page. However, I want the Reference number on that page to be automatically filled out based on the button the user clicked. For example this is my index page:

<section class="sec">
<p class= "prt"> 1. PRT Seminar </p>
<p> Reference number: S00001 </p>
<a href="register.php">
<button id="button1">Apply Now</button>
</a>
</section>
<section class="sec">
<p class="prt"> 2. Developing a Written Diversity Statement Seminar</p>
<p> Reference number: S00002 </p>
<a href="register.php">
<button id="button2">Apply Now</button>
</a>
</section>

This is my registration page

 <form id="registerForm" method="post" action="process.php" novalidate="novalidate">
 <h1> User Registration Form </h1>
 <fieldset class="info">
<p><label for ="reference"> Seminar reference number: </label>
<input type="text" name="reference" id="reference" maxlength="10" size="10" required="required"/>
</p> 
</fieldset>
</form>

So, if the user clicks on the apply now button under PRT Seminar, the registration page should have S00001 filled out next to seminar reference number. How can I do that using Javascript?

Upvotes: 0

Views: 109

Answers (3)

David Agasiev
David Agasiev

Reputation: 72

I think you can add an event listener to the button and then just get the place you want to fill in and change it's value.

Upvotes: 0

itsanewabstract
itsanewabstract

Reputation: 1036

You can redirect your users to the registration page and and pass in a query string into the url. So your registration page url could look like https://myapp.com/registration-page?seminar=S00001.

Then you can parse the query string on the registration page and render the seminar value inside of your HTML where you need it. You can write your own Javascript logic to do this or you can use an npm package like qs to help you out.

Just make sure that you're only including the parsed values into your HTML in a safe way. So don't use innerHTML, etc. to render the value.You can read this article from OWASP on how to avoid common security mistakes.

Upvotes: 1

Kirmin
Kirmin

Reputation: 301

You can pass the reference number as a parameter in the register link and then on the registration page you can take that parameter and put it in the input.

This is how you can pass it in the link

This is how to take params from url with javasrcipt https://gomakethings.com/getting-all-query-string-values-from-a-url-with-vanilla-js/

Upvotes: 0

Related Questions