How to send object by radiobutton?

Asked

Viewed 139 times

1

I have a radiobutton: 

<input type='radio' onclick='clickRadioButton(this)' value='new object { nome = #: nome #}' />

It is returning a string, but I want an object with the name property.

javascript html

2 answers

2


I would do so

<input id="but" type="radio" value='{"nome":"um nome","sobrenome":"um sobrenome"}'>

and javascript

var radio = document.getElementById("but");
radio.addEventListener('click', function(){
    var _obj = JSON.parse(this.value);
    console.log(_obj);
});

The output on the console would be:

Object { nome: "um nome", sobrenome: "um sobrenome" }

[ANOTHER WAY TO DO]

Well, if this is your need, there is a better and safer way that I usually use which are the data.

See the example below. I used the jQuery library to facilitate access to page elements, but you can use the library you want or pure Javascript, whatever, will only change the form that refers to the elements:

<input type="radio" name="rd" id="rd-1" data-id="1" data-nome="um nome" data-sobrenome="um sobrenome">
<label for="rd-1">Radio 1</label><br>

<input type="radio" name="rd" id="rd-2" data-id="2" data-nome="um nome" data-sobrenome="um sobrenome">
<label for="rd-2">Radio 2</label><br>

<input type="radio" name="rd" id="rd-3" data-id="3" data-nome="um nome" data-sobrenome="um sobrenome">
<label for="rd-3">Radio 3</label><br>

<input type="radio" name="rd" id="rd-4" data-id="4" data-nome="um nome" data-sobrenome="um sobrenome">
<label for="rd-4">Radio 4</label><br>

<input type="radio" name="rd" id="rd-5" data-id="5" data-nome="um nome" data-sobrenome="um sobrenome">
<label for="rd-5">Radio 5</label><br>

and Java:

$("input[name=rd]").click(function(){  
    // usando data-attributes
    var _obj = {id: $(this).attr('data-id'), nome: $(this).attr('data-nome'), sobrenome: $(this).attr('data-sobrenome')};
    console.log(_obj);
});

See the example working here: http://jsfiddle.net/0t7w5Lp9/

  • I am using kendoTreeList and can’t send the data in radiobutton value with this example.

  • 1

    @Jedaiasrodrigues Walter’s solution is the right way. If you really need to use this inline function in HTML you can use it as suggested in the answer var _obj = JSON.parse(this.value); within that function and then use that _obj wherever it takes.

0

Instead of using this object creation in input value, why don’t you use a function that creates a new object?

function makeObj() {
    var obj = {
        nome: #
    };
    return obj;
}

<input type='radio' onclick='clickRadioButton(makeObj())' value='' />

If the idea is to somehow parameterize the creation of this object based on input, you can still send this.value to the makeObj method and make the creation logic of the object inside. Example:

function makeObj(nomeP) {
    var obj = {
        nome: nomeP
    };
    return obj;
}

<input type='radio' onclick='clickRadioButton(makeObj(this.value))' value='teste' />

Source: Soen: Javascript: Function returning an Object

  • Unfortunately it is not possible to use this way in my case, because I am using a kendoTreeList and there is a radiobutton for each line. The goal is to send the data of each column of that row through an object.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.