JavaScript - Can A Checkbox Do 2 Different Things After It Is Clicked?

Ok, I have a submit form that allows the user to submit news, here is the final step of the form:

Code:

    <form action="{$URL_submit}" method="post" id="thisform" name="ATISUBMIT" >
        <input type="hidden" name="phase" value="3" />
        <input type="hidden" name="randkey" value="{$templatelite.post.randkey}" />
        <input type="hidden" name="id" value="{$submit_id}" />
        <input type="hidden" name="trackback" value="{$templatelite.post.trackback|escape:"html"}" />
        
        <br style="clear: both;" /><hr />
        <center>
        <input type=button onclick="javascript:gPageIsOkToExit=true;window.history.go(-1);" value="{#PLIGG_Visual_Submit3_Modify#}" class="log2">&nbsp;&nbsp;
        <input type="button" onclick="javascript:submitEdgeStory();" value="{#PLIGG_Visual_Submit3_SubmitStory#}" class="submit" />
        </center>
    </form>

The submit button already has an "onclick" function via Javascript.

What I want to add is a checkbox to the form, that when checked, the form will submit as per usualy, but will also open a new tab that will load a website.

Is this possible to do?

Thanks,
Geoserv.

Hello, sorry to bother you all - I am quite new to javascript, i have found an engine that i would like to edit, in the following javascript code, it will contain code on moving a player to the left, what i want is for every 32px it moves the player left, i want it to also to scroll the map at the same time (it's all contained in a div called "global_map") - Please help me, i am in urgent need of help please and thank you guys!

Code:

function player_move_left(user_id, bloc_id, charaset, prefix)
{
	var player_id = prefix + user_id;
	var next_left_pos = Math.round((parseInt(document.getElementById(player_id).style.left) - tile_size + player[user_id].left_gain) / tile_size);
	var next_top_pos = Math.round((parseInt(document.getElementById(player_id).style.top) + player[user_id].top_gain) / tile_size);
	//var next_lower_bloc = 'l' + next_left_pos + '-' + next_top_pos;
	//var next_upper_bloc = 'u' + next_left_pos + '-' + next_top_pos;
	var next_event_bloc = 'i' + next_left_pos + '-' + next_top_pos;

	if ( map_pass[next_top_pos][next_left_pos] )
	{
		if ( user_id == my_user_id )
		{
			move_update(bloc_id, -1, 0);
		}
		document.getElementById('charaset_' + user_id).style.top = -player[user_id].height + 'px';
		setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[1] + ') + \'px\';', 62);
		setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[2] + ') + \'px\';', 125);
		setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[3] + ') + \'px\';', 187);
		setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[4] + ') + \'px\';', 250);
		setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[5] + ') + \'px\';', 312);
		setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[6] + ') + \'px\';', 375);
		setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[7] + ') + \'px\';', 437);
		setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[8] + ') + \'px\';', 500);
		setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[9] + ') + \'px\';', 562);
		setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[10] + ') + \'px\';', 625);
		setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[11] + ') + \'px\';', 687);
		setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[12] + ') + \'px\';', 750);
		setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[13] + ') + \'px\';', 812);
		setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[14] + ') + \'px\';', 875);
		setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[15] + ') + \'px\';', 937);
		setTimeout('document.getElementById(\'' + player_id + '\').style.left = (parseInt(document.getElementById(\'' + player_id + '\').style.left) - ' + division[16] + ') + \'px\';', 1000);
		setTimeout('document.getElementById(\'charaset_' + user_id + '\').style.left = \'-' + player[user_id].width + 'px\';', 63);
		setTimeout('document.getElementById(\'charaset_' + user_id + '\').style.left = \'-' + (player[user_id].width * 2) + 'px\';', 188);
		setTimeout('document.getElementById(\'charaset_' + user_id + '\').style.left = \'-' + (player[user_id].width * 3) + 'px\';', 313);
		setTimeout('document.getElementById(\'charaset_' + user_id + '\').style.left = \'0px\';', 438);
		setTimeout('document.getElementById(\'charaset_' + user_id + '\').style.left = \'-' + player[user_id].width + 'px\';', 563);
		setTimeout('document.getElementById(\'charaset_' + user_id + '\').style.left = \'-' + (player[user_id].width * 2) + 'px\';', 688);
		setTimeout('document.getElementById(\'charaset_' + user_id + '\').style.left = \'-' + (player[user_id].width * 3) + 'px\';', 813);
		setTimeout('document.getElementById(\'charaset_' + user_id + '\').style.left = \'0px\';', 938);

		/*if ( (parseInt(document.getElementById(player_id).style.left) - tile_size + player[user_id].left_gain) > parseInt(document.getElementById(bloc_id).style.left) )
		{
			setTimeout('player_move_left(\'' + user_id + '\', \'' + bloc_id + '\', \'' + charaset + '\', \'' + prefix + '\')', 1000);
		}
		else
		{*/
			if ( prefix == 'p' )
			{
				if ( user_id == my_user_id && events_placement[next_top_pos][next_left_pos][0].length > 0 )
				{
					if ( path_finished )
					{
						setTimeout('exec_event(' + user_id + ', ' + next_left_pos + ', ' + next_top_pos + ', 0);', 1000);
					}
				}
				else
				{
					setTimeout('player[' + user_id + '].moving = false;', 1000);
				}
			}
		/*}*/
	}
	else
	{
		document.getElementById('charaset_' + user_id).style.top = -player[user_id].height + 'px';
		if ( prefix == 'p' )
		{
			if ( user_id == my_user_id && events_placement[next_top_pos][next_left_pos][1].length > 0 )
			{
				if ( event_data[next_event_bloc].changedir )
				{
					document.getElementById('charaset_' + next_event_bloc).style.top = '-' + (parseInt(document.getElementById('charaset_' + next_event_bloc).style.height) / 2) + 'px';
				}

				if ( user_id == my_user_id )
				{
					move_update(bloc_id, 0, 0);
				}
				exec_event(user_id, next_left_pos, next_top_pos, 1);
			}
			else
			{
				player[user_id].moving = false;
			}
		}
	}
}

