So basically, I have been trying to writing some jQuery that will add and duplicate a row of inputs on click, everything is working perfectly except for this.
Illustration of problem:
When you hit the remove button it leaves the 'Add Field' button beneath, I would like it to move back up into the row as shown above.
Html:
<form action="javascript:void(0);" method="POST" autocomplete="off">
<input type="submit" value="Submit">
<br>
<br>
<div class="bigjane">
<button class="add">Add Field</button><input type="text" name="input_0" placeholder="Input1"><input type="text" name="input_0" placeholder="Input2"><input type="text" name="input_0" placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>
</div>
</form>
jQuery:
jQuery(document).ready(function () {
'use strict';
var input = 1,
button = ("<button class='add'>Add Field</button>");
$('.add').click(function () {
$(this).clone(true).appendTo('form');
$(this).remove();
$('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input1">');
$('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input2">');
$('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>');
input = input + 1;
});
$('form').on('click', '.remove', function () {
$(this).prev('input').remove();
$(this).prev('input').remove();
$(this).prev('input').remove();
$(this).prev('input').remove();
$(this).next('br').remove();
$(this).remove();
input = input - 1;
});
$('form').on('click', '.duplicate', function () {
$('.add').attr('id', 'add');
$('#add').removeClass().appendTo('form');
$(this).prev().prev().prev('input').clone().appendTo('form');
$(this).prev().prev('input').clone().appendTo('form');
$(this).prev('input').clone().appendTo('form');
$('form').append('<input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>');
input = input + 1;
});
});
JSFiddle Example
I have a feeling the answer for this is going to be somewhat simple, thanks in advance!
I simplified a bit, here's a suggestion, but I think the structure especially could be simplified even more.
<form action="javascript:void(0);" method="POST" autocomplete="off">
<input type="submit" value="Submit">
<br>
<br>
<div class="bigjane"><button id="add">Add Field</button>
<div class='input_line'>
<input type="text" name="input_0" placeholder="Input1"><input type="text" name="input_0" placeholder="Input2"><input type="text" name="input_0" placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br></div>
</div>
</form>
jQuery(document).ready(function () {
'use strict';
var input = 1,
button = ("<button class='add'>Add Field</button>");
var blank_line = $('.input_line').clone();
$('#add').click(function () {
$('form').append(blank_line.clone())
$('.input_line').last().before($(this));
});
$('form').on('click', '.remove', function () {
$(this).parent().remove();
$('.input_line').last().before($('#add'));
input = input - 1;
});
$('form').on('click', '.duplicate', function () {
$('form').append($(this).parent().clone());
$('.input_line').last().before($('#add'));
input = input + 1;
});
});
added some css:
#add
{
float: left;
}
See jsfiddle:http://jsfiddle.net/tor9wvev/
EDIT:
to duplicate beneath correct line, modify
$('form').append($(this).parent().clone());
For:
$(this).parent().after($(this).parent().clone());
check this code i edit your code to solve the problem
jQuery(document).ready(function () {
'use strict';
var input = 1,
button = ("<button class='add'>Add Field</button>");
$('.model').on('click', '.add', function () {
$(this).clone(true).appendTo('form');
$(this).remove();
$('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input1">');
$('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input2">');
$('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>');
input = input + 1;
});
$('form').on('click', '.remove', function () {
$(this).prev('input').remove();
$(this).prev('input').remove();
$(this).prev('input').remove();
$(this).prev('input').remove();
$(this).next('br').remove();
$(this).prev().prev().prev().prev().prev().prev().prev().before('<button class="add">Add Field</button>')
$(this).prev().remove();
$(this).remove();
input = input - 1;
});
$('form').on('click', '.duplicate', function () {
$('.add').attr('id', 'add');
$('#add').removeClass().appendTo('form');
$(this).prev().prev().prev('input').clone().appendTo('form');
$(this).prev().prev('input').clone().appendTo('form');
$(this).prev('input').clone().appendTo('form');
$('form').append('<input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>');
input = input + 1;
});
});
</script>
<div class="model">
<form action="javascript:void(0);" method="POST" autocomplete="off">
<input type="submit" value="Submit">
<br>
<br>
<div class="bigjane">
<button class="add">Add Field</button><input type="text" name="input_0" placeholder="Input1"><input type="text" name="input_0" placeholder="Input2"><input type="text" name="input_0" placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>
</div>
</form>
</div>
Probably not the neatest possible solution, but this works to move the button without changes to the rest of the code:
$('form').on('click', '.remove', function () {
/* ... */
$(this).closest('form')
.find('input[type="text"]:last')
.prev().prev().before($('.add'));
Updated fiddle:
http://jsfiddle.net/mah0nqz0/1/
Related
I have a form, i am able to calculate total of all dynamically added inputs, but i am to re-calculate after the delete row, Here is my code.
I have followed the code,
http://jsfiddle.net/Uwbe6/2/
calcSum();
function calcSum() {
var myForm = $('#myForm');
myForm.delegate('.items', 'change', function() {
var sum = 0;
var itemsValue = myForm.find('.items');
itemsValue.each(function() {
var value = Number($(this).val());
if (!isNaN(value)) sum += value;
// sum += parseInt($(this).val());
});
// return sum;
$('.total-amt').html(sum);
// console.log(sum);
});
}
$('body').on("click", ".delete", function(e) {
$(this).parent().remove();
calcSum();
});
$(function() {
var i = 1;
$('#add_more').click(function(event) {
event.preventDefault();
$('input.items').last().attr('name', 'item[' + i + ']');
$('#cart_items').append($('#tmp_cart').html());
i++;
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" id="myForm">
Total Items<input type="text" value="100" name="total_amt" id="total_amt">
<div id="cart_items">
Items<input type="text" name="item[0]" class="items"><br/>
</div>
<button type="button" id="add_more">Add More</button>
<input type="submit" name="submit" value="submit">
</form>
<p>Total Amt:<span class="total-amt"></span></p>
<div id="tmp_cart" style="display: none;">
<div class="cart_items">
<label>
Items
<input type="text" name="item[]" class="items">
</label>
<input type="button" value="Delete" class="delete"><br/>
</div>
</div>
Thanks for suggestions.
calcSum() should just calculate the sum, not bind a handler. Then you can call it from different handlers.
calcSum();
function calcSum() {
var myForm = $('#myForm');
var sum = 0;
var itemsValue = myForm.find('.items');
itemsValue.each(function() {
var value = Number($(this).val());
if (!isNaN(value)) sum += value;
// sum += parseInt($(this).val());
});
// return sum;
$('.total-amt').html(sum);
// console.log(sum);
}
$("#myForm").on("change", ".items", calcSum);
$('body').on("click", ".delete", function(e) {
$(this).parent().remove();
calcSum();
});
$(function() {
var i = 1;
$('#add_more').click(function(event) {
event.preventDefault();
$('input.items').last().attr('name', 'item[' + i + ']');
$('#cart_items').append($('#tmp_cart').html());
i++;
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" id="myForm">
Total Items<input type="text" value="100" name="total_amt" id="total_amt">
<div id="cart_items">
Items<input type="text" name="item[0]" class="items"><br/>
</div>
<button type="button" id="add_more">Add More</button>
<input type="submit" name="submit" value="submit">
</form>
<p>Total Amt:<span class="total-amt"></span></p>
<div id="tmp_cart" style="display: none;">
<div class="cart_items">
<label>
Items
<input type="text" name="item[]" class="items">
</label>
<input type="button" value="Delete" class="delete"><br/>
</div>
</div>
Use .on() instead of .delegate() since it's deprecated. Also, you could simply keep the event binding separate from calcSum function.
var myForm = $('#myForm');
calcSum();
function calcSum() {
var sum = 0;
var itemsValue = myForm.find('.items');
itemsValue.each(function() {
var value = Number($(this).val());
if (!isNaN(value)) sum += value;
// sum += parseInt($(this).val());
});
// return sum;
$('.total-amt').html(sum);
// console.log(sum);
}
myForm.on('change', calcSum);
$('body').on("click", '.delete', function(e) {
$(this).parent().remove();
calcSum();
});
$(function() {
var i = 1;
$('#add_more').click(function(event) {
event.preventDefault();
$('input.items').last().attr('name', 'item[' + i + ']');
$('#cart_items').append($('#tmp_cart').html());
i++;
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" id="myForm">
Total Items<input type="text" value="100" name="total_amt" id="total_amt">
<div id="cart_items">
Items<input type="text" name="item[0]" class="items"><br/>
</div>
<button type="button" id="add_more">Add More</button>
<input type="submit" name="submit" value="submit">
</form>
<p>Total Amt:<span class="total-amt"></span></p>
<div id="tmp_cart" style="display: none;">
<div class="cart_items">
<label>
Items
<input type="text" name="item[]" class="items">
</label>
<input type="button" value="Delete" class="delete"><br/>
</div>
</div>
I have a textbox that can be append.. and i want to get the values of each textbox
$('#entryData').append('<div><input type="text" id="quantity"></div>');
var total = $('#quantity').val();
console.log(total);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="entryData">
<input type="text" id="quantity">
<input type="button" value="+">
<input type="button" value="Total">
</div>
but I am only getting the first textbox value and not the other textbox
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id='entryData' >
<input type="text" class='quantity'>
<input type="button" value="+" id='add'>
<input type="button" value="Total" id='total'>
</div>
<script>
$(document).ready(function(){
$('#add').click(function(){
$('#entryData').append('<div><input type="text" class="quantity"></div>');
});
$('#total').click(function(){
var total=0;
$('.quantity').each(function(index,quantity){
total=total+parseInt($(this).val());
});
alert(total);
});
});
</script>
I expect this is what you are trying to do?
Or make it like this:
<div id='entryData' >
<input type="number" class='quantity'>
<input type="button" value="+" id='add'>
<input type="button" value="Total" id='total'>
</div>
If you expect numbers - make the field number.
//this should come from helper method file/lib - for reusability
const sum = (accumulator, currentValue) => accumulator + currentValue;
const mapToInt = (idx,element) => { if (element.value !== "") { return parseInt(element.value, 10); } }
$(document).ready(() =>{
$('#add').click( () => {
$('#entryData').append('<div><input type="number" class="quantity" /></div>');
});
$('#total').click( () => {
let total = $(".quantity").map(mapToInt).get().reduce(sum);
console.log ( total );
});
});
Edit: sum (aggregation func) and mapToInt can be reused if you consider having more functional approach.
i'm new in jquery ajax and i need some help.
This is my basic html.
<form id="replayForm1">
msg_id:
<input type="text" name="msg_id">
<br>
msg_replay
<input type="text" name="msg_replay">
<button onClick="getmsg(1)">Click Me</button>
</form>
<form id="replayForm2">
msg_id:
<input type="text" name="msg_id">
<br>
msg_replay
<input type="text" name="msg_replay">
<button onClick="getmsg(2)">Click Me</button>
</form>
This is my jquery:
<script>
function getmsg(formID) {
var formName = '#replayForm' + formID;
$(formName).submit(function (e) {
e.preventDefault();
var msg_id = $('input[name=msg_id]').val();
var msg_replay = $('input[name=msg_replay]').val();
alert(msg_id + msg_replay);
});
}
</script>
My problem is, when i fill the second form i get empty value. First form don't have problem it return value and don't have problem. How to deal this problem? i try make this form unique to easy submit form just using 1 function.
jQuery will look for the first instance which it finds of the inputs, so use the formName to match the correct ones.
You should also remove the previous event or you will get multiple alerts after the second click on the same button.
function getmsg(formID) {
var formName = '#replayForm' + formID;
$(formName).off('submit').on('submit', function (e) {
e.preventDefault();
var msg_id = $(formName + ' input[name=msg_id]').val();
var msg_replay = $(formName + ' input[name=msg_replay]').val();
alert(msg_id + msg_replay);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="replayForm1">
msg_id:
<input type="text" name="msg_id">
<br>
msg_replay
<input type="text" name="msg_replay">
<button onClick="getmsg(1)">Click Me</button>
</form>
<form id="replayForm2">
msg_id:
<input type="text" name="msg_id">
<br>
msg_replay
<input type="text" name="msg_replay">
<button onClick="getmsg(2)">Click Me</button>
</form>
In both the case the name is same. Change the name & pass those values to getmsg function
function getmsg(formID, inputName, msgReplyName) {
var formName = '#replayForm' + formID;
$(formName).submit(function(e) {
e.preventDefault();
var msg_id = $('input[name=' + inputName + ']').val();
var msg_replay = $('input[name=' + msgReplyName + ']').val();
alert(msg_id + ' ' + msg_replay);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="replayForm1">
msg_id:
<input type="text" name="msg_id">
<br> msg_replay
<input type="text" name="msg_replay">
<button onClick="getmsg(1,'msg_id','msg_replay')">Click Me</button>
</form>
<form id="replayForm2">
msg_id:
<input type="text" name="msg_id_2">
<br> msg_replay
<input type="text" name="msg_replay_2">
<button onClick="getmsg(2,'msg_id_2','msg_replay_2')">Click Me</button>
</form>
I am trying to make a puzzle game in which the user must press the button in a specific order in which they fill a textbox (will be hidden) with a password ( 3-digits) if the user pressed the buttons for example ( 3,2,1 ) the form will be submitted automatically and redirecting to another page..
I tried, but I couldn't do it
here are my codes :
<form method="POST">
<input type="text" value="" id="text1" name="text1" style="width: 150px;" />
<br />
<input type="button" value="Click Me" id="1" />
<input type="button" value="Click Me" id="2" />
<input type="button" value="Click Me" id="3" />
</form>
jquery
$(function () {
$('#1').click(function(e) {
var text = $('#text1');
text.val(text.val() + '1');
$('#1').attr("disabled", true);
});
$('#2').click(function(e) {
var text = $('#text1');
text.val(text.val() + '2');
$('#2').attr("disabled", true);
});
$('#3').click(function(e) {
var text = $('#text1');
text.val(text.val() + '3');
$('#3').attr("disabled", true);
});
});
$('#text1').trigger('change') {
alert('Changed');
});
you can do something like this: foreach click on an answer button disabele the current button update the input value..and once the user clicks all answers button check if the combination is correct, if it is the case redirect your page.
$(function () {
var correct_order="321";
var clicks=0;
var max_clicks=$('.answer').length;
$('.answer').click(function(e) {
clicks++;
$('#text1').val($('#text1').val()+$(this).data('info'));
$(this).attr("disabled", true);
if(clicks==max_clicks){
if( $('#text1').val()==correct_order) {
$('#answer_info').html("<p>Correct answer</p>");
window.location.href = "https://yourpage";
}
else {
$('#answer_info').html("<p>Wrong answer</p>");
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<form method="POST">
<input type="text" value="" id="text1" name="text1" style="width: 150px;" />
<br />
<input type="button" value="Click Me" id="1" class="answer" data-info="1"/>
<input type="button" value="Click Me" id="2" class="answer" data-info="2"/>
<input type="button" value="Click Me" id="3" class="answer" data-info="3"/>
</form>
<div id="answer_info">
</div>
It works if you delete the last piece of code
$('#text1').trigger('change') {
alert('Changed');
});
I think the best way is to use a String variable instead of a text input, and check its value after each button is clicked, e.g.
var string = "";
$('#1').click(function(e) {
var = var + "1";
$('#1').attr("disabled", true);
checkCode();
});
$('#2').click(function(e) {
var = var + "2";
$('#2').attr("disabled", true);
checkCode();
});
$('#3').click(function(e) {
var = var + "3";
$('#3').attr("disabled", true);
checkCode();
});
I'm not a 100% sure this works correctly or if it causes an error on:
$(text1).val($(text1)+$(this).id); // might cause an error
code:
$(document).on('click','#1',function()){
$(text1).val($(text1)+$(this).id);
}
$(document).on('click','#2',function()){
$(text1).val($(text1)+$(this).id);
}
$(document).on('click','#3',function()){
$(text1).val($(text1)+$(this).id);
}
$(document).on('change','#text1'){
alert('Changed to: '+$(this).val());
});
Can you try this, and see if this works?
I need to add multiple textboxes using a plus button and remove them using a minus button using Javascript.
After user fills up all the fields and clicks the submit button, I need to fetch all value using PHP.
Example:
Initially, there will only be 1 textbox. When user clicks on + button and already filled up the first field, the a second textbox will appear and also a - button used to remove the textbox. When a user clicks submit, the value in the textboxes will be submitted through PHP.
My code:
<?php
if(isset($_POST["userbtnsubmit"])){
}
?>
<form name="frmfeed" id="frmfeed" enctype="multipart/form-data" method="post" onSubmit="return validateFeedbackForm();">
<input type="text" name="country" id="con" class="form-control oditek-form" placeholder="Add Country">
<input type="button" class="btn btn-success" name="plus" id="plus" value="+">
<input type="button" class="btn btn-danger" name="minus" id="minus" value="-">
<button type="submit" class="btnsub" name="userbtnsubmit" id="btnsubmit">Add</button>
</form>
Note: As stated in the question, the user must type text in an input before another can be be shown.
addRemoveAnother('#plus', '#minus', '#con', '#counter', 3);
function addRemoveAnother(plusBtn, minusBtn, target, counter, limit) {
var i, ii = $(counter).val();
for(i = 0; i <= limit; i++) {
if (i != ii) {
$(target+i).hide();
}
}
$(plusBtn).click(function() {
ii = $(counter).val();
if ($(target+ii).val() != '') {
ii++;
if (ii <= limit) {
$(target+ii).show();
$(counter).val(ii);
}
}
});
$(minusBtn).click(function() {
ii = $(counter).val();
if (ii > 1) {
$(target+ii).val('');
$(target+ii).hide();
ii--;
$(counter).val(ii);
}
});
}
https://jsfiddle.net/curtisweeks/k4kanw6L/
You can combine jQuery PLUS AJAX to achieve the same.
Example :
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$( "#plus" ).on("click", function() {
$( "#frmfeed" ).append( '<input type="text" name="country[]" class="form-control oditek-form" placeholder="Add Country"/>');
});
$("#minus").on("click", function(){
if($("input[name='country[]']").length > 1)
{
$("input[name='country[]']:eq("+(length-1)+")").remove();
}
});
$("#btnsubmit").on("click", function(){
var countries = [];
$("input[name='country[]']").each(function(){
countries.push($(this).prop("value"));
});
console.log(countries);
//AJAX Post Data To Your Server
var postDataObj = {
url: "YOUR_SERVER_FILE",
type: "post",
data: countries,
success: function(data){
//Response Data From Server
}
}
console.log(postDataObj);
$.ajax(postDataObj);
});
});
</script>
</head>
<body>
<form name="frmfeed" id="frmfeed" enctype="multipart/form-data" method="post" onSubmit="return validateFeedbackForm();">
<input type="text" name="country[]" id="con" class="form-control oditek-form" placeholder="Add Country"><br/><br/>
</form>
<input type="button" class="btn btn-success" name="plus" id="plus" value="+"> <input type="button" class="btn btn-danger" name="minus" id="minus" value="-">
<button type="submit" class="btnsub" name="userbtnsubmit" id="btnsubmit">Add</button>
</body>
</html>
JSFiddle Demo