PHP Web Developer.

สิงหาคม 15, 2012

jQuery: Textbox Validation and the blur() Event

Filed under: Javascript & jquery — Prajak @ 6:04 pm

<b>Username:</b> <i>Username must be at least 4 characters in length</i>
<input type=”text” id=”txt_username” name=”username”>
<span id=”username_warning” style=”color:red”></span>
<b>Password:</b> <i>Password must be at least 6 characters in length</i>
<br><input type=”password” id=”txt_password” name=”password”>
<span id=”password_warning” style=”color:red”></span>

 

$(document).ready(function(){ 
    $("#txt_username").blur(function() 
    { 
        var username_length; 
 
        username_length = $("#txt_username").val().length; 
        $("#username_warning").empty(); 
 
        if (username_length < 4) 
            $("#username_warning").append("Username is too short"); 
    }); 
 
    $("#txt_password").blur(function() 
    { 
        var password_length; 
 
        password_length = $("#txt_password").val().length; 
        $("#password_warning").empty(); 
 
        if (password_length < 6) 
            $("#password_warning").append("Password is too short"); 
    }); 
}); 
Advertisements

How to allow only one decimal separator in the texbox?

Filed under: Javascript & jquery — Prajak @ 5:19 pm

$(‘.numeric_input’).live(“keyup”,function(){inputControl($(this),’int’);});
$(‘.float_input’).live(“keyup”,function(){inputControl($(this),’float’);});

function inputControl(input,format)
{
var value=input.val();
var values=value.split(“”);
var update=””;
var transition=””;
if (format==’int’){
expression=/^([0-9])$/;
finalExpression=/^([1-9][0-9]*)$/;
}
else if (format==’float’)
{
var expression=/(^\d+$)|(^\d+\.\d+$)|[,\.]/;
var finalExpression=/^([1-9][0-9]*[,\.]?\d{0,3})$/;
}
for(id in values)
{
if (expression.test(values[id])==true && values[id]!=”)
{
transition+=”+values[id].replace(‘,’,’.’);
if(finalExpression.test(transition)==true)
{
update+=”+values[id].replace(‘,’,’.’);
}
}
}
input.val(update);
}

กรกฎาคม 20, 2012

Select option display value in texbox use jquery

Filed under: Javascript & jquery — Prajak @ 1:57 pm

======= Code =======
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js”></script&gt;
<script>
// Define array name
var selectId = [];
var selectName = [];
var selectNameValue = [];
var selectValue = [];

// Define the Latin Alphabet
var alphabet = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;

// Nested loop to find frequencies and input them into the hashtable
var a=1;
for (d=0; d<=25; d++) {
var alphabetValue = alphabet.charAt(d)+’ : ‘+(a*5);
selectId.push(d);
selectName.push(alphabet.charAt(d));
selectNameValue.push(alphabetValue);
selectValue.push(a*5);
a++;
}

$(document).ready(function() {

// for display partnerComPercentag
$(“select#select_id”).change(function(){
$(‘#textName’).val((selectName[$(this).val()]));
$(‘#textValue’).val((selectValue[$(this).val()]));
});

});
</script>
<div>

Select :
<select id=”select_id” name=”select_id”>
<script>
for(i=0;i<selectId.length;i++){
var option = ‘<option value=”‘+selectId[i]+'”>’+selectNameValue[i]+'</option>’;
document.write(option);
}
</script>
</select>
Display select : <input type=”text” id=”textName” name=”textName”/>
Display value : <input type=”text” id=”textValue” name=”textValue”/>
</div>

======= End Code =======

PHP Javascript variable/value transfer

Filed under: Javascript & jquery, PHP — Prajak @ 1:50 pm

การกำหนดค่าตัวแปรจาก PHP => Javascript

<?php
$varPHP = ‘PRAJAK’;
?>

<script>
var varJava = “<?php echo $varPHP; ?>”;
</script>

การกำหนดค่าตัวแปรจาก Javascript => PHP (Ajax)

======= index.php =======

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js”></script&gt;
<script>
$(document).ready(function() {

$(“#textbox1”).keyup(function(){
$.ajax({
type: “POST”,
url: “http://localhost/ajaxphp.php&#8221;,
data: “textbox1=” + $(this).val(),
success: function(data){
$(“#ajaxdisplay”).html(data);
}
});
})

});
</script>

<div>
Input value : <input type=”text” id=”textbox1″ name=”textbox1″/>
</div>

Display value :
<div id=’ajaxdisplay’>-</div>

======= ajaxphp.php =======

<?php
// REQUEST value after input
echo $_REQUEST[‘textbox1’];
?>

Disabled/Enabled Textbox by radio button use jquery

Filed under: Javascript & jquery — Prajak @ 1:46 pm

======= Code =======
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js”></script&gt;
<script>
$(document).ready(function() {

// show Enabled textbox1
$(‘#rad1Enabled’).click(function(){
$(“#textbox1”).removeAttr(“disabled”);
});

// show Disabled textbox1
$(‘#rad1Disabled’).click(function(){
$(“#textbox1”).attr(“disabled”, “disabled”);
});
});
</script>
<span>
<input type=”radio” name=”rad1″ id=”rad1Disabled” value=”0″ checked=”checked” /> Disabled
<input type=”radio” name=”rad1″ id=”rad1Enabled” value=”1″ /> Enabled
</span>
<div>
<input type=”text” id=”textbox1″ name=”textbox1″ disabled=”disabled” />
</div>
======= End Code =======

บลอกที่ WordPress.com .