Jump to content
php.lv forumi

Form, Submit, JS


euphoric

Recommended Posts

jautājumi par js jāliek javascript sadaļā.

Kaut kā tā uz ātro


function checktext(ta){
 var saturs = ta.value,
     garums = saturs.length,
     maxgarums = 1000;

 document.getElementById('submitpoga').disabled = garums===0;
 document.getElementById('info').innerHTML = 'Jūms īr atlīkūšī '+Math.max(0,maxgarums - garums)+' sīmbolī';
 if (garums > maxgarums) {
   ta.value = saturs.substr(0, maxgarums);
 }
}

<textarea onkeyup="checktext(this)"></textarea>
<span id="info"></span>
<input type="submit" id="submitpoga" />

 

Jāņem vērā, ka daudz speisi arī tiks uzskatīti, ka ir kas ierakstīts. Tam pameklē internetā javascript trim funkciju

Edited by indoom
Link to comment
Share on other sites

Meklē pēc javascript pamatiem :)

 

Kaut kā tā (testējis neesmu):

<textarea id="myText"></textarea>
<input type="submit" value="OK" id="mySubmit" disabled="disabled" />
Vēl vari iedrukāt: <span id="left"></span> simbolus
<script type="text/javascript">
var maxLength = 140;
(function(){
	document.getElementById("left").innerHTML = maxLength.toString();
	document.getElementById("myText").onkeypress = function(e){
		var left = maxLength-e.currentTarget.value.length;
		document.getElementById("mySubmit").disabled = left < maxLength;
		if(left < 0){
			e.currentTarget.value = e.currentTarget.value.substr(0, maxLength);
			left = 0;
		}
		document.getElementById("left").innerHTML = left.toString();
	}
})();
</script>

Link to comment
Share on other sites

Uz ātro (handlo arī, ja poga ir piespiesta, atšķirībā no indoom varianta)

<script type="text/javascript">
var maxlength = 100;
function getlenght(elem, e){

   if (e.keyCode != 46 && e.keyCode != 8 && elem.value.length >= maxlength){
    showlength(elem);
    return false;
   }
   else {
    showlength(elem);
    return true; 
   }
}

function showlength(elem){
 if (elem.value.length >= maxlength){
  document.getElementById("test").innerHTML = "Maksimālais teksta garums!";
 }
 else {
    document.getElementById("test").innerHTML = "Palikuši "+(maxlength-elem.value.length)+" simboli.";
 }
}

</script>

<textarea onkeydown="if (!getlenght(this, event)) return false " onkeyup="showlength(this)"></textarea>
<div id="test"></div>

Link to comment
Share on other sites

Es pēdējā laikā cenšos rakstīt atkārtoti izmantojamu kodu, tāpēc šeit vietā noderētu jQuery widget-a uzbūvēšana, kuru tālāk var izmantot ar vienu rindiņu, dažādās opciju kombinācijās.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<script>
(function($) {
 $.widget("ui.counter", {
   options:{
     max:200,
     txt:'Palikuši %left% simboli'
   },
   _init:function(){
     var self=this;
     $(this.element).bind('keyup',function(){
       self.refresh();
     });
     self.refresh();
   },
   refresh:function(){
     var el=this.element;
     var len=el.val().length;
     var left=Math.max(0,this.options.max-len);
     if (this.options.text) {$(this.options.text).html(this.options.txt.replace('%left%',left));}
     if (this.options.button) {$(this.options.button).get(0).disabled=!len;}
   }    
 });
}(jQuery));

$(function(){
 $('#txt').counter({text:'#txt_len',button:'#btn_send'});  
 $('#txt2').counter({text:'#txt_len2',txt:'Vēl tu var ievadīt %left% simbolus'});  
 $('#txt3').counter({button:'#btn_send3'});
});
</script>
<style>

</style>
</head>
<body>
 <textarea id="txt"></textarea><br />
 <div id="txt_len"></div>
 <button id="btn_send">Send</button><br />
 <hr />
 <textarea id="txt2"></textarea><br />
 <div id="txt_len2"></div>
 <button id="btn_send2">Send</button><br />
 <hr />
 <textarea id="txt3"></textarea><br />
 <div id="txt_len3"></div>
 <button id="btn_send3">Send</button><br />
 <hr />      
</body>
</html>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...