Focus On Password Field If Username Has Value - javascript

My request is simple, I have a login form. We have a "save username" option on the login form. When the page loads, if the username input field has value (they have saved their username) I want to Autofocus on the password input instead of the username input.
Below is the jQuery I currently have which is not working:
$(document).ready(function() {
if($('#username').val() != ''){
$('#p').focus();
}
});
Currently nothing happens, there are no console errors and the #username input stays focused or highlighted.
Any ideas on how to focus on an input field so the user can start typing there automatically?

put it out of $(document).ready(), use:
$(window).load(function() {
if($('#username').val() != ''){
$('#p').focus();
}
});

The problem is solved. Thanks plalx for pointing out the timing issue.
I needed to wrap the script in a "set timeout" function. Below is the final working script.
$(document).ready(function() {
if($('#username').val() != ''){
setTimeout(function () {
$('#p').focus();
}, 50);
}
});

You need to specity if user has saved the username or not.
Then you have to see what usernamehas been saved.
Then focus on the password field.
Here is your code
var saveduser="piyush"; //get username from saved fields
$(window).ready(function(){
if(saveduser!="")
{
$("#user").val(saveduser);
$("#pass").focus();
}
});
Here is the fiddle that I have created
http://jsfiddle.net/piyushkmr/86XxN/1/
You can set variable saveduser to username using javascript cookies or php.

Related

Clear form field in jQuery after form submission

After submission comments, my comment form slides up and hides. I'm using this code, which works:
$("#pm-post-form").slideUp("normal", function(){
$("#mycommentspan").html(g.html).show();
if (g.preview == true) {
$("#be_the_first").hide();
$("#preview_comment").html(g.preview_html).fadeIn(700)
}
})
But I don't want hide it anymore, so users can place others comments.
I tried this code without success:
$("#pm-post-form").val("", function(){
$("#mycommentspan").html(g.html).show();
if (g.preview == true) {
$("#be_the_first").hide();
$("#preview_comment").html(g.preview_html).fadeIn(700)
}
})
I used val("") to clear form field content after comment submission, but it doesn't work.
I tryed this solution that works.
$("#mycommentspan").html(g.html).show();
if (g.preview == true) {
$("#be_the_first").hide();
$("#preview_comment").html(g.preview_html).fadeIn(700); // comment placed
$("#c_comment_txt").val("") // textarea where use place comment, that after submission is cleared
}
After submission, user can place new comment without refresh page.

cursor is coming by default under password when page loads field how to resolve

Please help me to solve this , i have a page that have some validation in form
when you load the page the cursor automatically lands into password field which is become a hack for me please help me .
https://mobulous.app/healthapp/doctorlogin
You have line which forces password to get focus: at line 136
You have a code in the below JS file which focuses inputPassword id on $(document).ready(function(){...}):
https://mobulous.app/healthapp/public/assets/js/custome.js
code:
$(document).ready(function(){
$("#inputPassword").focus();
$("#pwchecknext").click(function(){
if ($("#pwchecknext").is(":checked"))
{
$(".oppwasconf").clone()
.attr("type", "text").insertAfter(".oppwasconf")
.prev().remove();
}
else
{
$(".oppwasconf").clone()
.attr("type","password").insertAfter(".oppwasconf")
.prev().remove();
}
});
});
You need to remove this $("#inputPassword").focus(); to not to autofocus password on reload.

How to fade in and out a success message after page reload with jQuery?

I searched this topic a lot and got a lot of different responses, however, none of them work for me.
I have a form that when it gets successfully submitted, reloads the page.
$('form').on('submit', function(event){
if($('#input').val() == 0){
alert("Please insert your name");
event.preventDefault();
}
}
Now, on each successful submit I want a success message to slide at the top, stay there for 2 sec and then fade out.
I tried this, however, it doesn't stay after the page was reloaded.
else{
$('.success_message').fadeIn(1500);
}
Is that possible in pure jQuery?
Also, I am not looking for a way to reload the page. The page gets reloaded automatically after submitting the form.
After submitting the form, set a value in localStorage indicating that the success message should fade in:
$('form').on('submit', function(event) {
if ($('#input').val() == 0){
alert("Please insert your name");
event.preventDefault();
}
localStorage.fadeInSuccessMessage = "1"
});
Then check if the value exists in localStorage. If yes, fade in the message and delete the value from localStorage:
if ("fadeInSuccessMessage" in localStorage) {
$('.success_message').fadeIn(1500);
delete localStorage.fadeInSuccessMessage;
}

flask:how to stop python programs when jquery find an invalid input?

Im new to Flask .
I try a user log-in page
I validate the user input by jQuery code:
$(document).ready(function(){
//alert('begin');
$(".input.reg_butn").click(function(){
if($("[name=username]").val()==""){
alert("username empty");
}else{
if($("[name=password]").val()==""){
alert("password empty");
}
}
})
})
and my python code is as follow:
#app.route('/login',methods=['GET','POST'])
def login():
.....
My question is how to stop python code running when the js code finds that the user submitted an invalid value (such as empty username of password).
I use alert in JS to notify the user, BUT the python code run as usual.
How to solve it ?
I don't think this is the right approach: to validate data in on the client side. Instead you should do it on the server side using a flask extension which deals with forms and form validation: flask-WTF.
You are capturing the click of the input button, but you need to stop form submission. If you do this with a handler that listens to that instead, you will also be able to run your checks when the user presses the enter key.
$(document).ready(function() {
// Adjust this selector as necessary.
$("form.login").submit(function() {
$(this).preventDefault();
if ($("[name=username]", this).val() == "") {
alert("username empty");
} else {
if ($("[name=password]", this).val() == "") {
alert("password empty");
}
}
});
If you are using HTML5, though, this can all be simplified by adding required to your input tags.
<input type="text" name="username" required>
Any browser that supports it will trap the form submission for you (without the need for any JavaScript).

JavaScript Form Validation Query

I've just wrote some validation code so as to check if either of my radio buttons from my web form have been selected before they are submitted. I've just starting learning php as I want to be able to store the value of each radio button in a .csv file.
Because I have my action attribute set to trigger a php script, I get my alert box, but as soon as I click OK after pressing submit the browser goes straight to the php script (inevitably).
Is there a way I can return to my initial index.html after the alert message?
I have not actually written any php as yet, so would this go in the php script or the javascript?
Heres my code so far:
$("#submit").on("click", function() {
var radio = $("input[type=radio][name=emotion]")[0].checked;
var radio2 = $("input[type=radio][name=emotion]")[1].checked;
var radio3 = $("input[type=radio][name=emotion]")[2].checked;
if(!radio && !radio2 && !radio3) {
alert("You must select at least one word!");
}
else {
alert("Please rate the next item!")
}
});
In Jquery you should use .submit() function to validate a form.
Then to avoid to submit the form you can use the function event.preventDefault()
And if you want to go to the index you can use window.location = "yourURL"
You must use form.onsubmit().
For example, if your form's name is myForm:
document.forms['myForm'].onsubmit = function()
{
if (this.elements['emotion'].value)
{
alert("Please rate the next item!");
}
else
{
alert("You must enter at least one word!");
return false;
}
}
And after alert "Please rate the next item!" form will be send.
Actually you can use jquery $.post() , an easy solution is just to post your php page without leaving index page.
http://api.jquery.com/jquery.post/
$.post( "yourpage.php" );
You probably have the input type of the submit button as submit? Set this to button, so the action doesn't take place and only jQuery is executed.
But then you have to submit the form by jQuery when validation was successful:
document.myFormId.submit();

Categories