php jquery repeat form with javascript datepicker - javascript

i used this script to create a repeat form
http://demo.techstream.org/Dynamic-Form-Processing-with-PHP/
in my form i use a javascript for datepicker this code work for the first row but when not whorking in the second row and the same problem for duration difference between 2 date and for my progress bar. All this work in the first row when i add a second row the datepicker and duration and progress bar stop working but work in the first
html code:
<td>
<input id="startdate" name="startdate[]" type="date" placeholder="planing Date" onfocus="(this.type='date')" onblur="(this.type='text')" onChange="onDateChange()" onchange="cal()">
</td>
<td>
<input id="enddate" name="enddate[]" type="text" placeholder="planing Date" onfocus="(this.type='date')" onblur="(this.type='text')" onchange="cal()">
</td>
<td>
<input id="duration" name="duration[]" type="text" placeholder="Duration" onChange="onDateChange()">
</td>
<td> <td>
<input id="prb" name="txt_prb[]" type="text" placeholder="%">
<div id="bar"><span id="progresss"></span></div>
</td>
javascript code:
<script type="text/javascript">
function GetDays(){
var dropdt = new Date(document.getElementById("enddate").value);
var pickdt = new Date(document.getElementById("startdate").value);
return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
}
function cal(){
if(document.getElementById("startdate")){
document.getElementById("duration").value=GetDays();
}
}
</script>
<script>
$(document).on('click', ':not(form)[data-confirm]', function(e){
if(!confirm($(this).data('confirm'))){
e.stopImmediatePropagation();
e.preventDefault();
}
});
$(document).on('submit', 'form[data-confirm]', function(e){
if(!confirm($(this).data('confirm'))){
e.stopImmediatePropagation();
e.preventDefault();
}
});
$(document).on('input', 'select', function(e){
var msg = $(this).children('option:selected').data('confirm');
if(msg != undefined && !confirm(msg)){
$(this)[0].selectedIndex = 0;
}
});
</script>
<script>
$(document).on('click', ':not(form)[data-confirm]', function(e){
if(!confirm($(this).data('confirm'))){
e.stopImmediatePropagation();
e.preventDefault();
}
});
$(document).on('submit', 'form[data-confirm]', function(e){
if(!confirm($(this).data('confirm'))){
e.stopImmediatePropagation();
e.preventDefault();
}
});
$(document).on('input', 'select', function(e){
var msg = $(this).children('option:selected').data('confirm');
if(msg != undefined && !confirm(msg)){
$(this)[0].selectedIndex = 0;
}
});
</script>

Use classes instead of id if you are planning to duplicate the html, so:
<td>
<input class="startdate" name="startdate[]" type="date" placeholder="planing Date" onfocus="(this.type='date')" onblur="(this.type='text')" onChange="onDateChange()" onchange="cal()">
</td>
<td>
<input class="enddate" name="enddate[]" type="text" placeholder="planing Date" onfocus="(this.type='date')" onblur="(this.type='text')" onchange="cal()">
</td>
<td>
<input class="duration" name="duration[]" type="text" placeholder="Duration" onChange="onDateChange()">
</td>
<td>
<input class="prb" name="txt_prb[]" type="text" placeholder="%">
<div class="bar"><span class="progresss"></span></div>
</td>
And adapt your javascript functions using document.getElementByClassName() instead of document.getElementById()
or
pass the element reference in your function calls like onChange="cal(this)" it solves the issue in this post: Pass parameters throw onchange function

Related

Getting focus on next input element anywhere on the page

