This seems to be a simple problem - However I just can't get my head around it!
So basically what the issue is, is that when a customer enters a "Payment amount" on my website I am trying to convert their input into something like this...
CUSTOMER INPUTS SOMETHING LIKE THIS:
£175.98
I want it to be converted to something like this: 175.98
Or if the customer enters 19803
I want to be able to append the decimal and comma places and remove any invalid characters like so:
19,803.00
I have searched and searched the internet for about 2 days and can't find anything like this!
Sorry I haven't provided any code but I figured if i can't find anything like this I'm sure that others will have the same issue.
Form I am using:
<form action="https://myaccount.mysite.com/s/customer/payment/new-payment/action.do" method="post">
<input type="text" name="pamt" id="payment_amount" />
<input type="submit" value="Continue to PayPal" />
</form>
You should try out numeral.js. I have used it for similar formatting tasks in the past.
http://numeraljs.com/
For example:
var string = numeral(1000).format('0,0.00');
So, then you could use the onblur event to change the value to what you would like it to be:
<form action="https://myaccount.mysite.com/s/customer/payment/new-payment/action.do" method="post">
<input type="text" name="pamt" id="payment_amount" onblur="try{this.value = numeral(this.value).format('0,0.00') }catch(e){};" />
<input type="submit" value="Continue to PayPal" />
</form>
UPDATE
It appears there is a bug in the following version of numeral.js
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
However, I had full success using the version titled numeral.js that can be downloaded here:
https://github.com/adamwdraper/Numeral-js/zipball/master
Related
I am an absolute begginer to web developing and I want to simply do a chance calculator in the online tool: jsfiddle. I got the error:"Shell form does not validate" and some strange errors after. Here is my HTML code:
<body>
<form method="post">The chance of succes:
<input type="number" name="chance">
<br>How many tries:
<input type="number" name="tries">
<br>
<input type="submit" value="Calculate!">
<br>
</form>
</body>
And my javascript code is:
function calculate(chance, tries) {
console.log(chance / tries * 100);
}
As I said, I am new to this so please try to explain step by step.
You have a few problems. One is that your form is trying to submit itself to itself. Another is that your calculate function is never called.
Your parameters for the function are never called either. Let's change the inputs to have an id instead of a name. For example:
<input type="number" id="chance">
This makes it easier to get the value from the input when clicking the button. I've made the input a button instead of a submit, just to make sure that your form data isn't getting sent anywhere.
<input type="button" onclick="return calculate(getElementById('chance').value, getElementById('tries').value)" value="Calculate!">
Here is a jsfiddle with a possible solution for you. http://jsfiddle.net/0dmkxcab/
Okay, so I asked a variant of this question before, but I think the thread has died at this point, and I have a followup question:
Using a Form to Dynamically Change the URL in the Address Bar
So, I was looking to find a way to use a form to quickly add a product to a Volusion cart by entering it's product code. Turns out, if you're on the cart page, the solution is this snippet:
<form action="ShoppingCart.asp" name="form" method="get">
<input type="text" value="" name="ProductCode">
<input type="submit" value="Add To Cart">
</form>
Well, this doesn't work at all on other pages...knowing very little about how GET forms work, I'd love to better understand why this is, and what I can do to make this work on, say, the homepage.
The site (currently) is: http://ezndb.cwjea.servertrust.com/
As you can see, I have the red area sporting the code that I used on the check out page, but it doesn't work...any suggestions? I know other threads have suggested javascript/jquery or php methods of getting this to happen...
any form with the method ="get" will append data to the url in name value pairs ( the name being the input name
<form action="#" name="form" method="get">
<input name="q" />
<input name="q2" />
<input type="submit" value ="click and look at the address bar, Probably won't work on stack though" />
</form>
It doesn't work because your store is a members only site so the customers cannot add items to the cart until they are confirmed members.
I am trying to use Pattern attribute to do validation on text box.
When ever user entered any of these .....i want to show some validation message.
So i created that element as follows:
<input type="text" pattern="/(<!|&#|<\?|<|>)/" title="Required" required />
When ever i entered any text it is showing the alert...
How to get rid of this?
You were using the wrong pattern. In HTML patterns, you don't need an opening and closing delimiter. Also, the browser checks, if the entered text MATCHES the pattern, but you would need the exact opposite (if I understood it correctly). Try something like this:
<form>
<input type="text" pattern="^((?!(<)|(<!)|(<\?)|(&#)|(>)).)*$" title="Required" required />
<input type="submit" />
</form>
I know I can pass query parameters from a form and expect them in the query string:
<form method="GET">
<input type="text" name="param" value="value" />
<input type="submit" value="submit" />
</form>
This results in
http://blah-blah-blah/blah?param=value
However, in my webapp, I'm using path parameters. To access a single book, #459, in the library, you'd visit
/books/459
and to check one out, POST to
/books/459/checkout
where 459 is a path parameter. When I try
<form action="/books/{book_id}">...</form>
it takes me to
/books/%7Bbook_id%7D
rather than
/books/459
Do I need javascript or something to build the URI?
Thanks to RobG
I have used the same thing in calling WhatsApp from mobile application
It works beautifully
<form action="https://wa.me/"
onsubmit="this.action = this.action + this.mobile.value; this.submit();">
<input type="tel" name="mobile" size="10" value="91xxxxxxxxxx"/>
<input type="text" name="text" value="Thanks Vijayan!" />
<input type="submit" value="WhatsApp" />
</form>
You may need something like:
<form onsubmit="this.action = this.action + this.book_id.value;" ...>
However, making the action dependent on scripting is poor design. It is much more robust for your server to deal with the URI ...?book_id=value, which does not require any client script at all.
If you are generating your HTML with PHP, the code below should work (untested).
$book_id = 459;
<form action="/books/{$book_id}">...</form>
Alternatively, you could dynamically modify the html using JavaScript. It is better not to do it this way because some users may disable JavaScript. (untested)
$('form').attr('action','/books/' + book_id);
I came to see that form file input field value cannot be set with javascript for security reasons.
I just want to copy a FILE input to another form and post it, I searched for a work around and could not find anything, is it possible?
UPDATE: my code:
function prepareUpload( filevalue ){
document.getElementById('logo').value =filevalue;
var mform = document.getElementById('sleeker');
ajaxUpload( mform,'<?php echo base_url(); ?>'); // a methods to upload...
}
<input class="input-file-upload" type="file" size="20" name="logodummy" id="logodummy" onchange="prepareUpload( this.value );" />
<form action="" method="post" name="sleeker" id="sleeker" enctype="multipart/form-data" onbeforesubmit="return false;">
<p><input type="hidden" name="logo" id="logo" /></p>
</form>
Anything other thatn file input are working fine, and I could receive with $_POST, but $_FILES doesn't have values. And this code alone working fine too. I think this coe is enough?
Yes, you can place the <input type="file"> outside your HTML form, and then use the onChange event to fill an <input type="hidden"> within the form that gets posted:
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="hidden" id="hidden_file" value="" />
<input type="submit" />
</form>
However in modern browsers, you will only be able to access the file name, and not the full path. You may want to check the following Stack Overflow posts for further information on this topic:
Can’t get the complete address while uploading a file
How to get the file path from HTML input form in Firefox 3
UPDATE:
The original question made me think that you only needed to copy the "file name" to another HTML form, and not the whole <input type="file"> representation.
Further to the update, I assume you meant something like this:
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="file" id="hidden_file" value="" />
<input type="submit" />
</form>
Unfortunately the above does not work. Firefox will return "Security error code: 1000" if you try the above example.
As for some workarounds, you may want to the check David Dorward's suggestions:
Using cloneNode
Moving the input field with appendChild before submitting the form
You could move the file input to the other form (with appendChild or insertBefore), submit the form, and then move it back.
I haven't tested this in depth, but it appears to work in Firefox.
Use cloneNode
var copy = file_input.cloneNode(1);
form2.appendChild(copy);
Very much similar to cloneNode except in jQuery
In an xulrunner browser (like firefox) I have successfully used something like the following:
$('input:file').clone().appendTo($('#mainform'));
This should copy all file input objects into the form with id=mainform.
Avoid using the id attribute in the objects to be cloned. id's should always be unique.
I realised that this might be late to the party, but with HTML5, you can use the "form" attribute to target a form, like [form id="the_form"]...[/form]....[input form="the_form type="file" ... /]