JavaScript Tutorials
- What is Javascript?
- What is BOM?
- What is DOM?
- Variable
- check variable value is empty
- JavaScript Output
- Functions
- Javascript Events
- Input Events
- onchange Event
- Javascript Output methods
- If else statement
- Arrays
- Pattern Validation
- Form Validation
- Inner Html Form Validation
- Inline Form Validation
- Checkbox Validation
- Inline Inner Html Form Validation
- Server side php Validation
- Validate a HTML Form with PHP
- window and window location
- Get Text Value
- Get hidden field value
- JavaScript & PHP
- Date Format
- get php value in javascript
- Redirect page & Autoredirect page
- Auto Refresh page & Div
- How to get select text value from Dropdown box
- How to clear browser history in javascript
- Checkbox Problems
- Select option problems
- Popup Contact Form
- Sidebar Contact Form
- How to use a multistep Form or Form wizard
- Auto Calculate Price
- print Application Form
- Auto Calculate GST in Javascript by select price
- Calculate GST by input value in text box Jquery
- Calculate Discount
- onClick Checkbox
- autofil form data click on checkbox
- Show subcategory list
- Show city list as per state
- Show district list as per country and state
- Show good morning good night wish
- image upload with preview image
- Print Div Content
- Show modal popup on page load
- filter table data usign javascript.
- Character Limit Validation.
- Validate File 5MB Upload
- Validate Special character
- More File Upload
- Call JavaScript Function After Page Load
- Drop Down First option Value Disabled --- Please Select ---
- How to Disable Submit Button After Form Submission
- How to disable browser back button using Jquery?
- How to Remove selected item from second & third dropdown list?
- Interview Questions of JavaScript.
Important Link
PHP variable to Javascript variable:
File name : index.php
<html>
<head>
</head>
<body>
<?php $var = 10; ?>
<script type="text/javascript">
jsvar = <?php echo $var; ?>;
document.write(jsvar);
</script>
</body>
</html>
Form variable to Javascript variable:
File name : index.php
<html>
<head>
</head>
<body>
<form name="frm">
<input type="hidden" name="formvar" value="100"> </form>
<script type="text/javascript">
jsvar = document.frm.formvar.value;
document.write(jsvar) ;
</script>
</body>
</html>
PHP variable to Form variable:
File name : index.php
<html>
<head>
</head>
<body>
<form name="myform4">
<input type="hidden" name="formvar" value="<?php $phpvar=10; echo $phpvar; ?>">
</form>
</body>
</html>
Javascript variable to Form variable:
Pass javascript variable value to form input field or input hidden field.
File name : index.php
<html>
<head>
</head>
<body>
<form name=frm>
<input type="hidden" name="formvar" value="">
<input type="text" name="formvar1" value="">
</form>
<script type="text/javascript">
jsvar=10;
document.frm.formvar.value = jsvar;
document.frm.formvar1.value = jsvar;
</script>
</body>
</html>
Allow sending different variables via the URL string to the new page (readable through PHP or Javascript)
File name : index.php
// Send the variables myNumber=1 and myFruit="orange" to the new PHP page...
<a href="page2.php?myNumber=1&myFruit=orange">Send variables via URL!</a>
File name : page2.php
<?php
// Retrieve the URL variables (using PHP).
$num = $_GET['myNumber'];
$fruit = $_GET['myFruit'];
echo "Number: ".$num." Fruit: ".$fruit;
?>
Allow sending hidden form variables to a PHP page. This allows the user to select options on the page, and for these to be carried across to the new page.
File name : index.php
<html>
<head>
</head>
<body>
<!-- Pass over to the new page an arbitrary value, which in this case, is determined by... -->
<!-- *********** the link being clicked: (USE THIS OR...) ************** -->
<a href="#" onclick="document.myform.formVar.value='first'; document.myform.submit(); return false">Click 1st</a><br>
<a href="#" onclick="document.myform.formVar.value='second'; document.myform.submit(); return false">Click 2nd</a><br>
<a href="#" onclick="document.myform.formVar.value='third'; document.myform.submit(); return false">Click 3rd</a><br>
<!-- *********** the radio button pressed before clicking "Send Form" (...OR USE THIS OR...) ************** -->
<input name="br" type="radio" onClick="document.myform.formVar.value='first'">Click 1st<br>
<input name="br" type="radio" onClick="document.myform.formVar.value='second'">Click 2nd<br>
<input name="br" type="radio" onClick="document.myform.formVar.value='third'">Click 3rd<br><br>
<!-- *********** the dropdown menu selected before clicking "Send Form" (...OR USE THIS) ************** -->
<select onchange="document.myform.formVar.value=this.value">
<option value="first">Select 1st</option>
<option value="second">Select 2nd</option>
<option value="third">Select 3rd</option>
</select>
<!-- ***************************************** -->
<!-- In each of the above three cases, the hidden variable in the code below is needed for it all to work.
Also notice how the destination page is given here, rather than in anything above -->
<form method=post name="myform" action="page2.php">
<input type="hidden" name="formVar" value="">
<input type="submit" value="Send form!">
</form>
</body>
</html>
File name : page2.php
<?php
// Retrieve the hidden form variable (using PHP).
$myvar = $_POST['formVar'];
echo "myvar: ".$myvar;
?>
Allow sending hidden form variables (using tick boxes) to a PHP page. This allows the user to select options on the page, and for these to be carried across to the new page.
File name : index.php
<html>
<head>
</head>
<body>
Tick A <input type="checkbox" checked onClick="document.myform2.a0.value = this.checked"><br>
Tick B <input type="checkbox" onClick="document.myform2.b0.value = this.checked"><br>
Tick C <input type="checkbox" onClick="document.myform2.c0.value = this.checked">
<form method=post name="myform2" action="page2.php">
<input type="hidden" name="a0" value="true">
<input type="hidden" name="b0" value="false">
<input type="hidden" name="c0" value="false">
<input type="submit" value="Send form!">
</form>
</body>
</html>
File name : page2.php
<?php
// Retrieve the hidden form variable (using PHP).
$myvarA = $_POST['a0'];
$myvarB = $_POST['b0'];
$myvarC = $_POST['c0'];
echo "myvarA: ".$myvarA."<br>";
echo "myvarB: ".$myvarB."<br>";
echo "myvarC: ".$myvarC;
?>
Allow different bits of HTML to dynamically execute according to which radio button is pressed
File name : page2.php
<html>
<head>
</head>
<body>
<script type="text/javascript">
function SetHTML1(type) {
document.getElementById("a1").style.display = "none"
document.getElementById("b1").style.display = "none"
document.getElementById("c1").style.display = "none"
// Using style.display="block" instead of style.display="" leaves a carriage return
document.getElementById(type).style.display = ""
}
</script>
<input name="br" type="radio" checked onClick="SetHTML1('a1')">Click 1st<br>
<input name="br" type="radio" onClick="SetHTML1('b1')">Click 2nd<br>
<input name="br" type="radio" onClick="SetHTML1('c1')">Click 3rd<br><br>
<span id="a1" style="">Anything can go here </span>
<span id="b1" style="display:none">...like an image...<br><img src="http://www.skytopia.com/ar.png"> </span>
<span id="c1" style="display:none">...<a href="http://www.skytopia.com">or a link</a>... </span>
</body>
</html>
Allow different bits of HTML to dynamically execute according to which dropdown menu is selected
File name : page2.php
<script type="text/javascript">
function SetHTML2(type) {
document.getElementById("a2").style.display = "none"
document.getElementById("b2").style.display = "none"
document.getElementById("c2").style.display = "none"
// Using style.display="block" instead of style.display="" leaves a carriage return
document.getElementById(type).style.display = ""
}
</script>
<select onchange="SetHTML2(this.value)">
<option value="a2">Select 1st</option>
<option value="b2">Select 2nd</option>
<option value="c2">Select 3rd</option>
</select>
<span id="a2" style="display:none">Anything can go here </span>
<span id="b2" style="display:none">...like an image...<br><img src="http://www.skytopia.com/ar.png"> </span>
<span id="c2" style="display:none">...<a href="http://www.skytopia.com">or a link</a>... </span>
Add/remove bits of HTML according to multiple checkboxes
File name : page2.php
<script type="text/javascript">
function SetHTML3(check,type) {
if(check==true) document.getElementById(type).style.display = "";
else document.getElementById(type).style.display = "none";
}
</script>
<input type="checkbox" CHECKED onClick="SetHTML3(this.checked,'a3')">
<input type="checkbox" onClick="SetHTML3(this.checked,'b3')">
<input type="checkbox" onClick="SetHTML3(this.checked,'c3')">
<span id='a3'> <b> Anything can go here </b></span>
<span id='b3' style="display:none"> <b> ...like an image... <img src="http://www.skytopia.com/ar.png"> </b></span>
<span id="c3" style="display:none"> <b> ...<a href="http://www.skytopia.com">or a link</a> </b></span>
File name : page2.php
File name : page2.php
File name : page2.php
File name : page2.php