[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 835
  • Last Modified:

How to add dynamic element to DIV using Jquery or Ajax

HI,
       I am having requirement to add textbox radio button and input button dynamically in page. Text box is to add email radio to select primary email and button to delete email row.  By clicking on Add new button a new row should be added.
        All this I have to do without submitting form. So have to use jquery or Ajax.
Please help.
0
pankajrathod84
Asked:
pankajrathod84
1 Solution
 
Gurvinder Pal SinghCommented:
You can call the following function at button click

function addElement() {
  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById('theValue').value -1)+ 2;
  numi.value = num;
  var newdiv = document.createElement('div');
  var divIdName = 'my'+num+'Div';
  newdiv.setAttribute('id',divIdName);
  newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>';
  ni.appendChild(newdiv);
}

or

function addTextBox()
{
        var txtHolder = document.createElement('div');
        var txtBox = document.createElement('input');
        txtBox.id = "dynaTxtBox_"+txtCount;
        txtBox.className = "dynaTxtBox";
        txtBox.value = txtCount;// This line is not necessary
        txtHolder.appendChild(txtBox);
        document.getElementById('textBoxContainer').appendChild(txtHolder);
        txtCount++;
}
0
 
hieloCommented:
...ABC easy as 123 as simple as do ray me...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>hielo</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script language="JavaScript" type="text/javascript">

$(function(){
	$(".add").live("click",
		function(){
			if(2 == $("tr", $(this).closest("table")).size() )
			{
				$("input.delete").attr("disabled","");
			}
			$("input:text",$(this).closest("tr").clone(true).insertAfter( $(this).closest("tr") ) ).attr("value","");

		});

	$(".delete").live("click",
		function(){
			var t=$(this).closest("table");
			if( $("tr", t).size() > 2)
			{
				$(this).closest("tr").remove();
				if(2 == $("tr", t).size() )
				{
					$("input.delete").attr("disabled","disabled");
				}
			}
		});

});

</script>

	</head>
	<body>
	<table>
		<tr><th>Primary</th><th>Email</th></tr>
		<tr><td><input type='radio' name='primary' value='1'/></td><td><input type='text' name='email' value=''/> <input type='button' class='add' name='add' value='Add'/> <input type='button' class='delete' name='delete' value='Delete' disabled="disabled"/></td></tr>
	</table>
	</body>
</html>

Open in new window

0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now