Tips for assigning multiple Angular2 variables in Jquery on change

I am having trouble assigning more than one variable in jQuery within Angular2.

Here is my current code:

jQuery('.source-select').on('change',(e) => this.updateForm.value.sources = jQuery(e.target).val().split('--')[0]);

This code works perfectly, but I want to assign the split value at index [1] to another object as well:

jQuery('.source-select').on('change',(e) => this.updateForm.value.sources = jQuery(e.target).val().split('--')[0]
, (e) => this.selected_text = jQuery(e.target).val().split('--')[1]
);

However, currently only this.selected_text is being set and not this.updateForm.value.sources. Any idea what I am doing wrong?

*** I have tried using 'on change' twice and it works fine, but I don't think it's a good practice.

javascriptjquerytypescriptangular2-forms

Answer №1

It's possible that I may not fully grasp your inquiry, but have you considered using it in this manner?

 jQuery('.source-select').on('change',function(e){
    this.updateForm.value.sources = jQuery(e.target).val().split('--')[0];       
    this.selected_text = jQuery(e.target).val().split('--')[1];        
});

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

Load a form using ajax and submit it using jQuery

For a while now, I have been facing challenges in figuring out what's going wrong with my code. The issue arises when I try to submit a form using jQuery that was loaded through ajax. The form loads perfectly fine within a div after invoking the ajax ...

phpjavascriptjqueryhtmlajax

What methods can be utilized to enhance the visual appeal of a threejs model

I'm currently working on enhancing the visual quality of my 3D models, aiming for smoother edges and more realistic shadows. To achieve this, I am experimenting with an OBJ file format. Here's the code snippet I'm using to load and display t ...

javascriptthree.js

Unexpected behavior involving the onchange event, input validation, and the enter key

One challenge I encountered was implementing validation for a date input field in a form. The requirement was to only allow dates starting from today up to a maximum of 3 years in the future. If a valid date is entered, a modal should appear; otherwise, an ...

javascriptjqueryvalidationdate

Dynamically alter routing in Express by retrieving route paths from a JSON document

My goal is to dynamically update my route in Express using a JSON file that stores the specific link. The JSON data resides in articles.js and appears as follows: title: 'title1', link: 'title2', creator: 'user1', crea ...

javascriptnode.jsexpress

issue with displaying popover component using React with Material UI

A React component I created has 6 different experiences, each triggering a popover with an array of images. The popovers are implemented using Material UI, and while they work, there are some console errors that I'm unsure how to resolve. Below is th ...

javascriptreactjsmaterial-ui

Tips for including parameters in an array of values when using getStaticPaths

I'm trying to retrieve the slug value that corresponds with each number in the getStaticPaths for my page structure: /read/[slug]/[number]. The code I have is as follows: export async function getStaticPaths() { const slugs = await client.fetch( ...

javascriptreactjsnext.jscontent-management-systemsanity

Isolated Modules in Angular Version 17 and Beyond

Having worked with an earlier version of Angular, I am facing issues with my navbar routes not working properly on my Contact Page. Can someone shed some light on this for me? If you want to take a look at the code, here is the link: https://github.com/Lo ...

angulartypescriptroutescomponentslocal

Is it possible to retrieve JSON data and display only the entries with positive values in an HTML

I am working on a project that involves fetching JSON API data and displaying it in an HTML table, but only for values above 10. Below is the code snippet along with my JavaScript. I specifically want to exclude negative values and only display positive v ...

javascripthtmljsonfetch-api

Kendo checkbox toggle issue with switching between true and false states is not functioning correctly

How can I make a button appear when one or more checkboxes are clicked? Currently, the toggle function only activates when I select one checkbox, and then deactivates upon selecting another. Any guidance on improving this functionality would be greatly app ...

htmlangulartypescriptcheckboxkendo-ui

What could be the reason for the react hook form failing to capture the data upon submission?

I am struggling to access the props' value after clicking the button, as it keeps returning undefined. My goal is to display the years of service and profession details based on the user's selection. return ( <form onSubmit={handleSubmit(o ...

typescriptvisual-studio-codematerial-uireact-hook-formcodesandbox

Using jquery to dynamically change audio source on click

Is there a way to dynamically change the audio src using jquery? <audio id="audio" controls="" > <source src="" type="audio/mpeg" /> </audio> <ul id="playlist"> <?php if($lists) { foreach ($lists as $list) { ?> ...

javascriptjquery

Refresh the page with cleared cache using window.location.reload

Is there a way to reload a page using JavaScript and still clear the cache, ensuring that the refreshed page shows the latest content from the server? It seems that other browsers are not displaying the most up-to-date versions of the content. Anyone have ...

javascriptinternet-explorer

Increasing several array elements within a MongoDB object

I have been struggling with this problem for some time now. My goal is to update multiple array values in the same object with a single query. The data in the database appears as follows: id: 616f5aca5f60da8bb5870e36 title: "title" recommendations: ...

javascriptdatabasemongodbnext.js

Leveraging jQuery to detect an AJAX load that does not involve the use of jQuery's AJAX method

Hi all, I have a challenging issue that I'm struggling with in terms of jQuery/JavaScript. I am fetching data through standard AJAX without using any frameworks like jQuery. Now, the dilemma is that once the page has loaded, I need to implement a jQu ...

javascriptjqueryajaxpluginsjquery-plugins

Issues with jqplot functionality when placed in an Accordian nested inside a Tab

My current project involves using jqplot to display graphs within an accordion. If you're interested, you can check out jqplot here: Initially, everything worked smoothly when displaying the graphs without the accordion feature. However, when I attem ...

jqueryjqplot

Detecting collisions between two squares in an HTML5 canvas

class Snake { constructor() { this.x = 400; this.y = 400; this.width = 25; this.height = 25; } draw() { ctx.fillRect(this.x, this.y, this.width, this.height); } } let snake = new Snake(); class ...

javascripthtml5-canvas

Enhance your website with a dynamic dropdown feature using Javascript and Bootstrap 5, allowing buttons to respond

Currently, I am experimenting with Javascript to dynamically incorporate elements into a Bootstrap 5 dropdown. To guide me, I referred to the relevant documentation which can be found here (https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-items ...

javascriptdropdownbootstrap-5

Creating Dynamic Components in ReactJS with Conditional Rendering

Currently, I'm using an if-else statement to show different content based on whether Firestore is ready and the user is logged in. However, I am facing an issue where the firebase.auth.uid is returning as undefined even though it is correctly connecte ...

javascriptreactjsfirebase

Experience the combined power of addthis, isotope, and nicescroll - all in a single

I am utilizing a WordPress template that includes a set of share buttons from AddThis. <ul class="addthis extra"> <li class="addthis-hold"> <div class="addthis_toolbox" addthis:url="<?php the_permalink( ...

javascriptjquerycssjquery-isotopeaddthis

Enhance Vue functionality by adding a versatile mutation that can be utilized across

I am facing a challenge where I have a mutation that needs to be reused in multiple Vuex modules but should only modify the state at each module level. Is there a way to separate out this mutation so it can be easily added to each module's mutations w ...

javascriptvue.jsvuex