Submit unmasked form value with jQuery/meioMask - javascript

I mask the input of fields like SSN to contain dashes when they are displayed but would like the value that is submitted to be only the numbers.
For example, my SSN is formated as:
<input type="text" name="ssn" alt="999-999-9999"/>
And upon entering "1234567890" I get the nice formatted output.
123-456-7890
Now I would like only the numbers to be submitted as "1234567890". Is this easily possible?
For reference: http://www.meiocodigo.com/projects/meiomask/

This would probably solve your problem. It's quick-n-dirty though. It just removes the '-' signs with a regex and spits it out into a hidden field which will then be submitted.
<input type="text" id="ssnMasked" />
<input type="hidden" id="ssn" name="ssn" />
<input type="button" value="Submit" onclick="RemoveMaskAndSubmit()"/>
<script type="text/javascript">
function RemoveMaskAndSubmit() {
$('#ssn').val($('#ssnMasked').val().replace(/\-/g,''));
$('#formId').submit();
}
</script>

I'm not sure on the etiquette on answering my own question but I actually used a fairly simple solution derived from both of your answers.
Problems arose from using hidden fields based on the site using the Struts framework and it's automatic form processing and special JSP form tags. I would change the backend to do all the processing there but as it's the middle of the day I can't restart the Tomcat server to load in the changes without crippling operations for a short time.
On submit I call a function UnmaskMaskedValue() which explicitly sets all the masked values to have a mask not containing the invalid characters.
function UnmaskMaskedValue() {
$('#ssn').setMask('9999999999');
}
This changes the value before any data is submitted to be valid on the backend.
I appreciate both of your suggestions and would rate you up if only I was able to.

Looks like this option is deprecated.
<a onclick="jQuery('#unmasked_string').html( jQuery('#unmasked_input').unmaskedVal() );return false;" href="#">Get the unmasked value from the input</a>

Related

Prevent browser from remembering credentials (Password)

