Set <input> submission as global Javascript variable?

Flight · 09-07-2012, 08:35 PM

I am a complete beginner at Javascript (just started learning it yesterday, but luckily, most of the syntax is similar to C, which I know), so try to bear with me here.

Is there a way to take a user's text input (using <input type="text">) and set it as a global Javascript variable? Trying to make it so that the user can input a hex color into the box, press submit, and have the background-color in the stylesheet changed.

Thank you very much in advance~

WolfShade · 09-07-2012, 08:54 PM

Unless you think there will be a lot of people who disable cookies, use a cookie for setting the background-color.

Flight · 09-07-2012, 09:32 PM

Quote:

Originally Posted by WolfShade

Unless you think there will be a lot of people who disable cookies, use a cookie for setting the background-color.

I proooobably should have been more specific lol.

Essentially, what I'm trying to accomplish is a theme designer for vBulletin, but on a basic level (since I'm a basic programmer). I think a picture would describe it better than words:

https://dl.dropbox.com/u/19599392/PU...RE/example.png

The user submits their data, and then it gets placed inside a specific variable, while also altering the specified stylesheet in real-time using this. I need it to be in a variable mostly because I need some way of having the page print out all the changed variables so that the user can send that print out and the staff can go and make the changes in the ACP.

xelawho · 09-07-2012, 11:53 PM

generally speaking, it doesn't need to be a global variable (in fact it's preferable if it isn't), but if you are planning on doing something else with it, that's easy enough:

Code:

<body>
<input type="text" id="col" value="red">
<input type="button" value="click me!" onclick="changeBG()">
<script type="text/javascript">
var thecolor;
function changeBG(){
thecolor=document.getElementById("col").value;
document.body.style.backgroundColor=thecolor;
}
</script>  
</body>

Flight · 09-08-2012, 02:14 AM

Thank you sooooo much, but is there a way to change it so that it changes the style rule in a linked stylesheet?

xelawho · 09-08-2012, 04:34 AM

Can I just clarify for one second? Are you trying to write to the style sheet (so that it will be altered permanently and the next user to log into the page will see the changes made by the previous user)?

Because as far as I am aware, that can't be done with javascript alone.

If you just want to change the appearance of the page temporarily (as long as the user is logged in), then it can be done the way that the quirksmode link you gave describes, but as they also describe it is a very hit and miss operation, all to do with the fact that different browsers interpret the css rules object differently and there is no real transparency to the way that they do so (see the subhead "No Keys")

For what you want to do there are simpler ways of changing the page's appearance by directly accessing the dom elements (as in my first example) - even with multiple elements you can access them with getElementsByTagName() and refine your search based on class names

For kicks, here's what the function would look like using the quirksmode method (provided there is one style sheet and there is a rule for the body background and that rule is the last in the list):

Code:

function changeBG(){
thecolor=document.getElementById("col").value;
if (!document.styleSheets) {
return;
	}
	var theRules = new Array();
	if (document.styleSheets[0].cssRules) {
		theRules = document.styleSheets[0].cssRules
		} else if (document.styleSheets[0].rules) {
		theRules = document.styleSheets[0].rules
		} else {
		return;
		}
	theRules[theRules.length-1].style.backgroundColor = thecolor;
}

but like I say this doesn't actually change the style sheet on the server - have a look at
http://www.quirksmode.org/dom/test.css
before and after clicking on the example link to see what I mean

Disclaimer: I'm not 100% on any of the above - I've only ever used dom methods to change style attributes - so there may well be a way of doing what I vaguely think you might be trying to do.

If the hurdle is getting the printout of changed variables, that is nothing really - once they are all set and the user has submitted their preferences you can print them out in any format you like.

Flight · 09-08-2012, 05:22 PM

Alright so this is the 1st part of my stylesheet:

Code:

body
{

	background: #E1E1E2;

	color: #000000;

	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;

	margin: 245px 10px 10px 10px;

	padding: 0px;

}

This is the code I'm trying to use: (not worrying about the variables or input yet)

Code:

<script>
function changeIt() {
	if (!document.styleSheets) return;
	var theRules = new Array();
	if (document.styleSheets[1].cssRules)
		theRules = document.styleSheets[1].cssRules
	else if (document.styleSheets[1].rules)
		theRules = document.styleSheets[1].rules
	else return;
	theRules[1].style.background = '#BDE2F9';
}
</script>

Yet, when I try to activate it, I can't get it to work. I tried this in it's place and it worked fine:

Code:

<script>
function changeIt(){
document.body.style.backgroundColor="#BDE2F9";
}
</script>

And my stylesheet declarations are like this: (ignore the /Ever Grande City Forums - Powered by vBulletin_files/, it's just because of the way I saved it, I'm running it on Dreamweaver)

Code:

<!-- CSS Stylesheet -->
<style type="text/css" id="vbulletin_css">
/**
* vBulletin 3.8.7 CSS
* Style: 'vBulletin Default'; Style ID: 1
*/
@import url("./Ever Grande City Forums - Powered by vBulletin_files/style-3da1f2fa-00001.css");
</style>
<link rel="stylesheet" type="text/css" href="./Ever Grande City Forums - Powered by vBulletin_files/vbulletin_important.css">