If you still don't get what i am asking for (which i appreciate!) is that i want to know how to scroll 2 things at the same time (the player div and the global_map div)

Hi all,

I was wondering if i could have some help - i am not very technical!

I would like to add 2 things to an onSubmit that is on a form. However, I have been reading various things as to whether or not this is possible.

The button on the form looks like it runs some sort of validation as it starts with onsubmit="validateFormData......

I am trying to set up a goal in analytics and need to add a pageview tracker to the onSubmit as well. Is this possible?

Please help me

Hey all -

I need a java bookmarklet that does a real simple thing. I need to take the current URL (ie, where the user is when they click the bookmarklet) and append it to a static URL and return the text on the resulting page.

For example:

The user is at http://google.com
The user clicks the bookmarklet.
the bookmarklet takes http://google.com and appends it to http://example.com/outside_create.ph...ey=555&url=URL HERE where you see the URL HERE text.

That PHP script echos a simple line of text (a shortened URL actually).

Then I want that result from the outside_create.php file to be displayed in a window back to the user.

Is this even possible?

Basically I need to know how to append location.href to a static URL and how to get the resulting content from the static URL..

I have been on loads of websites, and they all say the same thing. But the below script will just not change the opacity of the element - which is a DIV - in IE...

I do not see why not, W3C says that obj.filters.alpha.opacity = 50; will do it, but it produces an error saying that filers.alpha is null or not defined...

Code:

function setOpacity(obj) {
	obj.style.opacity = "0.5";
	obj.filters.alpha.opacity = 50;
	obj.style.filter = 'alpha(opacity=50)';
}

Greetz,

I am new to JS and using code that someone gave me.
I have cleaned up the code, made it standard compliant and tailored it to my need.

The code is for an ultra basic picture gallery. The code is almost perfect, but there is one undesirable effect in which when an image is selected from the thumbnail gallery, the thumbnail dissapears as I am guessing its the same element, just blown up.
What I would like to know is how I can stop it from happening?

I will post the full output of the HTML file. I have also uploaded zip file which contains the HTML file and two images, so one may see the compiled page as I do.

Zip file (Note: STUPID hosting site placed the DOWNLOAD button right under "MP3 ringtones"... Clicking download will not take you to some premium SMS service or anything like that):
http://qfs.mobi/f31666

Code:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

        "http://www.w3.org/TR/html4/strict.dtd">

<TITLE></TITLE>

<META content="charset=windows-1252;text/html" http-equiv="content-type">

<SCRIPT  type="text/javascript">
	clickMenu = function(menu) {
		var getEls = document.getElementById(menu).getElementsByTagName("LI");
		var getAgn = getEls;
		for (var i=0; i<getEls.length; i++) {
			getEls[i].onclick=function() {
				for (var x=0; x<getAgn.length; x++) {
					getAgn[x].className=getAgn[x].className.replace("click", "");
				}
				this.className+=" click";
			}
		}
	}
</SCRIPT>
<STYLE type="text/css">

	#gallery ul {
		float:right;
		overflow:auto
	}
	#gallery ul li {
		display:inline;
		width:50px;
		height:50px;
		float:left;
		margin:0 4px 4px 0;
		border:1px solid #444;
		cursor:pointer
	}
	#gallery ul li img {
		display:block;
		height:50px
	}
	#gallery ul li span {
		display:none;
		position:absolute;
		left:447px;
		top:235px;
		font-family:verdana;
		color:#06a
	}
	#gallery ul li.click {
		border-color:#fc0;
		cursor:default
	}
	#gallery ul li.click i {
		position:absolute;
		left:0;
		width:545px
	}
	#gallery ul li.click i img {
		margin:5px auto 0 auto;
		height:auto
	}
	#gallery ul li.click span {
	display:block
	}

