Passing parameters in a jQuery function through a button click

I am trying to figure out how to pass the @item.Id value as a parameter in the click function for a button. Here is the code snippet:

<button id="buttonEdit" style="color:darkgreen" data-toggle="modal" data-target="#EditRecord">@item.Id</button>

...

<script>
            $(document).ready(function () {
                $("#buttonEdit").click(function () {
    
                    $("#Id").val('parameter');
    
                });
            });
        </script>

Answer №1

Retrieve the text content using the text() method and set it as the value attribute for the corresponding element.

$('#buttonEdit').click(function() {
  const data = $(this).text();
  $('#Id').val(data);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="buttonEdit" style="color:darkgreen" data-toggle="modal" data-target="#EditRecord">@item.Id</button>

<input type="text" id="Id" />

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

What is the best way to create inline-block elements that stretch the entire width of their container?

How can the input field and button behavior be optimized for this specific display: ...

Submitting data using JavaScript's POST method

I am facing a challenge with posting Array data to an HTTP connector. My data is structured as follows: var data = [{ key:'myKey', keyName:'myKeyName', value:'value', valueName:'valueName' }, { ...

Leveraging Enum with sec:authorize="hasRole(...)" for user authentication in a Spring Boot and Thymeleaf application

Trying to make a change: <div sec:authorize="hasRole('ADMIN')"></div> to: <div sec:authorize="hasRole(${T(com.mypackage.Role).ADMIN.getText()})"></div> However, the above modification is not working. ...

Checkbox remains selected even after navigating back

I am currently working on a code that involves using checkboxes. When I click on them, the checkbox value is appended to the URL with a hash. However, when I go back or press the back button, the URL changes but the checkboxes remain checked. Below is the ...

Tips for simulating difficult private attributes within a class during unit testing in TypeScript

Is there a way to mock the value of a hard private property in a unit test? For example, how can I expect something like expect(event.getEventHis()).toBeEqual(['a', 'b']) export class EventController { #event: []; constructor() { ...

Retrieve the border color using Selenium WebDriver

Hey everyone, I'm currently trying to retrieve the border color of an extjs 4.2 form control text field using the getCssValue method. However, I'm having trouble getting the value as it's coming back blank. Below is a sample of my code that ...

Unlock the potential of AngularJS services with this innovative design strategy

I am currently developing an AngularJS client application that will communicate with a REST server. To handle the interaction between the client and server, I have decided to use the $resource abstraction from AngularJS. Each resource is being written as ...

Exploring the power of async/await in conjunction with loops

My JavaScript code is designed to extract content from HTML pages and perform a crawling operation. However, the issue arises with asynchronous execution due to a request function. I attempted to utilize Promises and async & await to address this probl ...

It is not possible to use Date.now within passport.js

When creating a user via Facebook on my Node.js website using passport, I want to assign the register date. In my Mongoose Schema, I can use the following for the local provider: regisDate: { type: Date, default: Date.now }, However, when it co ...

Simultaneously activate the 'onClick' and 'onClientClick' events on an ASP button using JavaScript

I have encountered an ASP button while working on existing code that has both onClick and onClientClick events attached to it. My goal is to trigger both events by generating a click event from an external Javascript file. The line of code I am using for ...

Ensure that the child div is anchored to the bottom of the parent div container

I am looking for a way to ensure that the subfooter div stays at the bottom of the childbox div, similar to a footer. You can view the code on this jsfiddle link <div class="parentbox"> <div class="childbox"> <div id="subfooter" ...

Issue - The 'defaultValue' is failing to load the state value, and the 'value' is not being updated when changed

My current setup involves an input field in my MovieInput.tsx file: <input id="inputMovieTitle" type="text" onChange={ e => titleHandleChange(e) } value={ getTitle() }> </input> This is how the titleHandleChange function ...

Unable to trigger AJAX Complete Handler

Upon completing extensive backend work on my web application, I discovered that the GetMeasure Request was taking up to 10 seconds to finalize. To prevent confusion for potential users, I decided to implement an overlay so that they would not be left stari ...

When it comes to using brackets and HTML, I keep receiving an error message indicating that there is no index file

I'm having trouble with this code - it works fine in Code Academy, but I am new to HTML and trying to practice outside of the platform. Every time I try to live preview in Brackets, I get an error message saying "make sure there is an html file or tha ...

What is the best way to align a logo in a log-in screen?

I am having an issue with centering the logo on my login form. The "signin" text is centered perfectly, but the logo always stays at the top left corner. I don't understand why the logo is not centered. If anyone has a solution to propose, I would gre ...

Spacing between products in Woocommerce product list

Welcome to my website! Check it out here: I am facing an issue with a long margin at the bottom of my woocommerce product list. I have tried using CSS to change it as shown below: .woocommerce .products ul, .woocommerce ul.products { margin-bot ...

At times, Firefox may display HTML incorrectly due to rendering issues

I recently created a CSS menu that worked perfectly on all browsers during my testing with pure HTML/CSS. However, when we integrated the code into our development environment running on cakePHP, we encountered a peculiar bug in Firefox (3.5.2) specificall ...

Attempting to ensure that the social media icons are perfectly centered in between the separators on the page

After adding new menu separators, the alignment of my social media icons has been thrown off and I need them to be centered. I'm not sure why this happened or how to fix it. I attempted to add some CSS but had no success. My website can be found at . ...

Customizing the appearance of Jquery UI Accordion Headers

Trying to integrate the JQuery UI accordion into my JQuery UI modal dialog has been causing some alignment issues. Despite following code examples found online, such as http://jsfiddle.net/eKb8J/, I suspect that the problem lies in CSS styling. My setup i ...

I'm not sure if I'm doing this right, the image seems to be overlapping the border

Just dipping my toes into the world of HTML/CSS, so feel free to point out any major errors in my code. The issue I'm facing is illustrated in this image (Apologies for the black boxes covering up some content; focus is on the top image). Check out ...