/    Sign up×
Community /Pin to ProfileBookmark

Storing of radio values and displaying

Copy linkTweet thisAlerts:
Mar 08.2010

Hi,

I am trying to help out a friend of mine who is working on a website for his new shop and as I only know very very basic HTML and CSS your help would be greatly appreciated.

The issue we are having is that he has a simple form that we are testing out that allows users to come on, click what they wish to order and submit. While they click what they wish to order, there is a text field in the bottom which updates with the price of their order. This script he found online and implemented without a problem.

Though we noticed when this form was submitted, the email would take the name of the input and the value and place them next to one another.

To explain a little better:

[CODE] <tr align=”center”>
<td><input type=”radio” name=”Bread” value=”1.99″ onclick=”this.form.total.value=calculateTotal(this);”></td>
<td><input type=”radio” name=”Bread” value=”2.35″ onclick=”this.form.total.value=calculateTotal(this);”></td>
<td><input type=”radio” name=”Bread” value=”2.75″ onclick=”this.form.total.value=calculateTotal(this);”></td>
<td><input type=”radio” name=”Bread” value=”1.70″ onclick=”this.form.total.value=calculateTotal(this);”></td>
<td><input type=”radio” name=”Bread” value=”2.50″ onclick=”this.form.total.value=calculateTotal(this);”></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
[/CODE]

So for example if the user clicks the first bread with the value 1.99 then the email would show “Bread=1.99” and as we wished to use radio boxes so the user can only pick one, we need a way to read off the bread name.
We thought the easiest route would be to use javascript to take the selected value, store it with a variable and then run an if statement through the value and when it found the answer, we could display the name of the bread in a seperate field below the prices or hidden, as long as it appears within the email.

I know it can be done as some examples online look similar to what we were trying to achieve but our ability to do so is non-existant.

Is there a simple easy way to do this or could you direct me to a location which would take me through it step by step.

Thank you for anyone who reads and takes time out of their day to help with this issue, it is hugely appreciated.

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERMar 08.2010 — To make sure I understand the request,

  • 1. are you asking for a function to read the values of the radio buttons?


  • 2. then once you have the value, be able to update a 'totals' field?
    • Copy linkTweet thisAlerts:
    @aldosmith2003authorMar 08.2010 — I apologise if I made it confusing, been a long day trying to teach myself how to get around my problem.

    Question 1 is correct, I need a function to read and store the value of the selected radio button.

    The form already updates the total for me so I dont require it.

    When the value is stored by the function, I need an if statement (or if you can recommend better) that will take that value, look at a list of names, find the name that corresponds with said value, and publish the name into a seperate text field.

    Trying to think of how to put it out easily.

    User selects radio input number one which has a value of 1.99.

    Fuction stores selection.

    IF statement processes value to find the name of the item (there is only 5 items for this requirement)

    Once IF statement is satisfied with the result, it takes item name and publishes to seperate text field.
    Copy linkTweet thisAlerts:
    @JMRKERMar 09.2010 — The following function will read the radio button value and return it (or optionally, the position in the list).

    Will need to see some more of your code to show specifically how it can be used,

    but the primary used might be:

    var BreadRBtnValue = getRBtnName('Bread');

    <i>
    </i>function getRBtnName(GrpName) {
    var sel = document.getElementsByName(GrpName);
    var fnd = -1;
    var str = '';
    for (var i=0; i&lt;sel.length; i++) {
    if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
    }
    // return fnd; // return option index of selection
    // comment out next line if option index used in line above <br/>
    return str; // return value of selected option
    }
    ×

    Success!

    Help @aldosmith2003 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.25,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...