---
title: "Hjälp med javascript/Jquery till min sida :)"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/187398-hjälp-med-javascript-jquery-till-min-sida"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Mycodez"
published: "2011-07-05T14:12:14.000Z"
updated: "2011-07-09T09:02:04.000Z"
replies: 20
views: 1611
page: 1
pages: 2
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/187398-hjälp-med-javascript-jquery-till-min-sida"
---

# Hjälp med javascript/Jquery till min sida :)

_Sida 1 av 2._

## #1 — Mycodez, 2011-07-05T14:12Z

Tjena, till en börja med jag är relativt ny inom detta med javascript och Jquery,

Jag behöver lite hjälp med en chat funktion jag håller på med. Jag undrar hur man räknar ut x antal tecken ur ett textfield vid namn messages med javascript, för jag vill inte få tom data i min databas nämligen plus jag vill slippa spam så hur gör jag så man inte kan skriva på typ 2 sek alltså man får en timeout, hur gör man detta? 

Såhära ser min kod ut nu:
\<script src="jquery.js"\>\</script\>
\<script\>
$(document).ready(function(){
	$("#messages").load('ajaxLoad.php');
	
	$("#userArea").submit(function(){
		
		$.post('ajaxPost.php', $('#userArea').serialize(), function(data){
			$("#messages").append('\<div\>'+data+'\</div\>');
		});
		return false;
	});
});
\</script\>

\<!-- Display --\>
\<div id="messages" style="width:800px; height:400px; overflow:auto;"\>\</div\>

\<!-- Post --\>
\<form id="userArea"\>
\<label\>Message:\</label\>
\<textarea name="messages"\>\</textarea\>
\<input type="submit" value="post" /\>
\</form\>

Just det plus jag vill att i divtagen messages så vill jag att den automatisk ska scrollas ner när data fylls på när det behövs börjas scrolla. 

förstår ni hur jag menar?  hoppas det är bara att skriva annars.

/Robin K

Permalänk: https://www.webforum.nu/p/187398

## #2 — voigtann1, 2011-07-05T14:35Z

Vid din submit leta upp textarean $("textarea", this).val() för att se vad det finns i textarean, om den är \> 0 så gör du din Ajax postning

Permalänk: https://www.webforum.nu/p/2280683

## #3 — Mycodez, 2011-07-05T14:39Z

Okej, men hur skulle koden se ut för det då? Är lite nollad i javascript om man säger så

Permalänk: https://www.webforum.nu/p/2280686

## #4 — voigtann1, 2011-07-05T15:34Z

```
<script src="jquery.js"></script>
<script>
	$(document).ready(function(){
		$("#messages").load('ajaxLoad.php');

		$("#userArea").submit(function(){
			
			if($("textarea[name=messages]", this).val() !== "") {
				$.post('ajaxPost.php', $(this).serialize(), function(data){
					$("#messages").append('<div>'+data+'</div>');
				});
			}
			return false;
		});
	});
</script>

<!-- Display -->
<div id="messages" style="width:800px; height:400px; overflow:auto;"></div>

<!-- Post -->
<form id="userArea">
<label>Message:</label>
<textarea name="messages"></textarea>
<input type="submit" value="post" />
</form>
```

Men jag är lite tveksam på att:

```
$('#userArea').serialize()
```

fungera, det är ju alla inputs du vill postar och #userArea har du redan letat upp (därav min this).

Dock så vet jag inte om det är helt optimalt att skicka data på detta sätt, kan du inte få in preview läge utan att postar till servern hela tiden?

Eller är det att du vill skriva hur många tecken man har skrivit hela tiden?

Permalänk: https://www.webforum.nu/p/2280691

## #5 — Mycodez, 2011-07-05T16:03Z

Vill du jag lägger upp det så du får testa det??

Permalänk: https://www.webforum.nu/p/2280692

## #6 — Mycodez, 2011-07-05T16:04Z

okej, jag lagrar allt på databasen, Är det fel med det eller finns det bättre sätt att göra det på??

Permalänk: https://www.webforum.nu/p/2280693

## #7 — voigtann1, 2011-07-05T16:08Z

Om det är data som skall sparas så är ju en databas rätt, men om det är för en preview del så känns det rätt onödigt att skicka data som php måste behandla innan den skickar tillbaka... sen vet jag inte vad din php kod gör det är kanske ett måste.

Permalänk: https://www.webforum.nu/p/2280694

## #8 — Mycodez, 2011-07-05T17:43Z

okej,  jag kan lägga upp en lite preview på hur chatboxen ser ut dock demo inte klar alltså, fått den att funka nu men, jag vill kunna tömma textboxen jag skriver i inna njag lägger upp den, men alla mina ajax filer som är följande, ajaxLoad.php, ajaxPost.php ajaxDelete.php.
ajaxDelete.php kommer dock bli bara för dem med adminrättigheter.

men php filerna ser ut

ajaxPost.php

```php
<?php

include("config.php");
//print_r($_POST);
$message = $_POST['messages'];

$db->query("INSERT INTO messages(message) VALUES('$message')");

$id = mysql_insert_id();

//echo $message ."<a href=\"#\" class=\"delete\" rel=\"$id\">Delete</a>";
echo $message;
?>
```

ajaxLoad.php

