Multiple datepickers on a form - javascript

I need to have 102 datepickers on a page where people will indicate a start date and an end date for an ad listing.
This works, but I have to create 102 instances of "datepicker"
datepicker
datepicker1
datepicker2
etc
Not a huge deal to do it that way, but wonder if there is an easier way to do the script
I'm using the jquery datepicker
This is a portion of my current code:
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
$(document).ready(function() {
$("#datepicker2").datepicker();
});
$(document).ready(function() {
$("#datepicker3").datepicker();
});
$(document).ready(function() {
$("#datepicker4").datepicker();
});
$(document).ready(function() {
$("#datepicker5").datepicker();
});
$(document).ready(function() {
$("#datepicker6").datepicker();
});
$(document).ready(function() {
$("#datepicker7").datepicker();
});
</script>
<input type="checkbox" id="Alabama" name="alabama" value="X">
<label for="Alabama"><b>Alabama</b></label><br>
Start <input type="text" name="AL_date_s" value="" id="datepicker2" size="15" />
End <input type="text" name="AL_date_e" value="" id="datepicker3" size="15" /><br>
<br>
<input type="checkbox" id="Alaska" name="alaska" value="X">
<label for="Alaska"><b>Alaska</b></label><br>
Start <input type="text" name="AK_date_s" value="" id="datepicker4" size="15" />
End <input type="text" name="AK_date_e" value="" id="datepicker5" size="15" /><br>
<br>
<input type="checkbox" id="Arizona" name="arizona" value="X">
<label for="Arizona"><b>Arizona</b></label><br>
Start <input type="text" name="AZ_date_s" value="" id="datepicker6" size="15" />
End <input type="text" name="AZ_date_e" value="" id="datepicker7" size="15" /><br>
<br>

Related

Combining multiple .change functions into one using Jquery

