How can I modify a variable on a button click without using a function?

I am looking to make the app variable in the config parameter dynamic by implementing radio buttons with values. I am curious about how to pass the value based on user preference.

If the selection is changed from selection1 to selection2, it should auto-refresh.

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="../../resources/assets/client/client.css">
        <link rel="stylesheet" href="sense-search.min.css"/>
    </head>
    <input type="radio" name = "Product" value = "987-34587a8a5e13" /> abc
    <input type="radio" name = "Product" value = "786-2fad2cbd8249" /> def
    <body style="width: 100%; margin: 20px auto; font-family: arial;">


        <h2></h2>
        <br>
        <sense-search-input id="myInput" mode="visualizations"></sense-search-input>
        <sense-search-results id="myResults"></sense-search-results>
        <script type="text/javascript" 
src="../../resources/assets/external/requirejs/require.js"></script>
        <script type="text/javascript" src="sense-search.js"></script>
        <script type="text/javascript">


            //var str ;

            //$("input[name=Product]").click(function(){
                //alert("selected");
            //});

            var config = {
                host: "xyz",
                prefix: "/pnb/",
                isSecure: true,
                app: '987-34587a8a5e13',
                port: 443
            }

Answer №1

Get your hands on some free code. https://api.jquery.com/change/

Simply pay attention to the change event of that input... once it changes...

$(document).ready(function() {
    $('input[type=radio][name=Product]').change(function() {
         app.yourstuff = this.value;
         alert("selected "+this.value);
    });
});

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

Is there a way to eliminate the border surrounding every cell in a table?

I'm facing an issue with a table on a page with a gray background. The challenge is to remove the borders of the cells in the table. <table width="510"> <tbody> <tr> <td style="background-color: #fff;" colspan="2" width="510"> ...

Guide on displaying an element depending on the chosen value from a dropdown list using AngularJS

Below is the HTML code I am working on: <select ng-model='selectedtype' ng-options='item.tagname for item in types.name'> <option value="">select type</option> </select> <p ng-show = 'selectedtype.t ...

Does the AJAX request originate from my website, or is it from Zend Framework?

I'm facing a situation where I have a URL (controller/action) that is accessed through AJAX requests. The concern here is that since AJAX calls are client-side, there's a risk of other websites copying my JavaScript code and accessing the same UR ...

Using jQuery to animate an image with two buttons, causing it to shift horizontally from left to

My goal is to create a stickman picture that moves from left to right whenever I click on one of two buttons labeled "<" and ">". Here's the code snippet I have so far: function personLeft() { $('#img').animate({left:& ...

Customizing the MUI X Sparkline: Incorporating the percentage symbol at the end of the tooltip data within the MUI Sparklinechart

Presented below is a SparklineChart component imported from MUI X: import * as React from 'react'; import Stack from '@mui/material/Stack'; import Box from '@mui/material/Box'; import { SparkLineChart } from '@mui/x-chart ...

jquery survey quiz

Currently, I am attempting to develop a jQuery questionnaire, but my limited knowledge in the area is proving to be quite inadequate. So far, here is what I have: Upon clicking on "Questions," a pop-up window will appear with two questions. My goal is t ...

Transport the unique identifier of the table row

After retrieving the list of followers from Instagram and storing it in an array in a session, I am displaying the data in a tabular format. <table class="tablesorter" cellspacing="0"> <thead> <tr> <th>&l ...

Display elements conditionally based on the result of an asynchronous operation within an ng

Using Angular version 11.0.2 I am encountering issues with the async pipe inside an ngIf template, where my data is not being properly refreshed. To illustrate this problem, I have created a simplified example. View code on Plunker To reproduce the issu ...

What is preventing BODY from respecting min-height: 100% ?

Struggling to create a basic webpage with a container that extends to the bottom? Here's what I'm aiming for: #Main should be as tall as the viewport, but able to stretch further with additional content. body should match the viewport height, y ...

Transmit the identifier of the span tag to the URL seamlessly without the need to refresh

<div id="unique50">Greetings</div> Transfer the code 50 to the designated link by clicking on the specific div element without requiring a page reload ...

Hover-over functionality not functioning properly on select images

My website, located at , is fully functional. When you visit the homepage, you will see some words that turn black when you hover over them. I recently switched this site, which was originally created in Dreamweaver, to Umbraco, a .net based CMS. My site ...

Using colorbox to dynamically fetch a div or section with AJAX

I'm currently loading a page using the Ajax colorbox function on my website. Right now, I'm simply using $('.ajax').colorbox(); I was wondering if it's possible to do something like $('.ajax#content').colorbox(); Is t ...

ngf-select fails to activate

Having Trouble with AngularJS 1.6.9 File Upload I'm facing an issue with a simple file upload on JSFiddle using AngularJS 1.6.9. The ngf-select event doesn't seem to be triggering even though everything else appears to be working fine, and there ...

Creating MongoDB queries on-the-fly in a NodeJS environment

Upon receiving a POST argument structured as follows: sort: [ { field: 'name', dir: 'asc', compare: '' }, { field: 'org', dir: 'asc', compare: '' } ] } It is necessary ...

Engaging with the CSS content attribute

Below is a code snippet that inserts an image before the header tag. Is there a way to incorporate JavaScript or jQuery in order to execute certain actions when the inserted image is clicked? h1::before { content: url(smiley.gif); } The HTML code fo ...

I am keen on eliminating the lower margin of the PIXI application

Exploring the possibilities of PIXI.js, I am working on creating a new application. However, upon adding the PIXI application to the DOM, I noticed an unwanted margin at the bottom. Here is an image illustrating the issue. Is there a way to remove this bo ...

Establishing a default selection for a react dropdown menu filled with data retrieved from an API request

class Select extends React.PureComponent { constructor(props) { super(props) this.state = { value: this.props.initialValue } this.handleChange = this.handleChange.bind(this) } handleChange(e) { e.persist() ...

Adjust the size of a highchart when the container dimensions change, rather than when the

Take a look at this code pen showcasing the code I will insert here: https://codepen.io/andrewsunglaekim/pen/MmmxvO Ignore the messy html, I simply copied a basic high charts demo. The HTML is straightforward: <div class="flexContainer"> <div ...

Combining two arrays filled with objects to form a collection of Objects on a Map

In my JavaScript code, I'm receiving data from a WebService that looks like this: { "fire": { "totalOccurence": 2, "statsByCustomer": [ { "idCustomer": 1, "occurence": 1 }, { "idCustomer": 2, ...

Is there a way to align these elements horizontally on the same line?

I am managing a website at To better illustrate my request, I have attached an image showing what I want to accomplish. I would like the elements on the site to align seamlessly with the "in stock" notification. https://i.sstatic.net/3qipq.jpg This is t ...