Jump to content
confused and dazed

How Can I Place The Value Of A Button From An Exteral Javascript File

Recommended Posts

Hello internet.I would like my page to be able to open up with button values preloaded by an external javascript file. Reason is that I have a lot of buttons in my form whose values I would like to have centralized in an external file and then have those values loaded to the form. How can I do this?

Share this post


Link to post
Share on other sites

The easiest way would probably be to have an array of objects that have the ID and value for each button, and loop through them to set each one.

var buttons = [  {id: 'button1', value: 'value1'},  {id: 'button2', value: 'value2'},  {id: 'button3', value: 'value3'}]; for (var i = 0; i < buttons.length; i++){  document.getElementById(buttons[i].id).value = buttons[i].value;}

Share this post


Link to post
Share on other sites

Will this work for the name the user will see on the button? I used the wrong word before. I wanted to say "name" not "value".When the user opens up my site I would like all the button to show names that came from an external .js file and NOT from names I typed into the name label in the button tag.Any suggestions.

Share this post


Link to post
Share on other sites
Will this work for the name the user will see on the button? I used the wrong word before. I wanted to say "name" not "value".When the user opens up my site I would like all the button to show names that came from an external .js file and NOT from names I typed into the name label in the button tag.Any suggestions.
You would still use the technique JSG described. The only thing you need to worry about is which property to update. If you're using input tags as buttons, ie:<input type='button' />then you have to change the value property. If you're using button tags, ie:<button>...</button>you'll probably have to use the innerHTML property. Either way, you'll still use the object map and the loop JSG showed you.

Share this post


Link to post
Share on other sites

O.K. again I did not use the correct wording - I want to pre-populate readonly text fields. Here is the code... whats wrong? There are no names in the text fields. I'm guessing it has something to do with the value="" not being the right way to go but I dont know how to deal with it. I tried a getelementbyid but that didnt work for the value= so I just left it blank. <HTML><HEAD><script LANGUAGE="JavaScript">var buttons = [ {id: 't1', value: 'Florida'}, {id: 't2', value: 'Miami'}, {id: 't3', value: 'Detroit'}]; for (var i = 0; i < buttons.length; i++){ document.getElementById(buttons.id).value = buttons.value;}</SCRIPT></HEAD><input readonly=textbox style="width:86;height:20;" value="" id="t1" size=4 style="font-size: 6.5pt;"><input readonly=textbox style="width:86;height:20;" value="" id="t2" size=4 style="font-size: 6.5pt;"><input readonly=textbox style="width:86;height:20;" value="" id="t3" size=4 style="font-size: 6.5pt;"></HTML>

Share this post


Link to post
Share on other sites

The browser tells you if your code has errors. Look for the error console in your browser.

Share this post


Link to post
Share on other sites

Place an alert just before that line to see what ID you're trying to use. Ie,alert(buttons.id); Is it what you expect?

Share this post


Link to post
Share on other sites

If you run that script in the head, the elements you're trying to get to haven't loaded yet. You have to wait until the document has loaded. You can use the "DOMContentReady" event which isn't supported by all browsers, or use window.onload which is slower.

Share this post


Link to post
Share on other sites
If you run that script in the head, the elements you're trying to get to haven't loaded yet. You have to wait until the document has loaded. You can use the "DOMContentReady" event which isn't supported by all browsers, or use window.onload which is slower.
Doh! Of course, hadn't even noticed that...I'm a little slow this morning. :P Another solution is to just move the script to the end of the body (after all the content and before the closing </body> tag). Edited by ShadowMage

Share this post


Link to post
Share on other sites

Once again the great programming minds (that I would like to be one day) solved the issue. Here is what the code looks like now. Thanks people!!! <HTML><input readonly=textbox style="width:86;height:20;" value="" id="t1" size=4 style="font-size: 6.5pt;"><input readonly=textbox style="width:86;height:20;" value="" id="t2" size=4 style="font-size: 6.5pt;"><input readonly=textbox style="width:86;height:20;" value="" id="t3" size=4 style="font-size: 6.5pt;"><script LANGUAGE="JavaScript">var buttons = [ {id: 't1', value: 'Florida'}, {id: 't2', value: 'Miami'}, {id: 't3', value: 'Detroit'}]; for (var i = 0; i < buttons.length; i++){ document.getElementById(buttons.id).value = buttons.value;}</SCRIPT></HTML>

Share this post


Link to post
Share on other sites