Is it possible after processing any login Form to prevent the browser from offering the option to remember the password?
I know it's been asked and answered here but none of the answers have worked so far, even one of them suggested using:
autocomplete="off"
But that also didn't worked.
I'm using AngularJS and Jade as templating engine (not sure if relevant or not anyhow), is there any way to do this?
if a site sets autocomplete="off" for a form, and the form includes username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits this page.
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
You should also set autocomplete="off" on your input as well as your form.
Google Chrome release notes:
The Google Chrome UI for auto-complete request varies, depending on whether autocomplete is set to off on input elements as well as their form. Specifically, when a form has autocomplete set to off and its input element's autocomplete field is not set, then if the user asks for autofill suggestions for the input element, Chrome might display a message saying "autocomplete has been disabled for this form." On the other hand, if both the form and the input element have autocomplete set to off, the browser will not display that message. For this reason, you should set autocomplete to off for each input that has custom auto-completion.
I would suggest using Javascript to create a random number. Pass that random number to your Server Action using a hidden field, then incorporate that random number into the names of the "login" and "password" fields.
E.g. (psuedo code, the exact syntax depends on whether you use PHP, jQuery, pure Javascript, etc.)
<script>
var number = Math.random();
var login_name = 'name_'+number;
var pass_word = 'pass_'+number;
</script>
<input name='number' value="number" type='hidden'>
<input name="login_name" type='text'>
<input name="pass_word" type='password'>
Your server reads the "number" field, then uses that to read "name_"number value and "pass_"number value.
It won't matter whether or not the user saves their password in the browser, since every time the user logs in, the name and password fields will be different.
Since you're using AngularJS, you can leave the field unnamed, and access the data it contains through the model :
Login: <input ng-model="login" type="text" />
Password: <input ng-model="password" type="password" autocomplete="off" />
and in your javascript file :
$scope.doLogin = function() {
var dataObj = {
login: $scope.login,
password: $scope.password
};
var res = $http.post('/login', dataObj);
}
Tested in IE10 and Chrome 54
This post is little bit old now, but sincce I found a solution that works for me (at least with Chrome version 56), I'll share it here.
If you remove name and password attributes on your input, then Chrome won't ask to save the password. Then you just have to add the missing attributes by code just before submitting the form:
<!-- Do not set "id" and "name" attributes -->
Login: <input type="text">
Password: <input type="password">
<!-- Handle submit action -->
<input type="submit" onclick="login(this)">
Then in Javascript:
function login(submitButton) {
var form = submitButton.form;
// fill input names by code before submitting
var inputs = $(form).find('input');
$(inputs[0]).attr('name', 'userName');
$(inputs[1]).attr('name', 'password');
form.submit();
}
I hope this will help. Tested on Chrome 56 only.
The problem I have is that while I understand the 'annoyance' to a user in not being able to have their browser remember their password and I don't want to 'disable' that feature completely, there are times when I want to disable it for just a certain password field. Example for me being a 'reset your password' dialogue box.
I want to force them to have to re-enter their old password and then of course type the new one twice.
It's been my experience that no matter what I name that 'old' password input, it is auto-filled with the 'remembered' password (in Firefox 49.0.1 anyway). Maybe this is where I'm getting this wrong, but it just fills it no matter the fact that this input's name is different from saying the login input field.
The behavior I see is basically that the browser seems to say "This user has remembered a password for this site, so now just fill every input type='password' box with that password no matter the name. It seems to me that this should be based on the name attribute, but for me (on multiple sites I've worked on) this just does not seem to be the case.
My solution:
Color this password field to the same color as the background of your input so the 'password dots' is essentially invisible on page load.
onload, onblur, after a timeout, or however you want to do it, use JQuery or JS to set the value of that password field to nothing (blank), then set the color of the field to whatever it is supposed to be.
$("#old_password").val('').css('color','black);
I've discovered that Firefox 52.0.2 is incredibly determined to remember the autocompletion values. I tried almost everything suggested above, including changing the name attributes to random values. The only thing that is working for me is setting the values to "" with Javascript after the browser has had its way with the form.
My use case is lucky in that I do not have to resort to CSS tricks to prevent a confusing and/or annoying flash of autocompleted form values (as proposed by #MinnesotaSlim above) because my form is hidden until they click a button; then it's displayed via a Bootstrap modal. Hence (with jQuery),
$('#my-button').on("click",function(){
$('#form-login input').val("");
});
// this also works nicely
$('#my-modal').on("show.bs.modal",function(){
$('#form-login input').val("");
})
And I imagine you might be able to get the same effect by having your form initially hidden, and in your document load event, manually override the browser and then display the form.
For me, the only solution that reliably worked was to empty username and password input element just before submitting form combined with replacing submit button for the regular button with onclick handler.
NOTE: We use Microsoft MVC so we needed to populate ViewModel with entered credentials. Therefore we created hidden input elements bound to model and copied credential values to them before emptying visible inputs.
<form>
<input id="UserName" name="UserName" type="hidden" value="">
<input id="Password" name="Password" type="hidden" value="">
</form>
<input id="boxUsr" name="boxUsr" type="text" value="" autocomplete="off">
<input id="boxPsw" name="boxPsw" type="password" autocomplete="off">
<input type="submit" value="Login" onclick="javascript:submitformforlogin()">
function submitformforlogin() {
$("[name='boxPsw'],[name='boxUsr']").attr('readonly','true');
var psw = document.getElementsByName('boxPsw')[0];
var usr = document.getElementsByName('boxUsr')[0];
if (psw.value != "false") {
$('#Password').val(psw.value);
$('#UserName').val(usr.value);
psw.value = "";
usr.value = "";
$("form").submit();
} else
window.alert("Error!");
}

How can I pass data to a Smartsheet Web Form?

I have a html link which opens a Smartsheet form in new window so our online customers can fill out the form.
I would like to pass the value of a TextField (product name or product code) in my existing form to my smartsheet form. This would help my customers as they would not have to write the product name or product code a second time.
I have the following javascript to generate the URL that links to the Smartsheet form.
<script type="text/javascript">// <![CDATA[
var productName="productName.firstChild.nodeValue";
var sampleLink= "Order Sample!";
document.write(sampleLink.link("https://app.smartsheet.com/b/form?EQBCT=fbab5300a6d74cc58ae6326e267b3c4f/label.clsCaptionBold.clsFieldLabel/79019814="+productName));
// ]]></script>
The HTML code for the TextField is below:
<div class="clsField clsTextField"><label onclick="" class="clsCaptionBold clsFieldLabel" for="79019814">Product Name</label><br>
<input type="text" id="79019814" name="79019814" maxlength="4000" value=""></div>
I don't know if my javascript code is correct but when I click the link in the page I get the following message:
the form you are attempting to access is no longer active
What is the correct way to send data to a Smartsheet form?
Can I auto populate form data in a Smartsheet form?
Yes! :-)
How do I populate the form data in a Smartsheet form?
Option 1: Set a default value in the form
If the form data is always the same you can set a default value in Smartsheet's form editor. The screenshot below gives an example of this by setting the default value to 1 for the quantity.
Option 2: Pass a value in the link
A default value can be sent to the form by modifying the link and passing the value in the URL. This can be accomplished by using the field caption (in red below) for the key. For example, if my form looked like the following image I can pass in the quantity by modifying the form URL and adding &Quantity=2 to the end of the URL (note it is case sensitive).
The full URL would look something like https://app.smartsheet.com/b/form?EQBCT=ded979748e9a4a200ff56a46a6e3afae&Quantity=2
Also, the field caption might have spaces or other special characters so it is important to URL encode these as well. For example, If I wanted to pass the "Product Name" in the URL I would add &Product%20Name=laptop to the URL.
Answering the Original Question
To answer the original question, you will want your URL to look like the following to send the Product Name.
https://app.smartsheet.com/b/form?EQBCT=fbab5300a6d74cc58ae6326e267b3c4f&Product%20Name=driveway
This url can be dynamically generated by building the URL with javascript or passing the data via your own custom form. Since you are using a form in your example I will show that approach (which does not require javascript).
<form action="https://app.smartsheet.com/b/form" method="GET" >
<input type="hidden" name="EQBCT" value="fbab5300a6d74cc58ae6326e267b3c4f" />
<label for="productName">Product Name</label>:
<input type="text" name="Product Name" value="">
<input type="submit" name="Send" />
</form>
Note that I added a hidden element containing the EQBCT key that was in the original URL.

client-side form validation after clicking SUBMIT

I have 2 php files "source.php" and "target.php". In the source.php part I have,
<form method="POST" id="form1" action="target.php">
...
<input type="submit" name="submit" value="Submit"/>
</form>
When I click on submit it goes to the "target.php" (even if I have errors in the form), but I want that, only after all form fields are validated it will go to the target page, else it shows some kind of warning message and stays on the same page. Please help! Maybe this is a stupid question for some but I am a beginner. (I know how to do all the field validations and its working fine).
Duplicate of duplicate questions.Please search throughly before you post next time.
Generally javascripts are used for validation.But there are cases when javascripts become inefficient,for example when you need to validate country and its states.Its not practical to send the entire list of countries and states to the client. In such scenarios AJAX is used.By using AJAX the client sends the data to server immediatly after the user enters it.then it fetch only the required data.Its a simultaneous two way communication between client and server.for example if the user enters country name as INDIA,using AJAX states of INDIA are loaded for validation,thus saving bandwidth.
JavaScript and AJAX are not easy to learn,you must research try and correct different codes.Just google "JavaScript form validation"...
This is from w3Schools...
Required Fields
The function below checks if a field has been left empty. If the field is blank, an alert box alerts a message, the function returns false, and the form will not be submitted:
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
The function above could be called when a form is submitted:
Example
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
here is more basic examples http://www.w3schools.com/js/js_form_validation.asp
Good Luck
You can use AJAX to validate your form. JavaScript is not recommended for form validation.
A simple tutorial for AJAX Validation is available here
But be aware, even if you are validating your form before submission to target.php, always make sure that you check the data in target.php too. This is because JavaScript can be changed (thanks to the modern DOM interpreters) in the browser. It can be made so that the form is submitted without AJAX verification. So you should check it twice, before and after submission.
Also make sure to escape the data, as user input can never be trusted.
You should also user strip_tags($string) to prevent use from inserting php code.
JavaScript is most likely the easiest way to do this (read the other posts).
However, if you don't want to use JavaScript you could always check if all forms are set using isset() or something similar and then passing on the $_POST variables in the URL and grabbing those using $_GET. Of course make sure there isn't any sensitive information in the URL. In addition: you could always work with global variables.
Another way to do this without JavaScript is submit to a database after several checks (like escaping the strings etc.), perhaps even encrypt, but I don't suggest this since this is the long way around.

javascript code to prevent bots from submitting form

I need a javascript code to prevents bots from submitting forms.
But i need a client side code in javascript that work like CAPTCHA but don't call the server
thank you
Most straight forward and simple way will be to add or edit form data on the fly when the button is actually clicked:
<input type="hidden" name="SubmittedByHuman" value="NO" />
<input type="submit" value="Submit me" onclick="this.form.elements['SubmittedByHuman'] = 'YES';" />
Having this, on the server side check the value of form element called "SubmittedByHuman" - if it will be "NO" it means something bypassed the submit button - or as people mentioned correctly in comments, user did click but has disabled JavaScript.
do something like
<h1>Type the result in the input box : 1+1</h1>
<input id="sum" type="text"/>
and before submitting you check if the value in the input is 2 and then submit it.
To improve this type of code you could randomly create these 2 values in the h1 and save them into a var and before submiting check if input and sum are the same.
I doubt this is possible, as bots are sophisticated enough to bypass most things.
Remember, the bot isn't going to open the webpage in a browser and press submit. It'll probably scan the page for a <form>, make a list of all the <input> fields, and perform a POST request containing all the data for each one.
It won't run any javascript, or press any buttons. You'll have to make the check server-side.

Need to wrap string in 'Single Quotes' on form submission

Hello all this is what I got:
NSN: <input type="text" name="filterCriteria(NSN).values" value=""/>
<input type="hidden" name="filterCriteria(NSN).fieldName" value="NSN"/>
<input type="hidden" name="filterCriteria(NSN).operation" value="="/>
For database purposes I need to wrap the string of input value= in single quotes on form submission. I guess this can be done in javascript?
This is really not the job of JavaScript (which runs - or doesn't - in the browser) to prepare the data for the database query that is performed at server-side.
Never trust any data that comes from the browser. Always use prepared statements to bind the parameters of the query and make sure they're correctly escaped and quoted.

Categories

Resources