We Keep Coding

How to dynamically add form elements in jquery?

I'm trying to created a dynamic form in rails with a little bit of javascript I have a problem I only get one row in the output when using pry apparently it's because I have the same params for every field input since I use jQuery .clone, maybe someone has struggled with something similar can share some knowledge, how to dynamically add index to params in this form with javascript ?
#extends('Admin.master')
#section('content')
<div class="p-5">
<h3><i class="fas fa-cog ml-2"></i>Setting</h3><hr>
<form action="{{ route('settings.update', $setting->id) }}" method="POST" >
#csrf
#method('PUT')
<div id="showDynamic">
</div>
</form>
</div>
#endsection
#section('script')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
let count = 1;
$('.add').click(function(){
count++;
dynamic(count);
});
dynamic(count);
function dynamic(number) {
var html = '' +
'<div class="row">\n' +
'<div class="col-md-4">\n' +
'<input class="form-control" placeholder="Name">\n' +
'</div>\n' +
'<div class="col-md-4">\n' +
'<input class="form-control" placeholder="Link">\n' +
'</div>\n' +
'<div class="col-md-2">\n' +
'<a class="btn btn-primary" id="add">Add</a>\n' +
'<a class="btn btn-danger" id="delete">Delete</a>\n' +
'</div>\n' +
'</div>';
$('#showDynamic').append(html);
}
});
</script>
#endsection

