Keep the Bootstrap modal open while the JavaScript validation is running, and redirect the form action if the validation is successful

When trying to execute the submit event from a form, my code is supposed to keep the modal open if validation fails. However, for some reason, this functionality is not working as expected.

var myForm = document.updteform;
    var condition = true;
    if(myForm.pass1.value !== myForm.pass.value){
        alert("Password Doesn't Match, Please try again."); 
        myForm.pass1.focus();
        condition = false; //it will return the value
    }

Additionally, the following code is intended to run after the above snippet:

if(!condition) {
        if(evt.preventDefault) { event.preventDefault(); }    
        else if(evt.returnValue) { evt.returnValue = false; }    
        else { return false; }
    }

}

Answer №1

This solution is effective...

Step 1: Start by creating an onclick event that triggers a function in your JavaScript code

Step 2: Define the function as follows:

function validatePassword(){

    var oldPassword = document.getElementById("password1").value; 
    var newPassword = document.getElementById("password2").value; 

    if (oldPassword !== newPassword) {
        alert("Passwords do not match. Please try again.");
        return false; // The form will not submit if passwords do not match.
    } else {
        document.getElementById("form_id").action = "<?= base_url('index.php/Employee/updateUser'); ?>";
        document.getElementById("form_id").submit();
    }
}

}

That's the gist of it. Hopefully this helps you out :)

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

Exploring the depths of nested image objects using the map method in ReactJS

I successfully mapped through and destructured this object, but I'm struggling to access the image within the same map. I believe I may need to map through it separately, but I'm uncertain. Here is the object: { "attributes": { ...

Tips for creating a versatile generic function in javascript that covers all arguments sizes

When working with node.js, a tcp server typically has several methods for listening: server.listen(port, [host], [backlog], [listeningListener]) server.listen(path, [listeningListener]) server.listen(handle, [listeningListener]) In the context of creatin ...

Styling a textbox within a gridview using JavaScript

Looking for a way to format a textbox within a gridview using JavaScript? Take a look at how the gridview columns are set up: <Columns> <asp:TemplateField> <ItemTemplate><asp:ImageButton runat="server" id="imgbtnEnterAmt" ...

Filtering elements using two dropdown lists

In my list, each li element has data-name and data-body attributes. I want to display only the li elements that match the selected values. The first select option is for selecting the car name, while the second select option is for selecting the car body. ...

Having trouble manipulating state in JavaScript for React Native?

Encountering an issue when attempting to use the setState function in React Native. Code Snippet import React from "react"; import { TextInput, Text, View, Button, Alert } from "react-native"; const UselessTextInput = () => { st ...

Ways to initiate a transition upon clicking a button, causing it to switch from being hidden (`display: none`) to visible (`display: block`)

I'm attempting to create a smooth transition effect when a button is clicked, similar to a toggle function, where the content below it seamlessly shifts instead of abruptly moving. The classic example of this is the Bootstrap navbar hamburger menu, wh ...

Bootstrap: Create a square by setting the height equal to the width of the .span2 element

I'm looking to create a div that is the height of a ".span2" (essentially a square) and is also responsive. Here's what I have so far: <div class="span2 square>Hello</div> .span {height: @span2;} However, I haven't been able to ...

disabling a submit button

I am new to coding and need help disabling a button on document load. Can someone assist me with this? Here is my current code snippet: $(document).ready(function() { setTimeout("check_user()", 250); }); Your guidance is greatly appreciated! ...

Finding Location Information Based on Latitude and Longitude Using Jquery

Does anyone know of a reliable solution or Jquery plugin that can provide location details based on latitude and longitude coordinates? I heard about the Google Reverse Location API but hoping for a pre-made option. I'm not sure if there are any free ...

leveraging an array from a separate JavaScript file within a Next.js page

I am facing a situation where I need to utilize an array from another page within my Next.js project. However, it seems that the information in the array takes time to load, resulting in encountering undefined initially when trying to access it for title a ...

Locating the exact position of a DOM node within the source document

Purpose In the process of creating a series of 'extractor' functions to identify components on a page using jsdom and nodejs, I aim to organize these identified 'component' objects based on their original placement within the page. Ch ...

Populate a Textbox Automatically using a Dropdown List

MVC 4 Changing multiple display fields based on DropDownListFor selection Having some issues trying to implement the solution mentioned above. It seems like there might be a problem with either my javascript code or the controller. JavaScript in View ...

Problem with Angular2, NodeJS, and Passport Integration

At the moment, my Angular2 front-end is running on localhost:3000 while the NodeJS back-end (using KrakenJS) is running on localhost:8000. When I input the credentials and make a call to the this.http.post('http://localhost:8000/login', body, { h ...

Using optional chaining on the left side in JavaScript is a convenient feature

Can the optional chaining operator be used on the left side of an assignment (=) in JavaScript? const building = {} building?.floor?.apartment?.number = 3; // Is this functionality supported? ...

The dropdown menu is not appearing in the correct position when clicked

https://i.stack.imgur.com/fMyZQ.jpg Hello there, this link appears normal before clicking on it. But once clicked, it moves to the top of the page like so: https://i.stack.imgur.com/yZ0R0.jpg You can clearly see the difference. I have also provided the c ...

What sets apart .create from .save in mongoose?

A while ago, I completed a bootcamp course on Express and Mongoose on Udemy. In the course, we learned how to add new fields to data by writing code like this: var playground = require("../models/playground.js"); route.post("/", middleware.isLoggedIn,fun ...

Program does not display the expected alert message when using if/else statement

I'm grappling with creating a basic program that accomplishes the following: Develop a function declaration named changePowerTotal which accepts: The total current power generated (a numeric value) A generator ID (a number) The new status of ...

The search function for selecting plugins is not functioning properly when additional options are added

Is there a way to use select options with search functionality, but the options are appended? I've tried using plugins like tom-select, selectize, and chosen but none of them seem to work with the appended options. Can anyone provide assistance on how ...

Meteor: Transmitting Session data from the client to the server

Below is the code snippet I am utilizing on the client side to establish the Session variable: Template.download.events({ 'click button': function() { var clientid=Random.id(); UserSession.set("songsearcher", clientid); ...

What is the reason that when we assign `'initial'` as the value for `display` property, it does not function as intended for list elements?

To toggle the visibility of elements, I have created a unique function that accepts an object and a boolean. Depending on the boolean value, either 'none' or 'initial' is assigned to the 'display' property of the specified obj ...