jQuery how to copy row input value into hidden field?

I have a simple requirement and i am struggling with it.

There are multiple rows with input and hidden fields when the user clicks the row button, I need to take the value from the input and set the current row hidden field with it.

So:

 if user clicks on row 1 - take input text from row 1 and set it in hidden of row 1
 if user clicks on row 2 - take input text from row 2 and set it in hidden of row 2   
 ...
 if user clicks on row n - take input text from row n and set it in hidden of row n  

This is what I have tried so far:

$( document ).ready(function() {
    $(".copyVal").click(function() {
       var inputValue = $(this).parent().find("input.inpClass:text").val();
       console.log("Input Value is:" + inputValue);
          
       var currentRowHidden = $(this).parent().find("[id^='hidden_']");
       console.log("current hidden id to set is:" + $(currentRowHidden).attr('id') );
       $(currentRowHidden).val(inputValue);          
     });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


ROW1:
<div class="form-group row">
  <input type="text" class="inpClass" value="ROW1"/>
  <div class="col-xs-1">
    <button class="btn btn-primary copyVal"><i class="fa fa-arrows-alt">Button1</i></button>
  </div>
  <input type="hidden"  id="hidden_1" name="hidden_1" value="">
</div>


ROW2:
<div class="form-group row">
   <input type="text" class="inpClass" value="ROW2"/>
   <div class="col-xs-1">
     <button class="btn btn-primary  copyVal"><i class="fa fa-arrows-alt">Button2</i></button>
   </div>
   <input type="hidden"  id="hidden_2" name="hidden_2" value="">
</div>
  
ROW3:
<div class="form-group row">
  <input type="text" class="inpClass" value="ROW3"/>
  <div class="col-xs-1">
     <button class="btn btn-primary  copyVal"><i class="fa fa-arrows-alt">Button3</i></button>
  </div>
  <input type="hidden"  id="hidden_3" name="hidden_3" value="">
</div>

1 Answer

You are using .parent() selector which will return the immediate parent, and you do not have any hidden fields in immediate parent of button.

You need to use .parents() selector to search through the ancestor elements, not just immediate parent.

Here is Documentation: .parents .parent

I have changed your code snippet as below to use .parents selector:

$( document ).ready(function() {
    $(".copyVal").click(function() {
          var inputValue = $(this).parents("div.row").find("input.inpClass:text").val();
          console.log("Input Value is:" + inputValue);
          
          var currentRowHidden = $(this).parents("div.row").find("[id^='hidden_']");
          console.log("current hidden id to set is:" + $(currentRowHidden).attr('id') );
          $(currentRowHidden).val(inputValue);          
          
          }
         );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


ROW1:
<div class="form-group row">
          <input type="text" class="inpClass" value="ROW1"/>
          <div class="col-xs-1">
				<button class="btn btn-primary copyVal">
						<i class="fa fa-arrows-alt">Button1</i>
   					</button>
		  </div>
          <input type="hidden"  id="hidden_1" name="hidden_1" value="">
   	</div>

ROW2:
<div class="form-group row">
          <input type="text" class="inpClass" value="ROW2"/>
          <div class="col-xs-1">
				<button class="btn btn-primary  copyVal">
					<i class="fa fa-arrows-alt">Button1</i>
				</button>
  			  </div>
          <input type="hidden"  id="hidden_2" name="hidden_2" value="">
   	</div>

ROW3:
 <div class="form-group row">
          <input type="text" class="inpClass" value="ROW3"/>
          <div class="col-xs-1">
				<button class="btn btn-primary  copyVal">
					<i class="fa fa-arrows-alt">Button1</i>
				</button>
		  </div>
          <input type="hidden"  id="hidden_3" name="hidden_3" value="">
   	</div>

Archive from: https://stackoverflow.com/questions/59043472/jquery-copy-row-input-value-into-hidden-field

Share

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *