Adaugare smiles prin click in formular

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
MarPlo
Administratorul site-ului
Mesaje:4343

Adaugare smiles prin click in formular

Urmatorul cod poate fi folosit pentru adaugare smiles (emoticons) in textarea.
Imaginile cu emoticons trebuie sa fie intr-un director numit "icos".
Cand se da click pe o imagine, scriptul JavaScript adauga codul smile-ului (scris pt. fiecare in "add_smile()") in campul textarea. Similar poate fi folosit si pt. camp text.
Codul este:

Cod: Selectaţi tot

<script type="text/javascript">
function add_smile(smile, zona) {
  var tarea_com = document.getElementById(zona);
  tarea_com.value += smile;
  tarea_com.focus();
}
</script>


  <form action="" method="post" id="formular">
	  	<div id="icos">
		  <a href="javascript: add_smile(':-)', 'txta');"><img src="icos/0.gif" alt=":-)" title=":-)" border="0" /></a>
		  <a href="javascript: add_smile(':-(', 'txta');"><img src="icos/1.gif" alt=":-(" title=":-(" border="0" /></a>
		  <a href="javascript: add_smile(':-P', 'txta');"><img src="icos/2.gif" alt=":-P" title=":-P" border="0" /></a>
		  <a href="javascript: add_smile(':-D', 'txta');"><img src="icos/3.gif" alt=":-D" title=":-D" border="0" /></a>
		  <a href="javascript: add_smile(':-S', 'txta');"><img src="icos/4.gif" alt=":-S" title=":-S" border="0" /></a>
		  <a href="javascript: add_smile(':-O', 'txta');"><img src="icos/5.gif" alt=":-O" title=":-O" border="0" /></a>
		  <a href="javascript: add_smile(':)E', 'txta');"><img src="icos/6.gif" alt=":)E" title=":)E" border="0" /></a>
		  <a href="javascript: add_smile(':|H', 'txta');"><img src="icos/7.gif" alt=":|H" title=":|H" border="0" /></a>
		  <a href="javascript: add_smile(':():', 'txta');"><img src="icos/8.gif" alt=":():" title=":():" border="0" /></a>
		  <a href="javascript: add_smile(':-*', 'txta');"><img src="icos/9.gif" alt=":-*" title=":-*" border="0" /></a>
		</div>
	  <textarea name="txta" id="txta" cols="32" rows="2"></textarea>
	  <br /><input type="submit" value="Trimite">
  </form>

cata20 Mesaje:11
Buna Marplo

Am nevoie de ajutorul tau .Te rog daca ma poti ajuta.

Am incercat codul tau intr-un formular xajax dar nu mi-a mers.Poate am gresit testand variantele.

am formularul de tipul:

Cod: Selectaţi tot

<FORM class="cinput nostyle" id="sent_msg_{user_id}" onsubmit="xajax_im_sent(xajax.getFormValues('sent_msg_{user_id}'));return false;">
<input type="hidden" name="to_user" value="{user_id}" />
<INPUT type="text" class="cinput" name="msg"/>
<DIV class="csubmit" onclick="xajax_im_sent(xajax.getFormValues('sent_msg_{user_id}'));"></DIV> 
</FORM>
E un chat in xajax in care daca scriu din taste semnele , de ex zambet :) dand Enter imi apare mascota sau orice semn as scrie apare mascota. Am un site si acuma am ajuns la faza cu mascotele in mai multe parti ale lui, caci am mai postat pe forumul tau o problema tot cu smilies dar la galeria foto.
Imi trebuie doar codul ca sa imi trimita in textarea semnele care dand apoi Enter chatul mi le recunoaste.Am incercat varianta in INPUT , id="text" -mai mult ca sigur ar merge daca as trece la name tot text dar nu mi-ar lucra chatul daca nu las name="msg".

Poate ma puteti sfatui .

Multumesc anticipat

MarPlo Mesaje:4343
Exemplu dat la inceput e testat si fnctioneaza asa cum e. Incearca-l fara modificari sa vezi daca e bun.
Daca vrei sa-l adaptezi /modifici la site-ul tau, e treaba ta sa schimbi in functie de scriptu-l site-ului.
Nu se intelege exact problema. Care e codul care l-ai facut sa adaugi smiles, si ce nu merge in el?
Care e textarea in care vrei sa adaugi smiles?

cata20 Mesaje:11
E vorba exact de exemplu tau MarPlo care am incercat sa-l pun.
In formularul de mai sus textarea e linia de cod:

<INPUT type="text" class="cinput" name="msg"/>

Am incercat mai multe variante adaugand ca id la linia de mai sus cu id-ul tau, id="text"...si nu merge.
Dar ,in nici un caz nu pot schimba name="msg" cu altul caci apare de multe ori in script si imi da eroare.
Daca reusesc sa-mi apara in textarea de mai sus semnele mascotelor dand Enter imi apare mascota semnului perfect.
Ma poti sfatui te rog cum sa fac ?

Multumesc anticipat _Cata

MarPlo Mesaje:4343
Acel cod JavaScript preia elementul in care sa adauge smiles cu getElementById(), dar campul din formularul tau nu are ID (care e altceva decat "name", si poate fi diferit).
Deci, trebuie sa adaugi si id-ul.
Inncearca sa folosesti /adaptezi cu formularul tau codul urmator, e testat.

Cod: Selectaţi tot

<form action="" method="post" id="formular">
 <div id="icos">
  <img src="icos/0.gif" alt=":-)" title=":-)" border="0" />
  <img src="icos/1.gif" alt=":-(" title=":-(" border="0" />
  <img src="icos/2.gif" alt=":-P" title=":-P" border="0" />
  <img src="icos/3.gif" alt=":-D" title=":-D" border="0" />
  <img src="icos/4.gif" alt=":-S" title=":-S" border="0" />
  <img src="icos/5.gif" alt=":-O" title=":-O" border="0" />
  <img src="icos/6.gif" alt=":)E" title=":)E" border="0" />
  <img src="icos/7.gif" alt=":|H" title=":|H" border="0" />
  <img src="icos/8.gif" alt=":():" title=":():" border="0" />
  <img src="icos/9.gif" alt=":-*" title=":-*" border="0" />
 </div>
 <textarea name="msg" id="msg" cols="32" rows="2"></textarea>
 <br /><input type="submit" value="Trimite">
</form>
<script type="text/javascript"><!--
function addSmiles(smile, zona) {
  var tarea_com = document.getElementById(zona);
  tarea_com.value += smile;
  tarea_com.focus();
}
// preia toate <img> din #icos, si le aplica onclick
var imgstg = document.getElementById('icos').getElementsByTagName('img');
var nr_imgstg = imgstg.length;
for(var i=0; i<nr_imgstg; i++) {
 imgstg[i].onclick = function() {addSmiles(this.title, 'msg');}
}
--></script>

Subiecte similare