<div>
<table><tr><td><input type="text"/></td></tr></table>
</div>
<div>
<table><tr><td><input type="text"/></td></tr></table>
</div>
Consider this section for instance.
There are two textboxes (anywhere on a page).
I'm trying to set focus from the first input to the immediate next input when the user presses Enter key.
How would I achieve this in JQuery?
Try this this will help you
$(document).ready(function() {
$('input').on("keypress", function(e) {
if (e.which == 13) {
var tab = $(this).attr("tabindex") + 1
$("input[tabindex=" + tab + "]").focus();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
<table>
<tr>
<td>
<input type="text" tabindex="1" />
</td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<td>
<input type="text" tabindex="2" />
</td>
</tr>
</table>
</div>
You can use the .keypress event of jQuery.
HTML
<div>
<table><tr><td><input type="text" id="first" autofocus/></td></tr></table>
</div>
<div>
<table><tr><td><input type="text" id="second"/></td></tr></table>
</div>
jQuery block
$(document).ready(function(){
$('#first').keypress(function(e){
if(e.keyCode ==13)
{
$('#second').focus();
}
})
});
Working DEMO : https://jsfiddle.net/ne403qyb/
Hope this helps!
$(document).ready(function() {
$('input[type=text]').keypress(function(e) {
if (e.keyCode == 13) {
if ($(this).attr('class') === "last") {
$('input[type=text]').eq(0).focus()
} else {
$('input[type=text]').closest('input[type=text]').focus();
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
<input type="text" />
<input type="text" class="last" />
</form>
Try this :)
$(document).keypress(function(e) {
if(e.which == 13) {
var focusElem = document.activeElement;
var nextInput = $(focusElem).next().attr('id');
$("#" + nextInput).focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input_1" />
<input type="text" id="input_2" />
<input type="text" id="input_3" />
<input type="text" id="input_4" />
$(document).on("keydown", "#Textbox1", function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 13) {
e.preventDefault();
$("#Textbox2").focus();
}
});
Woking Fiddle
You can give all of you input elements a class(you can do the same by input text tag in case you do not have the input type text element in your document on which you do not want the focus ) and can find the next input element having same class.
$(".test").keypress(function(e) {
var inputs = $(".test");
if(e.which == 13) {
var $next = inputs.filter(":gt(" + inputs.index(this) + ")").first();
$next.focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table><tr><td><input class ="test"type="text"/></td></tr></table>
</div>
<div>
<table><tr><td><input class="test" type="text"/></td></tr></table>
</div>
<div>
<table><tr><td><input class="test" type="text"/></td></tr></table>
</div>
<div>
<table><tr><td><input class="test" type="text"/></td></tr></table>
</div>
You can try other alternative as jsfiddle,
HTML :
<div>
<table><tr><td><input type="text" class='inputs'/></td></tr></table>
</div>
<div>
<table><tr><td><input type="text" class='inputs'/></td></tr></table>
</div>
JS :
$(document).on("input", "input", function(e){
if(e.which == 13){
$(this).next('.inputs').focus();
}
});

How to allow user to add only one value at a time?

I need to allow user to enter value at only one box at a time.
For eg: if user enter months the days field should not allow him to enter value.
Can I disable the other field if user enter value in any of them ?
Also it only takes numbers.
Here is my html
<td class="ctext" width="13%"> Reset Frequency in Months/Days
</td>
<td class="ctext" style="display:inline-block">
<label for="frMnth" style="display:block">Month</label>
<input type="text" class="textfield" value="" id="frMnth" name="frMnth" onkeypress="return isNumber(event)" />
<label for="frDays" style="display:block">Days</label>
<input type="text" class="textfield" value="" id="frDays" name="frDays" onkeypress="return isNumber(event)" />
</td>
And this is script to type number only using Onkeypress.
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;}
Can I disable the field using Onkeypress ?
Try this:
http://jsfiddle.net/lotusgodkk/GCu2D/1011/
HTML:
<td class="ctext" width="13%"> Reset Frequency in Months/Days</td>
<td class="ctext" style="display:inline-block">
<label for="frMnth" style="display:block">Month</label>
<input type="text" class="textfield" value="" id="frMnth" name="frMnth" />
<label for="frDays" style="display:block">Days</label>
<input type="text" class="textfield" value="" id="frDays" name="frDays" />
</td>
JS:
$(document).ready(function() {
$(document).on("blur", ".textfield", function() {
var ele = $(this);
if (ele.val()) {
if (isNaN(ele.val())) {
alert("Only numbers please");
return false;
}
$(".textfield").not(this).attr("disabled", "disabled");
} else {
$(".textfield").removeAttr("disabled");
}
});
});
Alternative solution without JS
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/1012/
HTML:
<td class="ctext" width="13%"> Reset Frequency in Months/Days</td>
<td class="ctext" style="display:inline-block">
<label for="frMnth" style="display:block">Month/Days</label>
<input type="number" class="textfield" value="" id="frMnth" name="frMnth" />
<select>
<option value="month">Month</option>
<option value="days">Days</option>
</select>
</td>
Change the input type to number. Let browser take care of the number onlyrequirement. Of course you can add JS for further validations.
Write JQuery
$(".textfield").keypress( function() {
if($("#frMnth").val().length > 0) {
$("#frDays").attr("disabled", "disabled");
}
else if($("#frDays").val().length > 0) {
$("#frMnth").attr("disabled", "disabled");
}
else {
$("#frMnth").removeAttr("disabled");
$("#frDays").removeAttr("disabled");
}
});

passing array as argument in javascript

$(document).ready(function(){
var srno=1;
var srnoarray= new Array();
$(".addRow").click(function(){
var ToAppend='<tr><td><input type="text" class="form-control" style="width:40px;" name="srno_[]" id="id_srno_'+srno+'" value="'+srno+'" readonly="readonly" /></td>';
ToAppend+='<td>';
ToAppend+='<select class="form-control" name="product_name_'+srno+'" id="product_name_'+srno+'" onchange="return onSelectChangeajax(this.value,'+srno+')">';
ToAppend+='<option value="0">Select Product</option>';
ToAppend+='</select>';
ToAppend+='</td>';
ToAppend+='<td><input type="text" class="form-control" name="product_prise_'+srno+'" id="product_prise_'+srno+'" placeholder="Purchase Prise" onblur="calAmount('+srno+')" /></td><td><input type="text" class="form-control" name="product_qty_'+srno+'" id="product_qty_'+srno+'" value="1" placeholder="Quantity" onblur="calAmount('+srno+')"/></td><td><input type="text" class="form-control" name="product_amt_'+srno+'" id="product_amt_'+srno+'" placeholder="Amount" onblur="calAmount('+srno+')"/></td><td><img src="dist/img/removerow.png" onclick="deleteRow(this),deleteArrayVal.apply(this,'+srnoarray+');" /></td></tr>';
srnoarray.push(srno);
$("#purchaseItems").append(ToAppend);
console.log(srnoarray);
srno++;
});
});
function deleteRow(rwo)
{
var i=rwo.parentNode.parentNode.rowIndex;
document.getElementById("purchaseItems").deleteRow(i);
}
function deleteArrayVal(val)
{
console.log(val);
}
Above functions add the dynamic row and remove the row in table. I have created an array called srnoarray and I have added srno in that array on every tr get added dynamically. deleteRow is the function to remove tr, but when i remove tr i want to remove particular srno from srnoarray.
<img src="dist/img/removerow.png" onclick="deleteRow(this),deleteArrayVal('+srnoarray+');" />
I tried passing array as argument in the function but that is not of use.
how should I do that??
I see that you are trying to use the method here :
document.getElementById("purchaseItems").deleteRow(i);
For this, you might need to add the deleteRow as a prototype to work.
But please elaborate a little bit what exactly you want to delete from the array.
Thanks.
First of all, I would recommend to use a templating engine (e.g. handlebars)
to keep your js cleaner (no HTML in jquery). Improves readability.
I also would look at angularjs because then you will have it easier to keep your js data in synch with your DOM.
For your row remove button you could add a data attribute to each row so you can easily get the clicked row in your click handler.
Please have a look at the demo below and here at jsFiddle.
var row = $("#row-template").html(),
rowTemplate = Handlebars.compile(row),
purchasedItems = [];
/*
var context = {srno: 0};
var html = rowTemplate(context);
*/
function addRow() {
purchasedItems.push({
srno: purchasedItems.length+1,
products: [ {// just some dummy products
name:'pizza',
selected: 'selected'
},
{name:'pasta'
},
{name:'hamburger'}
]
});
console.log(purchasedItems);
refreshTable();
}
function refreshTable() {
$('#purchaseItems').empty();
$.each(purchasedItems, function(index, item) {
$('#purchaseItems').append(rowTemplate(item));
});
}
function getRowId(context) {
return $(context).parent().parent().attr('data-rowId');
}
/* not working --> needed to update the data in the array
$('#purchaseItems').on('change', '.productSelection', function() {
var index = getRowId(this);
console.log(index);
});
*/
$('#purchaseItems').on('click', '.removeRow', function() {
var index = getRowId(this);
console.log(index);
purchasedItems.pop(index);
console.log(purchasedItems);
refreshTable();
});
$('#add').click(function() {
addRow();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="row-template" type="text/x-handlebars-template">
<tr data-rowId="{{srno}}">
<td>
<input type="text" class="form-control" style="width:40px;" name="srno_[]" id="id_srno_{{srno}}" value="{{srno}}" readonly="readonly" /></td>
<td>
<select class="form-control" name="product_name_{{srno}}" id="product_name_{{srno}}" class="productSelection">
{{#each products}}
<option value="{{this.name}}" {{this.selected}}>{{this.name}}</option>
{{/each}}
</select>
</td>
<td>
<input type="text" class="form-control" name="product_prise_{{srno}}" id="product_prise_{{srno}}" placeholder="Purchase Prise" onblur="calAmount({{srno}})" />
</td>
<td>
<input type="text" class="form-control" name="product_qty_{{srno}}" id="product_qty_{{srno}}" value="1" placeholder="Quantity" onblur="calAmount({{srno}})"/>
</td>
<td>
<input type="text" class="form-control" name="product_amt_{{srno}}" id="product_amt_{{srno}}" placeholder="Amount" onblur="calAmount({{srno}})"/>
</td>
<td>
<!--<img src="dist/img/removerow.png"--> <button class="removeRow">remove</button>
</td>
</tr>
</script>
<button id="add">add</button>
<div id="purchaseItems"></div>
function deleteArrayVal(value) {
var index = arr.indexOf(value);
if (index > -1) {
arr.splice(index, 1);
}
}

Dynamically adding and removing checkbox and inputfield

I want to make it possible to add and/or remove inputfields and a checkbox (for a competition-page)
Even though, when I click on the add button, 2 inputfields gets added and when i click the remove button, only on of those disappear. What is the issue?
var InputsWrapper = $("#answerDiv");
var AddButton = $(".adaddnext");
var x = InputsWrapper.length;
var FieldCount=1;
$(AddButton).click(function (e) {
FieldCount++;
$(InputsWrapper).append('<div class="adinputfield83"><div class="checkaccept cacc1"><label class="option"><input type="radio" id="contestAnswersChk_'+ FieldCount +'" name="correct" class="validate[required]"><span class="checkbox"></span></label> </div><input type="text" id="contestAnswer_'+ FieldCount +'" placeholder="Write possible answer" class="validate[required]"/><span class="font-entypo icon-circled-cross adaddnextremove" aria-hidden="true"></span></div></div>');
x++;
return false;
});
$("body").on("click",".adaddnextremove", function(e){
if( x > 1 ) {
$(this).parent('div').remove();
x--;
}
return false;
})
And the HTML:
<div id="answerDiv">
<div class="adinputfield83">
<div class="checkaccept cacc1">
<label class="option">
<input type="radio" id="contestAnswerChk_1" name="correct" class="validate[required]">
<span class="checkbox"></span>
</label>
</div>
<input type="text" id="contestAnswer_1" placeholder="Write possible answer" class="validate[required]">
<span class="font-entypo icon-plus adaddnext" aria-hidden="true"></span>
</input>
</div>
</div>
Can someone help me out? Thanks...
JSFiddle: http://jsfiddle.net/TrueBlueAussie/R3TLB/2/
You needed a delegated event for your add buttons as well as the delete buttons.
var InputsWrapper = $("#answerDiv");
var x = InputsWrapper.length;
var FieldCount = 1;
$(document).on('click', '.adaddnext', function (e) {
FieldCount++;
var template = $('#template').html();
template = template.replace(/{FieldCount}/g, FieldCount);
$(InputsWrapper).append(template);
x++;
return false;
});
$(document).on("click", ".adaddnextremove", function (e) {
if (x > 1) {
$(this).parent('div').remove();
x--;
}
return false;
})
HTML (using template HTML in dummy script block):
<script id="template" type="text/template">
<div class="adinputfield83">
<div class="checkaccept cacc1">
<label class="option">
<input type="radio" id="contestAnswersChk_{FieldCount}" name="correct" class="validate[required]" /><span class="checkbox"></span>
</label>
</div>
<input type="text" id="contestAnswer_{FieldCount}" placeholder="Write possible answer" class="validate[required]" /><span class="font-entypo icon-circled-cross adaddnextremove" aria-hidden="true">Del</span>
<input type="button" class="adaddnext" value="Add" />
</div>
</script>
<div id="answerDiv">
<div class="adinputfield83">
<div class="checkaccept cacc1">
<label class="option">
<input type="radio" id="contestAnswerChk_1" name="correct" class="validate[required]" /> <span class="checkbox"></span>
</label>
</div>
<input type="text" id="contestAnswer_1" placeholder="Write possible answer" class="validate[required]"> <span class="font-entypo icon-plus adaddnext" aria-hidden="true"></span>
</input>
</div>
<input type="button" class="adaddnext" value="Add" />
</div>
Notes:
Do not use $('body') to listen for delegated events. It can have odd side-effects with certain events (including click). Use a fallback of $(document) instead, if you do not have a closer non-changing ancestor to your dynamic elements. Really you should be using $('#answerDiv').on('click'... as that is the closest static ancestor (more efficient and more specific).
You have already defined you variables as selector $(...) so you should use only var names: AddButton.click()
The code looks then:
var InputsWrapper = $("#answerDiv");
var AddButton = $(".adaddnext");
var x = InputsWrapper.length;
var FieldCount=1;
AddButton.click(function (e) {
FieldCount++;
InputsWrapper.append('<div class="adinputfield83"><div class="checkaccept cacc1"><label class="option"><input type="radio" id="contestAnswersChk_'+ FieldCount +'" name="correct" class="validate[required]"><span class="checkbox"></span></label> </div><input type="text" id="contestAnswer_'+ FieldCount +'" placeholder="Write possible answer" class="validate[required]"/><span class="font-entypo icon-circled-cross adaddnextremove" aria-hidden="true"></span></div></div>');
x++;
return false;
});
$("body").on("click",".adaddnextremove", function(e){
if( x > 1 ) {
$(this).parent('div').remove();
x--;
}
return false;
})
or you can also define your variables as string, for example:
var AddButton = ".adaddnext"
then you can use it, as you did in your code:
$(AddButton).click(...)
Then is should look like:
var InputsWrapper = "#answerDiv";
var AddButton = ".adaddnext";
var x = InputsWrapper.length;
var FieldCount=1;
AddButton.click(function (e) {
FieldCount++;
InputsWrapper.append('<div class="adinputfield83"><div class="checkaccept cacc1"><label class="option"><input type="radio" id="contestAnswersChk_'+ FieldCount +'" name="correct" class="validate[required]"><span class="checkbox"></span></label> </div><input type="text" id="contestAnswer_'+ FieldCount +'" placeholder="Write possible answer" class="validate[required]"/><span class="font-entypo icon-circled-cross adaddnextremove" aria-hidden="true"></span></div></div>');
x++;
return false;
});
$("body").on("click",".adaddnextremove", function(e){
if( x > 1 ) {
$(this).parent('div').remove();
x--;
}
return false;
})

auto calculate without clicking any button

Hi I'm new for programming and I'm facing one problem.
I have 3 input for values and 1 input for total. What I need is when I change the value in any input total should change automatically.
<input type="text" name="Amt" id="amount" class="form-control" />
<input type="text" name="Amt" id="amount" class="form-control" />
<input type="text" name="Amt" id="amount" class="form-control" />
And for total I have:
<input type="text" class="form-control" name="total" id="total" value="" />
And below is the script:
<script type="text/javascript">
$('#amount').change(function() {
$('#total').attr('value', function() {
var result = 0;
$('#amount').each(function() {
result += $(this).attr('value');
});
return result;
});
});
</script>
You have multiple ids for amount. These should be changed to classes. In addition, the value for each amount will be picked out by jQuery as a string, so that needs to be changed to an integer:
$('.amount').change(function () {
var result = 0;
$('.amount').each(function () {
result += +$(this).val();
});
$('#total').val(result);
});
Fiddle.

Categories

Resources