How can I modify my array from using images to using string values for radio buttons?

I am currently utilizing an array in my code:

function displayStoneCut(box){

var stonecutPics = new Array(5)
stonecutPics[0] = "images/designform7/design-form-07_type6-2.gif";
stonecutPics[1] = "images/designform7/design-form-07_type6-1.gif";
stonecutPics[2] = "images/designform7/design-form-07_type6-3.gif";
stonecutPics[3] = "images/designform7/design-form-07_type6-4.gif";
stonecutPics[4] = "images/designform7/design-form-07_type6-5.gif";
document.getElementById('stonecutpic').src = stonecutPics[parseInt(box.value)];
}

This array is designed to function alongside radio buttons.

<input name="stonecut" type="radio" onClick="displayStoneCut(this);" value="0" >
<input name="stonecut" type="radio" onClick="displayStoneCut(this);" value="1" checked >

By interacting with these radio buttons, images lower down the page will be swapped:

<img src="images/designform7/design-form-07_type5-1.gif" width="139" height="161" name="stonepic" id="stonepic"/><img src="images/designform7/design-form-07_type6-1.gif" width="168" height="161" name="stonecutpic" id="stonecutpic"/>

The aforementioned functionality is integrated within a multipage form controlled through CSS. However, I am encountering an issue when sending the form (using ASP and JMail). The values are coming through as numbers (0, 1, 2) instead of strings or word values.

I seek advice on the best solution for this problem. Should I modify the array, introduce another value to the radio button, or incorporate an additional array?

Any assistance provided would be greatly valued.

javascriptarraysstringformsradio-button

Answer №1

Check out this alternative:

<input name="gemshape" type="radio" onClick="showGemShape(this);" 
    value="images/designform7/design-form-07_shape2-3.gif" >
<input name="gemshape" type="radio" onClick="showGemShape(this);" 
    value="images/designform7/design-form-07_shape2-4.gif" checked >

...
function showGemShape(selection){
    document.getElementById('gemshapepic').src = selection.value;
}

Now, the form will capture the image value. Does that suit your needs?

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 process for creating custom event bindings in AngularJS?

There is a custom event called core-transitionend (specifically triggered by Polymer), and I am able to specify an event handler using document.addEventListener(). However, what would be the most recommended approach for achieving this in AngularJS? Alter ...

javascriptangularjspolymerdom-events

The JS file functions properly on Internet Explorer but encounters issues on different browsers

