Solved

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

Posted on 2011-09-20
10
280 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
  • 5
  • 3
  • 2
10 Comments
 
LVL 11

Expert Comment

by:rajvja
Comment Utility
<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
Comment Utility
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
Comment Utility
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
 
LVL 11

Expert Comment

by:rajvja
Comment Utility
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
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 21

Accepted Solution

by:
Kim Walker earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
thanks
0
 
LVL 21

Expert Comment

by:Kim Walker
Comment Utility
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
Comment Utility
wow!  thanks so much for the follow through. it helps with the overall educational process.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

743 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now