</STYLE>

<BODY onload="clickMenu('gallery')">

	<DIV id="gallery">
		<UL>
			<LI><I><IMG src="1.png" title="" alt=""></I><SPAN>Front</SPAN></LI>
			<LI><I><IMG src="2.png" title="" alt=""></I><SPAN>Back</SPAN></LI>
		</UL>

	</DIV>
</BODY>

Much appreciated!

Hey all,

I'm trying to fully understand javascript and have a couple of questions I was hoping you could answer for me.

I'm working through a book and in the book I'm creating a Bingo card that generates a random number. I'm pasting the full script below just in case it's needed.

Code:

function initAll () {
	 for(var i=0; i<24; i++) {
	setSquare(i);		 
   }
}

function setSquare(thisSquare) {
  var currSquare= "square" + thisSquare;
  var colPlace= new Array  (0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
  var colBasis=colPlace[thisSquare] *15;
  var newNum=colBasis +getNewNum()+1;
	
document.getElementById(currSquare).innerHTML=newNum;
}

function getNewNum() {
  return Math.floor(Math.random() *15);
}
//-->
</script>

1. What does the [thisSquare] mean in this line of code that is bolded? I mean, I know thisSquare is whatever i is, but am I multiplying it by colPlace or what?

2. Lastly I'm confused by this part of the above code

Code:

var newNum=colBasis +getNewNum()+1;

Why add the +1? I mean, i think getNewNum is set to pull a random number between 1 and 14. If you want to pull a number between 1 and 15, why not multiple Math.random() *16 instead of 15.

Am i missing something?

Sorry, I'm just not understanding why use the +1

I'd like to know if there are ways to hide/unhide fields like radio options, text fields & others by using JavaScript.

If so how do I do it? I do know I will have to check the form every time. Is there a need to refresh the form? Will the refresh clear all the selections?

Things I'd like to hide:
1. Upon the selection of a radio option, another radio option will appear.
2. Upon the selection of a radio option, a text field will appear.

Sorry for asking so many questions. But I just got to know that I need to use JavaScript in my application and I have no idea how and where to start, just bumping around, & hoping that God will drop some hint.

Hi,

If I have two check-boxes and one is already checked and then the is checked, how would I get it to uncheck the first one using JavaScript.

Thanks,
Cs1h

Hey,
I'm not to good at javascript and need help.
When someone clicks an option in a <select> box, I want a field to appear with a normal text box.
For example:
Code:

<!--Option box-->
<select name="method">
<option>Post 2 Host</option>
<option>Paid</option>
<!--I want it when they click Paid, a box shows up below. Such as-->
<input type="text" name="paid" />

Can you show me how I can do this?
Thanks.

Hey,
I'm new to javascript and was wondering if there is something where you can tell if something is clicked.
All I need is to know something where you click something and it appears, and click again it disappears.

How can I do this?
Thanks!

Morning all. My script is running he

http://www.actwebdesigns.co.uk/web-d...php-jquery.php

It is an ajax style uploader.

My problem being:

when image is uploaded, it calls for a refreshed list of images that have been uploaded.

But once it has been refreshed once, the "get height and width" function no longer works.

Firebug returns:
Code:

self.parent is null

Code:

var image =  self.parent.$("#imageSelect :selected").text();

here's my code:

act.uploader.iframe.js

Code:

// JavaScript Document
$(document).ready(function () {
	var pageContents = $("body").html();
	function getHeightAndWidth() {
		 self.parent.$("#getHeightWidth").bind("click", function () {
			var dir = "getHeightAndWidth.php"; //directory to script
			var image =  self.parent.$("#imageSelect :selected").text();
			 self.parent.$("input[class=userInput2], select, #getHeightWidth").attr('disabled', true);
			 self.parent.$("#getError").html('<p>Gathering data please wait... <img src="loader.gif" /></p>');
			$.ajax({
				type: "POST",
				url: dir, 
				data: 'image=' + image, 
				cache: false,
				timeout:30000,
				error: function () {
					 self.parent.$("#getError").html("<p>We are currently have a large volume of users and are slowing down our system. Please try again later.</p>");
					 self.parent.$("input[class=userInput2], select, #getHeightWidth").removeAttr('disabled');
				},
				success: function (html) {
					 self.parent.$("#heightAndWidthWrapper").html(html);
					 self.parent.$("input[class=userInput2], select, #getHeightWidth").removeAttr('disabled');
				}
			});
		});
		self.parent.$("#uploaderIframe").remove();
	}
	function buttonConvert() { // this function can be used on any page you want to make more accessible. Turns all type="submit" into type="button"
        self.parent.$("input[type=submit]").each(function () {
			var buttonClassFind = $(this).attr("class");
			if (buttonClassFind!="leave")
			{
				var inputButton = $(this);
				var newInputButton = $('<input type="button" id="' + inputButton.attr('id') + '" name="' + inputButton.attr('name') + '" class="' + inputButton.attr('class') + '" value="' + inputButton.val() + '" rel="' + inputButton.attr('rel') + '"/>').insertBefore(inputButton);
				inputButton.remove();
			}            
        });
    }
	function refreshImages() {
		self.parent.$("#sizeOptionsWrapper").html('<p>refreshing... <img src="loader.gif" /></p>');
		$.ajax({
			url: 'function.loadImages.php',  
			cache: false,
			timeout:30000,
			error: function () {
				self.parent.$("#sizeOptionsWrapper").html("<p>We are currently have a large volume of users and are slowing down our system. Please try again later.</p>");
				self.parent.$("#uploaderIframe").remove();
			},
			success: function (html) {
				self.parent.$("#sizeOptionsWrapper").html(html);
				buttonConvert();
				getHeightAndWidth();
			}
		});	
	}
	self.parent.$("#uploadResult").html(pageContents);
	refreshImages();
});

act.uploader.js

Code:

// JavaScript Document
$(document).ready(function () {
	window.name = "main";
	function upload() {
		$("#uploadSubmit").bind("click", function () {
			var results = '<iframe name="uploader" id="uploaderIframe"></iframe>';
			$("#uploader").append(results);
			$("#uploadResult").html('<p>Uploading please wait... <img src="loader.gif" /></p>');
		});
	}
	function getHeightAndWidth() {
		$("#getHeightWidth").bind("click", function () {
			var dir = "getHeightAndWidth.php"; //directory to script
			var image = $("#imageSelect :selected").text();
			$("input[class=userInput2], select, #getHeightWidth").attr('disabled', true);
			$("#getError").html('<p>Gathering data please wait... <img src="loader.gif" /></p>');
			$.ajax({
				type: "POST",
				url: dir, 
				data: 'image=' + image, 
				cache: false,
				timeout:30000,
				error: function () {
					$("#getError").html("<p>We are currently have a large volume of users and are slowing down our system. Please try again later.</p>");
					$("input[class=userInput2], select, #getHeightWidth").removeAttr('disabled');
				},
				success: function (html) {
					$("#heightAndWidthWrapper").html(html);
					$("input[class=userInput2], select, #getHeightWidth").removeAttr('disabled');
				}
			});
		});
	}
	function buttonConvert() { // this function can be used on any page you want to make more accessible. Turns all type="submit" into type="button"
        $("input[type=submit]").each(function () {
			var buttonClassFind = $(this).attr("class");
			if (buttonClassFind!="leave")
			{
				var inputButton = $(this);
				var newInputButton = $('<input type="button" id="' + inputButton.attr('id') + '" name="' + inputButton.attr('name') + '" class="' + inputButton.attr('class') + '" value="' + inputButton.val() + '" rel="' + inputButton.attr('rel') + '"/>').insertBefore(inputButton);
				inputButton.remove();
			}            
        });
    }
	buttonConvert();
	upload();
	getHeightAndWidth();
});

if need the php or html let me know.

Any help much appreciated.

hey guys. got acouple questions for my website. im more of a html guy.. and i usually find my scripts online. i reeaaallly appreciate all answers!

i have a box:
<img id="imgSearch" src="" alt="Websites" />
<input type="button" value="Toggle Search" id="btnSearch" />
^being the button to toggle between websites.

basically i'd like this button to toggle between different websites when clicked.



secondly:
changing span tag colors

html code:
Traffic Light: <span id="trafficLight"></span>

<input type="button" value="Prevent Accident" id="btnTraffic" />

i'd like to change the color of this span id by pressing the button. so in this case it would change red, yellow green

and last:
changing the font in a bold tag bold by pressing a button

html code: (note, the font weight in normal in css for bold)
<b>i want this bold when you hit the button!</b>
<input type="button" value="Set Bold" id="btnBold" />

Hi everyone - I was wondering how it would be possible for me to create a FAQ with drop-down answers when the question is clicked?

For example: https://www.facebook.com/help/?page=1145

Facebook has something like that available.

Any ideas?

On custom button images, how do you give them the effect that they're "pushed" when the user clicks them and "unpushed" when the user lets his finger off the mouse button? I'm guessing it's some type of rollover effect, but I'm not sure how it's done.