Dynamic page changes can be achieved by using JavaScript within HTML, even when the input is

When I click the register button and the input fields appear, the problem arises. When I fill in the fields and then the code jumps to the function

$ (document) .on ("click", "#register_in", function (), all $().val()
, it results in all values being undefined. It seems like there might be issues with the Dom tree. Can someone assist me with this?

$(document).on("click", "#register_in", function() {
    var error = "";
    if ($("username").val() == "" || $("password").val() == "" || $("name").val() == "" ||
        $("lastname").val() == "" || $("jmbg").val() == "" || $("tel").val() == "" || $("email").val() == "") {
        error += "All fields must be filled";
    }

    var n = $("jmbg").length;
    if (n != 13) {
        error += "\nJMBG must have 13 digits.";
    }

    $("#error1").text(error);
});

$("#register").click(function() {
    var text = "<div class=\"Centar\"><div id= \"error1\" class=\"Red\" ></div >";
    text += "Username: <br /> <input type=\"text\" id=\"username\" /> <br />";
    text += "Password: <br /> <input type=\"password\" id=\"password\" /> <br />";
    text += "Name:<br /> <input type=\"text\" id=\"name\" /> <br />";
    text += "Last Name:<br /> <input type=\"text\" id=\"lastname\" /> <br />";
    text += "Gender: <br /> <select id=\"pol\"><option value=\"M\">Male</option><option value=\"Z\">Female</option></select><br />";
    text += "JMBG:<br /> <input type=\"text\" id=\"jmbg\" /> <br />";
    text += "Contact Phone Number:<br /> <input type=\"text\" id=\"tel\" /> <br />";
    text += "Email:<br /> <input type=\"text\" id=\"email\" /> <br />";
    text += "<input type=\"submit\" id=\"register_in\" value=\"Register\" /> </div >";
    $("#screen").html(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="Naslov">Taxi Service</div>
<div id="mainmenu" class="Menu">
    <table>
        <tr>
            <td name="menu" id="login">Login</td>
            <td>|</td>
            <td name="menu" id="register">Register</td>
        </tr>
    </table>
</div>

<br /><br /><br />
<div id="screen">
    <div class="Center">
        <div id="error1" class="Red"></div>
        Username:<br /> <input type="text" id="username" /><br /> Password:
        <br /> <input type="password" id="password" /><br />
        <input type="submit" id="log_in" value="Login" />
    </div>
</div>

Answer №1

Ensure to specify # when using $("#...").val() as it represents an id selector
check out the code below:

$(document).on("click", "#register_in" , function () {
   var error = "";
    if ($("#username").val() == "" || $("#password").val() == "" || $("#name").val() == "" ||
     $("#lastname").val() == "" || $("#jmbg").val() == "" || $("#tel").val() == "" || $("#email").val() == "")
      {
        error += "All fields must be filled"; 
      }

   var n = $("jmbg").length; 
   if (n != 13)
   {
error += "\nJMBG must contain 13 digits";
   }

  $("#error1").text(error);
  });

                  
 $("#register").click(function () {
   var text = "<div class=\"Center\"><div id= \"error1\" class=\"Red\" ></div >";
    text += "Username: <br /> <input type=\"text\" id=\"username\" /> <br />";
    text += "Password: <br /> <input type=\"password\" id=\"password\" /> <br />";
    text += "Name:<br /> <input type=\"text\" id=\"name\" /> <br />";
    text += "Last Name:<br /> <input type=\"text\" id=\"lastname\" /> <br />";
    text += "Gender: <br /> <select id=\"gender\"><option value=\"M\">Male</option><option value=\"F\">Female</option></select><br />";
    text += "JMBG:<br /> <input type=\"text\" id=\"jmbg\" /> <br />";
    text += "Contact Number:<br /> <input type=\"text\" id=\"phone\" /> <br />";
    text += "Email:<br /> <input type=\"text\" id=\"email\" /> <br />";
    text += "<input type=\"submit\" id=\"register_in\" value=\"Register\" /> </div >";
    $("#screen").html(text);
                    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <body>
            <div class="Title">Taxi Service</div>
            <div id="mainmanu" class="Menu">
                <table>
                    <tr>
                        <td name="menu" id="login">Login</td>
                        <td>|</td>
                        <td name="menu" id="register">Register</td>
                    </tr>
                </table>
            </div>
              
            <br /><br /><br />
            <div id="screen">
            <div class="Center">
                  <div id="error1" class="Red"></div>
                  Username:<br /> <input type="text" id="username" /><br />
                  Password:<br /> <input type="password" id="password" /><br />
                  <input type="submit" id="log_in" value="Login" />
             </div>
             </div>
         </body>

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

What is the best way to distinguish if users are accessing my Facebook app through an iframe or by directly entering the

If my Twitter app url is http://tw.domain.com/ and the app url is http://apps.twitter.com/demoapp/ I need to ensure that users cannot access the application url directly, they must view it within an iframe on Twitter. What method can I use to detect & ...

Enable Parse5's case sensitivity

Recently, I've attempted to parse Angular Templates into AST using the powerful parse5 library. It seemed like the perfect solution, until I encountered an issue - while parsing HTML, it appears that the library transforms everything to lowercase. Fo ...

Error encountered: Unable to import React due to Uncaught SyntaxError, an Unexpected Identifier was

Having run into an issue, I recently configured React in my ASP.NET Core application, but encountered a frustrating problem that has left me stuck for a fix. The trouble arises when trying to import react from 'react', as nothing seems to import ...

Displaying country-specific API details (such as capital and currency) in a card container when selecting a country from a dropdown menu

My objective is to display the card information for South Africa as the default value, even before entering any country's name into the search bar input field or selecting a specific country from the provided list. I am utilizing the restcountries API ...

Create a situation where content exceeds its container without specifying a fixed

I am in the process of developing an image scroller (or possibly known as a carousel) where I have a horizontal element containing a child element that scrolls horizontally. My dilemma is that I want the parent element to have a width of 100%, while allowi ...

Creating HTML or PHP pages using jQuery

Is it possible to generate a file using jQuery? I am creating a website maker. On the left side, I have a list of elements such as: ---------------------------------------------------------------- Elements Attri ...

Creating a Mithril.js Single Page Application (SPA) using a JSON data source: A

I am currently working on creating a single page application (SPA) using Mithril.js. While I have come across some helpful tutorials like the one here and on the official Mithril homepage, I am struggling to combine the concepts from both sources effective ...

"Encountering a 400 Error While Attempting to Edit Requests in NodeJS/A

Currently, I am building an application using Ionic/Angular with a NodeJS backend. Within this project, I have created an update form that allows users to modify or delete a specific row. While the deletion function is working fine, I am facing some challe ...

Updating the dropdown title to reflect the chosen dropdown value

I'm currently learning react and attempting to grasp the concept through tutorials. However, I am facing challenges in changing the title of a dropdown list based on the selected value. I am using react bootstrap for this task, but struggling to imple ...

Transforming a distinct HTML layout into a particular XML format

I've been grappling with this issue for quite some time now. My goal is to transform the HTML into XML following the structure below: Using "HtmlAgilityPack," I am able to convert the HTML into a valid XML format. After conversion, my HTML appears a ...

What are some methods for customizing the calendar icon displayed in an input field with type date?

Is there a way to customize the calendar logo without relying on jquery? The desired appearance should resemble the image shown below: https://i.sstatic.net/G06iZ.png input { width: 50%; padding: 8px; border-radius: 10px; ...

What are the most effective strategies for storing and accessing image, video, and audio files using HTML and PHP?

Excited about creating an application that requires users to upload multimedia data like images, videos, and sound recordings onto a database. Wondering the most efficient way to store and retrieve this type of data? Is it secure to utilize LONGBLOB on my ...

Arrange the items that are missing from Array B to be located at the bottom of Array A, organized in a file tree structure

I have two arrays containing different types of objects. Each object in the arrays has a title assigned to it. My goal is to compare these two arrays based on their titles and move any files that are not included in the bottom part of the fileStructure arr ...

Is it possible to create a HTML 5 tile with a contemporary Metro-style UI?

I am curious to know if it is possible to replicate the tile system found in the modern UI of Windows 8 on an HTML page. I have already created a demo based on a website. You can view it here. Below is the code snippet: <div class="tile pos1-1 w1h1 te ...

Flex layout clips shadow when overflow-hidden or overflow-auto is applied

Exploring the given markup with Bootstrap classes: The layout showcases two cards aligned left and right using flex-row. These cards are adjusted to fit the available vertical space using flex-fill. Although the cards occupy the vertical space, their cont ...

Ways to Implement Named Module Exports in Node.js Version 16 Application

Currently, I am working with Node 16.3.0 and Express 4.17.1 (although the Node version is open to change) In my project, I have a file named session.js structured as follows: // session.js exports.fetchUserId = async function(token){ ... } exports.sav ...

Creating an intelligent auto-complete feature for json arrays in the ACE.js editor

Recently, I integrated Ace.js into my development workflow as a JavaScript editor. I even went ahead and created a custom JS file to enhance the functionality of my Ace editor with an autocompleter feature. Here's a snippet from my personalized autoC ...

Setting initial values for an object in JavaScript

I am currently seeking a method to store predefined values in a separate file for populating my function: Here is my function in index.js: const Modes = (array) => { return { name: array.name, funcionarioIncrease: array.funcio ...

Issue with Ionic app causing code execution to hang when the Back Button is pressed

I am currently working on an application using Ionic and React. There is a page in the app where users can upload images from the camera or gallery, which are then saved as binary data in a database (indexed db using Dexie). Everything seems to be function ...

Why is it difficult to delete elements from the DOM in VueJS?

As a newcomer to VueJS, I find myself struggling with some basic tasks. One particular challenge I'm facing is trying to manipulate an SVG element on my webpage, such as deleting the children of a <g> element and replacing them with new ones. De ...