many onclicks

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

many onclicks

Post by shiznatix »

Ok I find myself unable to do javascript once again! Here is my problem:

I have a form with like 10 users or whatnot and each user has permissions for about 8 or so 'guestbooks'. There are 3 types of the permissions - 'r', 'w', and 'n'. Right now it goes you click on the link and it reloads the page and changes it to the next one, like this:

permission for this guestbook for this user is set to n. When you click the 'n' the page reloads and updates the database and now that user has permisson of 'r' set for that guestbook.

This is a hassel because you have to click it, then find where you where and click it again to change from 'n' to 'w'.


What I want to do:

Just use javascript so you click on the link but the page does not reload it just automatically changes it to the next one like it does now and then you hit submit and it updates all of the users for all of the guestbooks.

This will involve changing a hidden input that will look like this

Code: Select all

<input type="hidden" name="<?= $username ?>[<?= $guestbook ?>]" value="r">
the value is of course what is needed to change, but the link itself also has to change from the 'r' to the 'w'.

The final question:
How do I go about doing this?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

I got lost halfway through that :P But if I understood correctly this involves querying a database on each click yes? Have you considered AJAX? The use here would be very simple ;)
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Hey Shiz, do you have to use a link or can you use a form field (checkbox, radio button, etc)? This is fairly easy to do (at least for me) if you use a form field. Am sure that using a link can be adapted just as easily. Here is some code I have for changing the text of a link. This is followed by code I have for the changing the value of a form based on a checked checkbox.

The first...

Code: Select all

//Chage link text
function changeLinkText( linkID, textClicked, textUnclicked )
{
	document.getElementById( linkID ).addEventListener('click', toggleText, false);
}
			
function toggleText(e)
{
	e.preventDefault();
	var link = e.currentTarget;
	var text = link.firstChild;
	
	text.nodeValue = (text.nodeValue == textUnclicked) ? textClicked : textUnclicked;
}

// Usage - <a href="#" onClick="changeLinkText('myLink', 'I am clicked', 'Click Me');" id="myLink">Click this thing</a>
And the other...

Code: Select all

function changeFieldValue( obj ) { 
	obj.form.field_name_1.value = ''; //Defaults field_name_1 value to ''
	obj.form.field_name_2.value = ''; //Defaults field_name_2 value to ''
	obj.form.field_name_3.value = ''; //Defaults field_name_3 value to ''
		
	obj.form.field_name_1.focus(); // Sets focus to field_name_1

	if (obj.form.check_box_field.checked) { // Checks if check_box_field is checked
		// The following changes styles of the fields and values as well - Simulates disabling fields
		obj.form.form_field_1.style.color = '#c0c0c0';
		obj.form.form_field_2.style.color = '#c0c0c0';
		obj.form.form_field_3.style.color = '#c0c0c0';
		obj.form.form_field_1.value = 'Anonymous';
		obj.form.form_field_2.value = 'Anonymous';
		obj.form.form_field_3.value = '99999';
		
		obj.form.another_text_field.focus(); // Moves focus to another_text_field
	} else {
		obj.form.form_field_1.style.color = '#000000';
		obj.form.form_field_2.style.color = '#000000';
		obj.form.form_field_3.style.color = '#000000';
	}
}

function checkTab( obj ) {
	if (obj.form.check_box_field.checked) {
		obj.form.another_text_field.focus(); // If the box is checked reset focus to "enabled" field
	}
}

// Usage
// <input type="checkbox" name="check_box_field" onclick="changeFieldValue(this);" />
// <input type="text" name="field_name_1" value="" size="50" maxlength="50" onfocus="checkTab(this);" />
I think you can adapt this to suit your needs. I think you might be able to update the DB at the same time as the form data is posted, too, without having to hit the DB with every change.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

becareful not to use a locking ajax for each of the clicks. It becomes painful to have to wait for an update after only clicking many form elements. I've seen a few ajaxed things that every field was ajaxed, which made the page run EXTREMELY slow as it locked up all other fields while in transport. So make sure to do asynchronous transports whenever possible.
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Post by shiznatix »

whew everah! awesome awesome! to make it so i knew what i was doing because i can barley read javascript i simplified the stuff. here is what i came up with:

Code: Select all

<script>
function change(theform, thething, thelink)
{
	var target;

    target = theform.thething.value;

    if (target == 'r')
    {
        theform.thething.value = 'w';
		thelink.innerHTML = 'w';
        return;
    }
    else if (target == 'w')
    {
        theform.thething.value = 'n';
		thelink.innerHTML = 'n';
        return;
    }
    else if (target == 'n')
    {
        theform.thething.value = 'r';
		thelink.innerHTML = 'r';
        return;
    }
}
</script>
<form name="myForm" id="id">
<input type="text" name="funk" value="r">
<a href="#" onclick="change(document.getElementById('id'), 'funk', document.getElementById('id2'))" id="id2">r</a>
</form>
but it does not work. if i take out the variable 'thething' and just put in 'funk' inside the function then it works perfect without errors. how can i do the variable field name inside the function?

and feyd: no ajax here, im terrible with javascript still.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

feyd wrote:becareful not to use a locking ajax for each of the clicks. It becomes painful to have to wait for an update after only clicking many form elements. I've seen a few ajaxed things that every field was ajaxed, which made the page run EXTREMELY slow as it locked up all other fields while in transport. So make sure to do asynchronous transports whenever possible.
I'm heading for an e-Beating here for being a pedant :P

