Read and write a field variable / value before form submission

@jerryisgoodAug 24.2010

Hi!

I was wondering if there was a way to dynamically read a field input and respond to it later in the form. My situation is this:

I have a question that asks how many workers are employed at a business. Later in the form, the user is asked to add as many workers as they have (section with information on each worker) ..

Is there a way I can have something echoed or document.write above the latter section saying “Please add (Number of workers listed above) sections for each worker employed”

Thank you! ?

to post a comment

JavaScript

8 Comments(s) _↴

@PadonakAug 25.2010 — #http://www.tek-tips.com/faqs.cfm?fid=5442

@jerryisgoodauthorAug 25.2010 — #http://www.tek-tips.com/faqs.cfm?fid=5442[/QUOTE]

Thank you but I was more curious if there was a way to pass variables on the same page without the use of a submit button. I can successfully draw values from POST and GET methods with PHP or Java on a second page though I am having trouble doing the same pass from a variable that hasn't been submitted. One field to an echo / document.write on the same page. If they change the field, the document.write value would change accordingly.

How many service providers do you have? _4_

.....

Later on the same page:

Please fill in the information for all _4_ of your service providers!

@OfekmeisterAug 25.2010 — #This is the code but it's not working for me, sorry.

[CODE]<html>
 
 <head>
 
 <script type="text/javascript">
 <!--
 
 function WriteProviders()
 {
 
 var x = document.getElementsByName('providers').value;
 var y = document.getElementById('text').innerHTML;
 
 y = "You have " + x + " service providers!";
 
 }
 
 //-->
 </script>
 
 </head>
 
 <body>
 
 <form onsubmit="WriteProviders(); return false;">
 How many service providers do you have?<input type="text" name="providers" />
 <input type="submit" value="Submit" />
 </form>
 
 <p id="text">Submit a number!</p>
 
 </body>
 
 </html>[/CODE]

@OfekmeisterAug 25.2010 — #Someone please help tweak my code so it works for Jerry?

@OfekmeisterAug 25.2010 — #Ok, look down

@OfekmeisterAug 25.2010 — #Here it is:

[CODE]<html>
 
 <head>
 
 <script type="text/javascript">
 <!--
 
 function WriteProviders()
 {
 
 var x = document.getElementsByName('providers')[0].value;
 var y = "You have " + x + " service providers!";
 
 document.getElementById('text').innerHTML = y;
 
 }
 
 //-->
 </script>
 
 </head>
 
 <body>
 
 <form>
 How many service providers do you have?<input type="text" name="providers" onchange="WriteProviders()" /><br />
 <input type="submit" value="Submit" />
 </form>
 
 <p id="text">Type a number!</p>
 
 </body>
 
 </html>[/CODE]

@jerryisgoodauthorAug 26.2010 — #Here it is:

[CODE]<html>
 
 <head>
 
 <script type="text/javascript">
 <!--
 
 function WriteProviders()
 {
 
 var x = document.getElementsByName('providers')[0].value;
 var y = "You have " + x + " service providers!";
 
 document.getElementById('text').innerHTML = y;
 
 }
 
 //-->
 </script>
 
 </head>
 
 <body>
 
 <form>
 How many service providers do you have?<input type="text" name="providers" onchange="WriteProviders()" /><br />
 <input type="submit" value="Submit" />
 </form>
 
 <p id="text">Type a number!</p>
 
 </body>
 
 </html>[/CODE]

[/QUOTE]

Thank you for the help, I appreciate it! Would you mind telling me what's going on here so I know? What is the purpose of the "[0]"?

@OfekmeisterAug 27.2010 — #When data is entered in forms, browsers store the input in arrays. The getElementsByName() function returns all the elements of a certain name, and since I only used one input box, I needed to only retrieve the first value (arrays start at 0 in javascript). getElementById() is different in that it returns the first element of a certain id, which is why it is usually used for only one element. So equivalent code would be:

[CODE]<html>
 
 <head>
 
 <script type="text/javascript">
 <!--
 
 function WriteProviders()
 {
 
 var x = document.getElementById('providers').value;
 var y = "You have " + x + " service providers!";
 
 document.getElementById('text').innerHTML = y;
 
 }
 
 //-->
 </script>
 
 </head>
 
 <body>
 
 <form>
 How many service providers do you have?<input type="text" id="providers" onchange="WriteProviders()" /><br />
 <input type="submit" value="Submit" />
 </form>
 
 <p id="text">Type a number!</p>
 
 </body>
 
 </html>[/CODE]

And using both methods:

[CODE]<html>
 
 <head>
 
 <script type="text/javascript">
 <!--
 
 function YourProviders()
 {
 
 var x = document.getElementById('providers').value;
 var y = "You have " + x + " service providers!";
 
 document.getElementById('yourtext').innerHTML = y;
 
 }
 
 function MotherProviders()
 {
 
 var x = document.getElementsByName('providers')[0].value;
 var y = "Your mother has " + x + " service providers!";
 
 document.getElementById('mothertext').innerHTML = y;
 
 }
 
 function FatherProviders()
 {
 
 var x = document.getElementsByName('providers')[1].value;
 var y = "Your father has " + x + " service providers!";
 
 document.getElementById('fathertext').innerHTML = y;
 
 }
 
 //-->
 </script>
 
 </head>
 
 <body>
 
 <form>
 How many service providers do you have?<input type="text" id="providers" onchange="YourProviders()" /><br />
 How many service providers does your mother have?<input type="text" name="providers" onchange="MotherProviders()" /><br />
 How many service providers does your father have?<input type="text" name="providers" onchange="FatherProviders()" /><br />
 <input type="submit" value="Submit" />
 </form>
 
 <p id="yourtext">Type a number!</p><br />
 
 <p id="mothertext">Type a number!</p><br />
 
 <p id="fathertext">Type a number!</p><br />
 
 </body>
 
 </html>[/CODE]

Also in #JavaScript _↴

Need Help Getting My Site Listed Do While Loop?Submit() problem

Success!

Help @jerryisgood spread the word by sharing this article on Twitter...

Tweet This

Read and write a field variable / value before form submission

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Read and write a field variable / value before form submission

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