Home > Archive by category 'Javascript code'
 

Php & javascript

All the PHP code will execute on the server before the page is sent to the client, meaning all of the PHP calls have all been replaced by whatever text they returned once the JavaScript is able to execute.

1
2
3
4
5

<script>
document.write("<?php echo 'hello!'; ?>");
</script>
1
2
3
4
5
6
7
8
9

<?php
echo "<script language=\"JavaScript\">";
echo "alert(\"Hello World\");";
echo "</script>";
?>
1
2
3
4
5
6
7
8
9
10
11
12
13

<?php $phpvar=1; ?>
<script type="text/javascript">
jsvar = 3;
//Assign jsvar javascript variable value to php variable $phpvar
'<?php $phpvar="<script>document.write(jsvar)</script>"; ?>';
</script>
<?php echo $phpvar; ?>

‘Loop’ Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script type="text/javascript">
var counter = 0;
for(i=0;i<10;i++){
counter++;
}
</script>

<?php
$phpvar= "<script>document.write(counter)</script>";
echo $phpvar;
?>

‘Session’ Example

1
2
3
4
5
6
7
8
9

<?php session_start(); $_SESSION['nume']='Sanat';?>
<!-- HTML code -->
<script type="text/javascript">
alert("Welcome <?php echo $_SESSION['nume']; ?>");
</script>

‘Switch’ Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<script type="text/javascript">
function test(){
	document.getElementById("php_code").innerHTML="<?php
		$w="do";
		switch($w){
		case 'do': echo "You will be logged in?"; break;
		case 'loguot': echo "You will be logged out?" ; break;
		}
	?>";
}
</script> 

<a href="" onclick="test(); return false;"> test </a> <br>
<span id="php_code"> </span>

Pass the value within url.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

<?php
    if(isset($_GET[action])){
	// Retrieve the GET parameters and executes the function
	  $funcName	 = $_GET[action];
	  $vars	  = $_GET[vars];
	  $funcName($vars);
	 } else if (isset($_POST[action])){
	  // Retrieve the POST parameters and executes the function
	  $funcName	 = $_POST[action];
	 $vars	  = $_POST[vars];
	 $funcName($vars);
	 } else {
		echo "<INPUT NAME='click_me' TYPE='button' ONCLICK='javascript:javaFunction()' VALUE='Click Me'>";
	 }

   function phpFunction($v1){
	// makes an array from the passed variable
	// with explode you can make an array from string.
	$varArray = explode(",", $v1);	

	echo "First Value: $varArray[0] <BR>";
	echo "Second Value: $varArray[1]<BR>";
   }
  ?> 

  <SCRIPT language="javascript">
   function javaFunction(){
	// In the varArray are all the variables you want to give with the function
	var varArray = new Array();
	varArray[0] = "Hello";
	varArray[1] = "World";

	// the url which you have to pass an action to the GET- or POST-variable
	var url="<?php echo $_SERVER[PHP_SELF];?>?action=phpFunction&vars="+varArray;

	// Opens the url in the same window
	   window.open(url, "_self");
	  }
  </SCRIPT>

Output :
First Value: Hello
Second Value: World

Comment Tags: FTP, hosting, website

Trigger

Download jquery-1.3.2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		   $("h1").click(function () {
			  alert("h1");
		   });
		   $("button:last").click(function () {
				$("h1").trigger('click');
		   });
	});
</script>

   <div><h1>Hello World</h1></div>
   <button value="Enter">Enter</button>

Triggered By Select Change Event

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("select").change(function () {
		   var str = "You select : ";
		   $("select option:selected").each(function () {
			  str += $(this).text() + " ";
		  });
		  $("div").text(str);
		}).trigger('change');
	});
</script>

<select name="A" multiple="multiple">
	<option>A</option>
	<option selected="selected">B</option>
	<option>C</option>
</select>
 <div></div>

Comment Tags: FTP, hosting, website

