PDA

View Full Version : JS issue


VistaBoy
19-12-2008, 10:51 AM
Need some JS help i found this js contect form on this forum and i edited it abit well i added onloading but it shows the stuff from submit.php fast then it shows the loading stuff for ever and ever??


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript" src="js/prototype.js"></script>
<script language="javascript" type="text/javascript">
function submitForm()
{
name = document.getElementById("name").value;
email = document.getElementById("email").value;
message = document.getElementById("message").value;
new Ajax.Request('submit.php',
{
parameters: {name: name, email: email, message: message},
onLoading: function()
{
document.getElementById('box').innerHTML = '<div align="center"><img src="images/loading.gif" alt="Loading" /><br />Sending message please hold!</div>';
},
onSuccess: function(transport)
{
document.getElementById('box').innerHTML = transport.responseText;
}
});
}
</script>
</head>

<body>
<div id="box" align="center">
<form id="form" action="javascript:submitForm();" method="post">
Name:<br />
<input type="text" name="name" id="name" />
<br />
Email:<br />
<input type="text" name="email" id="email" />
<br />
Message:<br />
<textarea name="message" id="message" cols="45" rows="5"></textarea>
<br />
<input type="submit" name="button" id="button" value="Send" />
</form>
</div>
</body>
</html>
Iszak
19-12-2008, 11:12 AM
I don't use prototype, but if you want a jQuery alternative which is another javascript framework. I made you the same thing you've got - except in jQuery.

http://www.zenithsites.com/tutorials/jquery/contact/

How mine differs from yours is that mine doesn't have inline javascript so no action="" etc, you also want to make it so if someone has javascript turnt off, it will just submit the form and process it and give them a result. Thirdly - you don't need id's for everything you can get them via CSS selectors in jQuery like mine shows.

Anyhow, enjoy! download is http://www.zenithsites.com/tutorials/jquery/contact/Contact.zip setup contact.php how you wish, any problems just ask.

Edit: The include of the script is at the bottom because that's a way of 'onload' if you want to put it at the top, use the function like this.


$(document).ready(function(){
// Onload
});
VistaBoy
20-12-2008, 03:26 AM
Thnx for that but i sort of want to use prototype as i find it less blotted but i will have a look at it as i mite use jquery for one thing bigger.

any one no whats wrong with it.
Calon
20-12-2008, 03:51 AM
Thnx for that but i sort of want to use prototype as i find it less blotted but i will have a look at it as i mite use jquery for one thing bigger.

any one no whats wrong with it.
Dude, he just coded that for you, he wasted his time and you're not going to bother using that?
VistaBoy
20-12-2008, 03:55 AM
Dude, he just coded that for you, he wasted his time and you're not going to bother using that?

Well at the start of the topic i ask ofr help with the code i shown. also he may have used his time to make that but i will use it to learn jquery but i never used it before so ill have to learn it but he has given me a starting point.
Iszak
20-12-2008, 04:24 AM
Calon, it's okay if he doesn't want to use what I made it's fine. I just find that jQuery is a lot better than Prototype because you use more features from it compared to Prototype - which you usually require Scriptaculous. I think you'll find jQuery better once you learn to use it and if you want me to explain my script to you, I'm happy to.
Jackboy
20-12-2008, 11:01 AM
Calon, it's okay if he doesn't want to use what I made it's fine. I just find that jQuery is a lot better than Prototype because you use more features from it compared to Prototype - which you usually require Scriptaculous. I think you'll find jQuery better once you learn to use it and if you want me to explain my script to you, I'm happy to.

Iszak does know his jQuery very well. You can't deny it :P

I can't use either libraries, but i find jQuery easier now.
Calon
21-12-2008, 01:57 AM
Iszak does know his jQuery very well. You can't deny it :P

I can't use either libraries, but i find jQuery easier now.
It's pretty easy, using libraries, there are even site's providing tutorials on them, I find prototype/scriptaculous a lot better, but that's just my opinion.
Invent
21-12-2008, 02:01 AM
I find prototype/scriptaculous a lot better, but that's just my opinion.

It all depends on what you need and what you already know. If you want effects and pre-built stuff, go for scriptaculous. If you want a library you can build on to then I'd go to jQuery.
Iszak
21-12-2008, 04:26 AM
Simon, you're comparing Scriptaculous with jQuery when you should be comparing either jQuery and Prototype or jQuery UI and Scriptaculous. In either arguments, jQuery and jQuery UI does provide a set pre-built 'stuff', and also allows you to build on it. Some of these pre-built stuff in jQuery UI include the following.

Core: Draggable, Droppable, Sortable, Selectable, Resizeable
Widgets: Accordion, Datepicker, Dialog, Progressbar, Slider, Tabs
Effects: Blind, Clip, Drop, Explode, Fold, Puff, Slide, Scale, Size, Pulsate, Bounce, Highlight, Shake, Transfer