Is there something I'm doing wrong here? Do I have to use [theRules.length-#] instead of [#]?

xelawho · 09-08-2012, 05:57 PM

this:

Code:

document.styleSheets[1]

would imply that the style sheet that you are accessing is the second one that the page uses (remember that javscript indexes start at 0)

that would be the first thing I would look at.

similarly

Code:

theRules[1]

refers to the second rule in your style sheet (text color in the example you have posted)... MAYBE... but read what quirksmode writes about the way different browsers interpret this... they use theRules[theRules.length-1] because they know that the rule they are trying to access is the last rule in the array, regardless. It may be a more consistent approach.

Can I just ask from curiosity why you are going to all this trouble? If it were me, I would make a form that has a preview button, change the style properties by DOM methods and then have another button which submits that form directly to the server once the user is happy with their selections.

Flight · 09-08-2012, 06:23 PM

Quote:

Originally Posted by xelawho

Can I just ask from curiosity why you are going to all this trouble? If it were me, I would make a form that has a preview button, change the style properties by DOM methods and then have another button which submits that form directly to the server once the user is happy with their selections.

Well basically, I'm trying to make a way for people to be able to experiment with skin customizations and see their results the way Administrators would be able to, since we're trying to host a competition to see who could come up with the best skin.

And....um....I'm not sure what DOM methods are, nor do I know how to code php/asp to let our server accept submissions. I literally just know the basics of HTML/CSS and just started learning Javascript yesterday v__v

Could you give an example of what you mean by DOM methods? That would be much appreciated.

xelawho · 09-08-2012, 08:10 PM

this is the DOM method, by accessing the element's style property directly...

Code:

<script>
function changeIt(){
document.body.style.backgroundColor="#BDE2F9";
}
</script>

xelawho · 09-08-2012, 09:27 PM

this is a brief example of what I would be doing, if I were you (of course, you might like to validate for appropriate inputs, but you'd have to do that anyway)...

Code:

<body> 
<form name="myform">
Background color:<input type="text" name="BGcol" value="red"/><br>
Header background color:<input type="text" name="HBGcol" value="blue"/><br>
Linked Paragraph text size:<input type="text" name="LpSize" value="24"/><br>
Single Paragraph text size:<input type="text" name="spSize" value="18"/><br>
<input type="button" value="see preview" onclick="preview()"/>
Check box to approve changes and submit:<input type="checkbox" onchange="ableSub(this.checked)"/>
<input type="submit" name="theSub" disabled=true/>
</form>
<div id="wrapper">
<div id="header">This is the header</div>
<p id="singpar">This paragraph has its own style</p>
<p class="linkedpar">These paragraphs</p>
<p class="linkedpar">are linked</p>
<p class="linkedpar">by their class name</p>
</div>
<script type="text/javascript">
function preview(){
var frm=document.myform;
document.getElementById("wrapper").style.backgroundColor=frm.BGcol.value;
document.getElementById("header").style.backgroundColor=frm.HBGcol.value;
var ps=document.getElementById("wrapper").getElementsByTagName("p");
for (var i = 0; i < ps.length; i++) {
if (ps[i].className=="linkedpar"){
ps[i].style.fontSize=frm.LpSize.value+"px";
		}
	}
document.getElementById("header").style.fontSize=frm.spSize.value+"px";	
}

function ableSub(state){
document.myform.theSub.disabled=!state;
}

preview();
</script> 
</body>

Flight · 09-08-2012, 09:45 PM

But can that deal with things like classes and such? I was going to go that route until I found things like this:

Code:

a:hover, a:active, body_ahover

{

	color: #FF4400;

}

a.shade:active, a.shade:hover 

{ 

       color: #FF4400; 

       text-decoration: underline; 

}

And also, is there something wrong with this? I would imagine it working, but I must have my syntax messed up somewhere...

Code:

<script type="text/javascript">
function changeBG( ident ){
        var p=ident;
        document.p.style.backgroundColor="#BDE2F9";
}
function resetBG( ident ){
	var p=ident;
        document.p.style.backgroundColor="#E1E1E2";	
}
</script>

...<td bordercolor="#869BD1" width="55%" onmouseover="changeBG(body)" onmouseout="resetBG(body)">...

It works when I get rid of the variable declaration and just replace p with body.

xelawho · 09-08-2012, 11:31 PM

Quote:

Originally Posted by Flight

But can that deal with things like classes and such?

yes - have a look at this bit:

Code:

var ps=document.getElementById("wrapper").getElementsByTagName("p");
for (var i = 0; i < ps.length; i++) {
if (ps[i].className=="linkedpar"){
ps[i].style.fontSize=frm.LpSize.value+"px";
		}
	}

the other code I suspect would work better like this:

Code:

onmouseover="changeBG('body')" //note apostrophes around 'body' to convert it to string

function changeBG( ident ){
        document[ident].style.backgroundColor="#BDE2F9";
}