Posts

Showing posts with the label JavaScript tutorial

Using javascript pass form variables to iframe src

Image
   Open PDF in Bootstrap Modal Window   This tutorial shows How to pass a JavaScript/jQuery variable to bootstrap modal view and sets it to iframe  src attribute. It passes value dynamically to src attribute of the iframe. When the user clicks a link, it opens the URL in a popup window. This  code shows the PDF in a Model without download option by hiding the toolbar.  To show PDF toolbar in modal, just add #toolbar=1   in the above script. index.php <!DOCTYPE html> <html lang= "en" > <head> <title>Bootstrap Model with PDF Example - coding-zon</title> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <link rel= "stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" > <script src= "https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim....
Post a Comment
Read more

Learn Javascript Events

Image
JavaScript Events Tutorial Table of Contents What is an Event? Different types of events onClick onLoad and onUnload onChange onFocus onBlur onMouseOver and onMouseOut Linking external JavaScript in the current HTML. return statement     JS Home What is an Event? In JavaScript, an event is an action performed by a user on a webpage. Different types of events: Onclick : It occurs when  user clicks  a mouse button . There are multiple types of mouse events such as DoubleClick, mouse over, drag and drop etc., We will learn all of them in details in later topics. Onload/OnUnload : when web page is loading, it is said to be onload event, when page closed then it is called as unload event.   Mouseover/hotspot : when mouse placed/moved on to image/region, this even occurs. Onfocus, Onblur : When a user selects/deselects, an input field in an HTML, these events are fired. Onsubmit:   When an HTML form is submitting.   Keypress : When key pressed on keybo...
Post a Comment
Read more

Javascript Form Validation

Image
  Form Validation using  JavaScript   It is very common for every developer, when developing forms, adding  front-end scripting for validating form data. So why to validate form data? It is necessary because, it will save the server time. JavaScript prevents sending invalid data to server.  When form submitted, control is given to JavaScript. JavaScript validates from data, in case of any errors it notifies the user and receive correct data from user. Ex: Password minimum length is 8 characters. If user enter a password that is  less than 8 char. It sends alert message to the user until he gives proper data. Once all the data validated, then JavaScript will send it to sever. This will not only save network resources from transmitting unnecessary data over the network, but also save server valuable time . Below examples shows you how JavaScript validates the form data.   JS Home    index.html <html> <head> <title> e-t...
Post a Comment
Read more

Learn Javascript Functions

Image
 Learn  Functions in JavaScript   JS Home JavaScript Functions What is Function? A function in JavaScript will perform some action. Once it is written, it can be called when ever it is needed. A function can be called directly in the script. It can be bound to some event. Why to use functions? A function contains code that will be executed by an event or by a call to the function. A function  can be called from anywhere within a page (or even from other pages if the function is written in an external .js file). Functions can be defined in both <head> or in the <body> section of a document. It could be wise to put functions in the <head> section. Function prevents  the browser from executing a script when the page loads .   How to write function?  A function starts with keyword function. It contains some name.  It may take argument/s if needed. Arguments are separated with comma. It may return the result as per the requ...
Post a Comment
Read more