The code that i used to create the functionality is below
<!DOCTYPE html>
<html>
<head>
<title>Dynamically Add and Delete Textbox using jQuery</title>
<meta charset='utf-8'>
<style>
#font-face{font-family: Lobster;src: url('Lobster.otf');}
body{width:750px;margin:0px auto;}
.space{margin-bottom: 4px;}
.txt{width:250px;border:1px solid #00BB64; height:30px;border-radius:3px;font-family: Lobster;font-size:20px;color:#00BB64;}
p{font-family: Lobster;font-size:35px; text-align:center;}
.but{width:250px;background:#00BB64;border:1px solid #00BB64;height:40px;border-radius:3px;color:white;margin-top:10px;}
</style>
<script src='js/jquery-1.9.1.min.js'></script>
</head>
<body>
<p>Dynamically Add and Delete Textbox using jQuery</p>
<div id="advice" style="width: 400px; height: auto;">
<form>
<div id="button_pro">
<div class='space' id='input_1'>
<table>
<tr>
<th> Name </th>
<th> Description </th>
<th> section </th>
</tr>
<tr>
<td><input id="input_1" type="text" name="val[]" class='left txt'/></td>
<td><input id="input_1" type="text" name="val[]" class='left txt'/></td>
<td><input id="input_1" type="text" name="val[]" class='left txt'/></td>
<td><img class="add right" src="images/add.png" /></td>
</tr>
</table>
</div>
</div>
<input type='submit' value='Submit' class='but'/>
</form>
</div>
<script>
$('document').ready(function(){
var id=2,txt_box;
$('#button_pro').on('click','.add',function(){
$(this).remove();
txt_box='<div class="space" id="input_'+id+'" ><table><tr><th> Name </th><th> Description </th><th> Section </th></tr> <tr><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><img class="remove" src="images/remove.png" /></td><td><img class="add right" src="images/add.png" /></td></tr></table></div>';
$("#button_pro").append(txt_box);
id++;
});
$('#button_pro').on('click','.remove',function(){
var parent=$(this).parent().prev().attr("id");
var parent_im=$(this).parent().attr("id");
$("#"+parent_im).slideUp('medium',function(){
$("#"+parent_im).remove();
if($('.add').length<1){
$("#"+parent).append('<img src="images/add.png" class="add right"/>');
}
});
});
});
</script>
</body>
</html>
The problem here is the plus image functionality works fine where as the minus image that is to remove the text boxes is not working.
When i remove the tag from the text box variable and add it before the tags in the text box variable it works properly.
I am not sure why the tag change affects the functionality of the remove function
I have modified you code and made it simpler. You can use the closest function to make things easy.
Here is the fiddle : http://jsfiddle.net/swaprks/4b5wdev2/
CSS:
#font-face{font-family: Lobster;src: url('Lobster.otf');}
body{width:750px;margin:0px auto;}
.space{margin-bottom: 4px;}
.txt{width:250px;border:1px solid #00BB64; height:30px;border-radius:3px;font-family: Lobster;font-size:20px;color:#00BB64;}
p{font-family: Lobster;font-size:35px; text-align:center;}
.but{width:250px;background:#00BB64;border:1px solid #00BB64;height:40px;border-radius:3px;color:white;margin-top:10px;}
JS:
$('document').ready(function(){
var id=2,txt_box;
$('#button_pro').on('click','.add',function(){
$(this).remove();
txt_box='<div class="space" id="input_'+id+'" ><table><tr><th> Name </th><th> Description </th><th> Section </th></tr> <tr><td><input id="name_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="desc_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="section_'+id+'" type="text" name="val[]" class="left txt"/></td><td><img class="remove" src="images/remove.png" /></td><td class="addTD"><img class="add right" src="images/add.png" /></td></tr></table></div>';
$("#button_pro").append(txt_box);
id++;
});
$('#button_pro').on('click','.remove',function(){
var parent = $(this).closest(".space");
var parentPrev = $(parent).prev().find(".addTD");
$(parent).slideUp('medium',function(){
$(parent).remove();
if($('.add').length < 1){
$(parentPrev).append('<img src="images/add.png" class="add right"/>');
}
});
});
});
HTML:
<p>Dynamically Add and Delete Textbox using jQuery</p>
<div id="advice" style="width: 400px; height: auto;">
<form>
<div id="button_pro">
<div class='space' id='input_1'>
<table>
<tr>
<th> Name </th>
<th> Description </th>
<th> section </th>
</tr>
<tr>
<td><input id="name_1" type="text" name="val[]" class='left txt'/></td>
<td><input id="desc_1" type="text" name="val[]" class='left txt'/></td>
<td><input id="section_1" type="text" name="val[]" class='left txt'/></td>
<td class="addTD"><img class="add right" src="images/add.png" /></td>
</tr>
</table>
</div>
</div>
<input type='submit' value='Submit' class='but'/>
</form>
</div>
See the below demo
http://jsfiddle.net/y7g9no9L/
Just add the following line in the .remove click function
$('#button_pro').on('click','.remove',function(){
$(this).parent().closest(".space").remove();
});
You can use data-* attributes for your labels and make sure you don't duplicate ids. The best way to have is to have ids as in data-* attrs so that they can have dupes.
$('document').ready(function(){
$('#button_pro').on('click','.add',function(){
var id=$('#button_pro > div.space').data('id')*1+1;
$(this).remove();
var txt_box='<div class="space" data-id="'+id+'" id="input_'+id+'" ><table><tr><th> Name </th><th> Description </th><th> Section </th></tr> <tr><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><img class="remove" src="images/remove.png" /></td><td><img class="add right" src="images/add.png" /></td></tr></table></div>';
$("#button_pro").append(txt_box);
});
$('#button_pro').on('click','.remove',function(){
var id = $(this).closest('div.space').prev();
$(this).closest('#button_pro > div.space').slideUp('medium',function(){
if($('div.space').length>1){
if(this == $('#button_pro > div.space:last')[0])
id.find('td').last().append('<img src="images/add.png" class="add right"/>');
$(this).remove();
}
});
});
});
#font-face{font-family: Lobster;src: url('Lobster.otf');}
body{width:750px;margin:0px auto;}
.space{margin-bottom: 4px;}
.txt{width:250px;border:1px solid #00BB64; height:30px;border-radius:3px;font-family: Lobster;font-size:20px;color:#00BB64;}
p{font-family: Lobster;font-size:35px; text-align:center;}
.but{width:250px;background:#00BB64;border:1px solid #00BB64;height:40px;border-radius:3px;color:white;margin-top:10px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Dynamically Add and Delete Textbox using jQuery</p>
<div id="advice" style="width: 400px; height: auto;">
<form>
<div id="button_pro">
<div class='space' data-id='1'>
<table>
<tr>
<th> Name </th>
<th> Description </th>
<th> section </th>
</tr>
<tr>
<td><input id="input_1" type="text" name="val[]" class='left txt'/></td>
<td><input id="input_1" type="text" name="val[]" class='left txt'/></td>
<td><input id="input_1" type="text" name="val[]" class='left txt'/></td>
<td><img class="add right" src="images/add.png" /></td>
</tr>
</table>
</div>
</div>
<input type='submit' value='Submit' class='but'/>
</form>
</div>
Create index.html and add jQuery libary, textbox and an image(addition).
Html:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Textbox addition and Deletion using jQuery</title>
<meta charset='utf-8'>
<script src='js/jquery-1.9.1.min.js'></script>
</head>
<body>
<p>Dynamically Add and Delete Textbox using jQuery</p>
<div id="advice" style="width: 400px; height: auto;margin:0px auto;">
<form>
<div id="button_pro">
<div class='space' id='input_1'>
<input id="input_1" type="text" name="val[]" class='left txt'/>
<img src="images/add.png" />
</div>
</div>
<input type='submit' value='Kiss Me!' class='but'/>
</form>
</div>
</body>
Now add below css styles in the head section to add a beauty.
<style>
#font-face{font-family: Lobster;src: url('Lobster.otf');}
body{width:750px;margin:0px auto;}
.space{margin-bottom: 4px;}
.txt{width:250px;border:1px solid #00BB64; height:30px;border-radius:3px;font-family: Lobster;font-size:20px;color:#00BB64;}
p{font-family: Lobster;font-size:35px; text-align:center;}
.but{width:250px;background:#00BB64;border:1px solid #00BB64;height:40px;border-radius:3px;color:white;margin-top:10px;}
</style>
Now we come into party of jQuery. First task is when we clicked on plus image it will dynamically add textboxes into the form.
var id=2,txt_box;
$('#button_pro').on('click','.add',function(){
$(this).remove();
txt_box='<div class="space" id="input_'+id+'" ><input type="text" name="val[]" class="left txt"/><img src="images/remove.png" class="remove"/><img class="add right" src="images/add.png" /></div>';
$("#button_pro").append(txt_box);
id++;
});
See the Demo
DEMO 1
Please have a look demo to add and remove dynamic input field:
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
$('#addScnt').on('click', function() {
$('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> Remove</p>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt').on('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
* { font-family:Arial; }
h2 { padding:0 0 5px 5px; }
h2 a { color: #224f99; }
a { color:#999; text-decoration: none; }
a:hover { color:#802727; }
p { padding:0 0 5px 0; }
input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Add Another Input Box</h2>
<div id="p_scents">
<p>
<label for="p_scnts">
<input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /> </label>
</p>
</div>
Thanks!
Related
I want to display image in second column when relevant checkbox is selected in the first column.The Following is the code I've developed.Basically when I hover over the links I get an image tooltip.I wanted to know whether it will be possible to display the hover image in the second column
HTML:
<TABLE CELLPADDING=3 CELLSPACING=10 BORDER=2 BGCOLOR="#FFFFCC">
<TR>
<TD ALIGN=CENTER COLSPAN=5 BGCOLOR="#000099"><FONT SIZE="+1"
COLOR="#00FFFF">LINKS </FONT><I><FONT
COLOR="#00FFFF"><B> </B></I></FONT></TD>
</TR>
<TR>
<TD ROWSPAN=3><FONT SIZE="-2" FACE="ARIAL"><B><span>
<div>
<input id="radioDefault_3" name="Field3" type="hidden" value=""/>
<a href="#" class="tooltip" style=" color:black;line-height:25px; font-size:16px;" target="_self" >
<input id="Field3_0" name="Field3" type="radio" class="field radio" value="Link 1" tabindex="1" onchange="handleInput(this);" onmouseup="handleInput(this);" checked="checked" />
lINK 1
<span style=" background-color:white;margin-left:100px;">
<img class="cover" src="https://www.google.com/search?q=GOOGLE+IMAGES&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiD8ZWh5vDTAhUINiYKHWvKDV8Q_AUICigB&biw=1366&bih=662#tbm=isch&q=rectangle&imgrc=A2WZlqcIvTWBzM:" style="float:center; background-color:#00529b;" />
</span>
</a>
</div>
</span></A>,
<span>
<div>
<a href="#" class="tooltip" style="color:black;line-height:25px; font-size:16px;">
<input id="Field3_1" name="Field3" type="radio" class="field radio" value="Link 2" tabindex="2" onchange="handleInput(this);" onmouseup="handleInput(this);" required />
LINK 2
<span style="margin-left:100px; margin-top:-50px;">
<center><img class="cover" src="https://www.google.com/search?q=GOOGLE+IMAGES&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiD8ZWh5vDTAhUINiYKHWvKDV8Q_AUICigB&biw=1366&bih=662#imgrc=TsZQwEJjTUwQKM:" style="float:center; " width=100% height=100% /></center>
</span>
</a> </A>,
<BR><span>
<div>
<a href="#" class="tooltip" style="color:black;line-height:25px; font-size:16px;">
<input id="Field3_2" name="Field3" type="radio" class="field radio" value="Link 3" tabindex="3" onchange="handleInput(this);" onmouseup="handleInput(this);" required />
LINK 3
<span style="margin-left:50px;margin-top:-80px;">
<center><img class="cover" src="https://www.google.com/search?q=GOOGLE+IMAGES&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiD8ZWh5vDTAhUINiYKHWvKDV8Q_AUICigB&biw=1366&bih=662#imgrc=TsZQwEJjTUwQKM:" style="float:center;"width=100% height=100% /></center>
</span>
</a>
</div>
</span></A></B></FONT></TD>
<TD ROWSPAN=3><IMG SRC="https://www.google.com/search?q=GOOGLE+IMAGES&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiD8ZWh5vDTAhUINiYKHWvKDV8Q_AUICigB&biw=1366&bih=662#imgrc=TsZQwEJjTUwQKM:" VALIGN=MIDDLE ></TD>
</TR>
</TABLE>
</CENTER>
CSS:
<style>
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:-30px; margin-left:1000px;
width:300px; line-height:16px;
}
a.tooltip:hover span{
display:inline; position:absolute; color:#00529b;
border:1px solid #DCA; }
a.tooltip span
{
border-radius:4px;
box-shadow: 5px 5px 8px #CCC;
}
tr.noBorder td {
border: 0;
}
</style>
You can nest 2 div's within 1 div to create the two columns in css.
Please find a small example
Sample Example
$(document).ready(function() {
$('#checkbox1').change(function() {
if($(this).prop('checked')) {
$('#img1').css('display', 'block');
}else {
$('#img1').css('display', 'none');
}
});
});
I have two problems:
1- I need to enter more than one question in ContentQue field. First click on "Add New Question" button then enter a question, click OK, show the data, then again click on "Add New Question" button, but in this time the input is not shown?
2- I want to force the user to choose one module from select.
Thanks in advanced
<head>
<meta charset="utf-8">
<title>Add New Item</title>
<style>
#myquelist
{
overflow-y:scroll;
}
// To force the user enter data
.btn
{
background-color:#336;
color:#CC6;
border-radius:10px;
padding:10px 10px 10px 10px;
margin:10px 10px 10px 10px;
opacity:0.5;
}
.txt
{
background-color:#09F;
color:#009;
border-radius:10px;
}
.err
{
color:#F00;
}
</style>
<!-- Java Script-->
<script src="jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnquestion').click(function () {
$('#myquelist').hide('fast');
$('#Type3').show('fast');
});
$('#btnOK').click(function () {
var a=$('#ContentQue').val();
var b=$('#qlist').val();
var c=b+"<br>"+a;
$('#qlist').val(c);
$('#ContentQue').val('');
document.getElementById("Type3").style.height="150px";
document.getElementById("Type3").innerHTML=c;
$('#myquelist').show('fast');
});
$('#myquelist').hide('fast');
$('#Type3').hide('fast');
$('#Type2').hide('fast');
$('#ExamType1').click(function () {
$('#Type2').hide('fast');
$('#Type3').hide('fast');
$('#Type1').show('fast');
});
$('#ExamType2').click(function () {
$('#Type1').hide('fast');
$('#Type3').hide('fast');
$('#Type2').show('fast');
});
$('#ExamType3').click(function () {
$('#Type1').hide('fast');
$('#Type2').hide('fast');
alert("A");
//$('#myquelist').show('fast');
$('#Type3').show('fast');
});
// To force the user enter data in text box
$(" :text" ).addClass("txt");
$("p").hide();
$("#PageBody input:text select").blur(function()
{
if(!$(this).val())
{
$(this).parent("div").children("p").show();
$(this).parent("div").children("p").addClass("err");
}
else
{
$(this).parent("div").children("p").hide();
}
});
});
</script>
</head>
<body id="PageBody">
<header><h2>New Exam</h2></header>
<form id="form1">
<table width="100%" border="2" cellspacing="5px" cellpadding="5px">
<tr>
<th><b>Assignment Title :
<td><div><input type="text" name="ExamTitle" autofocus ><p>Please Exam Title</p></div></td>
</tr>
<tr>
<th><b>Exam Type</b></th>
<td>
<input type="radio" name="ExamType" value="File" id="ExamType1" checked="checked">File
<input type="radio" name="ExamType" value="Text" id="ExamType2">Text
<input type="radio" name="ExamType" value="Questions" id="ExamType3">Questions
<div id="Type1">
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<div id="Type2">
<input type="text" name="ContentText" class="hidden" autofocus>
</div>
<div id="myquelist">
<button id="btnquestion" type="button" name="AddNew" class="hidden">Add New Question</button>
</div>
<div id="Type3">
<input type="text" id="ContentQue" name="ContentQue" >
<button type="button" id="btnOK" name="OK" >OK</button>
</div>
<input type="hidden" id="qlist" name="qlist">
</td>
</tr>
<tr>
<th><b>Module :</b></th>
<td>
<select id="Modl" name="Modl" >
<option selected="selected" disabled="disabled" >Choose Module</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</td>
</tr>
<!-- Other inputs -->
<tr>
<td align="center" colspan="2">
<input type="submit" name="SaveBtn" style="width:95px;height:50px"; value="Save" />
</td>
</tr>
</table>
</form>
<?php
$qlist = $_POST["qlist"];
?>
</body>
</html>
This needed a fair amount of work. I had to clean up a few HTML issues and change the logic some.
First, much easier to use an Array to store the various questions. I would pass the array to your form handler, but I populated the qlist as you were shooting for.
Second, to show the questions, I used a List. Easier to work with later.
Third, I wrapped the different parts so they are easier to hide/show.
Fourth, I added in verification that a user entered a question when clicking ok and when they submit the form, to ensure they selected a Module.
HTML
<header>
<h2>New Exam</h2>
</header>
<form id="form1">
<table width="100%" border="2" cellspacing="5px" cellpadding="5px">
<tr>
<th width="135px"><b>Assignment Title : </b></th>
<td>
<div>
<input type="text" name="ExamTitle" autofocus />
<p>Please Exam Title</p>
</div>
</td>
</tr>
<tr>
<th height="80px"><b>Exam Type :</b></th>
<td valign="top">
<input type="radio" name="ExamType" value="File" id="ExamType1" checked="checked" />File
<input type="radio" name="ExamType" value="Text" id="ExamType2" />Text
<input type="radio" name="ExamType" value="Questions" id="ExamType3" />Questions
<div id="Type1">
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<div id="Type2">
<input type="text" name="ContentText" class="hidden" autofocus>
</div>
<div id="Type3">
<div id="addNew">
<button id="btnquestion" type="button" name="AddNew" class="hidden">Add New Question</button>
</div>
<div id="addQuestion" style="display: none;">
<input type="text" id="ContentQue" name="ContentQue">
<button type="button" id="btnOK" name="OK">OK</button>
</div>
<div id="showQuestions" style="display: none;">
</div>
<input type="hidden" id="qlist" name="qlist">
</div>
</td>
</tr>
<tr>
<th><b>Module :</b></th>
<td>
<select id="Modl" name="Modl">
<option selected="selected" disabled="disabled">Choose Module</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</td>
</tr>
<!-- Other inputs -->
<tr>
<td align="center" colspan="2">
<input type="submit" name="SaveBtn" style="width:95px;height:50px;" value="Save" />
</td>
</tr>
</table>
</form>
CSS
.btn {
background-color: #336;
color: #CC6;
border-radius: 10px;
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;
opacity: 0.5;
}
.txt {
background-color: #09F;
color: #009;
border-radius: 10px;
}
.err {
color: #F00;
}
#Type3 ul {
list-style: none;
margin: 0;
padding: 0;
max-height: 150px;
overflow: auto;
}
#Type3 ul li {
list-style: none;
}
JQUERY
// Set Globals
var ql = [];
$(document).ready(function() {
// Set View State
$("#Type1").show();
$("#Type2").hide();
$("#Type3").hide();
// Set Action Functions
$('#btnquestion').click(function() {
$('#addNew').hide();
$('#addQuestion').show();
$("#ContentQue").focus();
});
$('#btnOK').click(function() {
var q;
q = $('#ContentQue').val();
if (q == "") {
alert("Please enter a Question.");
$("#ContentQue").focus();
return false;
}
ql.push(q);
$('#qlist').val(ql.join(","));
$('#ContentQue').val('');
if (ql.length > 0) {
var qtext = $("<ul>");
$.each(ql, function(i, v) {
qtext.append("<li id='que-" + i + "'>" + v + "</li>");
});
$("#showQuestions").html(qtext);
}
$("#addQuestion").hide();
$('#showQuestions').show();
$("#addNew").show();
});
$("#form1 input[name='ExamType']").click(function() {
var pick = $(this).val();
switch (pick) {
case "File":
$("#Type1").show();
$("#Type2").hide();
$("#Type3").hide();
break;
case "Text":
$("#Type1").hide();
$("#Type2").show();
$("#Type3").hide();
break;
case "Questions":
$("#Type1").hide();
$("#Type2").hide();
$("#Type3").show();
break;
}
});
});
$("#form1").submit(function(e){
e.preventDefault();
if($("#Modl option").eq(0).is(":selected")){
alert("Please select a Module.");
return false;
}
return true;
});
Working Example: http://jsfiddle.net/Twisty/ax2zds1o/6/
Things you may want to consider:
A button to remove a question from the list
How many questions do you want to allow? 100? 200? 1000? How will you pass a large number of questions?
Allowing the user to arrange the order of the questions in the list before submitting
I have to create a form which can dynamically adds rows after clicking a button, below is the code. So basically I want to clone the row with id="ADD" after clicking the btAdd button in the next row.
I don't know what to add inside the append function? I have tried a few things but its not working. Thanks in advance.
$(document).ready(function(){
$("#btAdd").click(function(){
$("#ADD").append(" ");
});
});
</script>
</head>
<body>
<h1></h1>
<div id = "myDiv">
<form name="form1">
<table border='1' width='700' align="center" cellpadding='5' cellspacing='10'>
<tr>
<th>Place configuration here</th>
</tr>
<tr>
<td>Server Url: <input type="text" name="surl" id="surl"></td>
</tr>
<tr>
<td>
Filter Name: <input type="text" name="fname"id="fname">
Filter Type
<select name="operation">
<option value="text">Text</option>
<option value = "List">List</option>
</select>
</td>
</tr>
<tr id="ADD">
<td>
Filter Options: <input type="text" name="foptions"id="foptions">
<input type="button" name="ADDb" value="+" id="btAdd">
</td>
</tr>
<tr>
<td>
Filter Label: <input type="button" name="filterb" id="filterb" value="Add Filter" onclick="showData();">
</td>
</tr>
<tr>
<td><input type="button" name="submitb" id="submitb" value="Submit"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
try it:
$("#btAdd").click(function(){
$("#ADD").clone().removeAttr("id").insertAfter("#ADD");
});
Try this
$("#btAdd").click(function(){
$("#ADD").clone().attr("id","ADD_"+$("#table1 tbody").children("tr").length).insertAfter("#ADD");
});
where table1 is the table id.
<!DOCTYPE HTML>
<html>
<head>
<style>
#myDiv { margin: 0 auto; width: 800px; }
.tr { clear: both; border: 1px solid #ccc; margin: 0 0 10px; padding: 5px; overflow: hidden; }
.tr .label { float: left; width: 115px; }
.tr .inputs { float: left; width: 230px; }
.tr .btns { float: left; width: 100px; }
.tr ul { margin: 0; padding: 0; }
.tr li { list-style: none; }
</style>
</head>
<body>
<div id = "myDiv">
<form name="form1">
<div class="tr">
Place configuration here
</div>
<div class="tr">
Server Url:
<input type="text" name="surl" id="surl">
</div>
<div class="tr">
Filter Name:
<input type="text" name="fname" id="fname">
Filter Type
<select name="operation">
<option value="text">Text</option>
<option value = "List">List</option>
</select>
</div>
<div class="tr" id="ADD">
<div class="label">Filter Options:</div>
<ul class="inputs">
<li>
<input type="text" name="foptions[]"> <input type="button" name="ADDb" value="+" id="btAdd">
</li>
</ul>
</div>
<div class="tr">
Filter Label:
<input type="button" name="filterb" id="filterb" value="Add Filter" onclick="showData();">
</div>
<div class="tr">
<input type="button" name="submitb" id="submitb" value="Submit">
</div>
</form>
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
var S = '<li><input type="text" name="foptions[]"> <input type="button" name="rm" value="-" /></li>',
$ul = $('#ADD ul'), $add = $('#ADD');
$add.on('click.add', '#btAdd', function() {
$ul.append(S);
});
$add.on('click.rm', '[name=rm]', function() {
$(this).closest('li').remove();
});
});
</script>
</body>
</html>
I have a signup form in which i have 2 drop downs one is category and one is Gender. i have a validation.js which validates my signup form on not selecting any option in the drop down box. the validation for gender is working fine. But for category even though i select a category it displaying an error and its stopping the submission. This was working fine before after i changed my design that is CSS this problem is occurring.
This is my Signup.jsp:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Registration Form</title>
<link href="CSS/Signup.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/State.js"></script>
<script type="text/javascript" src="js/Validate.js"></script>
</head>
<script type="text/javascript">
function ageCount() {
var date1 = new Date();
var dob = document.getElementById("SnapHost_Calendar").value;
var date2 = new Date(dob);
var pattern = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
//Regex to validate date format (MM/dd/yyyy)
if (pattern.test(dob)) {
var y1 = date1.getFullYear();
//getting current year
var y2 = date2.getFullYear();
//getting dob year
var age = y1 - y2;
//calculating age
document.getElementById("txtAge").value = age;
doucment.getElementById("txtAge").focus();
return true;
}
}
EnableSubmit = function(val) {
var sbmt = document.getElementById("submit");
if (val.checked == true) {
sbmt.disabled = false;
} else {
sbmt.disabled = true;
}
};
</script>
<script type="text/javascript">
function capitalize(el) {
var s = el.value;
el.value = s.substring(0, 1).toUpperCase() + s.substring(1);
}
</script>
<body onLoad="addList()">
<jsp:include page="Header.jsp"></jsp:include><br />
<div id="signuphead">
<h1>Welcome to registration page</h1>
<br /> <br />
<h3>Enter your personal details here</h3>
</div>
<form action="RegisterServlet" method="post" name="Register"
id="signup" onSubmit="return validate()">
<div id="signuptable">
<table>
<tr>
<td>First Name* :</td>
<td><input type="text" name="txtFname" id="txtFname"
maxlength="30" onKeyup="capitalize(this)" /><br /> <span
id="errorFirstNameMissing" style="display: none;"><font
color="red">*Please provide your first name.</font></span> <span
id="errorFirstNameInValid" style="display: none;"><font
color="red">*Please provide a valid first name.</font></span></td>
</tr>
<tr>
<td>Last Name* :</td>
<td><input type="text" name="txtLname" id="txtLname"
maxlength="30" onKeyup="capitalize(this)" /><br /> <span
id="errorLastNameMissing" style="display: none;"><font
color="red">*Please provide your Last name.</font></span> <span
id="errorLastNameInValid" style="display: none;"><font
color="red">*Please provide a valid Last name.</font></span></td>
</tr>
<tr>
<td>Gender* :</td>
<td><select name="txtGender" id="txtGender">
<option value="unknown">Select your Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select><br /> <span id="errorMissingGender" style="display: none;"><font
color="red">*Please select a Gender.</font></span></td>
</tr>
<tr>
<td>Category* :</td>
<td><select name="txtCategory" id="txtCategory">
<option value="unknown">Select your Category</option>
<option value="Affiliate">Affiliate</option>
<option value="Client">Client</option>
</select><br /> <span id="errorMissingCategory" style="display: none;"><font
color="red">*Please select a Category.</font></span></td>
</tr>
<tr>
<td><script type="text/javascript" src="js/Calendar.js"></script>
</td>
</tr>
<tr>
<td>Age :</td>
<td><input type=text name=txtAge id="txtAge" readonly
style="width: 20px; background-color: #D0D0D0; border: none" />yrs.</td>
</tr>
<tr>
<td>Address* :</td>
<td><textarea rows="5" name="txtAddr" id="txtAddr" cols="30"></textarea><br />
<span id="errorMissingAddress" style="display: none;"><font
color="red">*Please provide a valid Address.</font></span></td>
</tr>
<tr>
<td>State* :</td>
<td><select
onchange="print_city('txtCity',this.selectedIndex);" id="txtState"
name="txtState"></select><br /> <span id="errorMissingState"
style="display: none;"><font color="red">*Please
select a state.</font></span></td>
</tr>
<tr>
<td>City* :</td>
<td><select name="txtCity" id="txtCity"></select> <script
type="text/javascript">
print_state("txtState");
</script><br /> <span id="errorMissingCity" style="display: none;"><font
color="red">*Please select a city.</font></span></td>
</tr>
<tr>
<td>Pincode* :</td>
<td><input type="text" name="txtPin" id="txtPin" /><br /> <span
id="errorMissingPinCode" style="display: none;"><font
color="red">*Please provide your Pincode.</font></span> <span
id="errorPinCodeInvalid" style="display: none;"><font
color="red">*Please provide a valid Pincode.</font></span></td>
</tr>
<tr>
<td>Choose your UserName* :</td>
<td><script type="text/javascript" src="jquery.js"></script> <input
type="text" name="txtUsername" id="username">#gmail.com
<div id="status"></div> <script type="text/javascript"
src="js/check_user.js"></script> <span id="errorMissingUserName"
style="display: none;"><font color="red">*Please
provide your username.</font></span> <span id="errorUserNameInvalid"
style="display: none;"><font color="red">*Please
provide a valid username.Username can contain only alphabets
numbers and periods</font></span> <span class="status"></span>
</tr>
<tr>
<td>Alternate e-Mail* :</td>
<td><input type="text" name="txtEmail" id="txtEmail" /><br />
<span id="errorMissingEmail" style="display: none;"><font
color="red">*Please provide your emailId.</font></span> <span
id="errorEmailInvalid" style="display: none;"><font
color="red">*Please provide a valid emailId.</font></span></td>
</tr>
<tr>
<td>Contact Number :</td>
<td><input type="text" name="txtStd" id="txtStd" maxlength="6"
style="width: 40px" />-<input type="text" name="txtPhone"
id="txtPhone" maxlength="8" /><br /> <span
id="errorStdCodeInvalid" style="visibility: hidden;"><font
color="red">*Please provide a valid std code.</font></span> <span
id="errorPhoneNoInvalid" style="visibility: hidden;"><font
color="red">*Please provide a valid contact no.</font></span></td>
</tr>
<tr>
<td>Mobile Number* :</td>
<td>+91-<input type="text" name="txtMobile" id="txtMobile"
maxlength="10" /><br /> <span id="errorMissingMobileNo"
style="display: none;"><font color="red">*Please
provide your mobile number.</font></span> <span id="errorMobileNoInvalid"
style="display: none;"><font color="red">*Please
provide a valid mobile number.</font></span>
</td>
</tr>
</table>
<br />
<p>
<font color="red">Note: All the fields marked with * are
mandatory.</font>
</p>
<p>
<input type="checkbox" name="chkAgree" onclick="EnableSubmit(this)" /><font
color="green"> I here by declare that the above data entered
by me is true to my knowledge.</font>
</p>
<br />
<div class="style2">
<table>
<tr>
<td><button type="submit" id="submit" disabled
style="width: 80px; height: 40px">Submit</button></td>
<td><div class="divider"></div></td>
<td><button type="reset" style="width: 80px; height: 40px"
onClick="resetForm()">Reset</button></td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
This is my Validate.js:
function validate() {
var valid = true;
var validationMessage = 'Please correct the following errors:\r\n';
document.getElementById('errorMissingCategory').style.display = 'none';
document.getElementById('errorMissingGender').style.display = 'none';
if (document.getElementById('txtGender').value == 'unknown') {
validationMessage = validationMessage
+ ' - Please select a gender\r\n';
document.getElementById('errorMissingGender').style.display = '';
valid = false;
} else {
document.getElementById('errorMissingGender').style.display = 'none';
}
if (document.getElementById('txtCategory').value == 'unknown') {
validationMessage = validationMessage
+ ' - Please select a category\r\n';
document.getElementById('errorMissingCategory').style.display = '';
valid = false;
} else {
document.getElementById('errorMissingCategory').style.display = 'none';
}
if (valid == false) {
alert(validationMessage);
}
return valid;
}
And this is my Signup.css:
#CHARSET "ISO-8859-1";
#signuphead {
color: #059BD8;
text-align: left;
width: 1000px;
color: #059BD8;
background-color: #E3F1F9;
border-style: groove;
}
#signup {
width: 1000px;
margin-left: auto;
margin-right: auto;
background-color: #E3F1F9;
}
#signuptable {
width: 1000px;
margin-left: auto;
margin-right: auto;
color: #059BD8;
border-style: groove;
}
#note {
width: 1000px;
margin-left: auto;
margin-right: auto;
background-color: #E3F1F9;
}
#thanks {
width: 956px;
height: auto;
}
I am confused because i dono whether my js has a problem as previous project with another CSS works fine, or it is a problem with the css itself
Kindly help in fixing this. Thanks in advance.
The sample code you attached is working. Maybe you have another element which contains the same ID as the Category select.
The error in your code is missing the closing </div> tag before form tag closing.
I have updated the code. just see once.
Plucker
I have a page with an "add item" button. When this button is clicked, an ajax call is made and a table is returned with all the information from the database based on the sku entered. (Dummy data is there now for testing.) If the button is only clicked once, there is no trouble incrementing or decrementing the qty value. If the button is clicked two, or more, times, if you click the increment button on the second table it will increase the value in the first table.
I have added a counter that gives a unique number to each table created. I think what I want to do is figure out how to determine the counter number for the specific table that is being incremented and pass it to the javascript function so it works with that specific entry.
Here is the code with the button, ajax call, and javascript:
<script type="text/javascript">
var count = 1;
$('#items').live('pageinit',function(event){
$('#additem').click(function () {
//alert("add clicked");
var request = $.ajax({
url: "http://www.furnguy.com/app-pages/additem.php",
type: "POST",
data: {COUNTER : count},
dataType: "html"
});
request.done(function(html) {
//alert("here");
if (html != '') {
$('#salesitems').append(html).trigger('create');
}
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
count++;
});
});
function deleteItem() {
$('table').click(function(){
$(this).parent().remove();
});
};
function increaseQty() {
var currentVal = parseInt($("#qty").val());
if (currentVal != NaN) {
$("#qty").val(currentVal + 1);
}
};
function decreaseQty() {
var currentVal = parseInt($("#qty").val());
if (currentVal != NaN) {
$("#qty").val(currentVal - 1);
}
};
</script>
</head>
<body>
<div data-role="page" id="items" data-title="Sales Entry - Items">
<div data-role="header">
<h1>Sales Entry</h1>
</div><!-- /header -->
<div data-role="content">
<div id="main_nav">
<span style="float: left; display: inline; width: 100px;">
<label>Enter SKU</label>
</span>
<span style="float: left; display: inline; width: 250px;">
<input type="text" name="initialsku" id ="initialsku" />
</span>
<br /><br /><br />
<button id="additem" data-icon="plus" data-inline="true" data-mini="true" data-theme="b">Add Item</button>
<!-- <button id="removeitem" data-icon="minus" data-inline="true" data-mini="true" data-theme="b">Remove Item</button> -->
<div id="salesitems"></div>
</div>
</div><!-- /content -->
</body>
</html>
here is the page being called by the ajax:
<?php
$counter = $_POST['COUNTER'];
?>
<body>
<div data-role="fieldcontain">
<div class="addItems">
<table id="myTable" style="border-bottom: 1px solid black;">
<tr>
<td style="width: 50px;">
<label for="qty">Qty:</label>
</td>
<td style="width: 75px;">
<input type="button" value="+" id="increase" onclick="increaseQty();" style="float: left; display: inline;" />
<input type="button" value="-" id="decrease" onclick="decreaseQty();" style="float: left; display: inline;" />
<input type="text" name="qty" id="qty" value="1" style="float: left; display: inline;" />
</td>
<td style="width: 50px;">
<label for="sku">SKU:</label>
</td>
<td style="width: 350px;">
<input type="text" name="sku" id="sku" readonly="readonly" value="123526874256" />
</td>
<td style="width: 50px;">
<label for="retail">Retail:</label>
</td>
<td style="width: 250px;">
<input type="text" name="retail" id="retail" readonly="readonly" value="$1599.99" />
</td>
<td id="tableNumber">
<?php echo $counter; ?>
</td>
</tr>
<tr>
<td style="width: 50px;">
<label for="desc">Desc:</label>
</td>
<td colspan="5">
<input type="text" name="desc" id="desc" readonly="readonly" value="This is a really big couch." />
</td>
<td>
<input type="button" value="X" onclick="deleteItem();" />
</td>
</tr>
</table>
</div>
</div>
Anyone have suggestions about this? I would really appreciate the help as I have been working on this for a couple days now.
Thanks in advance!
Every time you click the button, you are inserting a new table with a #qty input. When you later try to increase quantity, jQuery just finds the first #qty in the dom: your first table.
You should probably set a unique id on your qty input, e.g.:
<input type="button" value="+" id="increase" onclick="increaseQty('qty_<?php echo $_POST['INITIALSKU']; ?>');" style="float: left; display: inline;" />
<input type="button" value="-" id="decrease" onclick="decreaseQty('qty_<?php echo $_POST['INITIALSKU']; ?>');" style="float: left; display: inline;" />
<input type="text" name="qty" id="qty_<?php echo $_POST['INITIALSKU']; ?>" value="1" style="float: left; display: inline;" />
and then rewrite the increase/decrease functions to take the id of the field to modify. I don't actually speak PHP but you get the idea