Unable to access account: HTML Javascript login issue

Problem with Login Code

As a newcomer to HTML, CSS, and almost unknown in Javascript, I sought help from others to create a login code. The code was working fine earlier, but now it's not functioning as expected. Despite checking everything, I can't seem to pinpoint the issue.

The intended functionality is that on the website labavakara.neocities.org, entering 'admin' and 'labadiena' in the login form should redirect you to another website of mine.

I'm struggling to identify my mistake. The function check(form) is supposed to verify the input user details against the correct username and password.

Upon inspecting the site and checking the console for errors, I found none.

Code Snippet

<!DOCTYPE html>

<html>

<head>


<style>
div {
    height: 200px;
    width: 400px;

    position: fixed;
    top: 50%;
    left: 55%;
    margin-top: -100px;
    margin-left: -200px;
}
body {
    background-image: url("backg.png");
    background-color: #cccccc;
}
function {
    color: red;
}


</style>

<body>


  <script>
function check(form)
{
 if(form.loginInput.value == "admin" && form.passwordInput.value == "labadiena")
  {
    window.location.href = "https://labavakara.neocities.org/trysketuri.html";
  }
 else
 {
   alert("Error Password or Username")
  }
}


  </script>



  <div>
     <title>Login</title>



<form>
        <p><input style="background-color:red;color:black;border:1px solid #ff0000" type="text" id="loginInput" name="login" value="" placeholder="Username"></p>
        <p><input style="background-color:red;color:black;border:1px solid #ff0000" type="password" id="passwordInput" name="password" value="" placeholder="********"></p>
           <a class="submit"><input style="color:blue" type="submit" id="loginbutton" onclick="check(this.form)" name="commit" value="Login"><br>
             <label id="userMessage" style="visibility:hidden;"></label>


</a>

  </form>

    </div>

</body>

</html>


Answer №1

Remember to use type="button" in the input button when submitting a form:

<a class="submit"><input style="color:blue" type="button" id="loginbutton" onclick="check(this.form)" name="commit" value="Login"><br>
         <label id="userMessage" style="visibility:hidden;"></label>

Source : Preventing page reload after form submission with JQuery

Your page may be reloading because you are using type=submit instead of type=button.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue encountered during Firebase deployment: Module '@babel/runtime/helpers/builtin/interopRequireDefault' not found

Struggling to deploy firebase functions and encountering multiple issues. During the deployment process, facing a babel error: Error: Cannot find module '@babel/runtime/helpers/builtin/interopRequireDefault' at Function.Module._resolveFilen ...

Automatically scraping Facebook API data with PHP

I'm completely new to php and I am looking for a way to automatically scrape metadata. I came across a solution, but I am unsure how to implement it in php. POST /?id={object-instance-id or object-url}&scrape=true Can anyone provide a sample php ...

Minimize the visibility of the variable on a larger scale

I have a nodejs app where I define global variables shared across multiple files. For example: //common.js async = requires("async"); isAuthenticated = function() { //... return false; }; //run.js require("common.js"); async.series([function () { i ...

Determining the specific button pressed using jQuery

There are two buttons present: <input type="button" name="hideAll" value="Hide Descriptions"/> <input type="button" name="showAll" value="Show Descriptions"/> Can someone guide me on how to determine which button has been clicked using jQuery ...

Unusual quirks in javascript variables when used with arrays

Unsure if this question has been asked previously. Nevertheless, I couldn't find it anywhere. I've observed a peculiar behavior that seems to occur only with arrays. Here is the typical behavior I anticipate from variables: var k = 10, m = ...

What could be causing the header of the datatable to be out of alignment with the rest of

I'm facing an issue with my datatable where the header is misaligned with the content. Can someone please assist me in adjusting the header and content so that they are parallel? It doesn't look right at the moment. <div style="margin-top:1 ...

Is it obligatory to reply with status code 200 in Express?

Is it required to explicitly include a status 200 code in the response or is it set automatically? response.json({ status: 'OK', }); vs. response .status(200) .json({ status: 'OK', }); Upon testing the route in my browser, ...

Activate the Jquery-ui Tooltip with a click event

Here is the code I'm using: function DrawTipsProgress(postid, ajaxurl) { var data = { action: 'ajax_action', post_id: postid } jQuery('#dashicon-' + postid).on("click", function () { jQuery.p ...

This error message 'React Native _this2.refs.myinput.focus is not a function' indicates that

When working with React-Native, I encountered a specific issue involving a custom component that extends from TextInput. The code snippet below demonstrates the relevant components: TextBox.js ... render() { return ( <TextInput {...this.props} ...

Mouseover function not triggering until clicked on in Google Chrome

I'm attempting to execute a function when the cursor hovers over a list item as shown below: <div id="vue-app"> <ul> <li v-for="item in items" @mouseover="removeItem(item)">{{item}}</li> </ul> </div> ...

Error message: "Unable to access D3 data when trying to select nested

Working with JSON data in D3 is proving to be a challenge for me. The file seems to be properly read, as indicated by its appearance when I use console.log, and it appears to be correctly formatted based on the examples I have come across. However, when I ...

What is the process for converting CSS to SASS when using arithmetics in selectors?

Is there a more efficient way to convert the following CSS code into SASS? div#block-views-news-block, div#block-views-news-block-1, div#block-views-news-block-3, div#block-views-news-block-4 { margin: 0; padding: 0; } I attempted the following: div ...

Can Bootstrap CSS take precedence over a theme's styling?

After working with various WordPress theme templates, I am now ready to take on the challenge of creating my own custom themes. One aspect I would like to incorporate is utilizing Bootstrap to ensure my website is responsive. However, I have some questions ...

Next.js version 13 is causing the page to refresh each time the router is pushed

I am currently developing a search application using NextJs 13, and I have encountered an issue where the page refreshes every time I click the search button. Strangely, this only happens when the application is deployed on Vercel. When running the app l ...

Is it possible for the filter with the new date() function to accept formats other than yyyy-mm-dd?

After receiving a response from mydatepicker in the specific format below: { "isRange":false, "singleDate":{ "date":{ "year":2022, "month":5, "day":13 }, "jsDate": ...

Unable to insert flag image into the <option> tag

Struggling to add a flag image to the options using any method (html,css)! <select> <option value="rus" selected>Rus</option> <option value="Uzb" >Uzb</option> <option value="eng">Eng</option> </s ...

Exploring alternative font options in Three.js for a unique visual experience

For my current project, I am working with three.js and I am interested in using a font other than the default "helvetiker". After some research, I learned that I need to convert the font using typeface.js to obtain a font file. I have successfully converte ...

Why is it not achievable to dynamically update the HTML DOM structure while `<!DOCTYPE html>` is specified?

The following HTML code is causing an issue: <!DOCTYPE html> <html> <head> <title>Clear a Timer</title> <meta charset="utf-8" /> <script> var theTimer, xPosition = 0, theImage; functio ...

Greetings! I am interested in injecting HTML elements into a DOM using PHP and the jQuery Ajax method

After trying the following code snippet: $.ajax({ url: 'cod.php', type: 'POST', dataType: 'html', success: function(res){ $("#tests").html(res); } I implemented a foreach loop in my PHP s ...

Unable to assign a default value to an Angular input field

My web page utilizes an Angular form to display user data fetched from a MongoDB database. The information includes the user's name, phone number, email, etc. I want the default value of the input field to be set as the placeholder text, allowing user ...