We Keep Coding

Add and Remove textbox in table using Javascript error

I want to add and remove textbox in table.
I did add textbox in table.
Am confused to remove textbox in table.
This is my code:
$(function () {
$('.more').on('click', function () {
var $table = $('#input_fields');
var $tr = $table.find('tr').eq(0).clone();
$tr.appendTo($table).find('input').val('');
});
});
$(function () {
$('.delete').on('click', function () {
});
});
.delete{color:#ff0000;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="quick_post" method="post">
<table id="input_fields">
<tr>
<td><input class="orderinput" type="text" name="product[]" /></td>
<td><input class="orderquan" type="text" name="quantity[]" size="1" maxlength="3" /></td>
<td> <span class='delete'>Delete</span></td>
</tr>
</table>
</form>
<input class="more" type="button" value="Addmore" name="addmore" />
This is my sample code link: https://jsfiddle.net/vo9j2LcL/
Please help me to remove function

Use event delegation to listen the click event on a dynamically generated element.
$(function() {
// cache the table reference
var $table = $('#input_fields');
// keep a cloned copy to generate new
var $tr = $table.find('tr').eq(0).clone();
$('.more').on('click', function() {
// clone to generate new and then append
$tr.clone().appendTo($table).find('input').val('');
});
// set click event handler
$table.on('click', '.delete', function() {
// check number of tr
if ($('#input_fields').find('tr').length > 1) {
// remove the tr corresponds to clicked element
$(this).closest('tr').remove();
}
});
});
.delete {
color: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="quick_post" method="post">
<table id="input_fields">
<tr>
<td><input class="orderinput" type="text" name="product[]" /></td>
<td><input class="orderquan" type="text" name="quantity[]" size="1" maxlength="3" /></td>
<td> <span class='delete'>Delete</span></td>
</tr>
</table>
</form>
<input class="more" type="button" value="Addmore" name="addmore" />

Submitting two different forms with an external Submit button not working properly

I am creating a add to cart program and need to add product with its attribute(colors, size) to the cart and for that I need to submit both the forms together. I am not sure where am I going wrong here I have created the scripts but it submits only the first form selected for submit() using jquery but not the other form.
Given below is my code with Snippet and this is the JSFIDDLE
$(document).ready(function (){
$('#cart').click(function (e1) {
var $form = $('#masterform');
var $formcolor = $('#colorform');
var $checkbox = $('.roomselect');
var $checkboxcolor = $('.colorselect');
if (!$checkbox.is(':checked'))
{
$('#tipdivcontent').css("display", "block");
$("#tipdivcontent").delay(4000).hide(200);
e.preventDefault();
}
else
{
if (!$checkboxcolor.is(':checked')) {
$('#tipdivcontentcolor').css("display", "block");
$("#tipdivcontentcolor").delay(4000).hide(200);
e.preventDefault();
} else {
$form.submit();
$formcolor.submit();
}
}
});
});
#tipdivcontent
{
border:1px solid black;
margin-top:0px;
background-color:white;
height:50px;
width:102px;
display:none;
position:relative;
background-color:red;
color:yellow;
font-weight:bold;
}
#tipdivcontentcolor
{
border:1px solid black;
margin-top:0px;
background-color:white;
height:18px;
width:292px;
display:none;
position:absolute;
background-color:red;
color:yellow;
font-weight:bold;
}
<form action="" method="POST" id="masterform">
<table border="1" cellspacing="0">
<tr>
<th colspan="4">Sizes</th>
</tr>
<tr>
<td>
<label for="2.2">2.2</label>
</td>
<td>
<input class="roomselect" type="radio" id="2.2" name="size" value="twopointtwo">
</td>
<td>
<label for="2.4">2.4</label>
</td>
<td>
<input class="roomselect" type="radio" id="2.4" name="size" value="twopointfour">
</td>
</tr>
<tr>
<td>
<label for="2.6">2.6</label>
</td>
<td>
<input class="roomselect" type="radio" id="2.6" name="size" value="twopointsix">
</td>
<td>
<label for="2.8">2.8</label>
</td>
<td>
<input class="roomselect" type="radio" id="2.8" name="size" value="twopointeight">
</td>
</tr>
<tr>
<td colspan="3" align="center">
<label for="2.10">2.10</label>
</td>
<td>
<input class="roomselect" type="radio" id="2.10" name="size" value="twopointten">
</td>
</tr>
</table>
</form>
<div id="tipdivcontent">Please Select Size.</div>
<input type="submit" value="To Cart" class="cartorcheckoutbutton" id="cart">
<form action="" method="POST" id="masterform">
<table border="1" cellpadding="2">
<tr>
<th colspan="8">COLORS</th>
</tr>
<tr>
<th title='White' style='background-color:white;' height='15' width='20'>
<input type='radio' name='color' class="colorselect" value='white'>
</th>
<th title='Red' style='background-color:red;' height='15' width='20'>
<input type='radio' name='color' class="colorselect" value='red'>
</th>
<th title='Green' style='background-color:green;' height='15' width='20'>
<input type='radio' name='color' class="colorselect" value='green'>
</th>
<th title='Blue' style='background-color:blue;' height='15' width='20'>
<input type='radio' name='color' class="colorselect" value='blue'>
</th>
</tr>
</table>
</form>
<div id="tipdivcontentcolor">Please Select Color.</div>

You could try assigning the color inputs from the secondary form to your 'master' form. Simply using <input form='formID' ...> on any input would assign that input to the other form regardless of where it is on the page.
// When the 'master' form is submitted...
$("#masterForm").on("submit", function(e) {
"use strict";
// Stop the default action
e.preventDefault();
if ($("input[type='radio']:checked").length === 0) {
alert("You must check at least one color option.");
return false;
}
// *for logging*
// write the contents of the submitted data
$("p").html("submitted data: " + $(this).serialize());
console.log("submitted data: " + $(this).serialize());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="masterForm">
<input name="someField" type="text" value="test value">
</form>
<form id="anotherForm">
<label>
<input name="color" type="radio" value="blue" form="masterForm">Blue
</label>
<label>
<input name="color" type="radio" value="red" form="masterForm">Red
</label>
</form>
<!-- Submit button outside of the form -->
<button type="submit" form="masterForm">Submit</button>
<p></p>
If the above option (and attached snippet) wouldn't work for you, try appending your formData with the relevant fields. Something like this (untested):
// When the 'master' form is submitted...
$("#masterForm").on("submit", function(e) {
"use strict";
// Stop the default action
e.preventDefault();
var submissionData = $(this).serialize();
submissionData += "&color=" + $("#slaveForm").find("input[name='color']:checked").val()
// do stuff ...
});

A form is a set of data to be sent via a POST request (or GET). What you are asking for makes no sense. If it is possible then you still shouldn't do it. Whatever HTML and CSS issues are making you split the form then I recommend you put that as your actual problem here.

Submitting a form, unless it has a target attribute pointing to a frame or other window, will cause an HTTP request for a new page to be made.
Submitting two forms at the same time would be like following two links at the same time. It can't be done.
You need to either:
Refactor your code so it uses a single form. This would almost certainly make the most sense.
Add a pair of frames to the page and submit each form to a different one.
Collect the data for the first form with JavaScript, sent it to the server using Ajax, then (after you get the response back) submit the second form.

If you want to send multiple form as a single one i can suggest to use formData object (documentation https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects )
var formData = new FormData();
formData.append("size", $('input[name=size]:checked').val());
formData.append("color", $('input[name=color]:checked').val());
var request = new XMLHttpRequest();
request.open("POST", "yourformtarget");
request.send(formData);

A possible solution with javascript: you can add an attribute to locate all fields, and send the form by ajax:
<div id='masterform'>
<input name='field_1' data-field-of='form1'>
...
</div>
...
<div id='colorform'>
<input name='field_23' data-field-of='form1'>
...
</div>
The code in javascript can be something like this:
$(document).ready(function (){
$('#cart').click(function (e1) {
var data = $('[data-field-of=form1]').serialize();
$.ajax({
url: "post/url",
data: data,
type: "POST",
success: function(response){ /* handle success */ },
error: function(){ /* handle error */ }
});
});
});

Display HTML on the basis of dropdown menu selected

I have a dropdown menu and on the basis of the item selected I want to display a small part of HTML page.
<select id='menuHandler'>
<option value='abc'> abc</option>
<option value='xyz'>xyz</option>
</select>
IF the selected value is "abc" then a popup button is displayed with the following code:
<button id='runForm' onClick=""> Run form </button>
<div id ="runFormPopup" style=" display:none;">
<table CELLPADDING="10" CELLSPACING="5" class='border'>
<tr>
<td colspan='3'>Run form Generation</td>
</tr>
<tr>
<td width="200" class='border'>
<span>Input Data</span><br>
<input type="checkbox" name="vehicle" >Process log(s)<br>
Summary data<br>
<input type="checkbox" name="vehicle" >Thickness data<br>
<input type="checkbox" name="vehicle" >Particle data
</td>
<td class='border'>
<span>Steps(s)</span>
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
</td>
</tr>
<tr>
<td> Run form filename </td>
<td><input type="text" ></td>
<td><button class="editbtn">Generate</button></td>
</tr>
</table>
</div>
else if the value selected is "xyz" this should be displayed.
<form action="${ctx}/home/step50/generateReport" method="GET" id="form_generate">
<input style="margin-top: 20px;" type="submit" id="btnGenerate" class="small button active" value="Generate"/>
</form>
how can I do it.

Listen to the change event of the #menuHandler select element, and add the conditional logic there.
Example Here
$('#menuHandler').on('change', function () {
if (this.value === "abc") {
$('#runFormPopup, #runForm').show();
$('#form_generate').hide();
} else {
$('#runFormPopup, #runForm').hide();
$('#form_generate').show();
}
});
..or a shorter version:
Example Here
$('#menuHandler').on('change', function () {
var condition = this.value === "abc";
$('#runFormPopup, #runForm').toggle(condition);
$('#form_generate').toggle(!condition);
});

Try something like this.
$('#menuHandler').change(function(){
var selectedValue = $(this).val();
if(selectedValue === 'abc') {
$('#runFormPopup').show();
$('#form_generate').hide();
}
else {
$('#runFormPopup').hide();
$('#form_generate').show();
}
});

From a high-level perspective:
Create a listener on the button and listen for a click
Dynamically get the value
Either create the content for which you are looking, or insert content into a dynamically-created <div> (overlay, pop-up, etc.)
Following these steps, you should be OK.

How to increment/decrements value of a dynamically generated text boxes

I have a e-commerce website in Magento, for that on cart page I want to add + - button to increment and decrements values of dynamically generated text boxes of quantity. I have this much code which is working fine on localhost but its not working properly on live website
<tr>
<td>
<input type="button" class="down" value="Down" data-min="0"/>
<input type="text" class="incdec" value="0"/>
<input type="button" class="up" value="Up" data-max="5"/>
</td>
</tr>
<tr>
<td>
<input type="button" class="down" value="Down" data-min="0"/>
<input type="text" class="incdec" value="0"/>
<input type="button" class="up" value="Up" data-max="5"/>
<td>
</tr>
and here is script
<script>
$(document).ready(function() {
$(".up").on('click',function(){
var $incdec = $(this).parent().find(".incdec");
if ($incdec.val() < $(this).data("max")) {
$incdec.val(parseInt($incdec.val())+1);
}
});
$(".down").on('click',function(){
var $incdec = $(this).parent().find(".incdec");
if ($incdec.val() > $(this).data("min")) {
$incdec.val(parseInt($incdec.val())-1);
}
});
});
</script>
For suitability I also attach a screen shot for what I'm looking for.
I have spent lot of time to achieve the same but I could not.

Could you please try like this
$(document).ready(function() {
$(".up").on('click',function(){
var $incdec = $(this).prev();
if ($incdec.val() < $(this).data("max")) {
$incdec.val(parseInt($incdec.val())+1);
}
});
$(".down").on('click',function(){
var $incdec = $(this).next();
if ($incdec.val() > $(this).data("min")) {
$incdec.val(parseInt($incdec.val())-1);
}
});
});
Demo: http://jsfiddle.net/mail2asik/M8JTP/

Your code works fine - it's just that your HTML is not valid.
<table>
<tr>
<td>
<input type="button" class="down" value="Down" data-min="0"/>
<input type="text" class="incdec" value="0"/>
<input type="button" class="up" value="Up" data-max="5"/>
</td>
</tr>
<tr>
<td>
<input type="button" class="down" value="Down" data-min="0"/>
<input type="text" class="incdec" value="0"/>
<input type="button" class="up" value="Up" data-max="5"/>
<td>
</tr>
</table>

Just replace
$(this).data("min") with $(this).attr("data-min")
and $
(this).data("max") with $(this).attr("data-max")
and check.
Also is the reference to jquery file same in both localhost and in live website?
Also like "denat" told using div inside table is not valid

if elements wasnt in DOM before script start, they be "unseen" for this script. try to set listener with "live" style - throw the element which was in DOM, example:
<script>
$(document).ready(function() {
$(document.body).on("click", ".up", function(){
var $incdec = $(this).parent().find(".incdec");
if ($incdec.val() < $(this).data("max")) {
$incdec.val(parseInt($incdec.val())+1);
}
});
$(document.body).on("click", ".down", function(){
var $incdec = $(this).parent().find(".incdec");
if ($incdec.val() > $(this).data("min")) {
$incdec.val(parseInt($incdec.val())-1);
}
});
});
</script>
P.S. and alse in answer near: delete "div" - it's not valid, to use div between rows of table

identify textfield value to hide the DIV in jQuery

i have a textfield:
<input type="text" id="modname" />
and a div:
<div id="tuner">
<tr>
<td width="400">
Tuner
<div id="value" name="tuner"></div>
</td>
<td width="10">:</td>
<td width="150">
<input id="tuner_rng1" type="radio" class="tuner_rng" name="tuner_rng" value="OK" />OK
<input id="tuner_rng2" type="radio" class="tuner_rng" name="tuner_rng" value="NG" />NG
<label for="tuner_rng" class="error">Please choose one !</label>
</td>
</tr>
</div>
i want if textfield value have "CH" character in front of text the div will hide.for example: if i type "change","check" it will hidden. How do i do that? could jquery do like that without regex?

Sure.
$('#modname').keyup(function() {
if($(this).val().toLowerCase().substring(0,2) == 'ch') {
$('#value').hide();
} else {
$('#value').show();
}
});

Here's the code:
$('#modname').bind('keyup',function(){
(/\bch/i.test($(this).val()))?$('#value').hide():$('#value').show();
});