```php
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
	$(".delete").click(function(){
		
		var item = $(this).parent();
		var id = $(this).attr('rel');
		
		$.post('ajaxDelete.php', {'id' : id}, function(data){
			$(item).hide();
		});
	});
});	
</script>

<?php

include("config.php");

// Run a Query:
$db->query('SELECT * FROM messages');

$data =  $db->Get();

foreach($data as $key => $value)
{
	echo '<div>' . $value['message'] . '<a href="#" class="delete" rel="'.$value['id'].'">Delete</a></div>';	
}

?>
```

ajaxDelete.php

```php
<?php

include("config.php");

$id = $_POST['id'];

$db->query("DELETE FROM messages WHERE id = '$id'");

?>
```

Permalänk: https://www.webforum.nu/p/2280701

## #9 — Mycodez, 2011-07-05T17:44Z

Ser här nu att det inte är så säkert.

hur kan jag öka säkerheten??

Permalänk: https://www.webforum.nu/p/2280702

## #10 — voigtann1, 2011-07-05T18:07Z

post kommer bara lägga in chatt meddelandet och visar resultatet efter den har lagts in i databasen. men vem som helst verkar ju kunna plocka bort inlägg, du kollar ju inte om man har behörighet att plocka bort inlägget eller inte.

Permalänk: https://www.webforum.nu/p/2280704

## #11 — Mycodez, 2011-07-06T18:08Z

Jag jobbar på det just nu :) lägger till administratörsretigheter på sidan nu :)

Permalänk: https://www.webforum.nu/p/2280740

## #12 — Mycodez, 2011-07-08T22:48Z

Fixat med chaten, men ligger nere justn u kom på att jag ska använda den funktion till flera chatar sen den funktionen byggs nu:)

men sen detta med räkna av tecken i en textarea så ser hela den koden ut såhär:

```
<html>
<head>
<script language="javascript" type="text/javascript"> 
var maxAmount = 250;
function textCounter(textField, showCountField) {
    if (textField.value.length > maxAmount) {
        textField.value = textField.value.substring(0, maxAmount);
	} else { 
        showCountField.value = maxAmount - textField.value.length;
	}
}
</script>
</head>
<body>
<form>
<textarea name="ta" rows="6" style="width:340px;" onKeyDown="textCounter(this.form.ta,this.form.countDisplay);" onKeyUp="textCounter(this.form.ta,this.form.countDisplay);"></textarea>
<br>
<input readonly type="text" name="countDisplay" size="3" maxlength="3" value="250"> Characters Remaining
</form>
</body>
</html>
```

gjorde den i en separat fil för att testa den i början :) men så ska det se ut typ :) 
Jag meddelar er när ni kan testa in sidan :)

Permalänk: https://www.webforum.nu/p/2280776

## #13 — Mycodez, 2011-07-08T23:00Z

Om ni ville testa min site så går ni in på <https://www.blabster.nu> username: guest password:guest

OBS! guest kontot försvinner under söndagen! om ni vill se chaten som den är nu till nya version är uppe så kan ni registrera er på sidan tar 2 min att fylla i allt, sen kan emailet vara segt, men det brukar ta från 0sek till 10min som max.

Permalänk: https://www.webforum.nu/p/2280777

## #14 — voigtann1, 2011-07-09T05:54Z

varför inte bara köra maxlength på din textarea? <http://jsbin.com/epuyet/2/edit> och bara köra JS för att visa hur många tecken de har kvar att skriva.

Permalänk: https://www.webforum.nu/p/2280778

## #15 — Mycodez, 2011-07-09T08:39Z

vet inte kanske är bra att se hur många tecken man har kvar att skriva?

Permalänk: https://www.webforum.nu/p/2280785

## #16 — voigtann1, 2011-07-09T08:43Z

Kollar du ens vad jag skriver i koderna? Det ända du behöver i JS kod är att den räknar ner, vilket koden i förra inlägget gör

Edit, det är väl bra att veta det om man har JS aktiverat, annars märker man det rätt snabbt

Permalänk: https://www.webforum.nu/p/2280786

## #17 — Mycodez, 2011-07-09T08:51Z

oj jag som läste fel. Nu får man skämmas här. Men jag ser att ditt kanske funkar lite bättre än mitt :)

Permalänk: https://www.webforum.nu/p/2280787

## #18 — voigtann1, 2011-07-09T08:53Z

Är ju nästan samma kod, men om man inte ha JS aktiverad så har man standard beteende ifrån HTML-element men du behöver lägga in 250 tecken kollen i din php kod också

Permalänk: https://www.webforum.nu/p/2280788

## #19 — Mycodez, 2011-07-09T08:55Z

jag får ha kvar den jag gjorde tills jag har designat om sidan till det jag vill verkligen ha:)

Permalänk: https://www.webforum.nu/p/2280789

## #20 — Mycodez, 2011-07-09T09:00Z

jaa det får jag göra. Men dock om man inte har JS aktiverat så kommer inte dem senaste meddelanden i chaten fram för all sker med JS och Jquery nämligen. :)

Permalänk: https://www.webforum.nu/p/2280790

---

Tråden på webben: https://www.webforum.nu/amne/javascript/187398-hjälp-med-javascript-jquery-till-min-sida  
Nästa sida: https://www.webforum.nu/amne/javascript/187398-hjälp-med-javascript-jquery-till-min-sida/page2.md