I'm working on an input form, and I have a Javascript function that gets all of the field values when you press a button. I am looking for a way to automatically refresh the Javascript values (so I can, for example, check if a username is too short on a registration page as they type, and also check if the username is available). Would this be possible?
To clarify, I have an HTML input field (for text), and as the user is typing a result, automatically update.
I'm also open to using PHP or jQuery if it's not possible using solely Javascript, but I'd prefer Javascript if it's possible. Also, sorry if this is a rather basic question, but I've searched and searched and can't find anything on it. I know it's possible because I've seen it on websites (in fact, even on this one, as you type a question, it updates the preview at the bottom).
You should use JQuery Validation Plugin to reduce the heavy checking.
Check this one out at http://jquery.bassistance.de/validate/demo/
No jQuery needed
<input type="text" onKeyUp="validate(this.value);">
function validate(value){
//validate code on value
}
You should monitor onkeyup event
<input type="text" id="test">
$('#test').on('keyup', function() { //this function is triggered every time the user releases a key while typing inside the text field above
//do whatever you want here
});
Related
I am new to any kind of coding and was wondering if anyone could help me out as this is a major part of my website.
Also I am using a website creator (Wix.com) as I don't really know much coding, which means I can only use html/javascript
what I'm after doing is having a user input box that requires a reference number that I will be sending out with my products, when submitted I want it to take them to the relevant page e.g. my site is http://www.scotttaylor1989.wix.com/authenticproducts (soon to be www.authentic-products.com) and say the reference number is 123456789 when submit is clicked i want it to take them to scotttaylor1989.wix.com/authenticproducts/123456789 (www.authentic-products.com/123456789) ill obviously change the code when my site address changes.
On the other hand say 987654321 is NOT a reference number and they enter it and click submit I want an alert to pop up saying invalid reference number.
Below is what I have so far not much I know but javascript baffles me :/, I've been searching the internet for days and can't find a solution as everyone is doing it using php, any help would be much appreciated ;)
I don't want the code given to me as I want to learn how it works I've looked around www.w3schools.com but just don't know how its done.
<form name="RefChecker">
<input type="text" placeholder="Enter Reference Number" name="ref">
<input type="submit" value="submit" onclick="gotoref()"?
</form>
<script type="text/javascript">
function gotoref()
{
}
</script>
use the form submit event and not the click event. Return false from the submit event to not submit the form
If you do not user a server process you need to store the reference number in the page which can easily be viewed by looking at the source. Is that ok?
You ask for suggestions but no code so here is my suggestion
A solution that might work for you is to put an image on the server called 123456789.gif
In the submit event of the form you can load an image with the value in the field+"gif" and return false to cancel the submission
onerror of the gif alert the error, onload, change the location to "/"+value of field
I have a page where I need to filter certain values provided by an embedded widget based on user input in a text field.
I can do this by appending certain parameters to the widget code embedded on the page and refresh the page
How do I take the user input , replace the widget code and refresh the page?
this is the code I might need to append to the widget code that already exist on my page.
%22filter%22:%7B%22keyword%22:%22userprovidedvalue%22%7D,
I am using jsp
You should be able to handle it by putting an onchange on the input field, and sending it to a function that reads the value off of the input field. Alternately, you can have the submit button call a function, that first reads the value off the input field, then performs whatever logic you need, then submits the form.
Jquery is often useful for making things like this easier and more intuitive, though it does have a bit of a learning curve to ramp up.
I have a checkout form that will display a pop-up survey to ask why they haven't started filling out the form after 5 seconds. However, I need to be able to check whether the user has actually entered data as opposed to data entered by the browser's auto-fill feature (any pre-populated data set in the markup I specifically ignore in the javascript or jQuery).
Right now my solution is to have the setTimeout run a function which checks a variable (true or false) that is set to false on a jQuery .focus or .change event on the input types (input, select, textarea). However, since the javascript may load after the user is able to use the form elements, I have to check whether the user has entered data before the survey pops up.
Is it possible to differentiate between user-inputted data and browser-inputted data if the javascript loads after the user has done anything to the form fields?
If you really want to tell browser not to autofill it at all, you could use autocomplete attribute, but this is unfortunately an invalid attribute and thus will not validate. If you really need your HTML to validate, you can use jQuery to do just that for you:
$(your_form_selector).attr('autocomplete', 'off');
More discussion about autocomplete here
What about .keyup event for form?
var isFilledByUser = false;
$("#input").keyup(function(){
var isFilledByUser = true;
});
ok... this was mildly entertaining, but I definitely agree... this feature would be so annoying XD
http://jsfiddle.net/NTvrN/1/
but there you go... now type, foo!
I have build a quite complex widget which contains "some kind of
form". It has a form tag, but I'm loading a lot of stuff in there via
Ajax etc. Cannot explain it in detail, and the code is too long to
paste in here.
Now, in a "live('click', function()" I use for one of the form fields,
I'm writing a couple of values into hidden fields of another form.
That works fine, as I can see them in the generated code. But if I
leave the page and then hit the back button, the values are gone.
If I write some values into those fields outside the live click
function though, they are still there when I leave the page and come
back using the back button.
But I need to write the values into the hidden fields out of the live
click function (I'm inserting values from fields of my form into
them).
I don't know what causes this and wasn't able to find a workaround yet
(even though I tried a lot).
Any ideas?
Thanks!
Have a look at the jquery history plugin (http://plugins.jquery.com/project/history)
Usually what happens is that browser remembers what you have entered into a form (even if you don't submit it) so that when you hit back button, it populates all the visible fields for you.
It seems it's not the case with hidden fields. There's a workaround though.
Every time one of your hidden fields is changed, you can add #part to your url (eg. www.mysite.com/users#userId,groupId,...).
When the page is loaded again (via back button for example), it will contain the #part. Parse it as a string to determine how to populate hidden fields and populate them.
Review the history plugin for jQuery to see how to read the #part.http://plugins.jquery.com/files/jquery.history.js_0.txt
Use CSS to hide the input instead of the input type.
<input type="text" id="foo" name="foo" style="display: none;" />
instead of
<input type="hidden" id="foo" name="foo" />
I tripped over the same issue and this seems to resolve it.
I'm trying to reduce the form spam on our website. (It's actually pretty recent).
I seem to remember reading somewhere that the spammers aren't executing the Javascript on the site.
Is that true?
And if so, then could you simply check for javascript being disabled and then figure it's likely that it's spam?
There are still a large number of people that run with Javascript turned off.
Alternatively, I have had decent success with stopping form spam using CSS. Basically, include an input field and label that is hidden using CSS (display: none;) and once submitted, check if anything has been entered in the field.
I generally label the field as a spam filter with an instruction to not put anything in the field, but all newer browsers will properly hide the block.
More: Fighting Spam with CSS
reCAPTCHA is also surprisingly easy to implement.
check http://kahi.cz/wordpress/ravens-antispam-plugin/ for a nice answer
if puts in
<noscript><p><label for="websiteurl99f">Please type "e73053": </label><input type="text" name="websiteurl99f" id="websiteurl99f" /></p></noscript>
<script type="text/javascript">/* <![CDATA[ */ document.write('<div><input type="hidden" name="websiteurl99f" value="e' + '73053" \/><\/div>'); /* ]]> */</script>
so javascript users see nothing, non js users just type in a word
if a spammer targets you specifically it won't take them long to code round it but for drive by spammers it should be good
In the same vein, adding a dummy field and then using CSS to hide it is a good way to trick the bots. If the field is submitted, you know a non-human probably completed the form.
Especially effective if you label/name the field something along the lines of URL or website.
You could check - have JavaScript that populates a hidden form field with a specific value after the page loads. Then, when the page posts back to the server, check that hidden form field the expected value. If it is not there, that means the JavaScript didn't execute.
As to whether you should assume it is spam is another story altogether, and one that has no certain answer, really. You could simply have a <noscript> tag and have it indicate to the user that their submission will not take unless they enable JavaScript.
Once you have JavaScript running, however, the spammers will just use another workaround for that. :)
I can't remember where I've seen this method but spam bots like to fill out forms. Have you considered putting a form field that is hidden with javascript (and says don't fill this field if the user doesn't have JavaScript). This way if something fills in this field you can ignore it as spam.
Did you have any luck with this? I think some text based browsers have implemented basic JavaScript support, so maybe spam bots have as well?
Otherwise I'm considering using a captcha for users without JavaScript and some automatic JavaScript check for other users.