I am working on a website where there is a donate box with a field and a contribute button.
<div id="donate-bar">
<form name="donate" id="donate">
<span class="donate-text">DONATE</span>
<input type="text" class="amount" name="amount" id="amount" value="$10" size="5">
<input type="submit" id="contribute" formaction="https://website.com/donate" accept-charset="utf-8" formmethod="GET" value="CONTRIBUTE">
</form>
</div>
However, the query gets sent to the donation processor's website as https://website.com/donate?amount=%2410 and doesn't tick the $10 box. If I remove the $ and submit the query again the value is sent and the correct amount is seen on the second page.
Is there an easy way using PHP or Javascript to have it remove the $ when the form is submitted so that https://website.com/donate?amount=%2410 changes to https://website.com/donate?amount=10.
I've tried a couple of things but nothing I've tried has worked. Some examples of code would be super helpful since I'm newer to some of this. Can I parse it as integer on submit? Any help would be greatly appreciated. Thank you!
Why not put the Dollar sign outside of the input and store the value as "10":
<div id="donate-bar">
<form name="donate" id="donate">
<span class="donate-text">DONATE</span>
$<input type="text" class="amount" name="amount" id="amount" value="10" size="5">
<input type="submit" id="contribute" formaction="https://website.com/donate" accept-charset="utf-8" formmethod="GET" value="CONTRIBUTE"></form></div>
$('form#donate').on('submit',function() {
var $input = $('input#amount');
$input.val(parseInt($input.val().replace(/\$/,''),10));
});
$_POST['amount'] = str_replace("$", "", $_POST['amount']);
There is a simple way to fix this.
First of all, one of my suggeestions is that you change the field to
type="number"
Second of all, in PHP, you can use the following to remove the dollar sign:
$amount = str_replace('$', '', $_REQUEST['amount']);
You can use split function in jquery as follows
var value = ($('#amount').val()).split('$');
var amount = value[1] ;
In PHP
$value = explode('$',$_POST['amount']); //results array elements
without $ symbols $amount = $value[1];
Or also in PHP
$amount = preg_replace("/[^0-9]/","",$_POST['amount']);
//gets only integer parts and omits all other
Also in PHP
$amount = str_replace('$', '', $_POST['amount']);
Hope this helps the simplest way is a hidden field:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function() {
//number regex - the format $10
var regex = /\$[1-9][0-9]+/;
//Setting validations
$(document).on('blur', '#pretty_amount', function() {
if(!regex.test($(this).val())) {
//Do something probably clear field
alert("Error Invalid number: " + $(this).val());
} else {
var newValue = $(this).val().match(/[1-9][0-9]+/g);
$('#amount').val(newValue);$('#amount').innerHtml(newValue);
}
});
});
</script>
</head>
<body>
<div id="donate-bar">
<form name="donate" id="donate">
<span class="donate-text">DONATE</span>
<input type="text" style="display: none;" name="amount" id="amount">
<input type="text" class="amount" name="pretty_amount" id="pretty_amount" value="$10" size="6">
<input type="submit" id="contribute" formaction="https://website.com/donate" accept-charset="utf-8" formmethod="GET" value="CONTRIBUTE"></form></div>
</body>
</html>
This does what you want, if I'm not mistaken.
Best regards
Related
I'm currently working on making my website look a bit better and I am planning to replace a current textbox input with a slider/textbox input combination, except I have no idea how to make it work within the current coding.
The current code looks as followed:
<tr><td>Risk:</td><td><?php textbox('CT class=textbox',$risk,10 ); ?></td></tr>
$risk is set to 0 earlier in the code, and when the form is submitted it is used to decide the (obviously) risk you want to use, it ranges from 0 to 100, based on that figure some calculations are made once you hit submit.
I want to use some standard, simple slider which should look something like this:
<input type="range" min="0" max="100" value="0" link-to="risktext">
<br><br>
<input type="text" id="risktext">
javascript part:
$(function() {
$('input').filter( function(){return this.type == 'range' } ).each(function(){
var $slider = $(this),
$text_box = $('#'+$(this).attr('link-to'));
$text_box.val(this.value);
$slider.change(function(){
$text_box.val(this.value);
});
$text_box.change(function(){
$slider.val($text_box.val());
});
The problem I experience now, and I guess it's really easy (and Im really basic at these kind of codes), is how do I link all this to change the value of $risk?
I hope anyone can help me :)
Here's a basic approach of what you are looking for (I think).
<?php
//Assign the risk value to 0 or the value defined in the $_POST variable.
$risk = 0;
if(isset($_POST['range'])) //Use the name of your control
$risk = $_POST['range'];
?>
<html>
<head>
<title></title>
</head>
<body>
<form action="" method="POST">
<input type="range" name="range" min="0" max="100" value="<?php echo $risk; ?>" link-to="risktext" />
<br />
<br />
<input type="text" name="riskText" id="risktext" value="<?php echo $risk;?>" />
<input type="submit" name="submitBtn" value="Submit" />
</form>
</body>
</html>
What I am trying to accomplish: When a user inputs dates, number of adults ect it would dynamically add the info via javascript to the URL within the url variables. This is what I have so far: ( I am a Noob but trying to make it work )
<script type="text/javascript">
$(function () {
$('#submit').click(function() {
$('#button').click(function(e) {
var checkInDate = document.getElementById('checkInDate').value;
var checkInMonthYear = document.getElementById('checkInMonthYear').value;
var checkOutDate = document.getElementById('checkOutDate').value;
var checkOutMonthYear = document.getElementById('checkOutMonthYear').value;
var numberOfAdults = document.getElementById('numberOfAdults').value;
var rateCode = document.getElementById('rateCode').value
window.location.replace("http://www.Link.com/redirect?path=hd&brandCode=cv&localeCode=en®ionCode=1&hotelCode=DISCV&checkInDate=27&checkInMonthYear=002016&checkOutDate=28&checkOutMonthYear=002016&numberOfAdults=2&rateCode=11223");
window.location = url;
});
});
Ok, so first things first: You probably don't need to do this at all. If you create a form and add a name attribute to each input, then the submission automatically creates the URL for you. Fixed value fields can be set to type="hidden".
For this to work you need to use the "GET" method.
<form action="http://www.Link.com/redirect" method="GET">
<input type="hidden" name="path" value="hd"><br>
<input type="hidden" name="brandCode" value="cv"><br>
<input type="hidden" name="localeCode" value="en"><br>
<input type="hidden" name="regionCode" value="1"><br>
<input type="hidden" name="hotelCode" value="DISCV"><br>
<input type="text" name="checkInDate"><br>
<input type="text" name="checkInMonthYear"><br>
<input type="text" name="checkOutDate"><br>
<input type="text" name="checkOutMonthYear"><br>
<input type="text" name="numberOfAdults"><br>
<input type="text" name="rateCode"><br>
<input type="submit">
</form>
Clicking "Submit" changes the URL to the desired one.
If this does not suit your needs, you can replace parameters in the URL by following the advice in this SO answer: Answer Link
This is much better than trying to re-implement URL manipulation on your own.
I have a php form that is for processing payments and I am using js to add a dollar sign and decimal point to the input field. I can't seem to find out how I can then remove the dollar sign and decimal point on submit.
$amount = trim($_POST['amount']);
<div class="input-block">
<label for="amount" class="label_comment"><strong>Donation Amount</strong>*</label>
<input type="text" name="amount" value="<?php echo $_POST['amount']; ?>" placeholder="$" data-stripe="amount" id="amount" required="">
</div>
<script type="text/javascript" src="/js/jquery.price_format.2.0.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#amount').priceFormat({
prefix: '$',
centsSeparator: '.',
thousandsSeparator: ','
});
});
</script>
You can either use the .unmask() function to get the raw value and set in on a hidden input OR reset your formatting in the onSubmit event.
<form id="yourForm">
<div class="input-block">
<label for="amount" class="label_comment"><strong>Donation Amount</strong>*</label>
<input type="text" name="amount" value="<?php echo $_POST['amount']; ?>" placeholder="$" data-stripe="amount" id="amount" required="">
<input type="hidden" id="rawAmountField" name="rawAmount" value="" />
</div>
</form>
Two changes: a hidden field and the #id argument for the -tag. Then you can add like
<script type="text/javascript">
$(document).ready(function() {
$('#yourForm').submit(function( event ) {
/* Set the hidden field */
$('#rawAmountField').value($('#amount).unmask());
/* OR reset format like */
$('#amount').priceFormat({
prefix: '',
centsSeparator: '.',
thousandsSeparator: ''
});
});
});
</script>
I think the best way to handle this would be to use the filter_input() function. It would work like:
$filtered_amount = filter_input(INPUT_POST, 'amount', FILTER_SANITIZE_NUMBER_INT);
That would strip everything from $_POST['amount'] that isn't a numerical digit. Of course it requires the use of PHP5.2 or greater.
function remove(number) {
var tag = number.charAt(0);
if(tag=='$')
{
var res = number.slice(1);
}
if(tag!='$')
{
var res = number.slice(0);
}
document.formname.roundedfield.value = '$'+ parseInt(res);
}
I have a html form where people can enter number of purchase item. Default value of that text field is 1.
<input type="text" size="5" value="1" id="position" class="amntstyle" name="position">
I want another text input field for price where the value would be 15 times of position automatically.
For example if someone enter 3 in position field, the price input field will get value 45 automatically. Like this
<input type="text" size="5" value="45" id="price" class="amntstyle" name="price">
Is it possible?
Thanks a lot for your help.
simple .. use javascript functions and onkeyup
<script type="text/javascript">
function updatePrice(amount, element){
var amount = parseInt(amount);
if(!amount) amount = 0;
var toUpdate = amount*15;
document.getElementById(element).value = toUpdate;
}
</script>
<input type="text" size="5" value="1" id="position" class="amntstyle" name="position" onkeyup="updatePrice(this.value,'price');">
<input type="text" size="5" value="45" id="price" class="amntstyle" name="price">
Here is the YUI3 version:
<script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script>
<script>
YUI().use("node", function(Y) {
var priceNode = Y.one("#price");
var positionNode = Y.one("#position");
positionNode.on("change", function(e) {
priceNode.set("value", positionNode.get("value")*15);
});
});
</script>
Working demo: http://jsfiddle.net/YgheP/
Made it for specific scenario but you can tweak it to your needs.
Hope it feeds your cause. :)
also look for isNaN check and float value as well! parseFloat(string)
code
$('#position').keyup(function() {
var price = parseInt(this.value) * 15;
$('#price').prop('value', price);
});
if you are using jquery then by using plugin formInteract, you just need to do this.
<input type="text" size="5" value="1" id="position" class="amntstyle" name="position">
<input type="text" size="5" value="45" id="price" class="amntstyle" name="price" data-bind-change-value="#position*15">
at bottom of the page just include this plugin file, everything else will be done itself.
here is the link to project
https://bitbucket.org/ranjeet1985/forminteract
You can use this plugin for many purpose like getting value of form, putting value to form, validation of form and many more. you can see some example of code in index.html file of project
You can use this code to attach a eventhandler that will solve your problem:
$("#position").bind("change", function(){
$("#price").val(parseInt($("#position").val()) * 15);
});
Hope that helps
<INPUT name="Qty[]" id="Qty[]" type="text" class="south" />
<INPUT name="Amount[]" id="Amount[]" type="text" class="south"/>
<INPUT name="TotalAmount[]" id="TotalAmount[]" type="text" class="south" disabled="disabled"/>
Here i have problem with my code that i need to calculate multiply the first two textboxes. and that result will be appear into the last one, i mean third textbox as TotalAmount. Could you help me? here three textboxes appeared in single row with add button. when i submit the add button new created with three boxes again. I need to finish it in jquery of java script. please help me guys
First of all, remove the array-declaration, you're not using the the input fields as arrays. they are single values.
<INPUT name="Qty" id="Qty" type="text" class="south" />
<INPUT name="Amount" id="Amount" type="text" class="south"/>
<INPUT name="TotalAmount" id="TotalAmount" type="text" class="south" disabled="disabled"/>
And the jquery.
$(document).ready(function(){
qty = $("#Qty").val();
amount = $("Amount").val();
$("#Qty, #Amount").keyup(function(){
$("#TotalAmount").val((qty)*(amount));
});
});
Here is your JavaScript:
$(document).ready(function () {
var $quantity = $('#Qty\\[\\]'),
$amount = $('#Amount\\[\\]'),
$total = $('#TotalAmount\\[\\]'),
quantity,
amount;
$($quantity.add($amount)).keyup(function () {
quantity = Number($quantity.val().replace(/[^0-9,.]/g, ''));
amount = Number($amount.val().replace(/[^0-9,.]/g, ''));
$total.val(quantity * amount);
});
});
UPDATE Changed to keep the DOM ids the same in case they have to be that way. For an unmentioned reason as mentioned by #Ken Keenan.