Dynamically Add Input Fields To Form Using jQuery

-
As jQuery is so powerful and it is easy to learn, it attracts huge volume of web developers. In this post I will show how to dynamically create input fields in a web page. Well you can use the logic to create other elements dynamically in a webpage.
You can check the LIVE DEMO.
You can use my tutorial on inserting record in database using jQuery and php and combine it with this tutorial to create a wonderful dynamic form accepting inputs from user and insert it in your database. The code is pretty easy to interpret and understand how it works. Here is our code:
view sourceprint?
1<html>
2<head>
3<title> Dynamically create input fields- jQuery </title>
4<script  src="https://<span class="IL_AD" id="IL_AD7">ajax</span>.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>        // Calling jQuery Library hosted on Google's CDN
5<script type="text/javascript">
6$(function() {
7var addDiv = $('#addinput');
8var i = $('#addinput p').size() + 1;
9 
10$('#addNew').live('click', function() {
11$('<p><input type="text" id="p_new" size="40" name="p_new_' + i +'" value="" placeholder="I am New" /><a href="#" id="remNew">Remove</a> </p>').appendTo(addDiv);
12i++;
13 
14return false;
15});
16 
17$('#remNew').live('click', function() {
18if( i > 2 ) {
19$(this).parents('p').remove();
20i--;
21}
22return false;
23});
24});
25 
26</script>
27 
28</head>
29<body>
30<h2>Dynammically Add Another Input Box</h2>
31 
32<div id="addinput">
33<p>
34<<input type="text" id="p_new" size="20" name="p_new" value="" placeholder="Input Value" /><a href="#" id="addNew">Add</a>
35</p>
36</div>
37 
38</body>
39</html>
Note: You can dynamically add any other element using the same logic. So try your hands on some coding and get awesome results.

Comments

Post a Comment

Popular posts from this blog

Real-Time Web Interface to MQTT using Socket.io and Node.js

-
Image
Real-Time Web Interface to MQTT using Socket.io and Node.js First, all credit for this tutorial goes to  Robert Hekkers Blog .  I've altered it slightly to pick up newer versions of the various javascript libraries. If you've followed along with my  earlier post , you now have MQTT running on your Raspberry Pi, and an Arduino IoT client that can publish and subscribe to MQTT packets.  The next step is developing a real-time web interface that can control your MQTT network. Why Socket.io and Node.js? Web browsers typically operate by pulling data from a server when you click on a link.  Servers don't usually keep an open connection to the browsers it has serviced, so if some event happens on the server side, the server cannot push that event to your browser, unless you refresh the page. That's where Socket.io comes in handy.  Socket.io maintains an open connection between the server and the browser, which enables the server to push updates to the bro...
Read more

Insert session variable into MySQL database

-
<?php session_start(); if(!isset($_SESSION['Username'])){ header("Location: login.php"); } ?>   $eventname = $_POST [ 'eventname' ]; $Username = $_SESSION [ 'Username' ] $sql = mysql_query ( "INSERT INTO tbl_name VALUES('','$eventname','{$_SESSION['Username']}')" ); echo "You have been added to the event" ;
Read more

Insert CheckBox and Radio button Data in MySQL Database Using PHP

-
Image
MY-SQL Code CREATE DATABASE IF NOT EXISTS databasename; CREATE TABLE students( student_name varchar(255) NOT NULL, student_email varchar(255) NOT NULL, student_contact varchar(255) NOT NULL, student_address varchar(255) NOT NULL, stars varchar(25) NOT NULL, sports varchar(25) NOT NULL, gender text(25) NOT NULL, )     Download Code     LIVE DEMO   page- formelements.php   php code <?php $connection = mysqli_connect("localhost", "root", "","formdatainsert"); // Establishing Connection with Server //$db = mysql_select_db("colleges", $connection); // Selecting Database from Server if(isset($_POST['submit'])){ // Fetching variables of the form which travels in URL $name = $_POST['name']; $email = $_POST['email']; $contact = $_POST['contact']; $address = $_POST['address']; $sports=implode(' , ',$_POST['sports']); $star=implode(' , ',$_POST['star']); ...
Read more