Develop Reference

Change element when submit modal using Jquery

I'm trying change text and value of element when I submit modal which opened by clicked a tag event, but I still dont know how to do it. Picture below describe my idea.
I tried delete and replace html but it doesn't work, I am still stuck.
Thank you so much.
This is my code:
<div class="report-filter-selector">
<span class="badge rounded-pill bg-info">
<a
class="openEditModalBtn"
data-toggle="modal"
data-field="form_name"
data-value="request_all"
href="#editFilterSelectorModal"
>form name: request_all</a>
<button
class="selector-control-btn" id="selector-control-btn"
><i class="fas fa-times"></i>
</button>
</span>
<input type="hidden" name="form_name" value="request_all">
</div>
<!-- edit filter selector modal -->
<div class="modal fade" id="editFilterSelectorModal" data-backdrop="static"
tabindex="-1" aria-labelledby="editFilterSelectorModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit condition </h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="add_body">
<div class="message-content" name="error" id="add_err"></div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Condition:</label>
<select name="edit_field_selector" id="edit_field_selector"
onchange="loadValueByCondition();" disabled>
<option value="form_name">form_name</option>
<option value="prefecture">prefecture</option>
<option value="time">Time</option>
</select>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Value:</label>
<div id="edit_value_by_selector" class="edit_value_by_selector"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
id="edit-filter-selector-submit"
name="edit-filter-selector-submit">保存
</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal"
id="close-new-form">閉じる
</button>
</div>
</div>
</div>
</div>
As my fault, I forgot upload Javascript code, that is my code to create element and try to change after modal edit submit.
//this code create <a> element like number 1 in picture
$('#add-filter-selector-submit').click(function(e){
let condition = $('#add_field_selector').val();
let val = "example1";
let html = '<td><div class="report-filter-selector">';
html += '<span class="badge rounded-pill bg-info"><a class="openEditModalBtn" data-toggle="modal" data-field="'+condition+'" data-value="'+val+'" href="#editFilterSelectorModal">'+condition+':'+val+'</a> <button class="delete-selector-control-btn" id="delete-selector-control-btn"><i class="fas fa-times"></i></button></span>';
html += '<input type="hidden" name="'+condition+'" value="'+val+'">';
html += '</div></td>';
$("#filter_conditions_table tr:first").append(html);
});
//this code try to change element when submit edit modal:
$('#edit-filter-selector-submit').click(function(e){
// I dont know how to do next
});

