Develop Reference

How to get a form to build a FormData() object without using an id as a selector

I'm trying to get a form that is inside a "modal-body" div and create a FormData() object when the user clicks on a modal button. For special reasons I can't get this form by id or class, so I'm doing it like this:
$('.save-form').click(function() {
var myform = $(this).parent().parent().find('.modal-body').html();
var fd = new FormData(myform);
}
By using .html() or .contents() I get the error: "Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'".
It works fine if I use an id as a selector, but as I said I cannot get it by it's id. Apparently FormData() is not liking what I'm passing to it. So my question is: Do I need to get the form thru another way or do I need to make a conversion or something first? I will appreciate any help.
This is my html:
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">My Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="modal-body">
<form>
<input type="checkbox" name="item-1">
<label>Item 1</label>
<input type="checkbox" name="item-2">
<label>Item 2</label>
<input type="checkbox" name="item-3">
<label>Item 3</label>
<input type="checkbox" name="item-4">
<label>Item 4</label>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary save-form">Save</button>
</div>
</div>
</div>
</div>

You need to use plain JavaScript or de-reference the jQuery Object when referencing the <form> tag. FormData() Object does not recognize jQuery Objects. Any of the following should work:
De-reference jQuery Object
$('form')[0];
$('form').get(0);
Plain JavaScript
document.forms[0];
document.querySelector('form');
document.getElementsByTagName('form')[0];
All of the above will get the first <form> tag on the webpage without any attributes.
Demo
$('.save-form').click(function() {
const form = $('form')[0];
const fd = new FormData(form);
console.log(fd);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#xModal">
Modal
</button>
<div id="xModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">My Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="modal-body">
<form>
<input type="checkbox" name="item-1">
<label>Item 1</label>
<input type="checkbox" name="item-2">
<label>Item 2</label>
<input type="checkbox" name="item-3">
<label>Item 3</label>
<input type="checkbox" name="item-4">
<label>Item 4</label>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary save-form">Save</button>
</div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

How to uncheck all checkboxes when i close a modal?

I want to pop up a modal on clicking the checkbox. And wants to uncheck it when I close a modal automatically.
I tried both attr and prop methods. None of them worked.
//uncheck all when modal closes
$(document).on('click', '#closeInvoiceModal', function() {
$('.creditCheckbox').prop('checked', false);
});
This was expected to uncheck all the checkboxes having the same class '.creditCheckbox'. But none of them didn't close.
<td>
<input type="checkbox" id="invoiceDetail{{$loop->iteration}}"
name="invoiceDetail{{$loop->iteration}}"
class="filled-in chk-col-green invoiceCheckbox"
data-campaignId="{{$item['id']}}"/>
<label class="invoiceDetailLink" for="invoiceDetail{{$loop-
>iteration}}">Inv. Details</label>
</td>
<!--Modal html code-->
<div class="modal fade" id="cbreInvoiceDetailsModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Full screen view</h5>
<button type="button" class="close" data-
dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-md-12 col-xs-12 col-sm-7">
<div class="box_layout" id="show-data">
<div class="image_layout">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button id="closeInvoiceModal" type="button"
class="btn btn-sm btn-success waves-effect
pull-right" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Please use this code I hope it's work for you.
Thanks
$(document).ready(function(){
$("#myModal").on('hide.bs.modal', function(){
$('.creditCheckbox').prop('checked', false);
});
});

I have to make an example like your code, please review once, hope it will help you, it is working for me.
Thanks.
<div class="container">
<input type="checkbox" name="check" class="checkOption"> check 1
<input type="checkbox" name="check" class="checkOption"> check 2
<input type="checkbox" name="check" class="checkOption"> check 3
<input type="checkbox" name="check" class="checkOption"> check 4
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#cbreInvoiceDetailsModal">Open Modal</button>
<!--Modal html code-->
<div class="modal fade" id="cbreInvoiceDetailsModal" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Full screen view</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-md-12 col-xs-12 col-sm-7">
<div class="box_layout" id="show-data">
<div class="image_layout">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button id="closeInvoiceModal" type="button"
class="btn btn-sm btn-success waves-effect pull-right" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#cbreInvoiceDetailsModal").on('hide.bs.modal', function(){
$('.checkOption').prop('checked', false);
});
});
</script>

Submit button in modal is not functioning to open another modal

This is my HTML code for the first modal. The submit button is not functioning to open another modal.
<div class="modal fade" id="newModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">New record</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" class="form-control" name="name"
placeholder="Input name of client">
</div>
</div>
<div class="modal-footer">
<button type="submit" onclick="submitForm()" class="btn
btn-primary">Submit</button>
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This is the HTML code for the second modal when you click the submit button on the first one.
<div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<form action="php/insert_client.php" method="post">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
Are you sure you want to add this client?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" onclick="validateForm()">Save</button>
</div>
</form>
</div>
</div>
This is the javascript for the newModal and confirmationModal
function submitForm() {
document.getElementById("newModal").submit();
}
function validateForm(e) {
$("#confirmationModal").modal("show");
}

Based on the JS code you've shown, this function will need to be called in order for your second modal to be displayed:
function validateForm(e) {
$("#confirmationModal").modal("show");
}
Right now, it's not being called until the second modal's Save button is clicked.

How do I open a modal onclick?

I want to open a modal when my input type "Verwijderen" is pressed. But it doesn't show up? What am I doing wrong? Even W3schools examples don't work in Fiddle for example. I am missing something I guess but what?
<td colspan="2">
<input type="submit" style="width:140px;" value="Opslaan"/>
<input
type="submit"
style="width:140px;"
id="cancelForm"
class="ketchUp-default"
value="Annuleren"/>
<input
type="submit"
id="deleteEvent"
value="Verwijderen"
style="width:140px;"
class="ketchUp-default"
data-toggle="modal"
data-target="confirm-delete"/>
<div
class="modal fade"
id="confirm-delete"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to delete one track, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger btn-ok">Delete</button>
</div>
</div>
</div>
</div>

Are you using BootStrap 3? I think your mistake is that you are not using the "#" ID selector in your data-target on your input. Change your input code to this:
<input
type="submit"
id="deleteEvent"
value="Verwijderen"
style="width:140px;"
class="ketchUp-default"
data-toggle="modal"
data-target="#confirm-delete"/>
Here is a working plunk.

Your input is a submit, so your page is submitting the form, and the modal does not have time to be shown.
Try to convert your submit button to a simple button (not submit), and your modal will be shown.
<input
type="button"
id="deleteEvent"
value="Verwijderen"
style="width:140px;"
class="ketchUp-default"
data-toggle="modal"
data-target="confirm-delete"/>

Call another modal when radio checked

I have 2 modal window, written in bootstrap. When I click in first modal on radio, I want to close this modal and then open another.
My html for first form:
<div class="modal fade" id="overlay" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Can we help?</h4>
</div>
<div class="modal-body">
<label for="callback">Callback</label>
<input type="radio" id="callbackRadio">
<label for="contactUs">Contact Us</label>
<input type="radio" id="contactUsRadio">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My JS code:
if($('#contactUsRadio').is('checked')){
$('#overlay').modal('hide');
$('#contactUsModal').modal('show');
}
But it doesn't work.

need to trigger an event (assuming you aren't, as you haven't pasted that in with your code)
$('#contactUsRadio').on('click', function() {
if($('#contactUsRadio').is(':checked')) {
$('#overlay').modal('hide');
$('#contactUsModal').modal('show');
}
});