JavaScript and DHTML

Change HTML on onmouseOut, onmouseOver and onClick
PHP Redirects and JavaScript Redirects
JavaScript trim function
JavaScript Submit

Change HTML on event- onmouseOut, onmouseOver and onClick


<script type="text/javascript" >
function change_html() {
    txt1 = document.getElementById('txtFName').value;
    txt2 = document.getElementById('txtLName').value;
    document.getElementById('name').value = txt1 + ' ' + txt2;
    document.getElementById('name2').innerHTML = txt1 + ' ' + txt2;
    return true;
}
function change_html2() {
    document.getElementById('name2').innerHTML = '';
    return false;
}
</script>
<form name="frm1" id="frm1" method="post" action="" enctype="application/x-www-form-urlencoded">
  <p><input type="text" id="name" name="name" style="border:0px solid #ffffff" />
    <br />
    <span id="name2"></span>
  </p>
  <input type="text" name="txtFName" id="txtFName" />
  <input type="text" name="txtLName" id="txtLName" />
  <br /><br />
  <span class="pr"  onMouseOver="this.style.color='tan'" onMouseOut="this.style.color='purple'; change_html();"> OMO OMO </span>
  <br /><br />
  <input type="button" name="sendName" value="onclick" onclick="javascript:change_html();" />
</form>

Refresh your page and see the difference. There is a clue hidden for something great.

PHP Redirects and JavaScript Redirects

When to redirect using JavaScript and when to redirect using PHP?

If you have all your data available with which you want to go to new page (redirected
page) then why a browser redirect (JavaScript redirect) ? Just do PHP redirect.
Some programmer prefer this:


...php code...
...php code...
...php code...
...php code...
// javascript redirect code
echo "<script>window.location = 'newlocation.php';</script>";

This approach is wrong. Here you have nothing to do with client because you have all
the data available to you. So, redirect using PHP by using header().
If you are getting error like "Warning: Cannot modify header information - headers
already sent by..." then you need this one ob_start(); at top of your page.


header (); //Send a raw HTTP header
/* Redirect to a different page in the current directory that was requested */
$host  = $_SERVER['HTTP_HOST'];
$uri  = rtrim(dirname($_SERVER['PHP_SELF']), '/\');
$extra = 'mypage.php';
header("Location: http://$host$uri/$extrarn");
exit;
It is advisable to use absolute URI instead of relative one. So you should use the above lines of code.
Using relative redirect you can simply write
header ("Location: ./mypage.phprn");
exit;

JavaScript Trim Function

we need to use JavaScript string trim function for validating user input. Validating user's input is most common task performed in JavaScript.
User can unintentionally add space in input and we can easily remove those unwanted spaces. After trimming spaces we can check data according to our rule.

It will trim all the white spaces from left and right side of a string.


function trim(str)
{
    // str. remove whitespaces from left. remove whitespaces from right
    return str.replace(/^s+/g, "").replace(/s+$/g, "");
}

/*
You can add this line after the function. "String is Capital."
String.prototype.trim = trim;
Then you can use trim function like string's other in build functions.
this.value.trim(); // string.trim()
*/

Example:
This way you can trim all whitespaces as soon as user go out after type any whitespaces.
<input type="text" value="Click" onmouseout="javascript:this.value=trim(this.value)" />

Javascript Submit


 function sub1(f1) {
 t = 'submitTo.php'; //'submitTo.php?var1=value1';
 t = encodeURI (t);
 // may be you like to validate fields before submitting.
 if (v1.options[v1.selectedIndex].value == '#') {
 alert("Please, Select type of your blog.");
 return false;
 }
 f1.action = t; // or somthing like f1.action = 'submitTo.php';
 f1.submit();  // Javascript form submit
 return true;
 }
 <form method="post" action="" onsubmit="return sub1(this)">
 <select name="site" size="1" >
 <option value="#">--Select--</option>
  <option value="tech">Tech</option>
  <option value="general">General</option>
  </select>
 <input type="submit" />
</form>

Related:
Converting string to array and array to string in JavaScript
Value Exchange from JavaScript/HTML page to PHP and from PHP page to JavaScript
Check/uncheck All Check-boxes
Javascript Error Handling
Append/Move to List from List

Comments are open for an year period. Please, write here on Facebook page.