On Checkbox Changed Copy Values to textbox jquery - php

Question

On Checkbox Changed event I am copying hidden values to my textbox,
now when I try to add value using jquery its gives me [Object object].
HTML Code
My hidden variables values
<div class="reserve-form">
<span>Name: </span><span><?php echo $user_data[0]->first_name.' '.$user_data[0]->last_name; ?>
<input type="hidden" id="name_account" value="<?php echo $user_data[0]->first_name.' '.$user_data[0]->last_name; ?>" />
</span>
<span>Email Address: </span><span><?php echo $user_data[0]->email_id; ?>
<input type="hidden" id="email_account" value="<?php echo $user_data[0]->email_id; ?>" />
</span>
<span>Phone Number: </span><span><?php echo $user_data[0]->phone_no; ?>
<input type="hidden" id="phoneno_account" value="<?php echo $user_data[0]->phone_no; ?>">
</span>
<div class="passenger-checkbox">
<input type="checkbox" name="duplicate_info" id="duplicate_info" class="css-checkbox" />
<label for="duplicate_info" class="css-label">Is passenger info same as account holder</label>
</div>
</div>
**Where I need to append it**
<div id="passanger_info">
<input type="text" class="form-control" id="name[]" name="name[]" placeholder="Name">
<input type="text" class="form-control" id="email_address[]" name="email_address[]" placeholder="Email Address">
<input type="text" class="form-control" id="phone_number[]" name="phone_number[]" placeholder="Phone Number">
<button type="button" class="removebtn"><i class="fa fa-times"></i></button>
</div>
$("#duplicate_info").change(function() {
if(this.checked)
{
isChecked();
}
else
{
alert("Unchecked")
}
});
function isChecked()
{
//hidden variables values
var name_account = $('#name_account').val();
var email_account = $('#email_account').val();
var phoneno_account = $('#phoneno_account').val();
alert(name_account);
var name = $('#name').val(name_account);
alert(name);
var email_address = $('#email_address').val(email_account);
var phone_number = $('#phone_number').val(phoneno_account);
}
It's like when I copy name_account to name and try to alert the name it gives me Object Object instead of values. What I am missing?

Answer 1

You have to set the value, before you take from it.
setting value = $('#name').val(name_account)
taking the value = var name = $('#name').val();
The problem in your code is [] in your id
$("#duplicate_info").change(function() {
if (this.checked) {
isChecked();
} else {
alert("Unchecked")
}
});
function isChecked() {
//hidden variables values
var name_account = $('#name_account').val();
console.log("input val of #name_account is : " + name_account);
$('#name').val(name_account)
var name = $('#name').val();
console.log("input val of #name is : " + name);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reserve-form">
<span>Name: </span><span>Carsten
<input type="hidden" id="name_account" value="Carsten" />
</span>
<span>Email Address: </span><span><?php echo $user_data[0]->email_id; ?>
<input type="hidden" id="email_account" value="<?php echo $user_data[0]->email_id; ?>" />
</span>
<span>Phone Number: </span><span><?php echo $user_data[0]->phone_no; ?>
<input type="hidden" id="phoneno_account" value="<?php echo $user_data[0]->phone_no; ?>">
</span>
<div class="passenger-checkbox">
<input type="checkbox" name="duplicate_info" id="duplicate_info" class="css-checkbox" />
<label for="duplicate_info" class="css-label">Is passenger info same as account holder</label>
</div>
</div>
**Where I need to append it**
<div id="passanger_info">
<input type="text" class="form-control" id="name" name="name[]" placeholder="Name">
<input type="text" class="form-control" id="email_address[]" name="email_address[]" placeholder="Email Address">
<input type="text" class="form-control" id="phone_number[]" name="phone_number[]" placeholder="Phone Number">
<button type="button" class="removebtn"><i class="fa fa-times"></i></button>
</div>

Answer 2

Check below example:
Fill up the details and click on checkbox.
$("#duplicate_info").change(function() {
if(this.checked)
{
isChecked();
}
else
{
alert("Unchecked")
}
});
function isChecked()
{
//hidden variables values
var name_account = $('#name_account').val();
var email_account = $('#email_account').val();
var phoneno_account = $('#phoneno_account').val();
alert(name_account);
$('#name').val(name_account);
var name = $('#name').val();
alert(name);
var email_address = $('#email_address').val(email_account);
var phone_number = $('#phone_number').val(phoneno_account);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My hidden variables values
<div class="reserve-form">
<span>Name: </span><span>
<input type="hidden" id="name" value="" />
</span>
<span>Email Address: </span><span>
<input type="hidden" id="email_account" value="" />
</span>
<span>Phone Number: </span><span>
<input type="hidden" id="phoneno_account" value="">
</span>
<div class="passenger-checkbox">
<input type="checkbox" name="duplicate_info" id="duplicate_info" class="css-checkbox" />
<label for="duplicate_info" class="css-label">Is passenger info same as account holder</label>
</div>
</div>
**Where I need to append it**
<div id="passanger_info">
<input type="text" class="form-control" id="name_account" name="name_account[]" placeholder="Name">
<input type="text" class="form-control" id="email_address" name="email_address[]" placeholder="Email Address">
<input type="text" class="form-control" id="phone_number" name="phone_number[]" placeholder="Phone Number">
<button type="button" class="removebtn"><i class="fa fa-times"></i></button>
</div>