Toggle

Download jquery-1.3.2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("span").click(function () {
		   $("li").each(function(){
			  $(this).toggleClass("example");
		   });
		});
	});
</script>

<style>
 .example { font-style:italic; }
</style>    

	<span>Click Toggle</span>
	  <ul>
		<li>A</li>
		<li>B</li>
		<li>C</li>
	  </ul>

slideToggle(speed, callback): height is adjusted

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("button").click(function () {
		  $("p").slideToggle("slow");
		});
             /* $("p").click(function () {
                    $("p").toggle();
                });
             */
	});
</script>

  <button>Toggle</button>
  <p>
	This is the paragraph.
  </p>

Toggle among two or more function calls every other click

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		 $("div").toggle(
			  function () {
				 $(this).css({"color":"blue"});
			  },
			  function () {
				 $(this).css({"color":"red"});
			  },
			  function () {
				 $(this).css({"color":"green"});
			  }
		 );
	});
</script>

   <div>This is the paragraph.</div>

Use toggle function to change class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		 $("div").toggle(
				function () {
					$(this).addClass("my");
				},
				function () {
					$(this).removeClass("my");
				}
		 );
	});
</script>
<style>
.my { color:green; }
</style>

<div>This is the paragraph.</div>

Click to toggle opacity

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	     $('#my').toggle(
		  function(event) {
			$(event.target).css('opacity',0.4);
		  },
		  function(event) {
			$(event.target).css('opacity',1.0);
		  }
	     );
	});
</script>

	<div id="my">This is the paragraph.</div>

Comment Tags: FTP, hosting, website

Form Validation

Download jquery-1.3.2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("form").submit(function() {
              if ($("input:first").val() == "sanat") {
                $("span").text("Validated...").show();
                return true;
              }
              $("span").text("Not valid!").show().fadeOut(1000);
              return false;
            });
        });
    </script>
  </head>

    <body>
          <form action="javascript:alert('success!');">
              <input type="text" />
              <input type="submit" />
          </form>
          <span></span>
    </body>
</html>

Comment Tags: FTP, hosting, website

Sets the background color of the page to black

Download jquery-1.3.2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

<script type='text/javascript' src='js/jquery-1.3.2.js'></script>
<script type='text/javascript'>
$.fn.extend({
  Select: function() {
    return $(this).addClass('mySelected');
  },
  Unselect: function() {
    return $(this).removeClass('mySelected');
  },
  MyApplication: {
    Ready: function() {
      $('p').click(
        function($e) {
          $('li').Select();
        }
      );
      $('li').click(
        function() {
          $(this).hasClass('mySelected')?$(this).Unselect() : $(this).Select();
        }
      );
    }
  }
});

$(document).ready(
  function() {
    $.fn.MyApplication.Ready();
  }
);
</script>
<style type='text/css'>
li.mySelected {
    background: yellow;
}
</style>

    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
      <li>E</li>
      <li>F</li>
    </ul>
    <p>
      Select All
    </p>

Comment Tags: FTP, hosting, website

even() matches even elements, zero-indexed.

Download jquery-1.3.2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("tr:even").css("background-color", "green");
	});
</script>

<table border="1">
	<tr><td>00</td><td>01</td><td>02</td></tr>
	<tr><td>10</td><td>11</td><td>12</td></tr>
	<tr><td>20</td><td>21</td><td>22</td></tr>
	<tr><td>30</td><td>31</td><td>32</td></tr>
	<tr><td>40</td><td>41</td><td>42</td></tr>
	<tr><td>50</td><td>51</td><td>52</td></tr>
</table>

Comment Tags: FTP, hosting, website
  1. Pages:
  2. 1
  3. 2
  4. 3
  5. 4
  6. 5
  7. 6
 
 
 

Categories

Tag

 

Copyright © 2010 PHP code. net. All Rights Reserved. Designed By: Web Design Company