printing jquery value inside html elements

I have a jQuery code snippet that is currently displaying an alert popup when triggered. However, I would like to print the result in the HTML body instead. I attempted the following but it did not work:

// Do What You Want With Result .......... :)
$("#printermodel").change(function() {
    //'you select     
    Model = ' + $('#manufacturer').val() + 'type=' + $('#printertype').val() + 'And Model=' + $('#printermodel').val()
    alert('you select Model = ' + $('#manufacturer option:selected').text() + ' ,type= ' + $('#printertype option:selected').text() + ' And Model = ' + $('#printermodel option:selected').text());
});
});
<div id="manufacturer"></div>

Answer №1

Inserting text within a div element is done using the text method:

$('#company').text($('#company option:selected').text());

For more information, refer to: http://api.jquery.com/text/

To insert HTML content inside a div, use the html method instead of text

Answer №2

$('#manufacturer').html(('Your selection: Model = '+
$('#manufacturer option:selected').text()+' ,type= '+
$('#printertype option:selected').text()+' And Model = '+
$('#printermodel option:selected').text());

Answer №3

If you're looking to take a more advanced approach, I suggest using templates. One option is to utilize the official jquery-tmpl plugin.

To implement this, you'll need to add jquery and

http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js
plugin to your website. Then, you can do something like this:

Html:

<div id="target"></div>

Javascript:

$.tmpl( "<li>${Name}</li>", { "Name" : "John Doe" }).appendTo( "#target" );

You can customize it according to your requirements and even load the template (first parameter of tmpl) from a file

Check out this jsfiddle

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

The Angular directive is failing to refresh the data on the Google Map

I created a directive called "myMap" to incorporate a Google map into my application. However, I am facing an issue when attempting to update the longitude and latitude values for a different location using a controller function. The directive does not ref ...

The useRouter hook from next/router was unable to connect because NextRouter was not activated

import { useRouter } from 'next/router'; const Navbar2 = () => { const router = useRouter(); return ( <nav className={`fixed top-0 w-full px-10 bg-white p-4 transition-all duration-500 ${isVisible ? 'top-0' : 'top-[-1 ...

Troubleshooting VueJS: Issues with V-for display behavior

Is there a way to use v-for to arrange table data in a format similar to the code below: <tr> <th scope="col">Name</th> <th scope="col">Price</th> <th scope="col">Product ID</th> <th></th& ...

Error encountered while attempting to use single quotation marks in MySQL databases

var comma = ","; var querys = "insert into movie values (" + "'" + movid + "'" +comma + "'" + name + "'" + comma + "'" + genere + "'" + comma + "&ap ...

How to extract text from a <div> element using Selenium

Can someone help me with a Selenium question in Python? I need to extract the text "D. New Jersey" from a webpage. The location of this text may vary on different pages, but it is always under "COURT:". The HTML snippet looks like this: <div class=" ...

What is the best way to receive a JSON response in CodeIgniter view after making an AJAX call?

I have been attempting to retrieve a response from the CodeIgniter controller within my view, but unfortunately, I have not been successful. Below is the JavaScript code in my file: // User enters their email address to check against the database. $(" ...

setting a callback function as a variable

I have encountered an issue where I am passing a callback function but unable to call it when the onreadystatechange changes its value, specifically request.onreadystatechange = func. Even though I receive a response from the server when making the ajax ...

having trouble with if and else if statements functioning properly

After testing my code, an issue arises with the second else if statement. When both divs are active, only the class of #project-wrapper is removed. I suspect there may be an error in how I wrote the second else if condition. Can you help me spot any mist ...

How can one easily remove the parent directory from a path when working with Node.js?

If the path is /foo/bar/baz.json and I need only /bar/baz.json, how can this be achieved using Node.js's path functionality? ...

Forward to the login page when an ajax request is made

In my project, I have implemented two methods for authentication: form_login and Cas with a single Provider (user). I have configured the login form in security.yml and created a Guard for Cas. After extensive testing, I successfully integrated both authen ...

Iterating over a JSON object with an embedded index in Angular using ng-repeat

Here is the structure of a JSON object: { "0": { "Order_Id": "100000001", "prodct_Status": "Pending", "Price": "8.0000", "date_created": "Jun 4, 2014 7:55:42 AM", "Shipping_Address": "vbccv", "Region": ...

How come the button is shifting down even though it's set to display inline?

I've recently delved into the world of Bootstrap and CSS, but I'm facing a unique challenge. Despite my research efforts, I couldn't find a solution to my specific issue. I have a <div class="col-md-6"> where I've nested ...

In search of the HTML code for the forward button when extracting content from a webpage

While using Power Automate Desktop to scrape a webpage, I encountered an issue with clicking the next button. Even after copying the HTML code within the developer tools of the webpage, I found that both the previous and next buttons had the same path, mak ...

Troubleshooting Issue with Filtering Nested Object Array Based on Property

At the core of my data structure lies an array of orders, each containing an array of line items. These line items, in turn, are associated with their respective categories. I am currently attempting to filter the order array based on the category ID of th ...

Page redirects automatically after AJAX call

I'm a beginner when it comes to using AJAX and I am trying to delete a student from a list through an AJAX request. I want the response of the request to be displayed on the same page within a specific div, but instead, the response keeps redirecting ...

Tips for retrieving the 'Created' value in vue.js

I am currently trying to fetch API JSON data for a weather widget, but unfortunately it is returning null. While I am able to retrieve the JSON data successfully, I am struggling to handle this value. Below is my HTML code snippet: <html> <head& ...

Attempting to craft a multi-filter feature using AngularJS that will allow for the precise filtering of JSON data based on both month and year identifiers

I have integrated AngularJS into the RoR framework and am working on creating a multi-filter for the "ng-repeat" function to filter JSON data based on "month_id" and "year_id". Here is the current code: JSON: [ { "date":"October 4, ...

A guide on obtaining auto-suggested latitude and longitude coordinates within ng-model in AngularJS, then storing them in MongoDB with the help of M

I have a repeating div for multiple pick up and drop locations. index.html <div class="pickUpLocationSection" ng-repeat="pickUp in pickUpItems"> <div class="pick" id="pick1"> <div class="form-group pickup" id="pickup1"> < ...

The ripples can be found at the bottom of the map, not at the front

Having an issue when working with Globe where Ripple rings are always appearing on the backside of the map, rather than in front of it Referencing the source code from https://github.com/vasturiano/globe.gl/blob/master/example/random-rings/index.html and ...

Is there a practical limit for uploading HTML files?

We are currently working on an internal web application and need to find a way to upload a very large file (100mb). Can an HTML file upload handle this size or do we need to consider other options like Java applets, Silverlight, or Flash? Is it even feasi ...