I just thought I might as well point out the difference between AJAX and XMLHttp. AJAX *is* asynchrous. It doesn't linger while it waits for the server to get back to it. AJAX without using asynchronisity would not be AJAX, it would be plain old XMLHttp ;) Admittedly, AJAX is nothing more than a buzzword for this extended feature of the XMLHttpRequest object.

//Hides from feyd
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

unfortunately, they all fall under the umbrella of Ajax now, since Ajax no long has much to do exactly with it's original acronym.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

feyd wrote:unfortunately, they all fall under the umbrella of Ajax now, since Ajax no long has much to do exactly with it's original acronym.
Quite true... pedantism dropped :)
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

shiznatix wrote:whew everah! awesome awesome! to make it so i knew what i was doing because i can barley read javascript i simplified the stuff. here is what i came up with:

Code: Select all

<script>
function change(theform, thething, thelink)
{
	var target;

    target = theform.thething.value;

    if (target == 'r')
    {
        theform.thething.value = 'w';
		thelink.innerHTML = 'w';
        return;
    }
    else if (target == 'w')
    {
        theform.thething.value = 'n';
		thelink.innerHTML = 'n';
        return;
    }
    else if (target == 'n')
    {
        theform.thething.value = 'r';
		thelink.innerHTML = 'r';
        return;
    }
}
</script>
<form name="myForm" id="id">
<input type="text" name="funk" value="r">
<a href="#" onclick="change(document.getElementById('id'), 'funk', document.getElementById('id2'))" id="id2">r</a>
</form>
but it does not work. if i take out the variable 'thething' and just put in 'funk' inside the function then it works perfect without errors. how can i do the variable field name inside the function?

and feyd: no ajax here, im terrible with javascript still.
Just use another getElementById(). I swear by it.

Code: Select all

<script>
function change(theform, thething, thelink)
{

    var el1 = document.getElementById(theform);
    var el2 = document.getElementById(thelink);
    var target = document.getElementById(thehing).value;

    switch (target)
    {
        case 'r':
        el1.value = 'w';
        el2.innerHTML = 'w';
        return;
        //
        case 'w':
        el1.value = 'n';
        el2.innerHTML = 'n';
        return;
        //
        case 'n':
        el1.value = 'r';
        el2.innerHTML = 'r';
        return;
    }
}
</script>
<form name="myForm" id="id">
<input type="text" id="funk" name="funk" value="r">
<a href="#" onclick="change('id', 'funk', 'id2')" id="id2">r</a>
</form>
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Post by shiznatix »

don't swear on your code before you test it :wink: . that does not work (even after i fix your typo on var target = document.getElementById(thehing).value;)

edit that error. there is no error, it changes the link text but not the text box text. hummmmmm....
Last edited by shiznatix on Tue Feb 14, 2006 3:48 pm, edited 1 time in total.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

shiznatix wrote: ...how can i do the variable field name inside the function?...
You are on the right track setting up the function to take a few parameters: the form object, the field name, the value you are passing to the field. My javascript is limited so I am not certain how to tell javascript what field you are clicking (although I know DOM makes it possible). I will try to look around if I can, but it is going to be a while. I am going into three hours of meetings in just a few minutes.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

shiznatix wrote:don't swear on your code before you test it :wink: . that does not work (even after i fix your typo on var target = document.getElementById(thehing).value;)

edit that error. there is no error, it changes the link text but not the text box text. hummmmmm....
:? That error isn't from the code I posted. Must be another place you refer to theform.thething I guess ;)
Everah wrote:My javascript is limited so I am not certain how to tell javascript what field you are clicking (although I know DOM makes it possible)
As for javascript being told which field you're clicking... you can just pass the object node itself ("this"), unless I'm misunderstanding :)
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Post by shiznatix »

haha d11wtq, i found the problem! you missed just 1 more document.getElementById()....or was your
Just use another getElementById(). I swear by it.
telling me to put that last one in there? either way this works:

Code: Select all

<script>
function change(theform, thething, thelink)
{

    var el1 = document.getElementById(theform);
    var el2 = document.getElementById(thelink);
    var target = document.getElementById(thething).value;
	var targ = document.getElementById(thething);

    switch (target)
    {
        case 'r':
        targ.value = 'w';
        el2.innerHTML = 'w';
        return;
        //
        case 'w':
        targ.value = 'n';
        el2.innerHTML = 'n';
        return;
        //
        case 'n':
        targ.value = 'r';
        el2.innerHTML = 'r';
        return;
    }
}
</script>
<form name="myForm" id="id">
<input type="text" id="funk" name="funk" value="r">
<a href="#" onclick="change('id', 'funk', 'id2')" id="id2">r</a>
</form>
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

shiznatix wrote:haha d11wtq, i found the problem! you missed just 1 more document.getElementById()....or was your
Just use another getElementById(). I swear by it.
telling me to put that last one in there?
My bad :oops: Good job for spotting it ;)
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Post by shiznatix »

whew productive evening so far. everything is coming together really well just 1 last thing.

when i do:

Code: Select all

<a href="#" onclick=".....">
when you click the link it executes the javascript but it jumps the page to the top so it like scrolls the page back up to the top. I really need it to not jump like that. any ideas?
Post Reply