jQuery - How dynamically change the value?

Question

I have in my html code:

<input class="hidd" type="radio" name="org1" value="1" />
<input class="hidd" type="radio" name="org1" value="2" />
<input class="hidd" type="radio" name="org1" value="3" />

<input type="hidden" id="crc" name="crc" value="20120109|0" />

I want to jQuery detect which item was selected by user and then set the value according to the formula: if radiobutton with value "1" is selected by user then input value of id="crc" should be: "20120109|1" instead of "20120109|0". So in other words - keep all numbers before sign "|" and change only value behind this sign "|". How can I do that? Maybe take value from id="crc", delete last number and add new number? Or maybe in another way?

$('.hidd').click(function () {

});

Why on earth do you need to do this? Just have two hidden input elements, crc_date and crc_choice. — lonesomeday
– lonesomeday, Commented Jan 11, 2012 at 13:40
and after your wrote the .click() method you stopped trying? — meo
– meo, Commented Jan 11, 2012 at 13:41
To select the element whose id="crc", you can use $('#crc') — itdoesntwork
– itdoesntwork, Commented Jan 11, 2012 at 13:42
I don't think, it is wrong question. I would rather upvote it..!! — Umesh Patil
– Umesh Patil, Commented Jan 11, 2012 at 13:46

Rory McCrossan · Accepted Answer · 2012-01-11 13:59:00Z

2

Try this:

$('.hidd').click(function () {
    var crc = $("#crc").val().split("|");
    $("#crc").val(crc[0] + "|" + $(this).val());
});

Or to cover all possible methods of selecting an option:

$('.hidd').change(function () {
    var crc = $("#crc").val().split("|");
    $("#crc").val(crc[0] + "|" + $(this).val());
});

edited Jan 11, 2012 at 13:59

answered Jan 11, 2012 at 13:41

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tadeck Over a year ago

Just one notice though: click will be fired only if the element is clicked (unless will be fired artificially by different script), so the better idea is to use change instead of click. As the name suggests, it will be fired when the value is changed, so OP's requirement ("item was selected by user") should be met then :)

Lucas Over a year ago

Thanks for help. I knew only command "explode" for php, now I know how to use "split" in jQuery. Thank you.

PiTheNumber · Accepted Answer · 2012-01-11 13:41:16Z

1

$('.hidd').click(function () {
    var v = $('#crc').val().split('|');
    $('#crc').val(v[0] + '|' + $(this).val());
});

answered Jan 11, 2012 at 13:41

PiTheNumber

23.7k17 gold badges115 silver badges191 bronze badges

3 Comments

Tadeck Over a year ago

This will react only on clicks, so changes made in a different way (eg. by keyboard or using touch-enabled devices that may not fire click event) will not trigger the code OP needs.

PiTheNumber Over a year ago

True, but it looks like it is hidden anyway class="hidd" so there is no touch or keyboard access.

Gabriele Petrioli Over a year ago

@PiTheNumber, the element holding the result is the hidden one, not the radio buttons that receive the click / change event..

Gabriele Petrioli · Accepted Answer · 2012-01-11 13:48:16Z

1

This should do it

$('.hidd').change(function () {
  var crc = $('#crc');
  var value = crc.val();
  crc.val( value.split('|')[0] + '|' + this.value );
});

Demo at http://jsfiddle.net/gaby/cmCS9/

or the regex way

$('.hidd').change(function () {
  var crc = $('#crc');
  var value = crc.val();
  crc.val( value.replace(/\d+$/, this.value) );
});

Demo at http://jsfiddle.net/gaby/cmCS9/1/

edited Jan 11, 2012 at 13:48

answered Jan 11, 2012 at 13:42

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

1 Comment

Samuel Edwin Ward Over a year ago

"The regex way" is nice, although it wouldn't work if he decided to put something other than numbers in the second part.

Tadeck · Accepted Answer · 2012-01-11 13:57:44Z

1

Use jQuery's val() method, string's split() method and you will get something like:

var crc = $('#crc');
var radio = $(':radio[name="org1"]');
crc.val(crc.val().split('|')[0] + '|' + radio.val());

If you want this to be triggered when the value of the radio button is changed, then do the following (jQuery 1.7+):

$(':radio[name="org1"]').on('change', function(){
    var crc = $('#crc');
    crc.val(crc.val().split('|')[0] + '|' + $(this).val());
});

edited Jan 11, 2012 at 13:57

answered Jan 11, 2012 at 13:41

Tadeck

138k28 gold badges155 silver badges201 bronze badges

Comments

Steve · Accepted Answer · 2012-01-11 13:41:07Z

0

$('.hidd').click(function () {
   $("#crc").val('20120109|' + $(this).val());
});

answered Jan 11, 2012 at 13:41

Steve

50.6k4 gold badges34 silver badges42 bronze badges

Comments

Toni Michel Caubet · Accepted Answer · 2012-01-11 13:42:11Z

0

$('.hidd').click(function () {

     $('#crc').val('20120109|' + $(this).val());
});

answered Jan 11, 2012 at 13:42

Toni Michel Caubet

20.3k59 gold badges220 silver badges390 bronze badges

Comments

Episodex · Accepted Answer · 2012-01-11 13:46:13Z

0

$('.hidd').click(function () {
    if($(this).is(":checked")) {
        $("#crc").val($("#crc").val().replace("/|[0-9]/","|" + $(this).val()));
    }
});

answered Jan 11, 2012 at 13:46

Episodex

4,5894 gold badges45 silver badges64 bronze badges

Comments

Lautaro Orazi · Accepted Answer · 2012-01-11 13:46:19Z

0

Using regexp

   $('.hidd').click(function () {
        var crc = $("#crc"),
            $this = $(this);
        if($this.is(":checked")) {
            crc.val( crc.val().replace("/[0-9]$/", $this.val());
        }
    }

answered Jan 11, 2012 at 13:46

Lautaro Orazi

1661 silver badge6 bronze badges

Comments

Samuel Edwin Ward · Accepted Answer · 2012-01-11 13:52:47Z

0

You may want to consider going beyond jQuery to the awesome power of JavaScript regular expressions: "20120109|0".match("[0-9]*\|") will return "20120109|".

Putting this together with your jQuery and requirements:

$('.hidd').change(function () {
    var crc = $("#crc"),
        old = crc.val(),
        num = $(this).val(),
        pfx = old.match("[0-9]*\\|"),
        nvl = pfx + num;
    crc.val(nvl);
    // here you will want to return true or false
});

answered Jan 11, 2012 at 13:52

Samuel Edwin Ward

6,7153 gold badges38 silver badges63 bronze badges

Comments

Umesh Patil · Accepted Answer · 2012-01-11 13:45:55Z

-1

  $('.hidd').change(function () {
    var previousVal=$("input[type='hidden']").val();
    $("input[type='hidden']").val(previousVal+$(this).val());
});

answered Jan 11, 2012 at 13:45

Umesh Patil

10.7k16 gold badges56 silver badges81 bronze badges

3 Comments

Rory McCrossan Over a year ago

This will append to the existing value, and could end up with 20120109|0|1|2|3

Umesh Patil Over a year ago

Rory, you are person with eagle's eyes :)

zizozu Over a year ago

@RoryMcCrossan: At least it will be triggered at the correct moment, not only when clicked ;)

Collectives™ on Stack Overflow

jQuery - How dynamically change the value?

10 Answers 10

2 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

2 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related