increment the value of one td in a table

increment the value of one td in a table - javascript

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

Related

How to specify the action attribute to specific input buttons?

I have a form in which I have 2 buttons which increase and decrease the values entered by the user. The form has an action attribute which sends all the data of the form to another PHP file. When I try to press the button, it just directs me to that page instead of increasing the value. I want the buttons to increase the value and when the submit button is clicked, the page should send all the data to the other PHP page.
Thanks In Advance!!!
the buttons are images
I have not included the PHP code
My HTML Code Snippet-
<form method="POST" action="cart.php">
<div class="divStyle">
<img src="img.png" height="100px" width="150px">
<br>
<?php echo $_SESSION['book1']; ?>
<br><br>
<?php echo $price1; ?>
<br>
<div class="inputStyle">
<input type="image" src="minus.png" width="50px" height="50px" id="minus1" name="minus1"><input type="number" type="button" min="0" id="Q1" name="Q1" placeholder="Enter Quantity"><input type="image" src="plus.png" height="50px" width="50px" id="plus1" name="plus1">
<br>
</div>
</div>
<div class="divStyle">
<img src="img.png" height="100px" width="150px">
<br>
<?php echo $_SESSION['book2']; ?>
<br><br>
<?php echo $price2; ?>
<br>
<div class="inputStyle">
<input type="image" src="minus.png" width="50px" height="50px" id="minus2" name="minus2"><input type="number" type="button" min="0" id="Q2" name="Q2" placeholder="Enter Quantity"><input type="image" src="plus.png" width="50px" height = "50px" id="plus2" name="plus2">
<br>
</div>
</div>
<div class="divStyle">
<img src="img.png" height="100px" width="150px">
<br>
<?php echo $_SESSION['book3']; ?>
<br><br>
<?php echo $price3; ?>
<br>
<div class="inputStyle">
<input type="image" src="minus.png" width="50px" height="50px" id="minus3" name="minus3"><input type="number" type="button" min="0" id="Q3" name="Q3" placeholder="Enter Quantity"><input type="image" src="plus.png" width="50px" height = "50px" id="plus3" name="plus3">
<br>
</div>
</div>
<br>
<br>
<input type="submit" id="submit1" name="submit1">
</form>
My Javascript Code-
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#plus1').click( function() {
var counter = $('#Q1').val();
if (counter>= 0 && counter<5) {
counter++ ;
$('#Q1').val(counter);
}
});
});
$(document).ready(function(){
$('#plus2').click( function() {
var counter = $('#Q2').val();
if (counter>= 0 && counter<5) {
counter++ ;
$('#Q2').val(counter);
}
});
});
$(document).ready(function(){
$('#plus3').click( function() {
var counter = $('#Q3').val();
if (counter>= 0 && counter<5) {
counter++ ;
$('#Q3').val(counter);
}
});
});
$(document).ready(function(){
$('#minus1').click( function() {
var counter = $('#Q1').val();
if(counter>0 && counter<6){
counter-- ;
$('#Q1').val(counter);
}
});
});
$(document).ready(function(){
$('#minus2').click( function() {
var counter = $('#Q2').val();
if(counter>0 && counter<6){
counter-- ;
$('#Q2').val(counter);
}
});
});
$(document).ready(function(){
$('#minus3').click( function() {
var counter = $('#Q3').val();
if(counter>0 && counter<6){
counter-- ;
$('#Q3').val(counter);
}
});
});
</script>

It sounds like the form is being submitted early because your inputs are perhaps triggering the forms submit method.
We can simplify it a lot by using buttons to wrap our increment and decrement actions (attach your onclick event handlers to these buttons), and use a single input to hold the value for each form field (your event handlers will be changing the values on these inputs). You can disable or hide these inputs to ensure changes to form data must pass through your event handlers and can't be entered directly into the input.
button elements will try and submit it's parent form element by default, so you need to use type="button" to prevent that.
Then, when your data is ready to submit, provide a single button or input with type="submit".
This may also clean up the payload you receive in your php context as well, because the form action will try to wrap up every input and their values. It seems you're only interested in the $price, so let's make sure your form only encodes that data.
An example of the markup for each of your questions could look like this:
<input id="my-input-1" type="number" value="0" disabled>
<button type="button" name="increment-my-input-1">
<img src="/my-plus-button-image.png" />
</button>
<button type="button" name="decrement-my-input-1">
<img src="/my-minus-button-image.png" />
</button>