1st id must be unique .. So change id="add" and id="delete" to classes class="btn btn-primary add"
2nd event-binding-on-dynamically-created-elements After changing the id to class use $(document).on('click' , '.add' , function(){ //code here })
Your code should be
<script>
$(document).ready(function(){
let count = 1;
$(document).on('click' , '.add' , function(){
count++;
dynamic(count);
});
dynamic(count);
function dynamic(number) {
var html = '' +
'<div class="row">\n' +
'<div class="col-md-4">\n' +
'<input class="form-control" placeholder="Name">\n' +
'</div>\n' +
'<div class="col-md-4">\n' +
'<input class="form-control" placeholder="Link">\n' +
'</div>\n' +
'<div class="col-md-2">\n' +
'<a class="btn btn-primary add">Add</a>\n' +
'<a class="btn btn-danger delete">Delete</a>\n' +
'</div>\n' +
'</div>';
$('#showDynamic').append(html);
}
});
</script>
$(document).ready(function(){
let count = 1;
$(document).on('click' , '.add' , function(){
count++;
dynamic(count);
});
dynamic(count);
function dynamic(number) {
var html = '' +
'<div class="row">\n' +
'<div class="col-md-4">\n' +
'<input class="form-control" placeholder="Name">\n' +
'</div>\n' +
'<div class="col-md-4">\n' +
'<input class="form-control" placeholder="Link">\n' +
'</div>\n' +
'<div class="col-md-2">\n' +
'<a class="btn btn-primary add">Add</a>\n' +
'<a class="btn btn-danger delete">Delete</a>\n' +
'</div>\n' +
'</div>';
$('#showDynamic').append(html);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="showDynamic"></div>

Print the contents of a pop up modal window

I would like to print the contents of a pop up modal window and nothing else on the main page.
I've tried linking a button on the popup window to run the command window.print(); but this just prints a blank page.
I'm assuming that this is because I have not actually called the main content to be printed, but they are in javascript and I simply don't know how to do this.
How can I only print the contents of the pop up window?
The print button is here:
<div id="scheduleModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title_logindetail"></h4>
</div>
<div class="modal-body_logindetail">
</div>
<div id="printarea2">
<div class="modal-footer">
<a class="btn btn-primary" href="javascript:void(0);" onclick="printArea2('printableArea')" >Print</a>
<button type="button" class="btn btn-default" data-dismiss="modal"><?php echo $this->lang->line('cancel'); ?></button>
</div>
</div>
</div>
</div>
</div>
This is what I want to print:
$(document).on('click', '.schedule_modal', function () {
$('.modal-title_logindetail').html("");
$('.modal-title_logindetail').html("<?php echo $this->lang->line('login_details'); ?>");
var base_url = '<?php echo base_url() ?>';
var student_id = '<?php echo $student["id"] ?>';
var student_first_name = '<?php echo $student["firstname"] ?>';
var student_last_name = '<?php echo $student["lastname"] ?>';
$.ajax({
type: "post",
url: base_url + "student/getlogindetail",
data: {'student_id': student_id},
dataType: "json",
success: function (response) {
var data = "";
data += '<div class="col-md-12">';
data += '<div class="table-responsive">';
data += '<p class="lead text text-center" style="font-size:60px;">' + student_first_name + ' ' + student_last_name + '</p>';
data += '<table class="table table-hover">';
data += '<thead>';
data += '<tr>';
data += '<th class="text text-center" style="font-size:40px;">' + "<?php echo $this->lang->line('user_type'); ?>" + '</th>';
data += '<th class="text text-center" style="font-size:40px;">' + "<?php echo $this->lang->line('username'); ?>" + '</th>';
data += '<th class="text text-center" style="font-size:40px;">' + "<?php echo $this->lang->line('password'); ?>" + '</th>';
data += '</tr>';
data += '</thead>';
data += '<tbody>';
$.each(response, function (i, obj) {
data += '<tr>';
data += '<td class="text text-center" style="font-size:30px;"><b>' + firstToUpperCase(obj.role) + '</b></td>';
data += '<input type=hidden name=userid id=userid value=' + obj.id + '>';
data += '<td class="text text-center" style="font-size:30px;">' + obj.username + '</td> ';
data += '<td class="text text-center" style="font-size:30px;">' + obj.password + '</td> ';
data += '</tr>';
});
data += '</tbody>';
data += '</table>';
data += '<b class="lead text text-danger" style="font-size:20px;"> ' + "<?php echo $this->lang->line('login_url'); ?>" + ': ' + base_url + 'site/userlogin</b>';
data += '</div> ';
data += '</div> ';
$('.modal-body_logindetail').html(data);
$("#scheduleModal").modal('show');
}
});
});
function firstToUpperCase(str) {
return str.substr(0, 1).toUpperCase() + str.substr(1);
}
</script>
<script>
function printArea2(areaID) {
var printContent = document.getElementById("printarea2");
var WinPrint = window.open('', '', 'width=1100,height=650');
WinPrint.document.write(printContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}

assuming you want to print div with class $(".modal-title_logindetail")
change your print button to
<a class="btn btn-primary" href="javascript:void(0);" onclick="printArea2();" >Print</a>
try this
function printArea2() {
var contents = document.getElementsByClassName("modal-title_logindetail").innerHTML;
var frame1 = document.createElement('iframe');
frame1.name = "frame1";
frame1.style.position = "absolute";
frame1.style.top = "-1000000px";
document.body.appendChild(frame1);
var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
frameDoc.document.open();
frameDoc.document.write('<html><head><title>DIV Contents</title>');
frameDoc.document.write('</head><body>');
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
document.body.removeChild(frame1);
}, 500);
return false;
}

Sum values Javascript

Here http://webmark.pt/sharepics/orders.png is the sales order layout (./sharepics/add.zip the full code) that I need to customize.
Problem:
Dynamically sum the cells between size 39 and 50, and put the value in the Pairs (quantity).
Already managed to add the lines, but the result is added to the lines immediately below.
The code that does this operation:
var newTr = $('<tr id="row_' + count + '"></tr>');
newTr.html('<td><input name="product' + count + '" type="hidden" value="' + item_code + '"><input class="span5 tran" name="item' + count + '" type="text" value="' + item_code + '"></td>
.......
<td><input class="input-block-level text-center" name="sort' + count + '" type="text" value="" id="sort-' + count + '" onClick="this.select();"></td>
<td><input class="input-block-level text-center" name="size39' + count + '" type="text" value="" id="size39-' + count + '" onClick="this.select();"></td>
......
<td><input class="input-block-level text-center" name="size50' + count + '" type="text" value="" id="size50-' + count + '" onClick="this.select();"></td>
<td><input class="input-block-level text-center" name="quantity' + count + '" type="text" value="1" id="quantity-' + count + '" onClick="this.select();"></td>
<td><input class="span2 tran" style="text-align:right;" name="unit_price' + count + '" type="text" id="price-' + count + '" value="' + item_price + '"></td>
<?php echo '<td><input class="span2 tran2" name="cart\'+ count +\'" type="text" value="" required="required" data-error="' . $this->lang->line("cart") . ' ' . $this->lang->line("is_required") . '"></td>';
if (DISCOUNT_OPTION == 2) {
echo '<td><select class="span2 select tran" data-placeholder="Select..." name="discount\' + count + \'" id="discount-\' + count + \'">';
foreach ($discounts as $discount) {
echo "<option value=" . $discount->id;
if ($discount->id == DEFAULT_DISCOUNT) {
echo ' selected="selected"';
}
echo ">" . $discount->name . "</option>";
}
echo '</select></td>';
}
?>
<td><input class="input-block-level text-center" name="subtotalpares' + count + '" type="text" value="" id="subtotalpares" disabled onClick="this.select();"></td>
<td><i class="icon-trash tip del" id="' + count + '" title="Remove this Item" style="cursor:pointer;" data-placement="right"></i></td>');
newTr.prependTo("#dyTable");
count++;
an++;
total += parseFloat(item_price);
$("input[id^=size]").keyup(function () {
var sum = 0;
$("input[id^=size]").each(function () {
sum += (parseInt(this.value) ? parseInt(this.value) : 1);
});
$("input[id^=quantity]").val(sum);
});
I look forward to some help!

Can't get textarea value in PHP

I have a submit form for writing a caption in an image. I'm using plupload for this. When file is uploaded it will append a div and inside it is a textarea where you can write your caption of that image. But I always getting an error of Undefined Index when submitting a form.
This is my code when file was uploaded:
uploader.bind('FileUploaded', function(up, file) {
var filename = file.id + '.' + file.name.split(".").pop()
var uploaded_files = $('#uploaded_files').attr('value');
var appended_files = uploaded_files + file.id + ',';
$('#uploaded_files').attr('value', appended_files);
var prev = '<div class="col-sm-12" style="margin-bottom:5px;" id="upload-' + file.id + '">' +
'<div class="col-sm-3">' +
'<img class="img-thumbnail" width="100%" height="auto" src="./assets/images/gallery/resorts_gallery/' + filename + '">' +
'</div>' +
'<div class="col-sm-6">' +
'<textarea name="' + file.id + '_Caption" class="form-control" style="font-size:12px;height:70px" placeholder="Put a caption"></textarea>' +
'</div>' +
'<div class="col-sm-3"><span class="btn btn-danger btn-xs"><span class="fa fa-times"></span></span></div>' +
'</div>';
$("#prevCap").append(prev);
});
In my html:
<form role="form" method="POST" id="submit-review" enctype="multipart/form-data">
<div class="form-group">
<label for="uploadphoto">Share your Experiences by uploading Photos</label> <span class="small-text">(optional)</span><br/>
<div class="well" id="caption-thumb"> <!-- preview and caption -->
<div id="prevCap" class="col-sm-12" style="margin-bottom:10px"></div>
<input type="hidden" name="uploaded_files" id="uploaded_files" value="" />
<hr>
<button class="btn btn-default navbar-btn" type="button" data-toggle="modal" data-target="#upload-modal">Add Photos</button>
<hr id="hr-line" style="display:none">
</div>
</div>
<input type="submit" class="btn btn-embossed btn-default" id="btnsubmit" name="submit" disabled value="SUBMIT"/>
</form>
in my php i do something like this:
$last_id = insert_getID("reviews", $fields, $val);
$uploaded_files = $_POST['uploaded_files'];
$uploaded_files = explode(',', $uploaded_files);
$uploaded_files = array_filter($uploaded_files);
foreach ($uploaded_files as $file) {
$wherefields = array('img_name', 'users_id');
$upload_value = $file;
$wherevalues = array($upload_value, $_SESSION['uid']);
$where_file = where($wherefields, $wherevalues, "", "");
$caption = $file . "_Caption";
$file_caption = $_POST['\'' . $caption . '\''];
$file_field = array('review_id', 'caption');
$file_value = array($last_id, $file_caption);
update('gallery', $file_field, $file_value, $where_file);
echo "<pre>" + $file_caption + "</pre>";
}
WHen the files where successfully uploaded, textarea will append inside the div #prevCap and that div was also inside the form. I'm getting an error because the form can't get the value of textarea. How can i fix this problem, how can i get textarea value that was appended?

jquery .submit() method doesn't reaload the page

I have a form that i want to submit it throughout jquery .. but submit method doesn't send the request or reloading the page. any help?
in the html code there is no <form></form> tags , just text box and <button></button>
$('#search_btn').click(function() {
e.preventDefault();
if ($('#search_txtbx').val().length > 0) {
$('<form action="<?= base_url('search'); ?>" method="POST">' +
'<input value="ls_subject" name="table" type="hidden">' +
'<input value="<?= $type; ?>" name="type" type="hidden">' +
'<input value="' + $('#search_txtbx').val() + '" name="search_string" type="hidden">' +
'</form>').submit();
}
});

You have to append the form to the DOM, then submit the form :
$('#search_btn').click(function() {
if($('#search_txtbx').val().length > 0) {
$("body").append('<form style="display:none;" action="<?= base_url('search'); ?>" method="POST" id="bghdfrm">'+
'<input value="ls_subject" name="table" type="hidden">' +
'<input value="<?= $type; ?>" name="type" type="hidden">' +
'<input value="'+$('#search_txtbx').val()+'" name="search_string" type="hidden">' +
'</form>');
$("#bghdfrm").submit();
}
return false;
});

Try following...
Demo
$('#search_btn').click(function (e) {
e.preventDefault();
if ($('#search_txtbx').val().length > 0) {
$("body").append('<form style="display:none;" action="<?= base_url(search); ?>" method="POST" id="bghdfrm">' +
'<input value="ls_subject" name="table" type="hidden">' +
'<input value="<?= $type; ?>" name="type" type="hidden">' +
'<input value="' + $('#search_txtbx').val() + '" name="search_string" type="hidden">' +
'</form>');
$("#bghdfrm").submit();
}
});