I have a few text input fields that will update some hidden fields.
I have a few .change functions that will watch for changes on the visible input fields.
Here is my JSFiddle - https://jsfiddle.net/tcgmr698/
Jquery
$("#TravellerContact_ManualAddress1").change(function () {
$('input[id=TravellerContact_Address1]').val($('input[id=TravellerContact_ManualAddress1]').val())
});
$("#TravellerContact_ManualAddress2").change(function () {
$('input[id=TravellerContact_Address2]').val($('input[id=TravellerContact_ManualAddress2]').val())
});
$("#TravellerContact_ManualAddress3").change(function () {
$('input[id=TravellerContact_Address3]').val($('input[id=TravellerContact_ManualAddress3]').val())
});
$("#TravellerContact_ManualAddress4").change(function () {
$('input[id=TravellerContact_Address4]').val($('input[id=TravellerContact_ManualAddress4]').val())
});
$("#TravellerContact_ManualAddress5").change(function () {
$('input[id=TravellerContact_Address5]').val($('input[id=TravellerContact_ManualAddress5]').val())
});
$("#TravellerContact_ManualPostCode").change(function () {
$('input[id=TravellerContact_PostCode]').val($('input[id=TravellerContact_ManualPostCode]').val())
});
HTML
<div id="manualFullAddress" class="fullAddress">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress1" name="TravellerContact_ManualAddress1" placeholder="Address" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress2" name="TravellerContact_ManualAddress2" placeholder="Address 2" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress3" name="TravellerContact_ManualAddress3" placeholder="Address 3" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress4" name="TravellerContact_ManualAddress4" placeholder="City" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress5" name="TravellerContact_ManualAddress5" placeholder="Province" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualPostCode" name="TravellerContact_ManualPostCode" placeholder="Postal Code" type="text">
</div>
Hidden fields that get posted to the DB
<input class="HideValFromSet" id="TravellerContact_Address1" name="TravellerContact.Address1" type="hidden" value="">
<input class="HideValFromSet" id="TravellerContact_Address2" name="TravellerContact.Address2" type="hidden" value="">
<input class="HideValFromSet" id="TravellerContact_Address3" name="TravellerContact.Address3" type="hidden" value="">
<input class="HideValFromSet" id="TravellerContact_Address4" name="TravellerContact.Address4" type="hidden" value="">
<input class="HideValFromSet" id="TravellerContact_Address5" name="TravellerContact.Address5" type="hidden" value="">
<input class="HideValFromSet" id="TravellerContact_PostCode" name="TravellerContact.PostCode" type="hidden" value="">
My main question is how do I go about combining these functions into one function? Is it possible?
The relevant elements are all children of #manualFullAddress. We can therefor add the .change() event handler to this parent element instead ("event delegation", but it would also work with one event handler per <input /> element)
We can use this to get the id of the <input /> element. And with .replace("Manual", "") we can get the id of the corresponding <input type="hidden" /> element.
$("#manualFullAddress").on("change", "input", function() {
const input = $(this);
$("#" + this.id.replace("Manual", "")).val(input.val());
});
$("#manualFullAddress").on("change", "input", function() {
const input = $(this);
$("#" + this.id.replace("Manual", "")).val(input.val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="manualFullAddress" class="fullAddress">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress1" name="TravellerContact_ManualAddress1" placeholder="Address" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress2" name="TravellerContact_ManualAddress2" placeholder="Address 2" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress3" name="TravellerContact_ManualAddress3" placeholder="Address 3" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress4" name="TravellerContact_ManualAddress4" placeholder="City" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress5" name="TravellerContact_ManualAddress5" placeholder="Province" type="text">
<input class="form-control manualAddressEntry-js" id="TravellerContact_ManualPostCode" name="TravellerContact_ManualPostCode" placeholder="Postal Code" type="text">
</div>
<div>
"Hidden" Elements
<br />
<input class="HideValFromSet" id="TravellerContact_Address1" name="TravellerContact.Address1" value="">
<input class="HideValFromSet" id="TravellerContact_Address2" name="TravellerContact.Address2" value="">
<input class="HideValFromSet" id="TravellerContact_Address3" name="TravellerContact.Address3" value="">
<input class="HideValFromSet" id="TravellerContact_Address4" name="TravellerContact.Address4" value="">
<input class="HideValFromSet" id="TravellerContact_Address5" name="TravellerContact.Address5" value="">
<input class="HideValFromSet" id="TravellerContact_PostCode" name="TravellerContact.PostCode" value="">
</div>
In your case, you can bind change event using .manualAddressEntry-js and get the id dynamically as shown below.
$('.manualAddressEntry-js').change( function() {
var id = $(this).attr('id').replace("Manual", "");
$(`input[id=${id}]`).val($(`input[id=${id}]`).val());
});
But I will recommend changing id to data- and using that instead of id, if you're not using it anywhere else.

Delete all input element inside form jQuery

How to delete all kind of input field inside a form when clicking a href element?
<script type="text/javascript">
$('.delete-link').on('click', function() {
//remove all input inside #form-delete
});
</script>
<form id="form-delete" action="/post>" method="post">
<input type="text" name="test1" value="">
<textarea name="test2" rows="8" cols="80">TEST</textarea>
<input type="checkbox" name="test3" value="">
<input type="number" name="test4" value="">
<input type="password" name="test5" value="">
<input type="email" name="test5" value="">
</form>
<a href="#" class="delete-link">
<span>Remove All input</span>
</a>
To delete all input tags values (clear the input text)
//when the Document Loads, add event to clears all input fields
$(document).ready(function() {
$('.delete-link').on('click', function() {
$('input').val('');
});
});
Try it
http://jsfiddle.net/9q6jywmg/
To actually remove the element itself
//Document Loads, add event to remove all input tagged elements
$(document).ready(function() {
$('.delete-link').on('click', function() {
$('input').remove();
});
});
Try it
http://jsfiddle.net/hym5kde7/
Of course to remove textarea element, do the same by selecting textarea tagged elements also, like this
$('textarea').remove();
Just do this
document.getElementById('your_id').remove(); //also add ids to your input fields
Try it here!
http://jsfiddle.net/4WGRP/
<form id="form-delete" action="/post>" method="post">
<input type="text" name="test1" value="">
<textarea name="test2" rows="8" cols="80">TEST</textarea>
<input type="checkbox" name="test3" value="">
<input type="number" name="test4" value="">
<input type="password" name="test5" value="">
<input type="email" name="test5" value="">
</form>
<a href="#" class="delete-link">
<span>Remove All input</span>
</a>
<script type="text/javascript">
$('.delete-link').on('click', function() {
//remove elements
// $('#form-delete').children('input').remove();
//remove values
$('#form-delete').children('input').val('')
});
</script>
$(document).ready(function() {
$('.delete-link').on('click', function() {
$('#form-delete [my-input]').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form-delete" action="/post>" method="post">
<input type="text" my-input='' name="test1" value="">
<textarea my-input='' name="test2" rows="8" cols="80">TEST</textarea>
<input my-input='' type="checkbox" name="test3" value="">
<input my-input='' type="number" name="test4" value="">
<input my-input='' type="password" name="test5" value="">
<input my-input='' type="email" name="test5" value="">
</form>
<button href="#" class="delete-link">
<span>Remove All input</span>
</button>
Use the remove() method:
$(function(){
$('.delete-link').on('click', function() {
$("#form-delete").find("input").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="form-delete" action="/post" method="post">
<input type="text" name="test1" value="">
<textarea name="test2" rows="8" cols="80">TEST</textarea>
<input type="checkbox" name="test3" value="">
<input type="number" name="test4" value="">
<input type="password" name="test5" value="">
<input type="email" name="test5" value="">
</form>
<a href="#" class="delete-link">
<span>Remove All input</span>
</a>

Radio button selection for paypal form issue

need your help
So i have a paypal form which also has two radio buttons. One with a shipping value, and one without. Here is the link to the actual form
http://www.topchoicedata.com/test.php
What i want to happen is that if a person selected the first radio box("$19.99 Shipping – DATABASE SENT ON CD ROM"), then 19.99 would automatically be added to the "hdwppamount" amount which is set at $175, so when the person press's "pay now", it will make a grand total of $194.99 on the paypal page.
And if the person selected the second option instead("FREE SHIPPING – DATABASE SENT VIA EMAIL") instead, then of course no value is added to the "hdwppamount" amount and $175 would be the total for the paypal page.
Now the code does work if the person chooses on or the other options, and then does not alternate between the radio buttons deciding which one they choose. So its kind of buggy because if i choose the first option, then decided the second option, and so on and so forth alternating, i either get an error page or if i did choose the free option, the 19.99 still gets added.
I need so that if the first option is chosen, then the 19.99 gets added, and if the second option chosen, then nothing is added.
Any help would be appreciated.
<!--------------------HTML Form---------------------_
<form action="PPPaymentForm/PPPaymentForm.php" method="post" name="topchoiceform" id="topchoiceform">
<input placeholder="Company Name" type="text" name="companyname" required>
<input placeholder="First Name" type="text" name="first_name" required>
<input placeholder="Last Name" type="text" name="last_name" required>
<input placeholder="Email" type="email" name="email" id="email" required>
<input placeholder="Address" type="text" name="address1" required>
<input name="shipping" class="shipping" type="radio" id="shipping" checked/>
<label class="shippingcheck">$19.99 Shipping – DATABASE SENT ON CD ROM </label>
<br>
<input name="shipping" class="shipping" type="radio" id="noshipping"/>
<label class="shippingcheck">FREE SHIPPING – DATABASE SENT VIA EMAIL</label>
<br>
<button name="submit" type="submit" id="submit">Pay Now</button>
<!-------------Paypal Part------------->
<input type="hidden" name="hdwtablename" id="hdwtablename" value="1">
<input type="hidden" name="hdwppproductname" id="hdwppproductname" value="Basic Plan 175">
<input type="hidden" name="hdwppamount" id="hdwppamount" value="175">
<input type="hidden" name="hdwppcurrency" id="hdwppcurrency" value="USD">
<input type="hidden" name="hdwpplanguage" id="hdwpplanguage" value="en_US">
<input type="hidden" name="hdwok" id="hdwok" value="http://www.topchoicedata.com/paymentmadethanks.php">
<input type="hidden" name="hdwemail" id="hdwemail" value="mauriceflopez+gmail.com">
<input type="hidden" name="hdwnook" id="hdwnook" value="http://">
<input type="hidden" name="hdwactivation_email" id="hdwactivation_email" value="email">
<input type="hidden" name="plan" id="plan" value="$175">
<input type="hidden" name="shippingchoosen" id="shippingchoosen" value="">
<input type="hidden" name="shippingnumber" id="shippingnumber" value="">
</form>
PHP
<script>
$('#shipping').change(function(){
var hdwppamount = Number($("#hdwppamount").val())
var shippingcost = 19.99;
if (this.checked) {
$("#hdwppamount").val(hdwppamount+shippingcost)
} else {
$("#hdwppamount").val(hdwppamount-shippingcost)
}
})
</script>
With radio you may have only one of them checked at a time. This means you have to test which one is checked in a specified moment (i.e.: change event).
I changed the input field hdwppamount from hidden to text in the snippet to make clear the behaviour.
$(function () {
$('#shipping, #noshipping').on('change', function(){
var hdwppamount = Number($("#hdwppamount").val());
var shippingcost = 19.99;
if (this.id == 'noshipping') { // shipping unchecked
$("#hdwppamount").val(hdwppamount-shippingcost);
} else { // shipping checked
$("#hdwppamount").val(hdwppamount+shippingcost);
}
});
// initialize the field with the correct value
$("#hdwppamount").val('194.99');
});
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<form action="PPPaymentForm/PPPaymentForm.php" method="post" name="topchoiceform" id="topchoiceform">
<input placeholder="Company Name" type="text" name="companyname" required>
<input placeholder="First Name" type="text" name="first_name" required>
<input placeholder="Last Name" type="text" name="last_name" required>
<input placeholder="Email" type="email" name="email" id="email" required>
<input placeholder="Address" type="text" name="address1" required>
<input name="shipping" class="shipping" type="radio" id="shipping" checked/>
<label class="shippingcheck">$19.99 Shipping – DATABASE SENT ON CD ROM </label>
<br>
<input name="shipping" class="shipping" type="radio" id="noshipping" />
<label class="shippingcheck">FREE SHIPPING – DATABASE SENT VIA EMAIL</label>
<br>
<button name="submit" type="submit" id="submit">Pay Now</button>
<!-------------Paypal Part------------->
<input type="hidden" name="hdwtablename" id="hdwtablename" value="1">
<input type="hidden" name="hdwppproductname" id="hdwppproductname" value="Basic Plan 175">
<input type="text" name="hdwppamount" id="hdwppamount" value="175">
<input type="hidden" name="hdwppcurrency" id="hdwppcurrency" value="USD">
<input type="hidden" name="hdwpplanguage" id="hdwpplanguage" value="en_US">
<input type="hidden" name="hdwok" id="hdwok" value="http://www.topchoicedata.com/paymentmadethanks.php">
<input type="hidden" name="hdwemail" id="hdwemail" value="mauriceflopez+gmail.com">
<input type="hidden" name="hdwnook" id="hdwnook" value="http://">
<input type="hidden" name="hdwactivation_email" id="hdwactivation_email" value="email">
<input type="hidden" name="plan" id="plan" value="$175">
<input type="hidden" name="shippingchoosen" id="shippingchoosen" value="">
<input type="hidden" name="shippingnumber" id="shippingnumber" value="">
</form>

jQuery to populate array-named form fields based on first entered text box value

I have a form with variable number of inputs as an array
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
The idea is when i put some value in the first field (foo[1]) i need the jQuery or Javascript copy the value from #foo[1] into #foo[2], #foo[3], etc depending on the array.
Do you need following behavior :
$(document).ready(function(){
$("input[id^=foo\\[]").prop("disabled",true); //disable all elements first
$("input#foo\\[1\\]").prop("disabled",false); //then enable the first one
$("input#foo\\[1\\]").change(function(){
var source = $(this);
var currentVal = $(source).val();
$("input[id^=foo\\[]").each(function(){
if(!$(this).is(source))
$(this).val(currentVal);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value=""/>
<input type="text" id="foo[3]" name="foo[3]" value=""/>
<input type="text" id="foo[4]" name="foo[4]" value=""/>
<input type="text" id="foo[5]" name="foo[5]" value=""/>
</form>
$('input').on('input', function(){
$(this).siblings().val($(this).val());
});
Couldn't tell if you just wanted the first or all. If just the first, you can target with an id or jQuery.
$('input').eq(0).on('input', function(){});
Something like this
HTML
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
JavaScript
$("input[id=foo\\[1\\]").on("input", function (){
$(this).siblings().val($(this).val());
});
And if you want the other to be readonly:
$("input[id^=foo\\[]:not([id=foo\\[1\\]])").attr("readonly", "readonly");

only first form is checked by jQuery

i have one form on my page. so i want to check each input with corresponding button. so i wrote smth like this and it only checks first input even if i click on second inputs button.
<form target="myFrame" method="post" id="addProduct">
<fieldset>
<input type="hidden" name="iProductAdd" value="6" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[6]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
<fieldset>
<input type="hidden" name="iProductAdd" value="7" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[7]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
<fieldset>
<input type="hidden" name="iProductAdd" value="4" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[4]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
</form>
and i have jQuery Code:
$(document).ready(function(){
$("form").submit(function(){
// Get the Login Name value and trim it
var name = $.trim($('.quantity').val());
// Check if empty of not
if (name === '') {
$("#addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-red.png')");
return false;
} else {
$('input[type="submit"]').each(function(){
$("#addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-green.png')");
});
}
});
});
Your problem is that you are using ids as it were classes. An id should be unique in a document. So defining multiple objects with the same id is an error. And all functions will apply only the first they encounter. To do what you want, you have to use classes, so change your code in this way:
$(".addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-green.png')");
To look for all elements of that class.

Categories

Resources