Maybe Like This:
$(document).ready(function(){
$('.cls-btn-plus-minus').click(function(){
var cur_val = $(this).parent().find('.cls-q').val();
cur_val = parseInt(cur_val)||0;
var role = $(this).attr('role');
if(role == 'plus'){
if(cur_val>= 0 && cur_val<5) {
cur_val++;
$(this).parent().find('.cls-q').val(cur_val);
}
}
if(role == 'minus'){
if(cur_val> 0 && cur_val<6) {
cur_val--;
$(this).parent().find('.cls-q').val(cur_val);
}
}
});
});
.cls-btn-plus-minus{
height:50px;
width:50px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="cart.php">
<div class="divStyle">
<!--img src="img.png" height="100px" width="150px"-->
<br>
book1
<br><br>
price1
<br>
<div class="inputStyle">
<img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/minus.png" role="minus">
<input type="number" class="cls-q" min="0" id="Q1" name="Q1" placeholder="Enter Quantity">
<img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/plus.png" role="plus">
<br>
</div>
</div>
<div class="divStyle">
<!--img src="img.png" height="100px" width="150px"-->
<br>
book2
<br><br>
price2
<br>
<div class="inputStyle">
<img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/minus.png" role="minus">
<input type="number" class="cls-q" min="0" id="Q2" name="Q2" placeholder="Enter Quantity">
<img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/plus.png" role="plus">
<br>
</div>
</div>
<div class="divStyle">
<!--img src="img.png" height="100px" width="150px"-->
<br>
book
<br><br>
price3
<br>
<div class="inputStyle">
<img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/minus.png" role="minus">
<input type="number" class="cls-q" min="0" id="Q3" name="Q3" placeholder="Enter Quantity">
<img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/plus.png" role="plus">
<br>
</div>
</div>
<br>
<br>
<input type="submit" id="submit1" name="submit1" value="GO">
</form>

How to show or hide the heading in php

Hi i need to hide the text once i click on add button and the form should be displayed.Here is my code.
<h2 style="font-size: 2em; margin-bottom: 0.75em; margin-left: -1%;">Specify Co-Owners for self occupied property</h2>
<div class="last" style="margin-right: 0; padding-right: 0;">
<div class="last" style="width: 710px;">
<p class="narrate quiet" style="margin-left: 2%; width: 100%;margin-bottom: 0.75em;"> <b>Would you like to add Co-owner? </b></p>
</div>
</div>
//Here is add button and go back button if i click in this add button form should be displayed else t should show the same text.//
<div class="span-12 last mt10" style="margin-top:-3%;margin-left:2%;">
<a class="large awesome oranges" >Add a property Co-owner</a>
</div>
<div class="span-12 last mt10" style="margin-top:-3%;margin-left:51%;">
<a class="large awesome orange" href="property.php">Go Back </a>
</div>
<p>You haven't added any Co-owners Yet.</p>
//My form starts from here//
<h2>Owner Property details</h2>
<input type='hidden' value="<?php echo $username; ?>" name='email'>
<p><label for="name_coowner">Coowner Name</label> <input id="name_coowner" type="text" name="name_coowner" /></p>
<p><label for="pan_coowner">PAN Of Coowner</label> <input id="pan_coowner" type="text" name="pan_coowner" /></p>
If i open the page iam getting this form but in this Owner Property details should be shown only when i click on add a property owner.Remaining all other should be Hidden it should show only form thats it.

Replace your code with this:
Note: This requires a working internet connection for fetching JQuery library over internet
<html>
<head>
<title>Title of website</title>
<style>
.hidden
{
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$('.add-property').click(function () {
$('.hidden').toggle('slow');
$('#add-owner-div').addClass('hidden');
$('#go-back-div').addClass('hidden');
});
});
</script>
</head>
<h2 style="font-size: 2em; margin-bottom: 0.75em; margin-left: -1%;">Specify Co-Owners for self occupied property</h2>
<div class="last" style="margin-right: 0; padding-right: 0;">
<div class="last" style="width: 710px;">
<p class="narrate quiet" style="margin-left: 2%; width: 100%;margin-bottom: 0.75em;"> <b>Would you like to add Co-owner? </b></p>
</div>
</div>
<div class="span-12 last mt10" style="margin-top:-3%;margin-left:2%;" id="add-owner-div">
<a class="large awesome oranges add-property" >Add a property Co-owner</a>
</div>
<div class="span-12 last mt10" style="margin-top:-3%;margin-left:51%;" id="go-back-div">
<a class="large awesome orange" href="property.php">Go Back </a>
</div>
<p>You haven't added any Co-owners Yet.</p>
<h2>Owner Property details</h2>
<div class="hidden" style="display:none">
<form>
<input type='hidden' value="<?php echo $username; ?>" name='email'>
<p><label for="name_coowner">Coowner Name</label> <input id="name_coowner" type="text" name="name_coowner" /></p>
<p><label for="pan_coowner">PAN Of Coowner</label> <input id="pan_coowner" type="text" name="pan_coowner" /></p>
</form>
</div>
</html>
If you have any other css libraries or bootstrap you can include in head tag
PHP is not an option to do this. If you want it to do with PHP dependent value you can use JQuery ajax.

Your add button should be like this
<a class="large awesome oranges" id="add_btn">Add a property Co-owner</a>
Put your form elements inside form
<form nam="myform" id="myform" style="display:none">
<input type='hidden' value="<?php echo $username; ?>" name='email'> <p><label for="name_coowner">Coowner Name</label> <input id="name_coowner" type="text" name="name_coowner" ></p> <p><label for="pan_coowner">PAN Of Coowner</label> <input id="pan_coowner" type="text" name="pan_coowner" ></p></form>
Js:
$("#add_btn").on('click',function(){
$("#myform").show();
}

Need to use one field many times in one html form

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

Dynamically add and delete text boxes

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!

Add a new row dynamically after clicking a button in jquery

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>

We Keep Coding

JavaScript is the programming language of the Web.

increment the value of one td in a table - javascript

Related

How to specify the action attribute to specific input buttons?

How to show or hide the heading in php

Need to use one field many times in one html form

Dynamically add and delete text boxes

Add a new row dynamically after clicking a button in jquery

Categories

Resources