Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

What is the syntax for passing a javascript variable to an HTML input box?

Posted on 2011-09-20
10
Medium Priority
?
311 Views
Last Modified: 2012-05-12
I'm capturing a localStorage variable that contains a previously entered email address from another page. Upon the entry of this page I want to show the email address as the 'default' value in the text box.

I need to know the syntax of value=variable in the input statement. Here is the HTML code:

<script type="text/javascript">
  var tmpEMAdd = localStorage.EMAdd;
</script>
            
<form action="">
   <fieldset>
     <input type="text" id="txtsea" size=50 value=tmpEMAdd autofocus/><br />
     <input type="button" value=" Save " onClick="setValue()"/>
   </fieldset>      
</form>
0
Comment
Question by:kbios
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
10 Comments
 
LVL 11

Expert Comment

by:rajvja
ID: 36568067
<script type="text/javascript">
  var tmpEMAdd = localStorage.EMAdd;
txtsea.value=tmpEMAdd;
</script>
           
<form action="">
   <fieldset>
     <input type="text" id="txtsea" size=50  autofocus/><br />
     <input type="button" value=" Save " onClick="setValue()"/>
   </fieldset>      
</form>
0
 

Author Comment

by:kbios
ID: 36568145
Thanks for the suggestion but txtsea.value option did not work. The value was an empty input box. Wouldn't txtsea need created first? I'm hoping for something like value=[var] or value=$var or value={var}. I just don't know the syntax of passing the previously declared variable.
0
 
LVL 11

Expert Comment

by:rajvja
ID: 36568157
Hi,

  Use the script tag inside the <BODY> tag.

Otherwise HEAD section will execute first and by that time form controls will not be created.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 11

Expert Comment

by:rajvja
ID: 36568169
And also, .HTML file will be reloaded everytime you click the button. It will not preserve any form controls values. If you want this functionality, you need to use either submitting the form to the same page and use querystrings to preserve the values
0
 

Author Comment

by:kbios
ID: 36568221
The script tag is inside the <body>. I'm ok with it not preserving any form control values. In this case that is what I want. I simply want to 'pre-load' or 'default' the input box with a value that is stored in a localStorage variable. Perhaps I am thinking incorrecly, but isn't there a way to simply pass a variable to the value, or any other attribute for that matter?
0
 
LVL 22

Accepted Solution

by:
Kim Walker earned 2000 total points
ID: 36568248
The script should come after the form in the HTML or else the input tag won't be defined when the script is executed.

<form action="">
	<fieldset>
		<input type="text" id="txtsea" size=50 value="" autofocus /><br />
		<input type="button" value=" Save " onClick="setValue()" />
	</fieldset>      
</form>
< script type="text/javascript">
	document.getElementById('txtsea').value = localStorage.EMAdd;
</script>

Open in new window

0
 

Author Comment

by:kbios
ID: 36568307
mediaman - thank you. i will accept your answer as the solution. your answer definitely works, but i am still in a quandry about passing a variable to the vlaue in the input. can it be done or is my approach just simply not going to work? any follow-up thought would be greatly appreciated.
0
 

Author Closing Comment

by:kbios
ID: 36568314
thanks
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 36568396
The alternative is not very pretty. It's necessary to interupt the HTML parser to execute the javascript which can't be done in the middle of a tag. But the javascript could be set up to generate the entire input tag. This way, you can leave your variable definition in the head.

<form action="">
	<fieldset>
		< script type='text/ecmascript'>document.write('<input type="text" id="txtsea" size=50 value="'+tmpEMAdd+'" autofocus />');</script>
<br />
		<input type="button" value=" Save " onClick="setValue()" />
	</fieldset>      
</form>

Open in new window

0
 

Author Comment

by:kbios
ID: 36568449
wow!  thanks so much for the follow through. it helps with the overall educational process.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

596 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question