confused and dazed Posted November 18, 2011 Share Posted November 18, 2011 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? Link to comment Share on other sites More sharing options...
justsomeguy Posted November 21, 2011 Share Posted November 21, 2011 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;} Link to comment Share on other sites More sharing options...
confused and dazed Posted November 21, 2011 Author Share Posted November 21, 2011 I will try this. Thanks. Link to comment Share on other sites More sharing options...
confused and dazed Posted November 22, 2011 Author Share Posted November 22, 2011 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. Link to comment Share on other sites More sharing options...
ShadowMage Posted November 22, 2011 Share Posted November 22, 2011 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. Link to comment Share on other sites More sharing options...
confused and dazed Posted November 22, 2011 Author Share Posted November 22, 2011 Thank you. Link to comment Share on other sites More sharing options...
confused and dazed Posted November 23, 2011 Author Share Posted November 23, 2011 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> Link to comment Share on other sites More sharing options...
ShadowMage Posted November 23, 2011 Share Posted November 23, 2011 Are you checking for errors? Link to comment Share on other sites More sharing options...
confused and dazed Posted November 23, 2011 Author Share Posted November 23, 2011 How would I do that? I am using notepad not any web programming software. I know... archaic... but at this time that is all I have. Link to comment Share on other sites More sharing options...
Ingolme Posted November 23, 2011 Share Posted November 23, 2011 The browser tells you if your code has errors. Look for the error console in your browser. Link to comment Share on other sites More sharing options...
confused and dazed Posted November 23, 2011 Author Share Posted November 23, 2011 Oh yeah - thats right - I have looked at that before. Here is the error code Webpage error detailsMessage: 'document.getElementById(...)' is null or not an objectLine: 12Char: 3Code: 0 Link to comment Share on other sites More sharing options...
ShadowMage Posted November 23, 2011 Share Posted November 23, 2011 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? Link to comment Share on other sites More sharing options...
Ingolme Posted November 23, 2011 Share Posted November 23, 2011 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. Link to comment Share on other sites More sharing options...
ShadowMage Posted November 23, 2011 Share Posted November 23, 2011 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. Another solution is to just move the script to the end of the body (after all the content and before the closing </body> tag). Link to comment Share on other sites More sharing options...
confused and dazed Posted November 23, 2011 Author Share Posted November 23, 2011 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> Link to comment Share on other sites More sharing options...
ShadowMage Posted November 23, 2011 Share Posted November 23, 2011 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> Link to comment Share on other sites More sharing options...
confused and dazed Posted November 23, 2011 Author Share Posted November 23, 2011 What is the MORE robust way of handleing it? Link to comment Share on other sites More sharing options...
ShadowMage Posted November 23, 2011 Share Posted November 23, 2011 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted November 23, 2011 Share Posted November 23, 2011 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. Link to comment Share on other sites More sharing options...
confused and dazed Posted November 25, 2011 Author Share Posted November 25, 2011 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> Link to comment Share on other sites More sharing options...
justsomeguy Posted November 25, 2011 Share Posted November 25, 2011 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. Link to comment Share on other sites More sharing options...
confused and dazed Posted November 25, 2011 Author Share Posted November 25, 2011 I have a form named tourney where the inputs exist. Using the strategy described in this string helps to pre-populate the text fields but the php for some reason does not process the ids that were created using the strategy described in this string. Link to comment Share on other sites More sharing options...
thescientist Posted November 25, 2011 Share Posted November 25, 2011 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.