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

Script For Login, Logout and View Using PHP, MySQL and Bootstrap

-
Image
I am assuming here that you are familiar with HTML and CSS. I have commented the code with the necessary information in the major part of the code. So you can understand easily. I have also attached the source code so you can download it and use it. Let's start. Note: I have updating this article on my personal blog. The following are the points we will be learn in this article: Creating Database in phpmyadmin. Create connection with MySQL database. Insert, delete and view data from MySQL database. Some Bootstrap components. Sessions in PHP. Files and IDE: Registration Login Logout Welcome Admin_login View_users Db_conection Delete.php I am using PHPStorm for the coding and Bootstrap framework for front end development. Create Database: Create Tables: Create columns in Users table: Crate Admin Table: Create Admin Columns: Registration.php: <html>   <head lang= "en" >       <meta charset= "UTF-8
Read more

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 browser as they
Read more

Customize radio buttons and checkboxes with CSS sprites

-
Image
To replace a radio button or a checkbox with a sprite, you first need to create the sprite image. For this free tutorial, we use the following sprites: Create the HTML Once you’ve created your sprite images, you will need to create the HTML. Below you will find the HTML we created for this demo. If you need more information about this, consult the following article:  Customize radio buttons and checkboxes with only CSS Radio buttons HTML: <input type="checkbox" id="checkbox-default-1" name="checkbox-default" class="default"> <label for="checkbox-default-1">Checkbox 1</label> <input type="checkbox" id="checkbox-default-2" name="checkbox-default" class="default"> <label for="checkbox-default-2">Checkbox 2</label> <input type="checkbox" id="checkbox-default-3" name="checkbox-default" class="default&
Read more