Tips for Setting a Value in Apex Using Javascript

I recently implemented the following code snippet.

Here is a snippet of my Visualforce page code:

<Script>
    //Window Load
    document.getElementById("Today_Date").value = "2014-02-02";
</Script>

<input type="date" value="{!myDate}" id="myDate"/>
<apex:commandButton action="{!CallMyMethod}" value="End" >

Although the date is visible, it is not being passed to Apex.

public date myDate{ get; set; }

public PageReference CallMyMethod() {
    //I am receiving null when trying to use myDate;
    return null;
}

Does anyone have a solution for this issue?

Answer №1

When working with Salesforce pages, it is recommended to utilize the apex:inputText tag instead of HTML input tags.

By incorporating this tag within an apex:form, you can effectively submit data to the controller. To populate the inputText with a value from JavaScript, ensure that an ID attribute is added for accessibility in JS selectors (including parent components).

Example code snippet for Visualforce page:

<apex:page controller="TextInputController">
    <apex:form id="form">
        Input Text <apex:inputText value="{!inputText}" id="testText"/>
        <apex:commandButton value="save" action="{!saveText}"/>
    </apex:form>
    <script>
    document.getElementById('{!$Component.form.testText}').value ='Test value';
    </script>
</apex:page>

Controller logic for the page:

public with sharing class TextInputController{
    public String inputText{get;set;}
    public PageReference saveText(){
        //process the text value here
        System.debug(inputText);
        return null;
    }
}

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

Issue with using jQuery and parseDouble

I have been dealing with an AJAX request that retrieves a JSON object containing multiple values, each with two decimal points. However, the issue is that when these values are returned as part of the JSON, they are in string format. My goal is to perform ...

Manipulating visibility of an input tag using JQuery

Having a simple input tag: <input id="DAhour" type="number" style="width:50px; font-size: xx-small; visibility:hidden"> Initially, the input tag is set to be hidden. Upon changing a combobox to a specific index, it should become visible. Despite su ...

What causes a decrease in speed when a function is called without specifying its owner?

Let's consider the following scenario: var abs = Math.abs; Wouldn't abs(-10) be quicker than Math.abs(-10)? Since abs is called directly. This caught my attention: Math.abs vs custom abs function Update: The same test conducted in Internet ...

Searching for an item in an object using a key and then updating that value in the array - A step-by-step

var replaceArr = ['A','J','Q',10,2]; var originalArr = [{A:0},{2:1},{3:2},{4:3},{5:4},{6:5},{10:9},{J:10},{Q:11},{K:12}]; Within this code snippet are two arrays: replaceArr and originalArr The task at hand is to compare th ...

Enhance your MUI treeview by incorporating stylish connecting borders

I've been trying to add borders that connect to the nodes in the mui treeview, but I'm having difficulty with not having a vertical border when it's the last leaf node. It currently looks like this: See border example here. However, it sh ...

Unable to render page with scrapy and javascript using splash

I am currently trying to crawl this specific page. Following a guide on Stack Overflow to complete this task, I attempted to render the webpage but faced issues. How can I resolve this problem? This is the command I used: scrapy shell 'http://local ...

Showcasing a Collection of Dropdown Options for All Angular Material Icons in Angular Versions 2 and Above

I'm currently developing an Angular 10 application that utilizes Angular Material Icons. I am in search of a method to dynamically showcase a dropdown menu containing all the available Material Icons. My attempt to programmatically retrieve the icon ...

Error: Unable to instantiate Razorpay as a constructor

Having some trouble integrating Razorpay with Node TypeScript. The issue appears to be related to the const variable razor. Any help or insights would be greatly appreciated. Thank you! import * as Razorpay from 'razorpay'; const razor = new ...

Modification of text within a text field via a context menu Chrome Extension

Currently, I am embarking on my first endeavor to create a Chrome extension. My goal is to develop a feature where users can select text within a text field on a website using their mouse and have the ability to modify it by clicking on a context menu. Be ...

Perform both creation and updating tasks within a single transaction using sequelize

Is it feasible to add a new row and update it within the same sequelize transaction? Here's what I've tried: let transaction; try { transaction = await dbcontext.sequelize.transaction(); const newEmployee = await dbcontext.Empl ...

The new mui v5 Dialog is having trouble accepting custom styled widths

I am facing an issue with my MUI v5 dialog where I cannot seem to set its width using the style() component. import { Dialog, DialogContent, DialogTitle, Paper, Typography, } from "@mui/material"; import { Close } from "@mui/icons- ...

JavaScript for varying content that is dynamically loaded on a completely ajax-powered website

This post has been updated to address the issue more effectively with a refined concept and code (based on the responses provided so far) I am working on developing an ajax-driven website, but I have encountered some issues with multiple bound events. He ...

Exploring nested maps in JavaScript

I attempted to nest a map within another map and encountered an issue where the innermost map is being executed multiple times due to the outer map. The goal is to link each description to a corresponding URL (using # as placeholders for some links). Here ...

Problem with Pathjs routing

Can anyone help with this routing issue I'm having? Path.map("/(:page_1)(/:page_2)/").to(funct); The route is not matching for: /projects/index2/ It matches /anything, but not /anything/anything If you have any ideas, please share! ...

Interactive pop-up windows in Bootstrap

I encountered an issue with bootstrap modal forms where the form displays correctly after clicking on the button, but the area in which the form is displayed gets blocked! It's difficult to explain, but you can see the problem by visiting this link. ...

Can the Angular.js scope be maintained while also making changes to the template?

I am currently facing a challenge with my directive. In the snippet below, I am attempting to extract content from a template, append it to the layout, and then compile it: var $template = angular.element("<div></div>"); $template.append($co ...

Exporting a Javascript Object to an XLS file in Angular JS: A Step-By-Step

Currently, I have an object stored in my controller that I need to export as either a .xls or .csv file. I have tried various methods, including the following: HTML <script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="tex ...

React Scroll and Material-UI button active link not functioning correctly

Whenever the link goes to the correct page, I want to add a special background effect or change the font color. Despite trying to use CSS for this purpose, it didn't work as intended. If you want to take a look at my code on codesandbox, follow this ...

How to access nested JSON elements in Javascript without relying on the eval function

Below is a JSON that I am trying to access. { "orders": { "errorData": { "errors": { "error": [ { "code": "ERROR_01", "description": "API service is down" } ] } }, "status": " ...

Generating radio buttons dynamically and automatically selecting the correct button using AngularJS

In the questionnaire form, each question is looped over along with its answers to create radio buttons for each answer. The answer object contains a property called answered, which can be true or false depending on whether the answer has been previously ...