Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





How to get html form fields value in javascript?

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


Get hidden field value in JavaScript

In JavaScript, you can use following two ways to get hidden field value in a form :

document.getElementById(‘hidden field id’).value
document.formName.elements[‘hidden field name’].value

File name : index.php

In JavaScript, you can use following two ways to get hidden field value in a form :

document.getElementById(‘hidden field id’).value
document.formName.e<html>
<body>

<script type="text/javascript">
function printIt(){
alert(document.getElementById('hid').value);
//alert(document.formName.elements['hname'].value);
}
</script>

<h1>Access Hidden value in JavaScript</h1>
<form name="formName">
<input type=hidden id="hid" name="hname"
value="Mahtab Habib"/>

<input type=button value="Get Value" onclick="printIt()" />
</form>

</body>
</html>ements[‘hidden field name’].value

How to get php variable in javascript ?

File name : index.php

<?php $num = 10; ?>
<script>
function myFunction()
{
var jsval = "<?php echo $num; ?>";
if(jsval < 1)
{
alert("Your number is lessthan 1.");
}
else
{
window.location="http://itechtuto.com/";
}

}
</script>

How to disable and enable button in javascript.

Submit button is disable first . when you click on any text or div then enable submit button.

File name : index.php

<script>
function myFunction()
{
document.getElementById("sub").disabled = false;
}

function myalert()
{
alert("You click on the submit button.");
}


</script>


<button id="sub" type="submit" onclick="myalert()" disabled>Submit</button>

<p id="pid" onclick="myFunction()">Click on me then enable the submit button.</p>


how to get html tagname value in javascript ?

when you click on the paragraph text tenn it gets text of html tags.

File name : index.php

<html>

<head>

<script type="text/javascript">

function myfunction(li) {
var TextInsideLi = li.getElementsByTagName('p')[0].innerHTML;
alert(TextInsideLi);
}
</script>

</head>
<body>
<ul>
<ul>
<li onclick="myfunction(this)">
<span></span>
<p>This Text</p>
</li>



</ul>
</body>

</html>








Previous Next


Trending Tutorials


PHP

PHP

100+ Tutorials
oops

PHP OOPs

80+ Tutorial
Codeigniter

Codeigniter

100+ Tutorial
Laravel

Laravel

100+ Tutorials
Node.js

NODE.JS

100+ Tutorials
Javascript

Javascript

100+ Tutorials


Review & Rating

0.0 / 5

0 Review

5
(0)

4
(0)

3
(0)

2
(0)

1
(0)

Write Review Here


Most Popular Tutorials

 Important Link