Not that your solution is wrong (it isn't, it is perfectly acceptable) but I just wanted to show you what Ingolme was suggesting:

<HTML><HEAD><script LANGUAGE="JavaScript">var buttons = [   {id: 't1', value: 'Florida'},   {id: 't2', value: 'Miami'},   {id: 't3', value: 'Detroit'}];window.onload = function() {   for (var i = 0; i < buttons.length; i++)   {	  document.getElementById(buttons[i].id).value = buttons[i].value;   }}</SCRIPT></HEAD><input readonly=textbox style="width:86;height:20;" value="" id="t1" size=4 style="font-size: 6.5pt;"><input readonly=textbox style="width:86;height:20;" value="" id="t2" size=4 style="font-size: 6.5pt;"><input readonly=textbox style="width:86;height:20;" value="" id="t3" size=4 style="font-size: 6.5pt;"></HTML>

Share this post


Link to post
Share on other sites

Neither way is really more robust or proper. It's more a matter of preference. I like to keep all of my scripts in the head, so I use the onload technique. Other people prefer to put their code at the end of the body.The only real difference is that when the script is at the end of the body, your page can load slightly faster because the script is downloaded after the content. Downloading a script pauses the download of everything else until its done. I have never noticed a significant difference in loading time, however, so unless you have a lot of code it doesn't really matter.

Share this post


Link to post
Share on other sites

The difference is that scripts that get run in the head, just inline code, get executed before the body loads. A function that runs when the load event fires will run when everything, scripts, images, CSS, etc, have finished downloading. Code in the body runs when the browser gets to that point in the code when it's setting up the page. So, which technique you use depends on when you want the code to run. One advantage with loading or running scripts in the body is that they happen in sequence, so if you have one line that includes an external script, and then some inline code after it, the inline code will execute only once the external script has finished downloading and running. <script type="text/javascript" src="external.js"></script><script type="text/javascript">alert('code loaded');</script> You can use that fact to set up a progress indicator if you have a page that loads a lot of files. After each file, you can add some inline code to update the indicator. I use that technique when I'm loading projects I built with ExtJS:

<body>   <div id="loading-mask" style=""></div>   <div id="loading">	 <div class="loading-indicator"><img src="images/extanim32.gif" style="width:32px;height:32px;margin-right:8px;float:left;vertical-align:top;">Loading <?php echo $config['title']; ?>...<br><span id="loading-msg">Loading styles and images...</span></div>   </div> <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading Core API...';</script><script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script><script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading UI Components...';</script><script type="text/javascript" src="ext/ext-all-debug.js"></script><link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"><link rel="stylesheet" type="text/css" href="ext/resources/css/xtheme-gray.css"><link rel="stylesheet" type="text/css" href="css/main.css"><link rel="stylesheet" type="text/css" href="css/icons.css"><link rel="stylesheet" type="text/css" href="css/workspace.css"><link rel="stylesheet" type="text/css" href="css/filetree.css"><link rel="stylesheet" type="text/css" href="css/filetype.css"><link rel="stylesheet" type="text/css" href="css/MultiSelect.css"><script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading Extensions...';</script><script type="text/javascript" src="js/ext-basex.js"></script><script type="text/javascript" src="js/Ext.ux.js"></script> <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Initializing...';</script> <script type="text/javascript" src="js/main.js"></script><script type="text/javascript">Ext.onReady(TicketSys.main.init, TicketSys.main);</script> </body>

All of that code is in the body, and the message updates as the various files are loaded. Once everything is loaded it executes the last inline statement, which works because the Ext object has already been loaded by one of the external files. This is preferable if you're loading a lot of things because if you put that in the head then the page will just be blank while things are downloading. I use inline CSS in the head to style the loading divs, which the Javascript will eventually remove as the application gets set up. For smaller external scripts, or any code that needs to run before anything else has happened, it's appropriate to put that code in the head. You use the onload event (or Ext.onReady in the above code) to set up anything that needs to run last.

Share this post


Link to post
Share on other sites

Thanks for all the great information!!! I have a follow-up question. As previously stated the code below works just fine to pre-load textbox text. Now I want to post process those values using php... here is the php I am using and it is not working. I am guessing somehow the value is not stored the php wants to see it and my research so far has not turned up the answer. I am a little upset becuase I guess this means I am still not getting the basics of coding. //***PHP code<html><body><?php Print $_POST["t1"]; ?><br /><?php Print $_POST["t2"]; ?><br /><?php Print $_POST["t3"]; ?><br /></body></html> //***HTML code<HTML><input readonly=textbox style="width:86;height:20;" value="" id="t1" size=4 style="font-size: 6.5pt;"><input readonly=textbox style="width:86;height:20;" value="" id="t2" size=4 style="font-size: 6.5pt;"><input readonly=textbox style="width:86;height:20;" value="" id="t3" size=4 style="font-size: 6.5pt;"><script LANGUAGE="JavaScript">var buttons = [{id: 't1', value: 'Florida'},{id: 't2', value: 'Miami'},{id: 't3', value: 'Detroit'}];for (var i = 0; i < buttons.length; i++){document.getElementById(buttons.id).value = buttons.value;}</SCRIPT></HTML>

Share this post


Link to post
Share on other sites

The inputs need to be inside a form. PHP can process the submitted form data. There's nothing in $_POST until the form has been submitted.

Share this post


Link to post
Share on other sites

if you are using forms, the values of their name attribute are what will populate their respective members in the POST array, not their id.http://www.w3schools.com/php/php_forms.asp

Edited by thescientist

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...