I've had to assume that your second select is created using similar naming conventions to your first one in your example HTML. You can use the code below to
Select a button (replace #edit-filter-selector-submit") and run a function when it is clicked
Change the value of a select using .val() - you need to pass the value you want to switch to
// Add event listener to the button
$("#edit-filter-selector-submit").click(function() {
// Change the value of the select item $("#edit_value_selector").val("2");
});
// Add event listener to the button
$("#edit-filter-selector-submit").click(function() {
// Change the value of the select item
$("#edit_value_selector").val("2");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="report-filter-selector">
<span class="badge rounded-pill bg-info">
<a
class="openEditModalBtn"
data-toggle="modal"
data-field="form_name"
data-value="request_all"
href="#editFilterSelectorModal"
>form name: request_all</a>
<button
class="selector-control-btn" id="selector-control-btn"
><i class="fas fa-times"></i>
</button>
</span>
<input type="hidden" name="form_name" value="request_all">
</div>
<!-- edit filter selector modal -->
<div class="modal fade" id="editFilterSelectorModal" data-backdrop="static" tabindex="-1" aria-labelledby="editFilterSelectorModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit condition </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="add_body">
<div class="message-content" name="error" id="add_err"></div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Condition:</label>
<select name="edit_field_selector" id="edit_field_selector" onchange="loadValueByCondition();" disabled>
<option value="form_name">form_name</option>
<option value="prefecture">prefecture</option>
<option value="time">Time</option>
</select>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Value:</label>
<div id="edit_value_by_selector" class="edit_value_by_selector">
<select name="edit_value_selector" id="edit_value_selector" onchange="loadValueByCondition();" disabled>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="edit-filter-selector-submit" name="edit-filter-selector-submit">Change
</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="close-new-form">Close
</button>
</div>
</div>
</div>
</div>

Hi you can use this code with javascript.
Add function to button change:
function change() {
$("#edit_field_selector2").val('1').change()
$("#edit_field_selector").val('prefecture').change()
}

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>

How to edit the data property of an element in Jquery

I have a list view in which I have have some data property.
Example as follows
<li class="dd-item alert mar action" data-id=3 data-name="pushNotify" data-api="/api/v1/mailZoh" data-url="http://google.com" data-json="[{'data':'sss'}]">
<div class="dd-handle">Push Notofication <span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span> <span class="edit cust-close" data-toggle="modal" data-target="#editAction"><i class="fa fa-pencil"></i></span></div>
</li>
Note I don't have unique ID for the <li> tag , Only have id of its Parent which is an <ol></ol>.
Onclick of the pencil icon I am opening a Modal and letting user edit that
$('body').on('click', '.edit', function() {
var li = $(this).parent().parent();
$('#action_url').val(li.data('url'));
$('#action_api').val(li.data('api'));
$('#action_json').val(li.data('json'));
$('.action_name').html(li.data('name'));
$('#action_id').val(li.data('id'));
})
Modal
<div class="modal fade" id="editAction" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form action="{{ route('wfengine/addWorkFlow') }}" method="POST">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Edit <span class="action_name" style="text-transform: capitalize"></span></h4>
</div>
<div class="modal-body">
<input type="hidden" name="action_id" value="" />
<div class="form-group">
<label for="message-text" class="control-label">Api</label>
<input type="text" class="form-control" id="action_api" value='' />
</div>
<div class="form-group">
<label for="message-text" class="control-label">Url</label>
<input type="text" class="form-control" id="action_url" value='' />
</div>
<div class="form-group">
<label for="message-text" class="control-label">Json</label>
<input type="text" class="form-control" id="action_json" value='' />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save Action</button>
</div>
</form>
</div>
</div>
</div>
In the modal there is a save button. How can I save that data back inside the List view?
Thanks
Now I would like to know how I can save that data back in the list.

You can save the data using like this li.data('url', $actionUrl.val())
As some suggesting it's not a good idea exposing the cached li in global scope.
Else you can do like var li = $(this).parent().parent();
$('[data-id="'+$actionid+'"]').data('url', $actionUrl.val()).data('api', $actionApi.val()).data('json', $actionJson.val());
But my main answer remain same
var li;
var $actionUrl = $('#action_url');
var $actionApi = $('#action_api');
var $actionJson = $('#action_json');
var $actionName = $('.action_name');
var $actionid = $('#action_id');
$('body').on('click', '.edit', function() {
li = $(this).parent().parent();
$actionUrl.val(li.data('url'));
$actionApi.val(li.data('api'));
$actionJson.val(li.data('json'));
$actionName.html(li.data('name'));
$actionid.val(li.data('id'));
})
$('button[type="submit"]').on('click', function() {
li.data('url', $actionUrl.val()).data('api', $actionApi.val()).data('json', $actionJson.val());
})
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul>
<li class="dd-item alert mar action" data-id=3 data-name="pushNotify" data-api="/api/v1/mailZoh" data-url="http://google.com" data-json="[{'data':'sss'}]">
<div class="dd-handle">Push Notofication <span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span> <span class="edit cust-close" data-toggle="modal" data-target="#editAction"><i class="fa fa-pencil"></i></span>
</div>
</li>
</ul>
<div class="modal fade" id="editAction" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="display: none">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form action="{{ route('wfengine/addWorkFlow') }}" method="POST">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="exampleModalLabel">Edit <span class="action_name" style="text-transform: capitalize"></span></h4>
</div>
<div class="modal-body">
<input type="hidden" name="action_id" value="" />
<div class="form-group">
<label for="message-text" class="control-label">Api</label>
<input type="text" class="form-control" id="action_api" value='' />
</div>
<div class="form-group">
<label for="message-text" class="control-label">Url</label>
<input type="text" class="form-control" id="action_url" value='' />
</div>
<div class="form-group">
<label for="message-text" class="control-label">Json</label>
<input type="text" class="form-control" id="action_json" value='' />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" data-toggle="modal" data-target="#editAction" class="btn btn-primary">Save Action</button>
</div>
</form>
</div>
</div>
</div>

How to display different Bootstrap Modal on toggling

I am working on Bootstrap Modal. I have two modals. The First Modal toggles/open the second modal dialog, when the user clicks on "Forgot Password" link. The second modal is the same as the first one except body.
What I want to do, on toggling from first modal to second one, the second modal will appear with different header and footer. Is it possible? How can I have this feature?
My code:
<div class="container">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px; background-color: whitesmoke">
<button type="button" class="close" data-dismiss="modal">
<span title="close" class="glyphicon glyphicon-remove"></span>
</button>
<h2><span class="glyphicon glyphicon"></span> Login to our site</h2>
<p>Enter username and password to log on:</p>
</div>
<div class="modal-body" style="padding:40px 50px;">
<div id="modalTab">
<div class="tab-content">
<div class="tab-pane active" id="login">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-pencil"></span> Password</label>
<!--<div class="inner-addon right-addon">
</div>-->
<input type="password" class="form-control" id="password" placeholder="Enter password">
<i style="cursor: pointer" id="seePass" title="Click here to see password" class="glyphicon glyphicon-eye-open"></i>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
</form>
</div>
<div class="tab-pane fade" id="forgotpassword">
<form method="post" action='' name="forgot_password">
<p>Send us your email and we'll reset it for you!</p>
<input type="text" name="eid" id="email" placeholder="Email">
<p>
<button type="submit" class="btn btn-primary">Submit</button>
Wait, I remember it now!
</p>
</form>
</div>
</div>
</div>
</div>
<!--End Body-->
<div class="modal-footer" style="background-color: whitesmoke">
<!--<button type="submit" class="btn btn-danger btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>-->
<p class="text-center">Not a member? Sign Up</p>
<p class="text-center">Forgot Password?</p>
</div>
</div>
</div>
</div>
</div>

Here you go, I hope this code helps you:
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script type="text/javascript">
$(function () {
var showMessage = function (heading, message) {
$(".modal-body").empty();
$(".modal-title").empty();
$(".modal-title").html(heading);
$(".modal-body").html(message);
$('#messageBox').modal('show');
};
$("#popup1").click(function () {
showMessage("Heading 1", "Modal popup message 1");
});
$("#popup2").click(function () {
showMessage("Heading 2", "Modal popup message 2");
});
});
</script>
<input id="popup1" type="button" value="Show Popup" />
<input id="popup2" type="button" value="Show Another Popup" />
<div class="modal fade" id="messageBox" 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"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Output Popup 1:
Output Popup 2:
Just use that as an example and make the necessary changes to your code to make it work