What is the best way to display the result data in the id based on the value in the input type

I need to display the result data in the id myplace based on the value in id="number"

If

<input type="text" id="number" name="number" value="5">

I want to show the result in id="myplace5"

If

<input type="text" id="number" name="number" value="7">

I want to show the result in id="myplace7"

How can I achieve this?

<script>
function Check_register()
   {
    setTimeout(function(){
        $.ajax
        (
            {
                url: 'test.php',
                type: 'POST',
                data: $('#form_setup').serialize(),
                cache: false,
                success: function (data) {
                    $('input').prop('readonly', false); // this line will enable all input after success //
                    $('#myplace').show();
                    $('#myplace').html(data);
                }
            }
        )
    }, 2000);
   }
</script> 

Answer №1

Assuming that data is a chunk of HTML code with an element like <input id="number" />, you could try the following:

$('#myplace'+ $(data).find("#number").val()).html(data);

Answer №2

When working with an input element like 'Myplace', you cannot simply use 'text' or 'html' as usual.

Instead, the solution is to utilize jQuery's 'val' function in the following manner:

$("#myplace").val(html.data);

The variable 'html.data' should contain the data retrieved from your web service, and by using 'val', it will be correctly assigned to the element's value property.

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

Having trouble with initiating an ajax call within the jQuery document ready function

I am currently experiencing an issue with an ajax call when attempting to submit a form to the database. Below is the code I have used: <?php include 'dbConnect.php'; include 'session.php'; ?> <form class="form" id="f ...

The color used to highlight questions on Stackoverflow

Could someone please help me identify the specific color that stackoverflow uses to highlight the background when a question answer link is followed? For instance, take a look at this link: Is there a float input type in HTML(5)? Appreciate any assistanc ...

What's the best way to wrap elements in a div dynamically, inside another div?

I am trying to modify the output of WordPress content, but I do not have direct access to edit it. My goal is to use jQuery to wrap each link with accompanying text and line breaks in a div element and then organize them into two columns. The desired final ...

Could the slow loading time of the React site be attributed to an overload of static assets?

As a ML professional diving into frontend development, I have recently incorporated various fixed assets such as images into the assets folder for React. However, I've noticed that my website is running slower than expected. Do you believe that these ...

Tips for saving a Cytoscape.js diagram as an image

Currently, I am diving into learning Cytoscape.js. After successfully creating an HTML file with a basic graph, I attempted to export the graph to an image using the following code: var png64 = cy.png(); // Inserting the png data in an img tag document.qu ...

Utilizing Raycaster for modifying the Box's face color upon clicking

I've been experimenting with the raycaster in order to select faces of cubes that are created, and then change the color of the clicked face. So far, I've managed to make it work for selecting entire objects, but not individual faces of those obj ...

Incorporate personalized buttons into your Slick Carousel

Looking to add custom previous and next buttons to a slick carousel? I attempted using a background image on the .slick-prev and .slick-next CSS classes, as well as creating a new class following the documentation, but unfortunately, the arrows disappeared ...

What could be the reason behind TypeScript ignoring a variable's data type?

After declaring a typed variable to hold data fetched from a service, I encountered an issue where the returned data did not match the specified type of the variable. Surprisingly, the variable still accepted the mismatched data. My code snippet is as fol ...

Rearrange HTML list items automatically according to changes in numeric sort order

I am working on a web page that features a dynamic ranked list. The items in the list are assigned a specific rank order number which changes based on user interactions elsewhere on the page. I have been exploring different options to automatically reorgan ...

Strategies to verify if two objects of the same class possess the same attribute

I have multiple elements with the same class and unique attribute values, such as: <div class="myclass" data-attr="1"></div> <div class="myclass" data-attr="2"></div> <div class="myclass" data-attr="3"></div> <div cl ...

activated by selecting a radio button, with a bootstrap dropdown menu

I'm having trouble triggering the dropdown in Bootstrap by clicking on a radio button. It seems like a simple task, but I've been struggling with it all day. According to Bootstrap documentation, you can activate the dropdown using a hyperlink o ...

The javascript function "Scroll to the element" is not functioning properly on my website. Perhaps using JQuery will resolve the issue

I used this bootstrap template to create my website. Everything worked perfectly except for the "scroll to the element script". I kept encountering the following error: Uncaught Error: Syntax error, unrecognized expression: [href=#],[data-toggle],[data-tar ...

Discovering items located within other items

I am currently attempting to search through an object array in order to find any objects that contain the specific object I am seeking. Once found, I want to assign it to a variable. The interface being used is for an array of countries, each containing i ...

What's the best way to kick off this Ruby on Rails project?

I am embarking on a project to develop an app in Ruby on Rails that can extract thumbnails from video links and embed the videos using ajax when the thumbnail is clicked. To achieve this, I intend to make use of the services provided by Embedly. However, I ...

Ways to verify the header (h1, h2, h3) attribute of a DOM element

In JavaScript or jQuery, I have a reference to a link. How can I determine if it is an <h1>, <h2>, or another type of heading element? ...

Ways to eliminate models that are not currently connected to the DOM

Within my form, I have implemented logic using ng-if to determine which elements are displayed based on user selections. For instance, if a user selects USA as the country, the state drop down will be shown as it was conditioned upon an ng-if for the count ...

Menu button is expanded without the need to click

The Bootstrap 5 button extends the default behavior and does not collapse. Here is the code: <nav id="header-nav" class="navbar navbar-expand-lg navbar-light"> <div class="container"> <a class= ...

The CSS files are not loading automatically in my React application using Vite

I am facing an issue with importing css and js files into a view in React using vite. The styles are not loading properly, and I have to keep commenting and uncommenting the imports in my code for them to be recognized when entering the view. Below is a s ...

React and Material UI: troubleshooting problems with layout columns

I'm working on a project with three columns and I want to include a column for removing each row. Is it possible to add a "removing" column on the right? If so, how can I go about doing it? VIEW CODESANDBOX: HERE const CustomTableRow = ({ row, index ...

I'm not receiving any responses from the server, what could be the issue?

I am currently facing an issue with my server when trying to retrieve a JSON token for authentication. Despite troubleshooting and debugging by printing messages to the console, I have not been able to receive any response from the server, except for occas ...