I am looking to improve my form submission process by using JavaScript to only submit the form itself, rather than the

I have integrated JS and HTML code. The issue I am facing is that upon submission, the entire page is being submitted instead of just my form.

function submit_by_id()
{
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
if (!validation()) // Validation function call
{
return false;
}
else
{
alert("All good");
return true;
}
}



Form validation function currently checks for email and password.

function validation()
{
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
if (name === '' || email === '')
{
alert("Please fill out all fields!");
return false;
}
else
{
return true;
}
}

Below is the HTML code
<form name ="myform" id="myform"  onsubmit=" return submit_by_id()" action="#">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
</div>
<div class="form-group">
    <label for="name">Name:</label>
    <input type="text" class="form-control" id="name">
</div>
<button type="Submit"   class="btn btn-primary">Submit</button>
</form>

Answer №1

A function for validation is not necessary, simply utilize the "required" attribute

<input type="text" class="form-control" id="name" required>

If you want to prevent the page from reloading upon submission, use event.preventDefault()

Answer №3

   

function submit_form()
{
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
alert("form submission successful");
}
<form name ="myform" id="myform" action="#" onsubmit=" return submit_form()" required>
<div class="form-group">
<label for="email">Enter your Email:</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="form-group">
<label for="name">Your Name:</label>
<input type="text" class="form-control" id="name" required> 
</div>
<button   class="btn btn-primary">Submit</button>
</form>

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

Issues relating to the total count of pages in the uib-pagination component of AngularJS

While there is a previous thread discussing a similar topic Calculating total items in AngularJs Pagination (ui.bootstrap) doesn't work correctly, it does not address my specific issue and I am unsure how to contribute to it. We are using a complex s ...

Exploring the possibilities in Bootstrap 5.3: Modifying the maximum width of an individual tooltip

Is there a way to modify the maximum width of a specific Bootstrap Tooltip without affecting the others? I do not utilize Sass or SCSS, and have attempted various methods outlined in the documentation: tooltip-max-width="300px" bs-tooltip-max-wid ...

I am looking to split an array into smaller subarrays, each containing 5 elements, and assign a distinct class to the elements within each subarray. How can I

I have a group of "n" "li" elements that I would like to split into "x" subsets using jQuery. Each subset should contain 5 "li" elements, and I also want to assign a different class to each subset. <ul> <li>text1</li> <li>text2&l ...

What is the best way to ensure that less2css compiles all files after saving just one less file?

In my project, I have a style.less file that imports "page.less". Whenever there is a change made to page.less, I find myself having to go back to the style.less file and save it in order for less2css to compile and apply the changes. If not, the changes ...

Upon refreshing the page, next.js 13's useSession() function fails to fetch session information

Currently, I am working on replicating an ecommerce site using nextjs 13. On the order page, I am utilizing useSession from next-auth/react to check if a user is signed in or not. Everything works fine when I navigate to the page through a link, but if I r ...

What is the best way to retrieve data using AJAX jQuery after clicking on text?

I recently used this code to send and retrieve results. <script type="text/javascript"> $(document).ready(function() { $('.special').click(function(){ var info = $(this).attr("rel"); //$(this).html(sku) ...

PHP: Parsing HTML Tables with Headers and Irregular Body Rows Using Simple HTML Dom Parser

In an HTML table, the data is structured as follows: Header 1 has Row 1, Header 2 has Row 2 and Row 3, while Header 3 has Row 4, Row 5, and Row 6. <table> <thead> <tr> <th>Header 1</th> </tr> </thead& ...

The centering of content is not flawless using Bootstrap

Below is a snippet of my code: <div class="container branduri justify-content-center"> <div class="row justify-content-center"> <div class="col-xl-4"> <h1><strong>+100</strong></h1> </div> < ...

What is the best way to choose a random number using jQuery?

<div class="yyy"></div> <p>...</p> <pre><code>let content = $(".xxx").text(); $(".yyy").html(content); http://jsfiddle.net/tQeCv/ I just require this specific input : Number is {1|2|3|4}, and {one|two|three|four} ...

Building a single page web application using TypeScript and webpack - a step-by-step guide

For a while now, I've been working on single page applications using Angular. However, I'm interested in creating a single page application without utilizing the entire framework. My goal is to have just one .html file and one javascript file, w ...

Puzzling array challenge. Lack of clarity in explanation

I am currently working on a series of JavaScript tests available at js-assessment One of the tasks states: it("you should be able to find all occurrences of an item in an array", function() { var result = answers.findAllOccurrences('abcdefab ...

Having Ionic call the submit method within another method seems to be causing some issues

I have a submit method that posts data to the server when a submit button is clicked. It works fine when done manually, but I want to automate it so that it is triggered after input texts are filled without having to press the submit button every time. H ...

Executing a conditional onClick function when the page loads

I have implemented a php-based authorization system that loads different authorization levels into a JavaScript variable. My goal is to disable certain onclick events based on the user's authorization level. I've come up with the following code ...

Tips on incorporating dynamically appended table rows from javascript post button click in asp.net

After dynamically adding rows based on the selected number, I am facing issues with retrieving data from these rows when trying to submit it to the database. Upon Button Click, only the header row predefined in the HTML file is returned. Is there a way to ...

Utilizing a .ini file to assign variables to styles elements in Material-UI: A comprehensive guide

I need to dynamically set the background color of my app using a variable retrieved from a .ini file. I'm struggling with how to achieve this task. I am able to fetch the color in the login page from the .ini file, but I'm unsure of how to apply ...

Utilizing a While Loop for SQL Queries in a Node.js Environment

So, I was attempting to iterate through an array using a while loop. I was able to successfully print a result from the SQL connection without the while loop, confirming that the query is working. However, when I tried to implement the same query within a ...

Utilize Google Maps API to showcase draggable marker Latitude and Longitude in distinct TextFields

I am currently utilizing the Google Maps example for Draggable markers. My objective is to showcase the latitude and longitude values within separate TextFields, where the values dynamically change as I drag the marker. Once the user stops dragging the mar ...

Struggling with aligning images in the center while ensuring they remain responsive on various devices

My website has an image with dimensions of 955x955, which is a square size. I want this image to be responsive on all devices, but the section it's in is not squared. This causes the image to look distorted when viewed on smaller screens. The focus of ...

Show content based on information from an array using JavaScript

I am currently working on developing a user-friendly step-by-step form using AngularJS and UI-router to navigate through different sections. The data collected from each form is stored in a JavaScript array, and I am trying to dynamically show or hide a di ...

Adjusting the size and positioning of an image with CSS

Here is my situation: I am working with an image that is 1900 x 1600 pixels in size. I also have a div that is sized at 200 x 150 pixels. To adjust the image size, I used the following CSS: max-width:300px; max-height:300px; The height will be adjuste ...