Sending the HTML input value to a Knockout view

Can someone assist me with a dilemma I'm facing?

Within CRM on Demand, I have a view that needs to extract values from CRM input fields to conduct a search against CRM via web service. If duplicate records are found, the view should display them.

Below is the code contained in some libraries related to CRM:

    /*
     * Context Helpers
     */

    declare var epmcrm: any;

    class context {


        private getParameterByName(name) {
            name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
            var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                results = regex.exec(location.search);
            return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
        }

        // The rest of the existing code will remain unchanged.
    }
    
    export = context;

In the view models, I have set up knockout observables to reflect CRM fields based on the data retrieved from HTML input elements. This data is then used to execute a search and determine whether results should be returned:
`contactSearch.ts`

The contactSearch class enables interaction with CRM data via web services.

// The remaining part of the existing code from contactSearch.ts remains unchanged.

David,

I've established observables and bound them in the HTML view model, but I'm uncertain how to pass values from HTMLInputElement to these observables.

To illustrate:

<p>Email <input data-bind="value: vEmail" />
    <span data-bind="text: vEmail"></span>

Please note this file that establishes a dependency with CRM as well:

var epmcrm;
((epmcrm) => {

    require.config({
    // Configuration details here...
    });

    require(["knockout", "knockout.mapping", "koExtensions"],
    (ko: KnockoutStatic, komap: KnockoutMapping) => {
        ko.mapping = komap;
        ko.applyBindings({}, document.getElementById("QuoteWebAppletContainer"));
    });
})(epmcrm || (epmcrm = {}));

Answer №1

I will provide the solution shortly, as I have all that I require.

Here is how things were updated:

 $("#ContactEditForm\\.First\\ Name").on("change", () => {
            this.firstName((<HTMLInputElement>document.getElementById("ContactEditForm.First Name")).value);
        });

        $("#ContactEditForm\\.Email\\ Address").on("change", () => {
            this.email((<HTMLInputElement>document.getElementById("ContactEditForm.Email Address")).value);
        });

        $("#ContactEditForm\\.Last\\ Name").on("change", () => {
            this.lastName((<HTMLInputElement>document.getElementById("ContactEditForm.Last Name")).value);
        });

These three variables have been transformed into observable properties:

 lastName: KnockoutObservable<string> = ko.observable("");
    firstName: KnockoutObservable<string> = ko.observable("");
    email: KnockoutObservable<string> = ko.observable("");

Furthermore, I made some additional adjustments:

   vFName = this._context.firstName;   
    vLName = this._context.lastName;    
    vEmail = this._context.email;

    isSearching: KnockoutObservable<boolean> = ko.observable(false);
    searchValue = ko.computed(() => {
        return ("[ContactEmail]~=" + "'" + ko.unwrap(this._context.email) + "'" + " AND [ContactFirstName]~=" + "'" + ko.unwrap(this._context.firstName) + "'" + " AND [ContactLastName]~=" + "'" + ko.unwrap(this._context.lastName) + "'")
    });

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

tips for utilizing namespaced getter filtering within a Vuex module in vueJs

