JavaScript help

Spinal · May 16, 2007

Hello! Does anyone know Javascript? I know I don't!

I'm making a form to edit a users data online. The data for all users is pulled off of the database (Php/MYSQL) and displayed in a SELECT box. But for this example:

Code:

<form name="myFormName action="someProcess.php">
<select name="Name" onclick="this.form.data.value=getData(this);">
<option selected value ="a">Amelie</option>
<option value="b">Betty</option>
<option value="c">Cristine</option>
<option value"d">Denise</option>
<option value="e">Elisa</option>
</select>
<input name="data" type="text" >
<input type="submit" name="submit">
</form>

What I want to happen is that when the user clicks on (say) Elisa, in the "data" textbox an "e" appears (i.e. the value of that option). Then the user can modify it and click on submit.

My weak attempt at Javascript:

Code:

<script type="text/javascript"
	function getData(inputItem)
	{ with (inputItem.form){
 //update form.data... somehow...
//		update form.data(eval(inputItem.value));
		}
	}
</script>

Any pointers?
Thanks, Michele

Spinal · May 16, 2007

Version 2 of the code (well... sort of)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<script type="text/javascript">
	function getData()
	{ 

		document.getElementById('data').value = document.getElementById('Name').value;
	}
</script>
</head>
<body>
<form name="testForm" action=test.php>
<select name="Name" onchange="getData();">
						<option selected value ="a">Amelie</option>
						<option value="b">Betty</option>
						<option value="c">Cristine</option>
						<option value"d">Denise</option>
						<option value="e">Elisa</option>
						</select>
						
						<input name="data" type="text" value="no change" >
						
						</form>

</body>
</html>

Spinal · May 16, 2007

Last try before I throw this javascript manual against a wall...

Code:

function getData()
{ 
	alert("No problem");

	document.forms['testForm'].elements['data'].value = document.forms['testForm'].elements('Name').value;

	alert("Still no problem");
	}

The alerts are there to help me debug, the first alert runs, the second doesn't. The leads me to believe that that line is crashing, but I'm not getting any error messages (Camino)! Ideas?

I'm a fool...
document.forms['testForm'].elements['data'].value = document.forms['testForm'].elements['Name'].value;
second set of parenthesis for elements weren't rectangular brackets!

Spinal · May 16, 2007

Now that I have that working, I have another quick question...

Code:

document.forms['editUser'].elements['username'].value = document.forms['editUser'].elements['Name'].value;

document.forms['editUser'].elements['name'].value	   = document.forms['editUser'].elements['Name'].something;

Using this html:
<select name="Name" onchange='getData()'>
<option selected value ="a">Amelie</option>

Now, my issue is... In the two text boxes, I need to display both the "a" and the "Amelie". The first line of code displays the "a"; but I'm not sure what I need to put in place of the "something" to get the "Amelie".

.value gets the 'a'; while nothing there gets '[object HTMLSelectElement]'.
Ideas?

Spinal · May 18, 2007

Got that one sorted too! Its .text for the actual text, and .value for the value - quite logical!

My next "problem" (did I mention I'm new at Javascript?) is with hiding boxes/onmouseover/onclick boxes. Simply put, if you click on search on this site - you get a nice javascript generated box with the search form. I want to do something similar, but I'm thinking of using onMouseOver instead of onClick. I took the liberty of scanning the source code - I'm guessing 'collapseobj_module_10' handles the hiding/showing of the box; but I still dont understand how it works! Ideas? Help!

Bobby Dazzler · May 18, 2007

Spinal said:
did I mention I'm new at Javascript?

Not as new as the rest of us it seems!!

It's not often that somebody raises a plea for help nobody can lend a hand with.

Well whilst my JS knowledge extended to knowing where my reference manual is, I might not be much help.

Hope you get it cracked soon!!

Flyer · May 18, 2007

Do a Google for "show/hide layers". You could do what you want with a DIV that's visible onMouseOver and hidden onMouseOut. Or simply toggle visibility as you mouseover the link. If you use Dreamweaver, it's automated in a behaviour.

If you really, really want to learn JS...

Code:

<script type="text/javascript">
<!--
function toggle_visibility(id) {
  var e = document.getElementById(id);
  if(e.style.display == 'none'){
    e.style.display = 'block';
  }else{
    e.style.display = 'none';
  }
}
//-->
</script>

Call it with:

Code:

<a href="#" onmouseover="toggle_visibility('search');">Search here</a>
<div id="search" style="display:none;">[search form]</div>

Any use?

Flyer · May 24, 2007

Flyer said:
Any use?

Guess not...

Spinal · May 24, 2007

Thanks, sorry for not replying sooner - been a little "involved" with this thing!

Yups; was alot of use! I got (most) of it working today! I've decided I DEFINETLY don't like Javascript! To do something that would normally take 1 line of code, I need 9 lines... if (browser=i.e. do this, else if netscape, else if this else if that... gaah!)

That said, it can do some pretty things, like get some menus and info boxes to pop up!

My one problem now is that due to the sheer number of individual data entries that need to be pulled from the mysql server, the page takes roughly a minute to load!

(6x12x7x2 entries per page) So what I have done is I get php to dump the html/javascript version of the page into a file whenever a user edits the database (rarely) - then when a user just wants to see the calendar, they get the pre-dumped version (like a cache).

I'm a geek; bear with me

Michele

Flyer · May 24, 2007

Keep at it, it'll come

Something must be wrong though for a page to take that long; your method, whilst working, is a little unorthodox

BTW have you had a look at the Yahoo JS libraries. In particular, the Calendar library might be useful.

Good luck with it

Spinal · May 25, 2007

Thanks for the support - and I did have a look at a few calendar libraries; but I must admit, I didn't look at the yahoo ones (nor did I know they existed!)

The problem with most calendar libraries is that I need each "day" of the calendar to be divided into 12 periods, and each period to be further divided into 6 rooms. The next step, is to populate the calendar (so that the user can see at a glance which room is free). Its this massive data polling that attacks the server - (even if each MYSQL query gets a whole room's bookings for a day, I still need 12x7x2 bookings queried). Why x2? Because I'm polling it once to populate the Javascript information tables, and a second time to populate the actual html table.

Why? Humm; good question!

I need to play with it, and reorganise it, so that I use only one set of for loops (or put everthing into an array, and use that array for data retrieval...)

The way it looks is pretty though

The calendar is a giant html table. Each <td> is a room's period's booking for a day, with the current status and a colour code. When you click on a piece of text contained within a <td> a small javascript generated box pops up and displays more information (who booked it, why, etc). Clicking on the more information box brings you to a booking form if the room is empty - if its booked, the user need to be a moderator/admin to edit it (I haven't decided yet - its growing as I go along

)

Thanks again,
Michele

Flyer · May 25, 2007

Well that sounds like you've done a great job

Sounds very impressive.

Querying the db twice though, as you acknowledge, is a definite bottleneck. Also introduces data integrity issues. Don't know PHP, but very easy in ColdFusion and ASP.NET so would have thought it easy in PHP.

BTW have you seen and had a play with the phpScheduleit demo?

JavaScript help

Spinal

MB Enthusiast

Spinal

MB Enthusiast

Spinal

MB Enthusiast

Spinal

MB Enthusiast

Spinal

MB Enthusiast

Bobby Dazzler

MB Master

Flyer

MB Enthusiast

Flyer

MB Enthusiast

Spinal

MB Enthusiast

Flyer

MB Enthusiast

Spinal

MB Enthusiast

Flyer

MB Enthusiast

Users who are viewing this thread

Similar threads

Connect with us

We value your privacy