Using AJAX to submit a form and then reloading the page

I am seeking assistance in using JavaScript to validate a form. When the code outlined below runs successfully, I would like to trigger an external PHP script without reloading the page, followed by displaying a success message. Can anyone provide guidance on achieving this?

The following script effectively retrieves the notEmpty function from a separate source. I require the script to: 1. Execute the PHP and transfer data from listed values if no errors occur. 2. Show a success message upon completion.

var year = document.getElementById('year');
var period = document.getElementById('period');
var live = document.getElementById('live');
var start = document.getElementById('start');
var todate = document.getElementById('todate');
var sdeadline = document.getElementById('sdeadline');
var cdeadline = document.getElementById('cdeadline');
var circ = document.getElementById('circ');
var line = document.getElementById('line');

// Check each input following the form order!
if(notEmpty(year, "Please fill in Year")){
    if(notEmpty(period, "Please fill in Period")){
        if(notEmpty(live, "Please fill in Live Date")){
            if(notEmpty(start, "Please fill in Start Date")){
                if(notEmpty(todate, "Please fill in End Date")){
                    if(notEmpty(sdeadline, "Please fill in Supplier Deadline")){
                        if(notEmpty(cdeadline, "Please fill in Commercial Deadline")){
                            if(notEmpty(circ, "Please fill in Circulars Due")){
                                if(notEmpty(line, "Please fill in Line Listing Downloads")){

                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

return false;

Answer №1

To effectively transfer data to a php script, you need to construct a string containing the desired information:

var datasend = 'year='+year+'&period='+period+'&live='+live+ ...;

After ensuring there are no errors, proceed by invoking an Ajax function that will send the string to the server using the Post method.

If you require further guidance, consider looking into this tutorial: AJAX with POST and PHP

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

Cloning a repository does not support Typescript compilation

After creating an Angular2 component, I wanted to share the code with my colleagues. Therefore, I uploaded the code to Github, cloned the repository, ran npm install, and then npm run tsc. However, I encountered the following errors: error TS2318: Cannot ...

Refresh a partial view in Rails using AJAX with JSON feedback

Whenever I make a call to $.getJSON, my goal is to refresh the tbody elements. This means that I need to remove all current elements and replace them with new elements based on the JSON response. Javascript $(document).ready(function(){ $('#positi ...

Effective ways to narrow down data in vuetify v-autocomplete component using Fuse.js

In my application, I am using the Vuetify autocomplete component. This component allows for the use of a custom filter to filter input data. Below is an example of a custom filter for the autocomplete: customFilter (item, queryText, itemText) { const ...

React text hover image functionality

Just diving into the world of React and attempting to create a cool image popup effect when you hover over text in my project. I could really use some guidance on how to make it function within React, as the logic seems a bit different from plain HTML. Any ...

Ruby on Rails and JSON: Increment a counter with a button press

How can I update a count on my view without refreshing the page when a button is clicked? application.js $(document).on('ajax:success', '.follow-btn-show', function(e){ let data = e.detail[0]; let $el = $(this); let method = this ...

The form is functioning properly on mobile devices but is currently experiencing issues on the server

Everything runs smoothly when accessing the website and using the form on localhost. However, once it's uploaded to a server, the form only functions correctly on desktop devices. On mobile, the form fails to filter and displays all professionals inst ...

Steps for incorporating scrollIntoView in a horizontal testimonial table

I am sorry if the title has caused any confusion, but it is exactly as it states. I want to create a testimonial card using a table as the base. I have almost completed it, but I am struggling with the final touches. For instance, I want to implement a fun ...

Unusual hue in the backdrop of a daisyui modal

https://i.stack.imgur.com/fLQdY.png I have tried various methods, but I am unable to get rid of the strange color in the background of the Modal. Just for reference, I am using Tailwind CSS with Daisy UI on Next.JS. <> <button className='btn ...

Having trouble with the placeholder blur feature on images in Next.js?

Within my website, I have a dynamic route set up as /titles/[slug].js. Upon initially navigating to this route, everything functions as expected - the placeholder blur effect displays on all images and animations triggered by react-intersection-observer wo ...

Stopping the ability to navigate within an Ionic application

I am attempting to block navigation and display a popup in a controller. $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { if(someConditionMet) { event.preventDefault(); showPopup(); } } ...

Tabs within the AutoComplete popup in Material-UI

Would it be feasible to showcase the corresponding data in the AutoComplete popover using Tabs? There could be potentially up to three categories of data that match the input value, and my preference would be to present them as tabs. Is there a way to in ...

Is there a way to filter out only the objects from the JSON data and exclude the strings?

I am facing an issue while looping through a JSON object. The presence of strings in the JSON is causing the loop to fail. How can I iterate only through the objects in the JSON without affecting the loop? My main goal is to iterate through the objects co ...

Retrieve Data from MySQL Database Using ExpressJS Pool Connection

I am relatively new to ExpressJS. I am encountering an issue where console.log is working fine and I can see the data in the terminal when I make a call. However, the data is not being returned as a response. Even after using console.log and return stateme ...

Material UI Grid's layout does not support placing a select element within a row

As a newcomer in the world of full stack development, I am delving into coding projects to enhance my understanding of frontend technologies like React JS and Material UI. My latest endeavor involves creating a page that displays posts from the backend in ...

It is impossible to resolve Npm vulnerabilities

My journey with learning React began when I decided to create my first app using the command: 'npx create-react-app my-app' However, upon building the app, I encountered a warning in the terminal: 22 vulnerabilities (9 moderate, 13 high) In ...

Navigating a Frame and Clicking a Link with Puppeteer: A Step-by-Step Guide

I am facing an issue with clicking on an anchor link within a page that is supposed to open a new tab for exporting a PDF. The problem arises because this link is located inside a frame within a frameset structure as shown below: https://i.stack.imgur.com ...

Problem with jQuery AJAX Request Resolving JSON Data

One thing I have on my first page is this function: <script> function update() { $("#notice_div").html('Loading..'); $.ajax({ type: 'GET', dataType: 'json', data: latestid, url: '2includejso ...

Using Javascript to group elements by JSON data

I have an array of JSON objects and I'm attempting to organize it by a specific element. I came across some code example on grouping JSON format from this link const groupBy = prop => data => { return data.reduce((dict, item) => { ...

What mechanisms do chat apps use to detect when a user sends a message and trigger a re-render of the chat

Do I need to implement websockets for my React chat app using MySQL? I'm facing an issue where the app doesn't re-render when I open it in a new tab and type a message. Should I consider using websockets for real-time updates, or are there any ot ...

Make the cursor move in sync with an already moving element

I'm trying to create an element with a breathing animation effect that also follows the cursor. However, I'm running into an issue where the code only works if I remove the animation in CSS. What am I doing wrong? It seems like your post is mos ...