We Keep Coding

When I enter correct username and password it refreshes the page

I am making a very simple username and password validation for practice.
In my page I hid a upload image form with css usingvisibility: hidden;
Here is my HTML code:
<form id="enter" method="POST" action="" >
<p style="padding:0px;" >Username:</p>
<input type="text" name="" id="user" placeholder="Username" required>
<p style="padding:0px; margin-top: 10px;" >Password:</p>
<input type="password" name="" id="pass" placeholder="Password" required>
<input type="submit" name="" value="Login" onclick="javascript:validate()">
</form>
When I enter Username and Password I want upload image form to appear. As you can see, I tried to use some JavaScript on it. Code:
function validate()
{
if(document.getElementById("user").value == "test" && document.getElementById("pass").value == "123" )
{
document.getElementById('uploadForm').style.visibility = "visible";
}
else
{
alert( "Access Denied" );
}
}
The thing is when I enter correct username and password it refreshes the page. Any help would be much appreciated, thanks.

Your form is doing the default of submitting when you click the button.
This normally includes a POST sent, and then a refresh to get the next page, but with client-side form handling, you need to do one of two things to prevent this default submit:
Your function validate() can be updated to take an event object as a parameter, to then call preventDefault on.
You can return false from that onclick funciton, which will prevent further action
You can change it from a "submit" type input to a <button type=button>. (Not recommended for accessibility reasons)

make an input button to enforce the required attribute option on an input text field

I have an input button related to a file input such that when a button is clicked the file input function gets triggered. So, the button works as an upload button knowing that the file input is hidden. The button has a text value after selecting a file and the button take the name of the chosen file as a new text value.
My question is how to make the upload button enforce the required attribute option on the file upload text field when the file is not chosen.
<form action="." method="POST">
<input type="file" class="file-upload" style="display: none;">
<button type="button" class="file-button">Upload File</button>
<input required type="text" placeholder="type here">
<input type="submit" value="Submit" id="go_button" class="button">
</form>
<script>
const fileUpload = document.querySelector('.file-upload')
const fileButton = document.querySelector('.file-button')
// This function for the Upload file
fileButton.addEventListener("click", function(){
fileUpload.click()
})
fileUpload.addEventListener("change", function(){
if (fileUpload.value){
fileButton.innerHTML = fileUpload.value
} else {
fileButton.innerHTML = "Upload File"
}
})
</script>

You can catch the submit event and check the value of the upload
const form = document.querySelector('form');
form.onsubmit = function(event) {
if (!fileUpload.value) {
alert('Please select a file');
event.preventDefault();
}
}
Codepen example

Let me get you clear, You want the required option on the input field to be enforced when you hit the upload button just as when you hit the submit button.
By default, only inputs and buttons of type submit can enforce the required option on text input fields. If you want the required option enforced on your upload button without using javascript you must give it a type of submit like this:
<form action="." method="POST">
<input type="file" class="file-upload" style="display: none;">
<button type="submit" class="file-button">Upload File</button>
<input required type="text" placeholder="type here">
<input type="submit" value="Submit" id="go_button" class="button">
</form>
You can see it working on the jsfiddle here.
If you do this, you would now have two buttons that submits the form and both of them will require that the text input be filled before a submit.
One way to ensure that only one button submits the form is to make the file upload asynchronous and prevent the default submit behaviour on the upload button while still enforcing the required option on the associated text field.

How to submit two forms at once