In my custom module named ShopItemCategory, I have a Getter getters: { shopItemsCategories: state => state.ShopItemsCategories.data, }, Inside the component, there is a computed function I defined computed: { shopItemsCategories ...

The issue with Cordova (PhoneGap) is that when you move a video file captured by the camera, the gallery thumbnail

Is there a plugin available for Cordova (Android) that can refresh the gallery? I am currently capturing video using the Cordova plugin cordova-plugin-media-capture, which saves the video to the default sdcard path (gallery). After saving the file, I ...

Issue: Adjustment of elements' size using an "onclick" method when reaching specific screen width

Seeking assistance with implementing media queries in JavaScript. Can an object be resized from JavaScript code based on a specific screen width, rather than the default one? For example, if I have a button that opens a div with a height of 600px when cli ...

Troubleshooting Chrome's autoplay video problem with Fancybox

I've been encountering an issue with Fancybox acting as a lightbox. My videos, which are set up in external HTML documents and loaded into Fancybox when the link is clicked from the main document, do not autoplay in Chrome but seem to be working fine ...

Tips on generating model names dynamically within a service

I am currently utilizing a service to assign unique numbers to model names. The resulting data structure is as follows: "sectionInputs": [ { "model": "price_min1" }, { "model": "price_max2" }, { "model": "units_occ3" }, { "m ...

challenge encountered while trying to remove ScrollTop feature on mobile gadgets

Currently facing a challenge with responsive design - I have implemented a sticky navbar effect that works seamlessly on desktop, but causes usability issues on mobile. When scrolling down on the mobile version, the sticky navbar obscures the text on the s ...

Prisma designs a personalized function within the schema

In my mongo collection, there is a field named amount. My requirement is to have the amount automatically divided by 100 whenever it is requested. In Django, this can be achieved with a custom function within the model. Here's how I implemented it: cl ...

What is the best way to send props to a styled component without needing to convert them to transient props beforehand

Recently, I designed a custom Text component that accepts several props. These props are then forwarded to the styled component where specific styles are applied. However, I am facing an issue where I do not want these props to be passed down to the DOM, b ...

Showing pdf documents without relying on third-party software

Within my Angular application, I have integrated the following snippet into an HTML template: <embed src="../assets/AOK_T2DM.pdf" style="width: 100%;height: 500px" type="application/pdf"> The representation of this code ...

What is the syntax for invoking a method within a component in the OctoberCMS framework?

I'm not sure if this is even possible or if it's just a crazy idea, but I'm attempting to call a PHP method from an AJAX request using OctoberCMS Ajax Framework (which I believe utilizes jQuery in the background). Unfortunately, it doesn&apo ...

Using a function as an argument to handle the onClick event

I have a function that generates a React.ReactElement object. I need to provide this function with another function that will be triggered by an onClick event on a button. This is how I call the main function: this._createInjurySection1Drawer([{innerDra ...

Utilizing ExpressJS to save uploaded files using the FileReader object from the front-end

Despite researching multiple posts on this topic, I am still unable to successfully upload a file after numerous adjustments. My React form includes a PDF file upload component which looks like this: <Input onChange={(e) => this.handleFileUpload(e) ...

Is there a way to pause the slideshow? Are there any ways I can enhance the code to make it more efficient?

Currently, I am testing a slideshow that automatically transitions every 1 second. I have set it up to pause when it reaches the first image. However, when it stops on the initial image and I click the next button, nothing happens. If I try to interact wit ...

Managing stream pauses and resumes in Node.js using setTimeout()

After some experimentation with Node.js (v4.4.7), I managed to create a simple program to play a sound... const Speaker = require('audio-speaker/stream'); const Generator = require('audio-generator/stream'); const speaker = new Speake ...

Remain on the React page following an HTTP POST request to Flask

Is there a way to stay on the React frontend (localhost 3000) after completing a POST request to a Flask backend from a React form, without redirecting in the Flask backend? Relevant code: export const DateForm = () => { return ( <div&g ...

React button synchronization issue with start stop functionality

My React timer module has one input field and three buttons: Start (to begin the timer), Pause (to temporarily stop the timer), and Stop (to completely halt the timer). The issue I am encountering is that when I input a value, start the timer, then press t ...

Angular 2 component stays static despite changes in route parameters

So, I am in need of a way to refresh my component after the URL parameter's id has been altered. The following code is from my player.component.ts: import {Component, OnInit, AfterViewInit} from '@angular/core'; import {ActivatedRoute, Rout ...

Send Selected Input From Radio Button To Form Using a Function

Within the main php page titled tipComp.php, there is a script designed to submit a selected value from a radio button within a form: <script> $('input[type=radio]').on('change', function() { $(this).closest("form& ...

Utilizing AJAX for sending a data string and image file to a PHP server

Is it possible to include an image file in the dataString for a single function? Here is what I have: $.ajax({ type: "POST", url: "../insert.php", data: dataString, success: function(response){ console.log( ...

Looking for a fully customizable event and booking calendar?

Currently, I am searching for a unique event and booking calendar that provides the ability to customize each cell or day with our desired content. While most calendars only allow for inputting events as text, we require a solution that enables us to add ...