Hide form data upon submission

I have a form and I'm looking to send hidden input using JavaScript. How can this be achieved? Example:

<input id="total" type="hidden" value="" name="total" />

When the submit button is clicked, I would like to set its value.

Answer №1

Are you attempting to dynamically update the value of a hidden input? Achieving this can be done using the onsubmit event handler.

var submitBtn = document.getElementById("submit");
var hiddenInput = document.getElementById("hidden");

var addEventListener = function(element, eventType, listener) {
    if (element.addEventListener) {
        element.addEventListener(eventType, listener, false);
    } else if (element.attachEvent) {
        element.attachEvent("on"+eventType, listener);
    } else {
        element['on'+eventType] = listener;
    }
};

var onSubmitHandler = function() {
    var newValue = "new value for the hidden input";

    hiddenInput.value = newValue;
};

addEventListener(submitBtn, "submit", onSubmitHandler);

The provided code snippet will monitor the submission event on the button and update the hidden input's value accordingly. For a more detailed explanation, please provide additional context in your inquiry. Otherwise, it's challenging to determine the specific assistance required.

Answer №2

Here are some suggestions for you to consider:

 document.getElementById("result").textContent = "new text content";
    document.formId.reset();

Answer №3

If you need to generate a unique identifier for database entry or create a session id, it's best to utilize PHP or Perl instead of JavaScript. As a beginner myself, I encountered a similar situation and found that PHP was the most effective solution. I used JavaScript for data validation before passing it onto PHP for processing. While JavaScript excels at checking data presence and content in forms, it lacks the robust security features of 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

Creating pagination using AJAX to fetch data from an API while maintaining the same query parameters

Writing a title for this may be a bit tricky, but I'll try my best. On the webpage located at the /music-maker endpoint, there is a modal that contains an input field. This input field captures user input and sends it to the backend using AJAX. The u ...

Troubleshooting: 404 Error When Trying to Send Email with AJAX in Wordpress

In the process of creating a unique theme, I encountered an interesting challenge on my contact page. I wanted to implement an AJAX function that would allow me to send emails directly from the page itself. After conducting some research, I managed to find ...

Extract the raw text content from nested elements

Working with highlight.js to include a custom CSS code, however, this library automatically adds span tags around the desired text For example: <pre> <code class="language-css hljs" contenteditable="true" id="css-code&quo ...

execute a setTimeout function in ReactJs to render a component after a specified amount of time

Is there a way to render a component inside my App.Js after a certain amount of time using setTimeout? I've tried, but nothing seems to be happening... This is my code: function App() { return ( <Router> <GlobalStyle /> ...

Submit Form Without Reloading -- and successfully submit it

I'm working on a form submission that triggers AJAX and PHP to load data without the need for page reloading. html/php <form method="POST"> <button type="submit" name="image1"> <button type="submit" name="image2"> <button ...

Update the path dynamically in Next.js without the need to reload the page

Every time the user clicks on the continue button, a function is triggered. Within that function, I make the following call: push("/signup/page-2", undefined, { shallow: true }); All dynamic routes resembling /signup/[page].js that return <Component / ...

Error encountered with Next.js and Square API: The Fetch API cannot load due to the unsupported URL scheme "webpack-internal"

I encountered an issue while attempting to retrieve stock data from the Square API. injectGlobalHook.js:1648 Fetch API cannot load webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js. URL scheme "webpack-internal ...

The object does not have a property named 'fetch' and therefore cannot be read

Struggling to integrate a REST datasource into my Apollo Server. I've created a class that extends RESTDataSource for handling API requests. However, when attempting to call the login method from my GraphQL resolver code, an error is being thrown. An ...

Is there a way to prevent the conversion of .json/.webmanifest URLs into base64 strings?

I've been grappling with an issue for quite some time now. In my VSCode vite-react-typescript project, I have a link in the index.html file pointing to a webmanifest, which is essentially a json file with a different extension. After building my app, ...

Generate dynamic forms utilizing JSON data

I am in the process of developing an application that enables users to answer questions about themselves. The questions are being retrieved from an API. My next step is to generate a form with these questions as entry fields. I am currently utilizing a met ...

The next function is not defined error in the controller function

Everything was running smoothly until I suddenly encountered this error message: ReferenceError: next is not defined. I'm puzzled because I didn't make any changes to this function. const Users = require('../data/users.model') exports ...

Emails can be sent through a form without the need for refreshing

I am currently working on a webpage that utilizes parallax scrolling, and the contact box is located in the last section. However, I encountered an issue where using a simple HTML + PHP contact box would cause the page to refresh back to the first section ...

The information retrieved from the open weather map API is difficult to interpret

Currently experimenting with the Open Weather Map API. Two specific calls are being examined, one for London and another for Hermanus in South Africa. Noticing differences in the data returned from each call. Below are the two API calls: Data returned fo ...

Sending a piece of state information to a different component

Hey, I'm a new React developer and I'm struggling with a particular issue. I've included only the relevant code snippets from my app. Basically, I want to retrieve the data from the clicked Datagrid row, send it to a Dialog form, and then p ...

Create a visual representation of an item within a framework using an Angular directive

I am interested in using a directive to draw a triangle above a series of div elements. In my scenario, I have four squares and two values: charge and normal. The value of charge determines the color of the squares, while normal is used for drawing the t ...

Utilizing the v-for directive to loop through JSON data with unique IDs and linking them to Input components in PrimeVue

In my database, I have a collection of products with a column named attributes that stores property/value pairs in JSON format. Each product can have unique attributes. For instance, one product's attributes could be: #product1 attributes { color: & ...

Encountering a Next.js installation error due to the inability to locate the module fs

Having trouble with the installation of a new Next.js 14 app. I've searched on Google and Stack Overflow but haven't been able to find a solution. I'm stuck at this point. Can anyone offer some assistance? What I have attempted: npx creat ...

Creating a Recursive Facebook Page Data Scraper using Selenium and Node.js

I am trying to iterate through an array of Facebook page IDs and retrieve the code from each event page. However, I am encountering a problem where I only get the code of the last page ID in the array repeated multiple times. For example, if there are 3 ID ...

Decide whether an angular rotation is within the camera's field of vision inside a spherical object

Seeking assistance with a three.js project. I have set up a camera inside a SphereGeometry at position (0,0,0) and am projecting an image on the sphere's wall. My goal is to create interactive JS elements outside of the threejs framework that respond ...

The default value of components in Next.js

I'm working on establishing a global variable that all components are initially rendered with and setting the default value, but I'm unsure about how to accomplish the second part. Currently, this is what I have in my _app.tsx: import { AppProps ...