I have two forms on my page, one for username and password and one for a special verification pin. On my FIRST form I have the action set to return false, otherwise the page will refresh and will stop my hidden div from showing up with the second form which is a hidden div. I have a sign in button, which unhides the hidden div on click, and a submit button, which a user presses after their pin is entered. The problem I am having is that I want the final submit button to submit both forms. Is this possible?
This is what my sign in page looks like and when it is submitted it shows the hidden div which has another form that the user enters their pin. I would like the final submit button to process all 3 inputs.
This is the form that I have for the username and password, it is returning false so that it doesn't refresh the page
<form action="" method="POST" id="hello" onsubmit="return false;">
and the button that actually sign's in is here
<input class="btn_green_white_innerfade btn_medium" type="submit"
name="submit" id="userLogin" value="Sign in" width="104" height="25"
border="0" tabindex="5" onclick="showDiv()">
<div class="mainLoginLeftPanel_signin">
<label for="userAccountName"> username</label><br>
<input class="textField" type="text" name="username"
id="userAccountName" maxlength="64" tabindex="1" value=""><br> <br>
<label for="userPassword">Password</label><br>
<input class="textField" type="password" name="password"
id="userPassword" autocomplete="off" maxlength="64" tabindex="2"><br>
<div id="passwordclearlabel" style="text-align: left;
display: none;">It seems that you may be having trouble entering your
password. We will now show your password in plain text (login is still
secure).</div>
This is my second form
<form name="search-form" //this is the form that submits the final pin
id="search-form"
action="#"
class="form-search"
method="POST"
onsubmit="submitForms();">
This is the function I am using onsubmit
function() submitForms{
document.getElementById("search-form").submit();
document.getElementById("hello").submit();
document.getElementById("hello").action = "/loginaction.php";
}
Loginaction.php is the script that I have and I want it to process all 3 inputs, username, password, and the special verification PIN.
My overall question is can i use the final submit button to process all 3 inputs through the script and if so how would i go about doing it?
UPDATE
I now have only one form, however with two buttons in, one submit and one that shows the hidden div, but the forms are not seeming to be submitted.
This is the current form I have - The first button I need to have it just show the hidden div, which it is doing, however the submit button which I want to have submit the username, password AND pin, does not seem to be working, what should I add to my form?
<!DOCTYPE html>
<html>
<head>
<form>
<input class="btn_green_white_innerfade btn_medium" type="button" name="submit" id="userLogin" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv();">
<div class="mainLoginLeftPanel_signin">
<label for="userAccountName">username</label><br>
<input class="textField" type="text" name="username" id="userAccountName" maxlength="64" tabindex="1" value=""><br> <br>
<label for="userPassword">Password</label><br>
<input class="textField" type="password" name="password" id="userPassword" autocomplete="off" maxlength="64" tabindex="2"><br>
<div id="passwordclearlabel" style="text-align: left; display: none;">It seems that you may be having trouble entering your password. We will now show your password in plain text (login is still secure).</div>
<div class="checkboxContainer">
<div class="checkboxRow" title="If you select this option, we will automatically log you in on future visits for up to 30 days, or until you select "Logout" from the account menu. This feature is only available to PIN Guard enabled accounts.">
<input class="" type="checkbox" name="remember_login" id="remember_login" tabindex="4"><label for="remember_login">Remember me on this computer</label><br>
</div>
</div>
</div>
<div class="modal_buttons" id="login_twofactorauth_buttonsets">
<div class="auth_buttonset" id="login_twofactorauth_buttonset_entercode" style="">
<button type="submit" class="auth_button leftbtn" data-modalstate="submit" onsubmit="submitForms();">
<div class="auth_button_h3">submit</div>
<div class="auth_button_h5">my authenticator code</div></button></div></div>
</form>
</head>

You are taking the wrong approach here.
You should only be using submit buttons and the submit event when you are going to actually submit data somewhere.
You only need one form and one submit button.
Your first button should just be a regular button that shows the remainder of the form. Then, there's no event to cancel. Your second button then submits the form.
Also, you should not be using inline HTML event attributes (onsubmit, etc.), here's why and you should move away from inline styles and set up CSS style rules.

