CODEWITHSUNDEEP
javascripthtmljqueryformsselector
hellomynameisA
hellomynameisA

Reputation: 634

Radio button value selector

I am trying to write a form. In the form there will be one set of radio buttons. When I open my html page on my browser, I would like to click one of the buttons and then write its value in a text after I click a submit button.

This is part of the form code:

<form method="post" action="" id="formToSave">
    <dl>
        <dt>Tipo di booster:</dt>
        <dd><input type="radio" checked="checked" name="tb" value="1"/>
            block
            <input type="radio" name="tb" value="2" />
            dark
            <input type="radio" name="tb" value="3" />
            f1b
            <input type="radio" name="tb" value="0" />
            custom
        <p></p>
    </dl>
</form>

And this is part of my javascript code:

function buildData(){
var txt =
    "type = " + ($("[name='tb']").is(":checked") ? "block" : 
                ($("[name='tb']").is(":checked") ? "dark" : 
                ($("[name='tb']").is(":checked") ? "f1b" : "custom"))) 
    return txtData;
}

$(function(){
    // This will act when the submit BUTTON is clicked
    $("#formToSave").submit(function(event){
        event.preventDefault();
        var txtData = buildData();
        window.location.href="data:application/octet-stream;base64,"+Base64.encode(txtData);
    });

});

But it is currently not working properly (it won't save the right selection in txt).

How can I fix it? Thanks in advance

UPDATE: From one of the answers:

function buildData(){

    var txtData =
            "some text...  " +      $("[name=tipoBooster]").change(function() {
                var txt = ["custom","block","dark","f1b"][this.value];
                console.log(txt);
            })          + "other text...";              
            
    return txtData;
}

Upvotes: 0

Views: 348

Answers (4)

Saadi Toumi Fouad
Saadi Toumi Fouad

Reputation: 2829

Here is a simple solution for getting user input when the user changes the checked radio button

$("[name=tb]").change(function() {
  var txt = ["custom","block","dark","f1b"][this.value];
  console.log(txt);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="" id="formToSave">
    <dl>
        <dt>Tipo di booster:</dt>
        <dd><input type="radio" checked="checked" name="tb" value="1"/>
            block
            <input type="radio" name="tb" value="2" />
            dark
            <input type="radio" name="tb" value="3" />
            f1b
            <input type="radio" name="tb" value="0" />
            custom
        <p></p>
    </dl>
</form>

but in your case you need to edit the build function to be like this

function buildData(){
  return "type = " + ["custom","block","dark","f1b"][$("[name='tb']:checked").val()];
}

Or if you want more flexible solution you can add labels to your inputs like this

$("[name='tb']").change(function() {
  console.log($(this).parent().text().trim());
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<form method="post" action="" id="formToSave">
  <dl>
    <dt>Tipo di booster:</dt>
    <dd>
      <label><input type="radio" name="tb" value="1" checked="checked" />block</label>
      <label><input type="radio" name="tb" value="2" />dark</label>
      <label><input type="radio" name="tb" value="3" />f1b</label>
      <label><input type="radio" name="tb" value="0" />custom</label>
    </dd>
    <p></p>
  </dl>
</form>

this was for a change event but your build function should be like this then

function buildData() {
  return $("[name='tb']:checked").parent().text().trim();
}

Explanation:

$("[name='tb']:checked") gets the checked radio input element

.parent() gets its parent since we need the label to get its text

.text() gets the text of the label

.trim() removes white space before and after the text

Upvotes: 1

joshvito
joshvito

Reputation: 1563

A # in a jQuery selector is for selecting by id attribute.

What if you change the selector from ($("#tb").is(":checked")... to a name selector.

e.g. ($("input[name*='tb']").is(":checked")

If you just want to get the selected radio button's text. Could you update the html to be.

<form method="post" action="" id="formToSave">
    <dl>
        <dt>Tipo di booster:</dt>
        <dd>
            
              <input id="option1" type="radio" checked="checked" name="tb" value="1"/>
              <label for="option1">block</label>
            ...
        <p></p>
    </dl>
</form>

Then your function can just return the selected text

function buildData(){
  return "type = " + $("input[name*='tb']").is(":checked").next("label").text(); 
}

If you don't want to add labels to the html, then I would try $("input[name*='tb']").is(":checked").next().text();

Maybe sharing a minimum working example link would help, as I am just writing the above from memmory, referencing the documentation (https://api.jquery.com/text/#text).

Upvotes: 0

Steve G
Steve G

Reputation: 63

You could use: $("[name='tb']").val() and just set the corresponding values on the actual radio buttons to block dark etc.

e.g:

<input type="radio" checked="checked" name="tb" value="block"/>
            block
            <input type="radio" name="tb" value="dark" />
            dark
            <input type="radio" name="tb" value="f1b" />
            f1b
            <input type="radio" name="tb" value="custom" />
            custom

Upvotes: 0

Steve G
Steve G

Reputation: 63

Your selector is referencing an id not the name attribute. Try this instead.

var txt =
    "type = " + ($("[name='tb']").is(":checked") ? "block" : 
                ($("[name='tb']").is(":checked") ? "dark" : 
                ($("[name='tb']").is(":checked") ? "f1b" : "custom")))

Upvotes: 0

Related Questions