The following function is working in Internet Explorer but not in other browsers. Any suggestions to make it compatible with all browsers? function displayPacket(str, company) { var cam = document.getElementById("company"); if (window.XMLHttp ...

javascriptajax

Having trouble submitting data via POST in PHP?

I am encountering an issue with sending a POST request from my PHP script. The script I'm working with is as follows: <?php if (isset($_POST)) { // form validation vars $formok = true; $errors = array(); // sumbission data $ip1 = $_SERVER[&ap ...

phparrayspost

Nuxt 3: Pinia: How does mutating my state affect the integrity of the entire array?

My code is here: import { defineStore } from "pinia"; export const DB_CART = defineStore("CART", { state: () => ({ CART: [ { $id: "62616ffc6d13e2a9eb04", quantity: 1 ...

javascriptarraysvue.jsnuxt3.jspinia

Update the background image every minute with a smooth transition effect

I am currently in the process of developing a personal dashboard that requires dynamic background images to change every minute. To achieve this functionality, I have integrated the [Pixabay API][1] and formulated the following API request: https://pixaba ...

javascripthtmljquerycssbackground-image

What is the best way to merge two sets of data in JavaScript?

There are two sources from which I am retrieving data. Once the data is fetched, I need to merge them into a single source. Here's an example; //data structure looks like: //from url1 { "data": [ { "id" ...

javascript

Mapping a single JSON object with Knockout JS made easy

As a newbie to knockout and in the process of creating a jquery mobile app, I'm eager to harness the benefits of knockout. After struggling with a simple issue for a day, I resorted to manually binding code by hand, almost negating the use of KO over ...

javascriptjsonknockout.jsknockout-mapping-plugin

Single-page application powered by WordPress and universal JavaScript

Can a WordPress single-page application be created using isomorphic/universal JavaScript approaches (utilizing frameworks like React and Angular2)? ...

javascriptangularjsnode.jswordpressreactjs

Interactive double content slider showcasing dynamic features

I am attempting to customize a W3 slider to be more dynamic. The original slider can be found at this link. My goal is to modify the slider so that only the bottom images are displayed, with only the current image showing at the top. For a visual referenc ...

javascriptphpcssmysqlmysqli

Utilizing JavaScript event handlers on dynamically appended elements after the document has finished loading

One issue I am facing is with a javasript function that needs to change the value of an element appended after the document has loaded. The problem arises when trying to intercept actions on a newly appended DIV, such as: <div class="new-div"></d ...

javascripthtmldomdelegatesscroll

Guide to navigating through a JSON object containing nested child objects using C#

I am in need of the property name from within a property's object : Below is the code snippet: JSON example: { "dados": [{"codigo_localidade":"1", "localidade":"Adamantina", "nome_localidade_pai":"Regi\u00e3o de Governo de Adamantina", " ...

c#arraysjsongetjson

Transferring Date or DateTime from one HTML Input to another HTML Input using Javascript

There are 2 a elements present. Each one triggers a Bootstrap modal window. One of these a elements is used to create a completely new record, and thus it includes the current date/time: <a style="color:#5cb85c" data-CreateDate="@DateTime.Now" data-tog ...

javascripthtmlasp.net-corebootstrap-4

What is preventing the code from concealing the html div when the winOrNot function is given the argument (false)?

Can you identify why the "Congratulations" message in the div is not being hidden when the function is called with the (false) argument? <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id= ...

javascripthtmlfunction

Utilizing a for loop to iterate through an array based on its length

Just delving into the world of JavaScript and recently grasped the concept of For loops. I have a variable that holds an array with a list of first names, and my goal is to add last names to each of them. Here's the code snippet I came up with: l ...

javascriptfor-loop

Issue with Backbone collection not being updated despite making a JSONP request

Recently, I delved into the world of Backbone.js and currently, I am immersed in developing an app using Brunch that makes a JSONP request to an external API for populating my collection and models. Despite following guidance from previous posts (here and ...

javascriptajaxbackbone.jsjsonpbrunch

Shifting the contents of a JavaScript array

My dataset consists of values categorized by different sections as shown below: var data = [ {'name': 'Test 1', 'values': { '50':0, '51':10, '52':0, '53':10, '54':60, '55 ...

javascriptarrays

Add the bannercode snippet found on a webpage

I am currently facing an issue with appending a banner code to the end of a URL. The scenario is as follows: An individual receives an email with a link to a website (SITE1), where the URL includes a banner code, such as www.site1.com?banner=helloworld O ...

javascriptjqueryhtmlcss

Customizing the search dialog in JQGrid to adjust the width of the input fields

Can the width of the text box in Jqgrid default search dialog be increased? Check out the image: Updated Code for the search functionality: jQuery("#subscriptions").jqGrid( 'navGrid', '#pager', { del: false, add: false, e ...

javascriptjquerycssjqgrid

Personalize Bootstrap 5 slider for mobile (displaying multiple items without being arranged in a single row)

Having trouble customizing the carousel layout for mobile devices. I'm trying to display all items of the carousel on mobile instead of just one. I've been experimenting with CSS and JS, specifically with the display, float, or max-width properti ...

javascriptcsstwitter-bootstrapcarouselbootstrap-5

Error encountered: Vue.js encountered an unexpected token, which is 'export'

Having an issue with Google location autocomplete, specifically this error: SyntaxError Unexpected token 'export' Here is the link to the functional code: https://codesandbox.io/s/nifty-bardeen-5eock ...

javascriptjqueryvue.jsvuejs2