I'm building a donation form.
If a checkbox with a fixed amount is checked by the user, I would like it to automatically uncheck if next the user clicks the textbox to insert a custom amount.
It would be important that the textbox would also clear if after inserting a custom amount the user opted to check a checkbox with a fixed amount.
I know nothing of JavaScript. Will someone help me achieve this?
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="louzanimalespaypal#gmail.com">
<input type="checkbox" name="amount" class="checkbutton" value="5.00"><span>€05.00</span>
<input type="checkbox" name="amount" class="checkbutton" value="5.00"><span>€10.00</span>
<input type="checkbox" name="amount" class="checkbutton" value="5.00"><span>€15.00</span>
<input type="checkbox" name="amount" class="checkbutton" value="5.00"><span>€20.00</span>
<br>
<strong>Other Amount</strong><br>
$ <input type="text" class="TextBox" name="amount">
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="item_number" value="Donation">
<input type="hidden" name="currency_code" value="EUR">
<input type="hidden" name="lc" value="PT">
<input type="hidden" name="bn" value="Louzanimales_Donation_WPS_PT">
<input type="hidden" name="return" value="http://www.louzanimales.py/agradecimentos.htm">
<br /><br />
<input type="submit" value="Pay with PayPal!">
</form>
[UPDATE]
I've put together the flowing which does exactly what I need.
If anyone thinks this can be improved, I would appreciate it:
$('input.checkbutton').on('change', function() {
$('input.checkbutton').not(this).prop('checked', false);
});
$(".textBox").focus(function() {
$(".checkbutton").prop("checked", false );
});
$(document).ready(function() {
$(".checkbutton").change(function() {
if ($(this).not(":checked")) {
$('.textBox').val("");
}
});
});
Fiddle
Looking at you're updated answer I would do the follow:
$('input.checkbutton').on('change', function() {
$('input.checkbutton').not(this).prop('checked', false);
if ($("input.checkbutton-other").val()) {
$("input.checkbutton-other").val("");
}
});
$("input.checkbutton-other").on("focus click", function() {
$("input.checkbutton").prop("checked", false);
});
body {
font-family: sans-serif;
box-sizing: border-box;
}
.form-group {
margin-top: 15px;
}
label.cb-label {
margin: 5px;
float: left;
background: #ccc;
}
label.cb-label:hover {
background: grey;
color: #fff;
}
label.cb-label span {
text-align: center;
box-sizing: border-box;
padding: 10px 15px;
display: block;
}
label.cb-label input {
position: absolute;
visibility: hidden;
}
label.cb-label input:checked + span {
background-color: black;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="#" method="post" target="_blank">
<div class="form-group" style="display: inline-block;">
<label for="cb5" class="cb-label">
<input type="checkbox" name="amount" id="cb5" class="checkbutton" value="5.00">
<span>05.00</span>
</label>
<label for="cb10" class="cb-label">
<input type="checkbox" name="amount" id="cb10" class="checkbutton" value="10.00">
<span>10.00</span>
</label>
<label for="cb15" class="cb-label">
<input type="checkbox" name="amount" id="cb15" class="checkbutton" value="15.00">
<span>15.00</span>
</label>
<label for="cb20" class="cb-label">
<input type="checkbox" name="amount" id="cb20" class="checkbutton" value="20.00">
<span>20.00</span>
</label>
</div>
<div class="form-group">
<label for="cbOther"><strong>Any Amount</strong> $</label>
<input type="number" name="amount" id="cbOther" class="checkbutton-other">
</div>
<div class="form-group">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="test#email.com">
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="item_number" value="Donation">
<input type="hidden" name="currency_code" value="EUR">
<input type="hidden" name="lc" value="PT">
<input type="hidden" name="bn" value="WPS_PT">
<input type="hidden" name="return" value="#">
</div>
<div class="form-group">
<input type="submit" value="Pay with PayPal!">
</div>
</form>
I started by removing this JavaScript code
$(document).ready(function() {
$(".checkbutton").change(function() {
if ($(this).not(":checked")) {
$('.textBox').val("");
}
});
});
And replacing this code with:
$('input.checkbutton').on('change', function() {
$('input.checkbutton').not(this).prop('checked', false);
if ($("input.checkbutton-other").val()) {
$("input.checkbutton-other").val("");
}
});
After changing the JavaScript I would update your HTML (codes like are found on Character-Code.com):
<div class="form-group" style="display: inline-block;"></div> // this html around the check boxes so their float don't affect other elements of page
<label for="cb5" class="cb-label"> // add `for` to the labels which can be tied to a `id` of the input it is related too and added a `class` for the css to be attached too
After the HTML update their was some CSS updates required. I'd remove the padding from the body and added this class instead:
.form-group {
margin-top: 15px;
}
This class would be added to a div which would wrap your inputs. Also on your fancy checkbox css I added the class .cb-label so it won't effect other labels.
You can do something like this, pure javascript
<input type='checkbox' id='my-check' />
<input type='text' id='my-text' onfocus='uncheck()' />
<script>
function uncheck() {
document.getElementById('my-check').checked = false;
}
</script>
Related
What i am trying to do is, once my form is submitted, it will pass certain values from a form to PayPal.
This is my form code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" action="<?php echo whichPPUrl(); ?>" method="post" id="paypal_form" target="_blank">
<div class="form-group">
<label class="control-label col-xs-4" for="text">URL:</label>
<div class="col-xs-8">
<input id="text" name="url" placeholder="site.com" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-4" for="checkbox"> </label>
<div class="col-xs-8">
<div class="checkbox">
<label class="checkbox">
<input type="checkbox" class="sum" name="metrics_1" value="1.00">
<strong>Moz</strong> - DA/PA/MozRank/Links In/Equity
</label>
</div>
<div class="checkbox">
<label class="checkbox">
<input type="checkbox" class="sum" name="metrics_2" value="1.00">
<strong>SEMRush</strong> - Rank/Keywords Number/Traffic/Costs/URL Links Number/Hostname Links Number/Domain Links Number
</label>
</div>
<div class="checkbox">
<label class="checkbox">
<input type="checkbox" class="sum" name="metrics_3" value="1.00">
<strong>Majestic</strong> - Rank/Keywords Number/Traffic/Costs/URL Links Number/Hostname Links Number/Domain Links Number
</label>
</div>
<div class="checkbox">
<label class="checkbox">
<input type="checkbox" class="sum" name="metrics_4" value="1.00">
<strong>Backlinks</strong> - Get any backlinks found for your domain plus anchor text (250 max.)
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="total" class="control-label col-xs-4">Cost ($):</label>
<div class="col-xs-8">
<input id="total" name="cost" type="text" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<label for="total" class="control-label col-xs-4"> </label>
<div class="col-xs-8">
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="business" value="contact#site.co.uk">
<input type="hidden" name="item_name" value="Wraith Metrics">
<input type="hidden" name="item_number" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="custom" value="getTheFormValues()">
<input type="hidden" name="amount" value="getAndPassTheCost()">
<input type="hidden" name="return" value="https://www.wraithseo.com/custom-metrics-builder.php?paid=1">
<input type="hidden" name="notify_url" value="https://www.wraithseo.com/gateway/ipn.php">
<input type="image" src="images/purchase.png" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
</div>
</div>
</div>
</form>
<script>
// pass the total value over to the form: <input type="hidden" name="amount" value="getTheCost()">
function getAndPassTheCost() {
return $("#total").val();
}
</script>
<script>
// pass the form values over and deal with them on the backend: <input type="hidden" name="custom" value="getTheFormValues()">
function getTheFormValues() {
return $("form").serialize();
}
</script>
<script>
$(document).ready(function() {
// updates / adds the checkbox values
function updateSum() {
var total = "0.00";
$(".sum:checked").each(function(i, n) {
let sum = parseFloat(total) + parseFloat($(n).val());
total = sum.toFixed(2);
});
$("#total").val(total);
}
// run the update on every checkbox change and on startup
$("input.sum").change(updateSum);
updateSum();
});
</script>
I am not the greatest with Ajax, i have done a basic example of what i think is the right way to go:
This function:
<script>
// pass the total value over to the form: <input type="hidden" name="amount" value="getTheCost()">
function getAndPassTheCost() {
return $("#total").val();
}
</script>
Would get the value from the input text box and pass it through to the post form.
This function:
<script>
// pass the form values over and deal with them on the backend: <input type="hidden" name="custom" value="getTheFormValues()">
function getTheFormValues() {
return $("form").serialize();
}
</script>
Would just serialize all the form data which i can then validate and process on the backend.
Have i over complicated the process? my issue is i'm not able to pass this data to the form whcih is then sent via POST to a PayPal script, any help in the right direction would be appreciated.
The inputs can only store strings they cannot store functions. Assign values to form controls by the .val() method. The functions getAndPassTheCost() and getTheFormValues() are useless. If you need to serialize the form, do it during the submit event. As for collecting all of the form values, that is done at submit event -- just ensure that whatever values you want sent has a [name] attribute.
Demo will send to a live test server -- the response will be displayed in the iframe below.
function updateSum() {
var total = 0;
$(".sum:checked").each(function(i) {
let sum = parseFloat($(this).val());
total += sum;
});
$("#total, .total").val(total.toFixed(2));
}
$("input.sum").on('change', updateSum);
$('paypal_form').on('submit', function(e) {
$(this).serialize();
});
.line.line.line {
margin: -5px auto 5px
}
.img.img.img {
margin: -40px auto 0 -70px;
}
.img.img.img:focus {
outline: none
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<main class='container'>
<form class="form-horizontal" action="https://httpbin.org/post" method="post" id="paypal_form" target="response">
<section class='form-row'>
<fieldset class='form-group col'>
<legend>Wraith SEO</legend>
<input id="text" name="url" placeholder="site.com" type="text" class="form-control" required pattern='[a-z0-9]+?[.][a-z]{3,}'>
</fieldset>
</section>
<hr class='line'>
<section class='form-row'>
<div class='form-group col'>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="sum form-check-input" name="metrics_1" value="1.00"> 1.00</label></div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="sum form-check-input" name="metrics_2" value="1.00"> 1.00</label></div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="sum form-check-input" name="metrics_3" value="1.00"> 1.00</label></div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="sum form-check-input" name="metrics_4" value="1.00"> 1.00</label></div>
<label for='total' class="label-control">Total: $
<output id='total' value='0.00'> </output></label>
<input class='total' name='total' type='hidden' value=''>
</div>
</section>
<section class='form-row'>
<fieldset class='form-group mb-4'>
<input type="image" src="https://www.shareicon.net/data/128x128/2017/06/22/887585_logo_512x512.png" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" class='float-right img'>
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="contact#site.co.uk">
<input type="hidden" name="item_name" value="Wraith Metrics">
<input type="hidden" name="item_number" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="return" value="https://www.wraithseo.com/custom-metrics-builder.php?paid=1">
<input type="hidden" name="notify_url" value="https://www.wraithseo.com/gateway/ipn.php">
<iframe name='response' width='70%' class='float-left'></iframe>
</fieldset>
</section>
</form>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I'd like to be able to use a total amount generated using javascriptand displayed on the page in a <span> field later on in an HTML form. The checkbox additions and subtractions work correctly, I have no issue with that. What I have not been able to figure out is how to use that value later on in an HTML field (shown below as the PayPal code).
I have this in the <head> which handles the javascript:
<head>
<script type="text/javascript">
var total = 0.00;
function test(item) {
if (item.checked) {
total += parseFloat(item.value);
} else {
total -= parseFloat(item.value);
}
//alert(total);
document.getElementById('Totalcost').innerHTML = total.toFixed(2);
}
</script>
</head>
The this adds/subtracts if a check box is checked:
<td class="column-3">
<br>
<label class="container">
<input type="checkbox" name="Shoes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
</label>
</td>
<td class="column-3">
<br>
<label class="container">
<input type="checkbox" name="Clothes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
</label>
</td>
Then I display the total with this:
Total Amount: $<span id="Totalcost">0.00</span>
All of this works correctly and checking/unchecking reflects on the Total Amount shown at the bottom of the page.
What I'd like to do is use the total amount that is show in the HTML below for the PayPal subscription link so that the amount is added into the
line.
<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="myemailaddress.com">
<input type="hidden" name="item_name" value="Shows & Clothes">
<input type="hidden" name="item_description" value="Shows & Clothes">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="no_shipping" value="1">
<input type="image" src="http://www.paypal.com/en_GB/i/btn/x-click-but20.gif" border="0" name="submit" alt="Make payments with PayPal - it\'s fast, free and secure!">
<input type="hidden" name="a3" value="TOTAL_AMOUNT">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="t3" value="M">
<input type="hidden" name="src" value="1">
<input type="hidden" name="sra" value="1">
</form>
Is it possible to capture the 'totalcost' and have it dynamically added to the "a3" field in the PayPal form (where it says TOTAL_AMOUNT) for when the customer clicks the PayPal button it already has the correct value/amount in the form?
Thank you.
You can use document.getElementsByName. By default you'll get a NodeList. For example:
var a3 = document.getElementsByName("a3")[0];
a3.value = total.toFixed(2);
You can easily update its value.
Something like this:
var total = 0.00;
function test(item) {
if (item.checked) {
total += parseFloat(item.value);
} else {
total -= parseFloat(item.value);
}
document.getElementById("Totalcost").innerHTML = total.toFixed(2);
var a3 = document.getElementsByName("a3")[0];
a3.value = total.toFixed(2);
}
<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="myemailaddress.com">
<input type="hidden" name="item_name" value="Shows & Clothes">
<input type="hidden" name="item_description" value="Shows & Clothes">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="no_shipping" value="1">
<input type="image" src="http://www.paypal.com/en_GB/i/btn/x-click-but20.gif" border="0" name="submit" alt="Make payments with PayPal - it\'s fast, free and secure!">
<input type="hidden" name="a3" value="TOTAL_AMOUNT">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="t3" value="M">
<input type="hidden" name="src" value="1">
<input type="hidden" name="sra" value="1">
</form>
<table>
<tr>
<td class="column-3">
<br>
<label class="container">
<input type="checkbox" name="Shoes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
</label>
</td>
<td class="column-3">
<br>
<label class="container">
<input type="checkbox" name="Clothes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
</label>
</td>
</tr>
</table>
<span id="Totalcost">0.00</span>
im sorry but i tried everything that's available in the internet but all "solutions" doesnt work.
if the radio button is clicked, the textbox under that radio button will be enabled.else disabled.
pls help me with this.when i click the radio button, the textbox is still disabled.
js
function radioModeOfPayment(x){
if(document.getElementById('mMininum').checked == true){
document.getElementById("mMininum-amount").disabled = false;
document.getElementById("first").disabled = false;
document.getElementById("numMonth-months").disabled = true;
}
if(document.getElementById('numMonth').checked == true){
document.getElementById("numMonth-months").disabled = false;
document.getElementById("mMininum-amount").disabled = true;
document.getElementById("first").disabled = true;
}
}
html
<div class="trbl-padding-5">
<input type="radio" class="w3-radio" id="mMininum" name="mpayment" value="mMininum" onclick="radioModeOfPayment(this);"> <label class="w3-validate">Minimum Payment</label><br>
<input type="text" class="tlabel" readonly="true" value="Amount"> <input type="text" class="tlabel w3-border" disabled="disabled" id="mMininum-amount" name="mMininum-amount" value=""><br>
<input type="text" class="tlabel" readonly="true" value="Starting Date"> <input type="date" disabled="disabled" id="first" name="sdate"><br>
</div>
<div class="trbl-padding-5">
<input class="w3-radio" type="radio" id="numMonth" name="mpayment" value="numMonth" onclick="radioModeOfPayment(this);"> <label class="w3-validate">Number of Months</label><br>
<input type="text" class="tlabel" readonly="true" value="Months"> <input type="text" class="tlabel w3-border" readonly="true" id="numMonth-months" name="numMonth-months" value=""><br>
</div>
remove input text readonly attribute
function radioModeOfPayment(x) {
if (document.getElementById('mMininum').checked == true) {
document.getElementById("mMininum-amount").disabled = false;
document.getElementById("first").disabled = false;
document.getElementById("numMonth-months").disabled = true;
}
if (document.getElementById('numMonth').checked == true) {
document.getElementById("numMonth-months").disabled = false;
document.getElementById("mMininum-amount").disabled = true;
document.getElementById("first").disabled = true;
}
}
<div class="trbl-padding-5">
<input type="radio" class="w3-radio" id="mMininum" name="mpayment" value="mMininum" onclick="radioModeOfPayment(this);">
<label class="w3-validate">Minimum Payment</label>
<br>
<input type="text" class="tlabel" readonly="true" value="Amount">
<input type="text" class="tlabel w3-border" disabled="disabled" id="mMininum-amount" name="mMininum-amount" value="">
<br>
<input type="text" class="tlabel" readonly="true" value="Starting Date">
<input type="date" disabled="disabled" id="first" name="sdate">
<br>
</div>
<div class="trbl-padding-5">
<input class="w3-radio" type="radio" id="numMonth" name="mpayment" value="numMonth" onclick="radioModeOfPayment(this);">
<label class="w3-validate">Number of Months</label>
<br>
<input type="text" class="tlabel" readonly="true" value="Months">
<input type="text" class="tlabel w3-border" id="numMonth-months" name="numMonth-months" value="">
<br>
</div>
EDIT 2
In Snippet 2 it is exactly the same as OP's layout. By adding nth-of-type, the inputs on the right-side are the only inputs that are enabled and disabled while the ones on the left are unaffected. The attribute disabled and have been removed.
EDIT
Sorry forgot OP wants radio buttons, it works just as well.
Here's a simple CSS only solution.
This uses:
adjacent sibling selector
pointer-events
SNIPPET 1
.chx:checked + input {
pointer-events: none;
}
.chxs:checked ~ input {
pointer-events: none
}
input[name="rad"]:checked + input[type="text"] {
pointer-events: none;
}
<p>This example uses + which affects only the sibling that's immediately after .chx</p>
<input class='chx' type='checkbox'>
<input>
<br/>
<br/>
<p>This example uses ~ which affects all siblings that follow .chxs</p>
<input class='chxs' type='checkbox'>
<input>
<input>
<input>
<br/>
<br/>
<p>Works on radio buttons as well</p>
<fieldset>
<input name='rad' type='radio'>
<input type='text'>
</fieldset>
<fieldset>
<input name='rad' type='radio'>
<input type='text'>
</fieldset>
SNIPPET 2
.w3-radio:checked ~ input:nth-of-type(2n-1) {
pointer-events: none;
}
<div class="trbl-padding-5">
<input type="radio" class="w3-radio" id="mMininum" name="mpayment" value="mMininum">
<label class="w3-validate">Minimum Payment</label>
<br>
<input type="text" class="tlabel" readonly=true value="Amount">
<input type="text" class="tlabel w3-border" id="mMininum-amount" name="mMininum-amount" value="">
<br>
<input type="text" class="tlabel" readonly=true value="Starting Date">
<input type="date" id="first" name="sdate">
<br>
</div>
<div class="trbl-padding-5">
<input class="w3-radio" type="radio" id="numMonth" name="mpayment" value="numMonth">
<label class="w3-validate">Number of Months</label>
<br>
<input type="text" class="tlabel" readonly=true value="Months">
<input type="text" class="tlabel w3-border" id="numMonth-months" name="numMonth-months" value="">
<br>
</div>
just need to disable the checkboxes on page load and enable them as the user selects a file to upload. For example, image is selected by user to upload for desktop so the sizes for desktop get enabled. Probably with javascript.
<html>
<head>
<title>Wallpaper Uploading Script</title>
<style type="text/css">
.formatting{
font-family: Arial;
font-size: .8em;
}
label{
display: block;
float: left;
width: 150px;
padding: 0 0px;
margin: 0 0px 0;
text-align: right;
}
form input, form textarea{
margin: 2px 0 2px 2px;
}
.checkbox{
text-align: left;
display: block;
padding: 2px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body class="formatting">
<p>Select a file to Upload: </p>
<form action="../php/get_uploaded_wall.php" method="POST" enctype="multipart/form-data">
<fieldset>
<label for="wall_name">Wall Name:</label>
<input type="text" name="wall_name" size="50" /><br />
<label for="thumbnail_path">Thumbnail path:</label>
<input type="file" name="thumbnail_path" size="100" /><br />
<label for="desktop_path">Desktop path:</label>
<input id="desktop_path" type="file" name="desktop_path" size="100" /><br />
<label for="phone_path">Phone path:</label>
<input type="file" name="phone_path" size="100" /><br />
<label for="tablet_path">Tablet path:</label>
<input type="file" name="tablet_path" size="100" /><br />
<label for="desktop_dimension_id">Desktop dimensions:</label>
<label class="checkbox" id="desktop_checkbox">
<input type="checkbox" name="1366x768"> 1366x768<br />
<input type="checkbox" name="1280x800"> 1280x800<br />
<input type="checkbox" name="1920x1080"> 1920x1080<br />
<span></span>
</label>
<label for="phone_dimensions_id">Phone dimensions:</label>
<label class="checkbox" id="phone_checkbox">
<input type="checkbox" name="640x960"> 640x960<br />
<input type="checkbox" name="640x1136"> 640x1136<br />
<input type="checkbox" name="960x720"> 960x720<br />
</label>
<label for="tablet_dimensions_id" id="tablet_checkbox">Tablet dimensions:</label>
<label class="checkbox">
<input type="checkbox" name="1024x768"> 1024x768<br />
<input type="checkbox" name="2048x1536"> 2048x1536<br />
</label>
</fieldset>
<br />
<fieldset>
<input type="submit" value="Upload Wall" />
<input type="reset" value="Clear" />
</fieldset>
</form>
</body>
</html>
Here is my solution. You can view it here in Jfiddle.
The javascript I used relies on jQuery. You can see it below:
$(window).ready( function () {
$('.desktopCB').attr('disabled', '');
$('.phoneD').attr('disabled', '');
$('.tabletD').attr('disabled', '');
});
$('#desktop_path').on('change', function () {
$('.desktopCB').removeAttr('disabled');
});
$('input[name=phone_path]').on('change', function () {
$('.phoneD').removeAttr('disabled');
});
$('input[name=tablet_path]').on('change', function () {
$('.tabletD').removeAttr('disabled');
});
Aaargh. I've written a simple HTML page with a form on it to take in a phone number. I put in a Javascript function that makes the focus jump to the next form box once it's full. Everything seems perfect.
However, for some reason it is not working. I can't see why since I've created a nearly identical file with only the form and the function and it works! So something in this particular file is blocking it but after 30 minutes of tinkering I can't figure out what.
<html>
<head>
<script type="text/javascript">
function moveToNext(curr, next) {
if(curr.value.length == curr.getAttribute("maxlength"))
next.focus();
}
</script>
<title> Enter Phone Number </title>
<style type="text/css">
#content {
background:url(images/content-bg-rpt.gif) repeat;
margin: 0 auto;
height: 300px;
width: 500px;
}
#formArea {
margin-top: 50px;
width: 250px;
margin-left: auto;
margin-right: auto;
}
#submit {
position: relative;
}
.formInput { /* These are the input styles used in forms */
background: #f7f7f7 url(../img/input.gif) repeat-x;
border: 1px solid #d0d0d0;
margin-bottom: 6px;
color: #5f6c70;
font-size: 16px;
font-weight: bold;
padding-top: 11px;
padding-bottom: 11px;
padding-left: 11px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="formArea">
<form name="enterPhone" id="enterPhone" action="phoneresult.php" method="GET">
<input onkeyup="moveToNext(this, document.enterPhone.d345.formInput))" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input>
<input onkeyup="moveToNext(this, document.enterPhone.d345))" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"></input>
<input type="text" class="formInput" maxlength="4" size="4" name="d6789"></input>
<input id="submit" value="Enter" type="submit"></input>
</form>
</div>
</div>
</div>
</body>
</html>
Two things:
For each opening parenthesis, you need exactly one closing parenthesis. The onkeyup attribute of your inputs has two closing parentheses and one opening one.
Pass the HTML element directly, not .formInput.
This solves both issues for me:
<input onkeyup="moveToNext(this, document.enterPhone.d345)" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input>
<input onkeyup="moveToNext(this, document.enterPhone.d6789)" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"></input>
Fixed your code with this jsFiddle example
HTML
<div id="container">
<div id="content">
<div id="formArea">
<form name="enterPhone" id="enterPhone" action="phoneresult.php" method="GET">
<input onkeyup="moveToNext(this, document.getElementsByName('d345'))" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input>
<input onkeyup="moveToNext(this, document.getElementsByName('d6789'))" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"></input>
<input type="text" class="formInput" maxlength="4" size="4" name="d6789"></input>
<input id="submit" value="Enter" type="submit"></input>
</form>
</div>
</div>
</div>
JavaScript
function moveToNext(curr, next) {
if (curr.value.length == parseInt(curr.getAttribute("maxlength"), 10)) next[0].focus();
}
In your JS you were making a comparison between an integer and a string (curr.value.length == curr.getAttribute("maxlength")). In your HTML you weren't selecting the element properly with document.enterPhone.d345.formInput.
Try giving this a shot:
JS
function moveToNext(curr, next) {
if (curr.value.length >= curr.maxLength) {
document.getElementById(next).focus();
}
}
HTML
<form name="enterPhone" id="enterPhone" action="phoneresult.php" method="GET">
<input onkeyup="moveToNext(this, 'd345')" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"/>
<input onkeyup="moveToNext(this, 'd6789')" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"/>
<input type="text" class="formInput" maxlength="4" size="4" name="d6789" id="d6789"/>
<input id="submit" value="Enter" type="submit"/>
</form>
http://jsfiddle.net/JZxPR/
try this, replace three input tags with the code below:
<input onkeyup="moveToNext(this, document.enterPhone.d345)" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input>
<input onkeyup="moveToNext(this, document.enterPhone.d6789)" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"></input>
<input type="text" class="formInput" maxlength="4" size="4" name="d6789" id="d6789"></input>