I have a problem with j query function calculate date after clone,
i need to auto calculate how many days after user select check in and check out date and put it in textbox , its working for first row but not working with cloned rows
DEMO
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function GetDays(){
var dropdt = new Date(document.getElementById("drop_date").value);
var pickdt = new Date(document.getElementById("pick_date").value);
return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
}
function cal(){
if(document.getElementById("drop_date")){
document.getElementById("numdays2").value=GetDays();
}
}
</script>
<script type="text/javascript">
$(document).ready(function(){
var genroomid = 2;
$( ".add-row" ).click(function(){
var $clone = $( "ul.personal-details" ).first().clone();
var $input = $clone.find('#roomid');
$input.val(genroomid).attr('genroomid' , +genroomid)
$clone.append( "<button type='button' class='remove-row'>-</button>" );
$clone.insertBefore( ".add-row" );
genroomid++; // increase id by 1
});
$( ".form-style-9" ).on("click", ".remove-row", function(){
$(this).parent().remove();
genroomid--;
});
});
</script>
</head>
<body>
<form name="form_reservations" method="post" action="add.php">
<span class="form-style-9">
<ul class="personal-details">
<label for="roomid">RoomID</label>
<input name="roomid[]" type="text" class="stretchnights" id="roomid" readonly="readonly" value="1">
<label for="chkin">Check IN</label>
<input class="stretchdate" size="15" width="15" id="pick_date" type="date" name="chkin[]" onchange="cal()" required/>
<label for="chkout">Check Out</label>
<input class="stretchdate" id="drop_date" type="date" name="chkout[]" onchange="cal()" required/>
<label for="nights">Nights
<input class="stretchnights" type="text" id="numdays2" name="nights[]" readonly /></label>
</ul>
<button type="button" class="add-row">+ New Client</button>
</span>
</form>
</body>
There are lot of issues in the snippet you shared, you are trying to using ID in the original element and cloning it, this is a bad idea for your use case. What you can do is convert it to class, and pass the target element in cal(). by doing that you can find the element. And your label for nights is not closed properly
replace your exiting script block
<script type="text/javascript">
function GetDays(target){
var dropdt = new Date($(target).find(".drop_date").val());
var pickdt = new Date($(target).find(".pick_date").val());
return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
}
function cal(target){
console.log($(target).parent(), $(target).parent().find('numdays2'));
$(target).parent().find('.numdays2').val(GetDays($(target).parent()));
}
</script>
and replace your .personal-details html block with this
<ul class="personal-details">
<label for="roomid">RoomID</label>
<input name="roomid[]" type="text" class="stretchnights" id="roomid" readonly="readonly" value="1">
<label for="chkin">Check IN</label>
<input size="15" width="15" id="pick_date" class="pick_date" type="date" name="chkin[]" onchange="cal(this)" required/>
<label for="chkout">Check Out</label>
<input id="drop_date" type="date" name="chkout[]" class="drop_date" onchange="cal(this)" required/>
<label for="nights">Nights </label>
<input class="numdays2" type="text" id="numdays2" name="nights[]" readonly />
This should solve the problem
You are using the same id in function call for the clones.
Related
I'm trying to use Jquery to get two inputs from a form and I'm not sure why it's not working--I've tried everything I can think of
I'm still a beginner so any help is greatly appreciated!
$(document).ready( function(){
var c = $('#canvas1');
var ctx = c.get(0).getContext('2d');
var container = $(c).parent();
$(window).resize( canvas1 );
function canvas1(){
c.attr('width', $(container).width() ); //max width
draw = function(){
var options = parseInt(document.getElementById('options').value);
var times = parseInt(document.getElementById('times').value);
ctx.fillRect(options, times, 50, 50);
}
jQuery(document).ready(draw)
}
$('button').click(canvas1())
});
<div class="option">
<div id="error"></div>
<form class="boxForm" id="form1">
<input type="number" class="boxInput" id="options" name="options" max=600 min=1 required />
<input type="number" class="boxInput" id="times" name="times" max=600 min=1 required />
<input type="submit" class="boxSubmit" id="submit" value="GO!"/>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
I need a code generator in jQuery that when clicking on the button it appears in the input text a number of 13 digits, start in number 7.
This is the code in my view:
<div class="form-group <?php echo !empty(form_error('barcode')) ? 'has-error':'';?>">
<label for="barcode">Barcode:</label>
<div class="input-group barcode">
<div class="input-group-addon">
<button class="fa fa-barcode" title="Generate Random Barcode"></button>
</div>
<input type="text" class="form-control" id="barcode" name="barcode" required value="<?php echo set_value('barcode');?>">
</div>
<?php echo form_error("barcode","<span class='help-block'>","</span>");?>
</div>
This is the input text + button:
The generated number like this:
You can do this :
$(document).on('click', '#barcode_btn', function(e){
e.preventDefault();
var val1 = Math.floor(100000 + Math.random() * 999999);
var val2 = Math.floor(10000 + Math.random() * 99999);
$('[name="barcode"]').val('7 '+val1+' '+val2);
})
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<input type="text" name="barcode" value="">
<button id="barcode_btn">Generate Barcode</button>
</form>
</body>
</html>
my code is :
<input type="checkbox" name="area" id="area" value="0">Some Text1</input>
<input type="checkbox" name="area" id="area" value="80">Some Text2</input>
and javascript code is
function calc(){var textValue1 = document.getElementById('quantity').value;
var textValue2 = document.getElementById('area').value;
document.getElementById('cost').value = textValue1 * textValue2 ; }
but it isn't working.
Try this:
valueChange = function(item){
alert(item.value);
}
<form name="form1" method="post" action=" insert_data.php">
Delivery Location
<input onChange="valueChange(this)" type="checkbox" name="area" id="area" value="0">Inside city </input>
<input onChange="valueChange(this)" type="checkbox" name="area" id="area" value="80">Outside city </input>
</form>
Sample example by using JQuery...
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$( "#target" ).submit(function( event ) {
$('input[name="vehicle"]:checked').each(function() {
console.log(this.value);
});
return false;
});
});
</script>
</head>
<body>
<form id='target' action="/action_page.php">
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The problem is that id attributes should be unique. In your case you have 2 elements with id="area" which confuses the document.getElementById() method. You can use a selector query to achieve what you want. There's not need for additional libraries such as jQuery.
Here's a working example:
function calculate () {
var selected = document.querySelector('[name="area"]:checked')
if (!selected) {
alert('Please select a value')
return
}
var quantity = 5 // you can get this from a different place
alert('Final value: ' + selected.value * quantity)
}
document.getElementById('submit').addEventListener('click', calculate)
<form name="form1" method="post" action=" insert_data.php">
Delivery Location
<input type="checkbox" name="area" id="inside" value="0">Inside city </input>
<input type="checkbox" name="area" id="outside" value="80">Outside city </input>
<button id="submit">Calculate</button>
</form>
try the below JS code in console. you can use it as per the events u want
var checkedValue = null;
var inputElements = document.getElementsByName('area');
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].checked){
checkedValue = inputElements[i].value;
break;
}
}
I have a input field that is readonly that shows the user the money they have left over after spending. They first have to enter their income and in the spending field, it will show the value from the database. My problem is after calculating the money left over in javascript, the value does not show in the leftOver field. I am not sure what I am doing wrong. Here is my code:
<script type="text/javascript">
$(document).ready(function(){
$("#addRecord").hide();
$("#btnAdd").click(function(){
$("#addRecord").show();
});
});
</script>
<script type="text/javascript">
function getTotalIncome(){
var income = parseFloat(document.getElementById("income").value);
var otherIncome = parseFloat(document.getElementById("otherIncome").value);
var totalIncome = income + otherIncome;
document.getElementById("totalIncome").value = '$' + totalIncome;
}
</script>
<script type="text/javascript">
function getLeftOver(){
var totalIncome = parseFloat(document.getElementById("totalIncome").value);
var totalSpending = parseFloat(document.getElementById("totalSpending").value);
var leftOver = totalIncome - totalSpending;
document.getElementById("leftOver").value = '$' + leftOver;
}
</script>
</head>
<body>
<button id="btnAdd" type="button" name="btnAdd">Create A Budget</button>
<form id="addRecord" name="addRecord" action="Budget" method="post">
<h3>Income</h3>
<label>Income:</label>
<input type="text" name="income" id="income" onchange="getTotalIncome()"> <br>
<label>Other Income:</label>
<input type="text" name="otherIncome" id="otherIncome" onchange="getTotalIncome()"><br>
<hr>
<h3>Spending</h3>
<label>Total Amount Of Spending</label>
<input type="text" name="totalSpending" value="$${totalSpending}" disabled=disabled>
<hr>
<h4>You've budgeted</h4>
<label>Income</label>
<input type="text" name="totalIncome" id="totalIncome" readonly="readonly" onchange="getLeftOver()">
<label>Spending</label>
<input type="text" name="totalSpending" id="totalSpending" value="$${totalSpending}" readonly="readonly" onchange="getLeftOver()">
<label>Left Over</label>
<input type="text" name="leftOver" id="leftOver" readonly="readonly">
</form>
</body>
All,
I need to add a "delete" link to the end of all of my cloned sections, but not the source of the cloned material. This is what I have so far
Need something like this:
Step One:
Step Two:(The cloned material does not get a delete link)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title>Demo</title>
<script type="text/javascript">
var uniqueId = 1;
$(function() {
$('.addRow').click(function() {
var copy = $("#cosponsors").clone(true).appendTo("#myForm");
var cosponsorDivId = 'cosponsors_' + uniqueId;
copy.attr('id', cosponsorDivId );
$('#myForm div:last').find('input').each(function(){
$(this).attr('id', $(this).attr('id') + '_'+ uniqueId);
$(this).attr('name', $(this).attr('name') + '_'+ uniqueId);
});
uniqueId++;
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="container">
<h3>Sponsors</h3>
<form action="" id="myForm">
<div id="cosponsors" style="padding:12px;">
<label>Sponsor Info:</label> <input type="text" id="cosponsorcontact" name="cosponsorcontact" placeholder="Name" title="Co-sponsor contact" />
<input type="text" id="cosponsoremail" name="cosponsoremail" placeholder="Email" title="Co-sponsor email" />
<input type="text" id="cosponsorphone" name="cosponsorphone" placeholder="Phone" title="Co-sponsor phone" />
</div>
</form>
<input type="button" class="addRow" value="Add Sponsor" />
</div>
</body>
</html>
Try this:
var deleteLink = $("<a>delete</a>");
deleteLink.appendTo(copy);
deleteLink.click(function(){
copy.remove();
});
Note that you'll need to style the delete link appropriately since it doesn't have an href.
JSFiddle: http://jsfiddle.net/5QBLB/