1

I have this code for passing values from multiple inputs to other inputs and it's working well. The problem is that I'm saving the value of one input inside an object, but if I do this process, I'll have to add 8 values inside the object and inside conditions statements.

I found this answer

How can I add it to my code and make it works?

How I can get the values of the 8 inputs and pass it to other 8 inputs.

This is my JS code:

var data = {
  first_name: $('#first_name'),
}

if ($('#checkbox').is(':checked')) {
  $('#check_name').val(data.first_name.val());
}

$('#checkbox').change(function() {
  if ($('#checkbox').is(':checked')) {
    $('#check_firstname').val(data.first_name.val());
  } else {
    $('#check_name').val('');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

This is my view 

//These are which I'm getting the values
<form class="mt-4 mb-4 ml-4 ">
  <div class="row">
    <div class="col">
      <label for=""><h6>First name <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked" id="first_name">
    </div>
    <div class="col">
      <label for=""><h6>Last name <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>Street Address <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
    <div class="col">
      <label for=""><h6>Street Address 2</h6></label>
      <input type="text" class="form-control checked">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>Country <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
    <div class="col">
      <label for=""><h6>City <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>State/Province <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
    <div class="col">
      <label for=""><h6>Phone <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
  </div>
</form>

<!--These are the inputs which I'm passing the values-->

<form class="mt-4 mb-4 ml-4 ">
  <div class="row">
    <div class="col">
      <label for=""><h6>First name <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check" id="check_name">
    </div>
    <div class="col">
      <label for=""><h6>Last name <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>Street Address <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
    <div class="col">
      <label for=""><h6>Street Address 2</h6></label>
      <input type="text" class="form-control check">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>Country <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
    <div class="col">
      <label for=""><h6>City <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>State/Province <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
    <div class="col">
      <label for=""><h6>Phone <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
  </div>
</form>
Daniel Hernandez
  • 195
  • 6
  • 17

3 Answers3

2

try this:

$(".mt-4.mb-4.ml-4:eq(0) .row").each(function(i,r){
    $(".mt-4.mb-4.ml-4:eq(1) .row:eq("+$(r).index()+") input").val(function(I){return $(r).find(".col:eq("+$(this).parent().index()+")>input").val();});
});

this works with this html structure.

Hassan Sadeghi
  • 1,316
  • 2
  • 8
  • 14
0

How about if you do this:

$('.checked').keyup(function () {            
    if (this.id === 'first_name' && ...some other condition...) {
        $('#check_name').val(this.value);             
     }
});

Changed keydown to keyup because on keydown if you type fast it might happen to skip some data

Yoannes Geissler
  • 791
  • 1
  • 9
  • 18
0

Basically Yoannes's approach is a good idea. I kept the keyup()-bit! However, it gets a bit tedious with all of the name and attribute comparing business.

Basically, jQuery offers a builtin method index(). This method returns the relative position of a matched element within its parent container. This would have worked if all of your input elements were in a common parent <div>. As this is not the case we will have to dig a little deeper:

My approach creates two jquery selections of input elements. One for each of your <form>s: src and trg. I then attach the keyup-event to all input elements of the first form. The attached function gets the current value of the input and finds the relative position of the element in the array of matched DOM-elements of src. The function then sets the value of the idx-th element of the jquery-trg-collection to txt. And that is all: jquery - write less, do more!

And, yes, it can also be done with the .on('input' ...) binding, like this:

var trg=$('form.mt-4.mb-4.ml-4:eq(1) input');
var srca=$('form.mt-4.mb-4.ml-4:eq(0) input').on('input',function(){
 trg.eq($.inArray(this,srca)).val($(this).val());
}).get()


var src=$('form.mt-4.mb-4.ml-4:eq(0) input'), srca=src.get();
var trg=$('form.mt-4.mb-4.ml-4:eq(1) input');
src.keyup(function(){
 var idx=$.inArray(this,srca);
 var txt=$(this).val();
 trg.eq(idx).val(txt);
})
form {font-family:verdana;font-size:8pt}
div.col {display:inline-block}
h6 {font-size:6pt;margin:0px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="mt-4 mb-4 ml-4 ">
  <div class="row">
    <div class="col">
      <label for=""><h6>1First name <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked" id="first_name">
    </div>
    <div class="col">
      <label for=""><h6>Last name <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>Street Address <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
    <div class="col">
      <label for=""><h6>Street Address 2</h6></label>
      <input type="text" class="form-control checked">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>Country <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
    <div class="col">
      <label for=""><h6>City <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>State/Province <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
    <div class="col">
      <label for=""><h6>Phone <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
  </div>
</form>

<!--These are the inputs which I'm passing the values-->

<form class="mt-4 mb-4 ml-4 ">
  <div class="row">
    <div class="col">
      <label for=""><h6>2First name <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check" id="check_name">
    </div>
    <div class="col">
      <label for=""><h6>Last name <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>Street Address <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
    <div class="col">
      <label for=""><h6>Street Address 2</h6></label>
      <input type="text" class="form-control check">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>Country <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
    <div class="col">
      <label for=""><h6>City <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>State/Province <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
    <div class="col">
      <label for=""><h6>Phone <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
  </div>
</form>
Carsten Massmann
  • 26,510
  • 2
  • 22
  • 43