API tools faq
paste
Guest User

Untitled

a guest
Nov 9th, 2017
27
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.18 KB | None | 0 0
raw download clone embed print report
  1. ACTIVITY 3
  2.  
  3. 1. Validate the form that you have designed already using Javascript.
  4.  
  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8. <script>
  9. function validateForm(){
  10. var x = document.forms["myForm1"]["fname"].value;
  11. if (x == ""){
  12. alert("Name must be filled out");
  13. return false;
  14. }
  15. var y = document.forms["myForm1"]["age"].value;
  16. if (y < 0 || y > 100){
  17. alert("Please input proper age");
  18. return false;
  19. }
  20. }
  21. </script>
  22. </head>
  23. <body>
  24. <form name="myForm1" onsubmit="return validateForm()" method="post">
  25. Name:
  26. <input type="text" name="fname"> <br>
  27. Age: &nbsp&nbsp
  28. <input type="number" name="age">
  29. <br>
  30. <br>
  31. <input type="submit" value="Submit">
  32. </form>
  33. </body>
  34. </html>
  35.  
  36.  
  37. 2. Javascript Event handling (Use onblur, onfocus, onload, onunload, onmouseover,onmouseout, onsubmit, ondblclick,onclick )
  38.  
  39. <!DOCTYPE html>
  40. <html>
  41. <body>
  42. <script>
  43. function myFunction {
  44. return p1 * p2;
  45. }
  46. document.getElementById("demo").innerHTML = myFunction;
  47. </script>
  48. <button
  49. onclick="document.getElementById('demo').innerHTML='clicked'"
  50. onmouseover="document.getElementById('demo').innerHTML='mouse_hover'"
  51. onmouseout="document.getElementById('demo').innerHTML='mouse_out'"
  52. onblur="document.getElementById('demo').innerHTML='blur'"
  53. onfocus="document.getElementById('demo').innerHTML='focus'"
  54. onload="document.getElementById('demo').innerHTML='load'"
  55. onunload="document.getElementById('demo').innerHTML='unload'"
  56. onmouseover="document.getElementById('demo').innerHTML='mouseover'"
  57. onmouseout="document.getElementById('demo').innerHTML='mouseout'"
  58. ondblclick="document.getElementById('demo').innerHTML=double_click"
  59. >Do anything</button>
  60.  
  61. <form onsubmit="myFunction()">
  62. <input type="submit" value="Submit">
  63. </form>
  64. <script>
  65. function myFunction() {
  66. alert("The form was submitted");
  67. }
  68. </script>
  69.  
  70. <p id="demo"></p>
  71.  
  72. </body>
  73. </html>
  74.  
  75.  
  76. Activity 4
  77. 13BCE0038
  78.  
  79. 1)Write a function to create a user defined table, accepting rows and columns
  80.  
  81. <!DOCTYPE html>
  82. <html>
  83. <head>
  84. <meta charset=utf-8 />
  85. <title>Change the content of a cell</title>
  86. <style type="text/css">
  87. body {margin: 30px;}
  88. </style>
  89. </head><body>
  90. <table id="myTable" border="1">
  91. </table><form>
  92. <input type="button" onclick="createTable()" value="Create the table">
  93. </form></body></html>
  94. java script function-
  95. function createTable()
  96. {
  97. rn = window.prompt("Input number of rows", 1);
  98. cn = window.prompt("Input number of columns",1);
  99.  
  100. for(var r=0;r<parseInt(rn,10);r++)
  101. {
  102. var x=document.getElementById('myTable').insertRow(r);
  103. for(var c=0;c<parseInt(cn,10);c++)
  104. {
  105. var y= x.insertCell(c);
  106. y.innerHTML="Row-"+r+" Column-"+c;
  107. }
  108. }
  109. }
  110.  
  111.  
  112.  
  113. 2)Remove items from a dropdown list
  114.  
  115. <!DOCTYPE html>
  116. <html><head>
  117. <meta charset=utf-8 />
  118. <title>Remove items from a dropdown list</title>
  119. </head><body><form>
  120. <select id="colorSelect">
  121. <option>Red</option>
  122. <option>Green</option>
  123. <option>White</option>
  124. <option>Black</option>
  125. </select>
  126. <input type="button" onclick="removecolor()" value="Select and Remove">
  127. </form></body></html>
  128.  
  129. java script function-
  130. function removecolor()
  131. {
  132. var x=document.getElementById("colorSelect");
  133. x.remove(x.selectedIndex);
  134. }
  135.  
  136.  
  137.  
  138.  
  139. 3)
  140. <!DOCTYPE html>
  141. <html><head>
  142. <meta charset=utf-8 />
  143. <style type="text/css">
  144. body {margin: 30px;}
  145. </style>
  146. <title>Count and display items of a dropdown list - w3resource</title>
  147. </head><body><form>
  148. Select your favorite Color :
  149. <select id="mySelect">
  150. <option>Red</option>
  151. <option>Green</option>
  152. <option>Blue</option>
  153. <option>White</option>
  154. </select>
  155. <input type="button" onclick="getOptions()" value="Count and Output all items">
  156. </form></body></html>
  157. java script function-
  158. function getOptions()
  159. {
  160. var x=document.getElementById("mySelect");
  161. var txt1 = "No. of items : ";
  162. var i;
  163. l=document.getElementById("mySelect").length;
  164. txt1 = txt1+l;
  165. for (i=0;i<x.length;i++)
  166. {
  167. txt1 = txt1 + "\n" + x.options[i].text;
  168. }
  169. alert(txt1);
  170. }
  171.  
  172.  
  173. <HTML>
  174. <HEAD>
  175. <TITLE>
  176. 14BCE0097 ullas ghosh DETAILS HTML FORM
  177. </TITLE>
  178. </HEAD>
  179.  
  180. <body style="background-color:powderblue;">
  181. <table style="background-color:green;width:100%">
  182. <tr>
  183. <th><H1>Name: ullas ghsoh</H1><br><pre>Email Id: Ullasghosh2014@vit.ac.in</pre><pre>Contact Number: (+91) 9944490902.</pre></th>
  184. <th><img src="" alt="Profile pic" style="width:150px;height:150px;border:1px;" ></th>
  185. </tr></table><hr>
  186. <table><td><p>status:</p></td><td><marquee direction="left" scrollamount="10" width="100%">Currently in CSE326: IWP lab doing nothing.</marquee></td></table>
  187. <hr><H3>Details</H3><hr>
  188. <table style="margin-left:100px;border:1;padding:5;width:70%;" >
  189.  
  190. <tr>
  191. <td>Father's Name:</td>
  192. <td>Anil Batra</td>
  193. </tr>
  194. <tr>
  195. <td>Address</td>
  196. <td>#108, Brindavan residency, Above Tom's Diner, Opp. VIT main gate <br> Vellore, TN</td>
  197. </tr>
  198. <tr>
  199. <td>PIN Code</td>
  200. <td>632014</td>
  201. </tr>
  202.  
  203. <tr>
  204. <td>Age</td>
  205. <td>21</td>
  206. </tr>
  207. </table><hr>
  208. <H3>About</H3><hr>
  209. <p>Hey! This is ullas ghsoh and I am currently pursuing B.Tech in Computer Science. I am in final year as of now. I do not know, what else do I have to write here. So i'd rather end this now. Okay, thanks! </p>
  210. </BODY>
  211. </HTML>
  212.  
  213.  
  214. FORM WITH JSP FORM VALIDATION
  215.  
  216. <!DOCTYPE>
  217. <html>
  218. <head>
  219. <style>
  220. body{background-color:powderblue;}
  221. h1{color:black;}
  222. </style>
  223.  
  224. <h1><center>DETAILS VERIFICATION FORM</center></h1>
  225. </head>
  226. <body>
  227.  
  228. <script type="text/javascript">
  229. function validate(details_form,email)
  230. {
  231. /*JAVASCRIPT REGULAR EXPRESSION VALIDATION*/
  232. var reg= /^([A-Za-z0-9_\-\.])({\@A-Za-z0-9_\-\.]){1,}\.([A-Za-z]{2,4})$/;
  233. var adress= document.forms[form-id].elements[phone no].value;
  234. var adress= document.forms[form-id].elements[URL].value;
  235. var adress= document.forms[form-id].elements[IP adress].value;
  236. var adress= document.forms[form-id].elements[mac adress].value;
  237. var adress= document.forms[form-id].elements[email id].value;
  238. var adress= document.forms[form-id].elements[PAN no].value;
  239. var adress= document.forms[form-id].elements[drivers lisence].value;
  240. var adress= document.forms[form-id].elements[ISBN].value;
  241. var adress= document.forms[form-id].elements[ISSN number].value;
  242. if(reg.test(details)==false)
  243. {
  244. alert("validation unsuccessful please enter the right details");
  245. return false;
  246. }
  247. </script>
  248.  
  249.  
  250. <form id="details_form" method="get" action="submit_successful.html" onsubmit="javascript:return validate('details_form','email');">
  251.  
  252.  
  253. <p>enter phone no here</p>
  254. <input type="text" name="phone no" size=40><br/>
  255. <p> enter URL</P>
  256. <input type="text" name="phone no" size=40><br/>
  257. <p>enter ip adress</p>
  258. <input type="text" name="phone no" size=40><br/>
  259. <p>enter mac address</p>
  260. <input type="text" name="phone no" size=40><br/>
  261. <p>enter email id</p>
  262. <input type="text" name="phone no" size=40><br/>
  263. <p>enter PAN number</p>
  264. <input type="text" name="phone no" size=40><br/>
  265. <p>driving liscence no.</p>
  266. <input type="text" name="phone no" size=40><br/>
  267. <p>enter ISBN number</p>
  268. <input type="text" name="phone no" size=40><br/>
  269. <p>enter ISSN number</p>
  270. <input type="text" name="phone no" size=40><br/>
  271.  
  272. <input type="submit" value="submit"/>
  273.  
  274.  
  275. </body>
  276. </html>
  277. 13BCE0038_activity_7.php
  278. HTML FORM PHP VALIDATION
  279.  
  280. <!DOCTYPE html>
  281. <html>
  282. <style>
  283. input[type=text], select {
  284. width: 100%;
  285. padding: 12px 20px;
  286. margin: 8px 0;
  287. display: inline-block;
  288. border: 1px solid #ccc;
  289. border-radius: 4px;
  290. box-sizing: border-box;
  291. }
  292.  
  293. input[type=submit] {
  294. width: 100%;
  295. background-color: #4CAF50;
  296. color: white;
  297. padding: 14px 20px;
  298. margin: 8px 0;
  299. border: none;
  300. border-radius: 4px;
  301. cursor: pointer;
  302. }
  303.  
  304. input[type=submit]:hover {
  305. background-color: #45a049;
  306. }
  307.  
  308. div {
  309. border-radius: 5px;
  310. background-color: #f2f2f2;
  311. padding: 20px;
  312. }
  313. iframe {
  314. background-color:#DEF0DA;
  315. text-color:white
  316. }
  317. </style>
  318. <body>
  319.  
  320.  
  321. <?php
  322. $name = $regno = $gender = $email = $mobno =$branch = "";
  323.  
  324. if ($_SERVER["REQUEST_METHOD"] == "POST") {
  325. $name = test_input($_POST["name"]);
  326. $reno = test_input($_POST["regno"]);
  327. $gender = test_input($_POST["gender"]);
  328. $email = test_input($_POST["email"]);
  329. $mobno = test_input($_POST["mobno"]);
  330. $gender = test_input($_POST["gender"]);
  331. $branch = test_input($_POST["branch"]);
  332. }
  333.  
  334. function test_input($data) {
  335. $data = trim($data);
  336. $data = stripslashes($data);
  337. $data = htmlspecialchars($data);
  338. return $data;
  339. }
  340.  
  341.  
  342. ?>
  343.  
  344.  
  345. <iframe src="top.html" width=100% style="border:none;"></iframe>
  346.  
  347. <div>
  348. <form action="13BCE0038_activity_7.php" method="get">
  349. <input type="text" id="name" name="name" placeholder="Name">
  350. <input type="text" id="regno" name="regno" placeholder="Register Number">
  351. <input type="radio" id="gender" name="gender" value="male">Male
  352. <input type="radio" id="gender" name="gender" value="female">Female
  353. <input type="text" id="email" name="email" placeholder="E-mail">
  354. <input type="text" id="mobno" name="mobno" placeholder="Mobile Number">
  355.  
  356.  
  357. <select id="branch" name="branch">
  358. <option value="none">Select Your Branch</option>
  359. <option value="cse">CSE</option>
  360. <option value="it">IT</option>
  361. </select>
  362.  
  363. <input type="submit" value="Submit Information">
  364. </form>
  365. </div>
  366.  
  367. <?php
  368. echo "<h2>Your Input:</h2>";
  369. echo $_GET["name"];
  370. echo "<br>";
  371. echo $_GET["regno"];
  372. echo "<br>";
  373. echo $_GET["gender"];
  374. echo "<br>";
  375. echo $_GET["email"];
  376. echo "<br>";
  377. echo $_GET["mobno"];
  378. echo "<br>";
  379. echo $_GET["branch"];
  380. ?>
  381.  
  382.  
  383. </body>
  384. </html>
  385.  
  386. ========================================================================================================================================================================================================================================================================================
  387. top.html
  388.  
  389. <!DOCTYPE html>
  390. <html>
  391. <style>
  392. body {
  393. text-align:'center'
  394. }
  395. </style>
  396. <body>
  397. <p><font align=center color="#347642"><h1 align="center">Student Information</h1></font>
  398. <font color="#347642"><i><h3 align="center">Student Information</h3></i></font>
  399. </p>
  400. </body>
  401. </html>
  402.  
  403. Activity 9
  404. 13BCE0038
  405. PHP with Database connection:
  406.  
  407. HT.html
  408. <html>
  409. <body>
  410. <form action="db.php" method="post">
  411. Name: <input type="text" name="fname" />
  412. Age: <input type="text" name="age" />
  413. <input type="submit" />
  414. </form>
  415. </body>
  416. </html>
  417. Include.php
  418. <?php
  419. $username = "s
  420. cse
  421. ";
  422. $password = "
  423. scse
  424. ";
  425. $hostname = "localhost";
  426. //connection to the database
  427. $dbhandle = mysql_connect($hostname, $username, $password)
  428. or die("Unable to connect to MySQL");
  429. echo "Connected to MySQL<br>";
  430. ?>
  431. Db.php
  432. <?php
  433. require_once("incl
  434. ude.php");
  435. $a=$_POST['fname'];
  436. $b=$_POST['age'];
  437. //select a database to work with
  438. $selected = mysql_select_db("ramani",$dbhandle)
  439. or die("Could not select ramani");
  440. //execute the SQL query and return records
  441. //$abc=mysql_query("create table rajkumar
  442. (dept char(4))");
  443. $result1s = mysql_query("insert into raj values('sourav','25')");
  444. //$result1s = mysql_query("insert into raj values('$a','$b')");
  445. $result = mysql_query("SELECT name, age FROM raj");
  446. echo mysql_num_rows($result)."<br>";
  447. echo mysql_num_fie
  448. lds($result)."<br>";
  449. //fetch tha data from the database
  450. while ($row = mysql_fetch_array($result)) {
  451. echo "NAME:".$row{'name'}." AGE:".$row{'age'}."<br>";//display the
  452. results
  453. }
  454. //print_r(mysql_fetch_row($result));
  455. //print_r(mysql_fetch_assoc($resul
  456. t));
  457. //close the connection
  458. mysql_close($dbhandle);
  459. ?>
  460. HINT:
  461. To access the mysql
  462. mysql
  463. –
  464. u scse
  465. -
  466. p
  467.  
  468. ## DBMS WITH SQL
  469.  
  470. connect.php
  471.  
  472. <?
  473. $host="localhost"; // Host name.
  474. $db_user="root"; // MySQL username.
  475. $db_password=""; // MySQL password.
  476. $database="test"; // Database name.
  477. $link = mysql_connect($host,$db_user,$db_password);
  478. if (!$link) {
  479. die('Could not connect: ' . mysql_error());
  480. }
  481. else
  482. {
  483. echo "Mysql Connected Successfully";
  484. }
  485.  
  486. mysql_close($link);
  487.  
  488. Create a Index.html using ajax
  489. <html>
  490. <head>
  491. <script type="text/javascript">
  492. function checkmyconnect()
  493. {
  494. var xmlhttp;
  495. if (window.XMLHttpRequest)
  496. {// code for IE7+, Firefox, Chrome, Opera, Safari
  497. xmlhttp=new XMLHttpRequest();
  498. }
  499. else
  500. {// code for IE6, IE5
  501. xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  502. }
  503. xmlhttp.onreadystatechange=function()
  504. {
  505. if (xmlhttp.readyState==4 && xmlhttp.status==200)
  506. {
  507. document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  508. }
  509. }
  510. xmlhttp.open("GET","connect.php",true);
  511. xmlhttp.send();
  512. }
  513. </script>
  514. </head>
  515. <body>
  516. <h2>Let Connect to mysql in html file</h2>
  517. <div id="myDiv">No connection</div>
  518. <button type="button" önclick="checkmyconnect()">Check Mysql connection</button>
  519.  
  520. </body>
  521. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!