And again you have a large set of pre-build features in jQuery too so in no way are either of them not pre-built. As for building onto them, you can build plugins for jQuery, in fact this is how most of the effects are probably added.

Example of adding a plugin, both have their purposes.


jQuery.newFunction = function()
{
// Code.
}
Or.


jQuery.fn.newMethod = function()
{
// Code.
}
Invent
21-12-2008, 01:58 PM
No, Iszak.

What I'm saying is, if you want effects and pre-built then go for Scriptaculous as I personally think their effects are better. Where as if you want a framework you can expand on I would go for jQuery as I think it's a better base to expand on than Prototype (of course, that's still my opinion).
Iszak
21-12-2008, 02:03 PM
No, what I'm saying is that jQuery UI has effects and is pre-built much like Scriptaculous. jQuery UI has just as many effects with more on the way and infact jQuery has build in standard their slideUp and slideDown effects ontop of that an animation function for opacity, and your own personal style of effects and again fadeIn and fadeOut. So I don't know where you're getting that jQuery UI or jQuery doesn't have effects.
Invent
21-12-2008, 02:06 PM
I'm not saying jQuery doesn't have bloody effects.


if you want effects and pre-built then go for Scriptaculous as I personally think their effects are better.

I think if you don't know javascript then scriptaculous' effects are better and easier to use.
Iszak
21-12-2008, 02:10 PM
Seriously what's so hard about.


$('#id').fadeIn('slow')
As for prototype it's what? Even more so jQuery comes with that standard! No need to download another package like Scriptaculous. But of course if you want more than fade and slide, and animate effects you can always get jQuery UI, but if not saves bloating your code.
Source
21-12-2008, 02:11 PM
Why are you argueing about it iszak? He said he finds it easier, I find it easier as often like I always say its a personal preference. There is no right or wrong using either as they pretty much have equal functionality. So leave it there.
Invent
21-12-2008, 02:13 PM
I just think for the developer who has no preivous JS knowledge that



Effect.Pulsate( 'id' )
is easier than



$("id").effect("pulsate", {} );
or whatever the syntax is. Mainly because scriptaculous' is just plain english, where as in jQuery UI you need to know how to use element selectors or at leas the syntax for them.
Iszak
21-12-2008, 02:16 PM
Use element selectors? It's CSS selectors, anyone who's doing jQuery surely would know HTML and CSS first, ahahaha - also nice point Matt.
VistaBoy
22-12-2008, 06:19 AM
Okay i want help with this is did not want **** about the diff libs out there okay an update this code here on click it will load and when its done loading it will just show the form again and not the message from the submit.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript" src="js/prototype.js"></script>
<script language="javascript" type="text/javascript">
function submitForm()
{
var cont = $('box');
name = document.getElementById("name").value;
email = document.getElementById("email").value;
message = document.getElementById("message").value;
new Ajax.Request('submit.php',
{
parameters: {name: name, email: email, message: message},
onSuccess: function(transport)
{
cont.innerHTML = transport.responseText;
},
onLoading: function()
{
cont.innerHTML = '<div align="center"><img src="images/loading.gif" alt="Loading" /><br />Sending message please hold!</div>';
}
});
}
</script>
</head>

<body>
<div id="box" align="center">
<form method="post">
Name:<br />
<input type="text" name="name" id="name" />
<br />
Email:<br />
<input type="text" name="email" id="email" />
<br />
Message:<br />
<textarea name="message" id="message" cols="45" rows="5"></textarea>
<br />
<input type="submit" name="button" id="button" value="Send" onclick="javascript:submitForm();" />
</form>
</div>
</body>
</html>
Jxhn
22-12-2008, 08:27 AM
Okay i want help with this is did not want **** about the diff libs out there okay an update this code here on click it will load and when its done loading it will just show the form again and not the message from the submit.php



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript" src="js/prototype.js"></script>
<script language="javascript" type="text/javascript">
function submitForm()
{
var cont = $('box');
name = document.getElementById("name").value;
email = document.getElementById("email").value;
message = document.getElementById("message").value;
new Ajax.Request('submit.php',
{
parameters: {name: name, email: email, message: message},
onSuccess: function(transport)
{
document.getElementById("box").innerHTML = transport.responseText;
},
onLoading: function()
{
cont.innerHTML = '<div align="center"><img src="images/loading.gif" alt="Loading" /><br />Sending message please hold!</div>';
}
});
}
</script>
</head>

<body>
<div id="box" align="center">
<form method="post">
Name:<br />
<input type="text" name="name" id="name" />
<br />
Email:<br />
<input type="text" name="email" id="email" />
<br />
Message:<br />
<textarea name="message" id="message" cols="45" rows="5"></textarea>
<br />
<input type="submit" name="button" id="button" value="Send" onclick="javascript:submitForm();" />
</form>
</div>
</body>
</html>
VistaBoy
23-12-2008, 12:55 AM
Nop did not work does the same thing does the loading then just shows the form.

Want to hide these adverts? Register an account for free!