Instead, when the user clicks the login button, submit an Ajax request to the server to check the credentials:
// this is the id of the form
$("#loginForm").submit(function(e) {
var url = "path/to/your/login.php"; // The script to check credentials
$.ajax({
type: "POST",
url: url,
data: $("#loginForm").serialize(), // serializes the form's elements.
success: function(data)
{
// use data and process the response from the php script.
// include a property in data to indicate if the validation passed. For example:
if(!data.valid){
//Show the hidden PIN div
}
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
Do a similar thing with the PIN validation:
// this is the id of the form
$("#pinForm").submit(function(e) {
var url = "path/to/your/pin.php"; // The script to check credentials
$.ajax({
type: "POST",
url: url,
data: $("#pinForm").serialize(), // serializes the form's elements.
success: function(data)
{
// use data and process the response from the php script.
// include a property in data to indicate if the validation passed. For example:
if(!data.valid){
//WRONG PIN
}
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});

Hi what you can do is get a button submit and send all the info.
Example:
- form 1 and form 2 fields have diff id so you get that ids to a var or data and send it. This way you can submit the forms you want and validate, but there can only be only 1 submit final btw.
You get all the data to var, ex:
$('#btnName').click(function() {
var form1 data = ...
var form2 data = ...
now if you set it a array, var, object, etc you can get the total data from the 2.
});
I hope this helps you

Ok so you wanna send for example 2 forms, you can just have 1 php which gonna receive.
<?php
$form1_id = $_POST['id'];
$form2_id = $_POST['id2'];
?>
Ok so you have 2 input which gonna have the name of id and id2 (separated forms)
Now you gotta go on your html and add those 2 forms:
<form id='form1' action='#'>
<input type="text" name="id" id="id"></input>
</form>
<form id='form2' action='#'>
<input type="text" name="id2" id="id2"></input>
</form>
<button id="yo"> Submit </button>
This was just an example i'm making on the phone.
After you have html and php or whatever you wanna do, this is just an example
you go at ur js script:
$('#yo').click(function(){
//btw just get the values now
var id_form1 = document.getElementById(etc)
var id_form2 = ...
//now check whatever and use HttpRequest
//to send it
});
I hope it has helped you beter

Check regex validation on submit and focus all input fields if empty

I want to check the regex validation when I click on the button. It works fine when the button type is submit, but it does not redirect to another page where I have linked the button - however when I change its type to button it redirects to the other page normally and does not check the regex validation. I am also checking if all the input fields are filled, and focusing any empty fields. But I guess something is wrong with the code.
Demo
HTML CODE:
<form action="" method="POST" role="form" class="payment_form">
<div class="contact_details">
<div class="payment_details">
<div class="form-group">
<input type="text" class="input_name" id="fullName" pattern="^([a-zA-Z]+\s)*[a-zA-Z]+$" title="Type only characters" name="fullName" placeholder="FULL NAME" required/>
</div>
<div class="form-group">
<input type="email" class="input_name" id="email" title="Eg: some#mail.com" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$" name="email" placeholder="EMAIL ADDRESS" required/>
</div>
<div class="form-group">
<input type="text" class="input_name" id="mobileNumber" maxlength="10" pattern="^(\+\d{1,3}[- ]?)?\d{10}$" title="Enter 10 digit Valid Mobile Number" name="mobileNumber" placeholder="MOBILE NUMBER" required/>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary pay_btn" >Continue</button>
</form>
JS:
$('.pay_btn').click(function(e){
$(":input").each(function() {
if($(this).val() === "")
$(this).css('border-color', '#ff0000');
});
});

You have to remove anchor tag from submit button and write the name of html page in action ,this will work fine for page redirection when form is correctly field .For the one field focus at a time you have to change your logic out there .

#Preety Angel , Provide the html file name in the action attribute of form tag <form action="thankyou.html"> like below,
<form action="thankyou.html" method="POST" role="form" class="payment_form">
.......
</form>

I want to check the regex validation when I click on the button. It working fine, when the button type is submit but it does not redirect to another page where i have linked the button,
Whats happening here is, You click on the button who's type is submit, And this button will try to submit the form. So your validation will work on form submit. Since you don't have any url mentioned in the action="" attribute of your form, Your page doesn't know where to go. So solution is add the URL into this action attribute
<form action="thankyou.html" method="POST" role="form" class="payment_form">
but when I am changing the button type to button it redirects to other page normally and does not check the regex validation.
The reason for this is once you remove the button type submit it has nothing to do with the form anymore. Its just a plain button. But you have wrapped this button inside a anchor tag which has a href set. So this is as good as a page redirect by clicking a link, So the form is not submitted at all. Hence your validation keeps quiet. As it works only while form is submitted.

prefill text field using javascript

I have a simple javascript that I can't seem to get to work.
So what I'm trying to accomplish is a text field on my homepage that the user can type in(just 1 field). Submit it and it'll take them to another page with a text field that is pre filled with what they already typed in the first field.
<script type="text/javascript">
function go_page(page)
{
document.location.href = '/?page_id=11' + '#addressInput=' + addressInput;
}
</script>
When i fill in the 'addressInput' (for this example, lets say '90501')..
Currently, the url comes up as www.mywebsite.com/?addressInput=90501
Goal, i want it to be.. www.mywebsite.com/?page_id=11#addressInput=90501
This 'goal url' works when i type it in the address bar. I just need to figure out how to do that function automatically for the user..based on what they input in the first text field.
...any ideas?
EDIT 1
Here is the form code..
<form method="get" onsubmit=" go_page(this.page.value); return false">
<input type="text" name="addressInput" id="addressInput" size="30" />
<input type="submit" value="" class="submitButton" />
</form>
EDIT 2
just more info..
The user will be on the homepage and type in an 'address/zip code' in the text field and click submit.
Which will then take them to the locations page(page_id=11) that has a text field that's pre-populated with the 'address/zip' the user typed in on the homepage.

You could try grabbing the element in the form like this
<form method="get" onsubmit="go_page(this.addressInput); return false">
<input type="text" name="addressInput" id="addressInput" size="30" />
<input type="submit" value="" class="submitButton" />
</form>
And extracting the value of addressInput inside your function like this
function go_page(elem) {
var addressInput = elem.value;
window.location.href = "/?page_id=11#addressInput"+addressInput;
}
In Wordpress that should navigate you to the page id and add the hash to the end

Its not clear from the limited information provided, but have you stopped the default form submission behavior? Maybe the form if being submitted before your javascript is called. Capture the form submission and return:false or event.preventDefault() to stop it continuing with the submission.

If you want to have # in the URL, you have to encode it so instead of using # use %23. And do not forget that for separating values in URL you have to use &.
document.location.href = '/?page_id=11' + '%23addressInput=' + addressInput;
Update
Instead of document.location.href use window.location