Fill a hidden input with value Javascript

Question

I am new on js and I am struggling with this task can someone please give me a little help.. This is my code:

<td><input type="radio" name="nr[1]" value="1" class="col"></td>
<td><input type="radio" name="nr[2]" value="2" class="col"></td>
<td><input type="radio" name="nr[3]" value="3" class="col"></td> 
<td><input type="radio" name="nr[4]" value="4" class="col"></td>

Here I got the hidden input that I need to fill with values that come from the js onchange event..

 <input type="hidden" name="row_col_nr[5]" value="0" class="row_nr">

And here I have my js code:

var row_col_nr = null;
$(".col").on("change", function () {
   row_col_nr = $( this ).val();
   alert(row_col_nr); // gives me the value of input that I select

});

My problem is that I do not know how take that row_col_nr values and put to the hidden input I do not know if I am telling right what is my problem.. If someone understands me can you please give me a little help..

what element is minimal

Carsten Løvbo Andersen
– Carsten Løvbo Andersen

2017-11-08 09:16:20 +00:00
Commented Nov 8, 2017 at 9:16 — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Nov 8, 2017 at 9:16
where did you apply minimal class?

Tushar Walzade
– Tushar Walzade

2017-11-08 09:16:42 +00:00
Commented Nov 8, 2017 at 9:16 — Tushar Walzade
– Tushar Walzade, Commented Nov 8, 2017 at 9:16
sorry I eddited my code

Will
– Will

2017-11-08 09:22:19 +00:00
Commented Nov 8, 2017 at 9:22 — Will
– Will, Commented Nov 8, 2017 at 9:22

Carsten Løvbo Andersen · Accepted Answer · 2017-11-08 09:25:36Z

1

To set the value of the hidden input use the following code:

$(".row_nr").val(row_col_nr)

Working demo below

var row_col_nr = null;
$(".col").on("change", function() {
  row_col_nr = $(this).val();
  alert(row_col_nr); // gives me the value of input that I select
  $(".row_nr").val(row_col_nr)
  console.log("the value of the hidden input is: " + $(".row_nr").val())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td><input type="radio" name="nr[1]" value="1" class="col"></td>
<td><input type="radio" name="nr[2]" value="2" class="col"></td>
<td><input type="radio" name="nr[3]" value="3" class="col"></td>
<td><input type="radio" name="nr[4]" value="4" class="col"></td>

<input type="hidden" name="row_col_nr[5]" value="0" class="row_nr">

answered Nov 8, 2017 at 9:25

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

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

1 Comment

Will Over a year ago

This works fine but when I submmit the the row_col_nr gives me an array of only the last numbers like this 1=>4, 2=>4, 3=>4 .. maybe this is because the inputs I have inside a for and the input looks like this: @for($r = 1; $<=4; $r++) <input type="radio" name="col_nr[{{ $r }}]" value="1" class="col"> <input type="radio" name="col_nr[{{ $r }}]" value="2" class="col"> ... do I need to use .each or something so that value to come [1,2,3,4] not only the last selected.. hope you understand me thanks again .

Jay Zamsol · Accepted Answer · 2017-11-08 09:28:01Z

1

var row_col_nr = $('[name^="nr"]').val();

Hope this will help

answered Nov 8, 2017 at 9:28

Jay Zamsol

1,3031 gold badge9 silver badges14 bronze badges

Comments

Abhishek Anand · Accepted Answer · 2017-11-08 09:21:08Z

0

Give an id, say hidden_input to the input which is hidden then use the following code:

$(#hidden_input).val(row_col_nr );

If you don't want to add the id you can use the following:

$('input[value=row_col_nr][name="row_col_nr[5]"]')

answered Nov 8, 2017 at 9:21

Abhishek Anand

4975 silver badges25 bronze badges

Comments

Sunil Dora · Accepted Answer · 2017-11-08 09:21:52Z

0

$('form').on('submit', function(e){
    $('[name="retype-email"]').val($('[name="email"]').val());
    
    e.preventDefault()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>Email:
    <input type="text" name="email">
    <br>
        <label>Hidden input: (visible for example purposes)</label><input name="retype-email">
    <br>
    <input type="submit" value="Submit">
</form>

Here is an example or you may visit URL

Hope this will helps you.

answered Nov 8, 2017 at 9:21

Sunil Dora

1,4821 gold badge15 silver badges30 bronze badges

Comments

Bhargav Chudasama · Accepted Answer · 2017-11-08 09:29:05Z

use $('.row_nr').val(row_col_nr); for store into hidden input

var row_col_nr = null;
$(".col").on("change", function() {
  row_col_nr = $(this).val();
  alert(row_col_nr); // gives me the value of input that I select
  $('.row_nr').val(row_col_nr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td><input type="radio" name="nr[1]" value="1" class="col"></td>
<td><input type="radio" name="nr[2]" value="2" class="col"></td>
<td><input type="radio" name="nr[3]" value="3" class="col"></td>
<td><input type="radio" name="nr[4]" value="4" class="col"></td>
Here I got the hidden input that I need to fill with values that come from the js onchange event..

<input type="hidden" name="row_col_nr[5]" value="0" class="row_nr">

Collectives™ on Stack Overflow

Fill a hidden input with value Javascript

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related