Preview form data from a modal in another modal - javascript

I want to make a form preview from form1 into another modal via jquery. I built the form in modal1 and trying to pass its data into modal2. But it's not working in the next modal.
Cannot pass the data from modal1 - formData is not defined
I need the modal2 to get data from submitted
HTML
<!-- Modal -->
<div class="modal fade" id="xModal" tabindex="-1" role="dialog" aria-labelledby="xModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="submit" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="xModalLabel"><em class="fa fa-spinner fa-spin"></em> form1</h4>
</div>
<div class="modal-body">
<form id="form1">
<input type="text" class="form-control" id="fname" value="hello" />
<input type="text" class="form-control" id="lname" value="kitty" />
<button type="submit" data-dismiss="modal" data-target="#prvwModal" data-toggle="modal">
preview
</button>
</form>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<!-- preview Modal -->
<div class="modal fade" id="prvwModal" tabindex="-1" role="dialog" aria-labelledby="prvwModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<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="prvwModalLabel"><em class="fa fa-spinner fa-spin"></em>prvw loading...</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
JQUERY
$('#xModal').modal('show');
$('#xModal').on('shown.bs.modal', function() {
$('#form1').on('submit', function(e) {
e.preventDefault();
console.log('xModal sumitted');
var formData = $(this).serialize();
$('#prvwModal').find('.modal-body').text(formData);
$('#prvwModal').find('.modal-title').text('#form1 Preview');
});
console.log('xModal loaded');
});
$('#prvwModal').on('shown.bs.modal', function() {
console.log('prvwModal loaded'+formData);
})
Jsfiddle : https://jsfiddle.net/yfpruygs/7/

Your inputs need a name field in order to get form data:
<input type="text" class="form-control" id="fname" name="fname" value="hello" />
<input type="text" class="form-control" id="lname" name="lname" value="kitty" />
You will also need to change the button type to "button" if you don't plan for the preview button to actually submit the form.
<button type="button" data-dismiss="modal" data-target="#prvwModal" data-toggle="modal">
Then you can use a click event...
$('#form1').on('click', function(e) {
console.log('xModal sumitted');
var formData = $(this).serialize();
$('#prvwModal').find('.modal-body').text(formData);
$('#prvwModal').find('.modal-title').text('#form1 Preview');
});
https://jsfiddle.net/yfpruygs/9/

Related

Return a message after submmited form

I have this form in html:
<form action='#Url.Action("ExportExcel", "Banks")' method="post" target="_blank" id="myForm">
#Html.AntiForgeryToken()
<input type="hidden" name="typeDetails" id="typeDetails" value="typeDetails.value" />
<input type="hidden" name="filteredBanksIds" id="filteredBanksIds" value="" />
<input id="btnExportExcel" type="hidden" value="submit" data-toggle="modal" data-target="#ExportExcelModal" />
</form>
and the modal is:
<div class="modal fade" id="ExportExcelModal" tabindex="-1" role="dialog" aria-labelledby="ExportExcelModalTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ExportExcelModalTitle">Banks</h5>
<button type="button" class="close" id="ExportExcelModalClose" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Would you like to export this banks with details?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-target="#myModal" value="1" onclick="exportExcel(this.value)">yes</button>
<button type="button" class="btn btn-primary" data-target="#myModal" value="0" onclick="exportExcel(this.value)">no</button>
</div>
</div>
</div>
</div>
and I have this in JS:
function exportExcel(typeDetails) {
$('#ExportExcelModalClose').click();
$('#filteredBanksIds').val(filteredBanks.map(function (bank) { return bank.Id }));
$('#typeDetails').val(typeDetails);
$("#myForm").submit;
return true;
}
I would like that in addition to what happens on the server side (Excel export and download),
also a message will be returned to the user after the Excel export ends, with custom message from the server.
How can I add this?

Call show.bs.modal event before parent event

I have a bootstrap button (I used bootstrap 4) that open a modal and transfer the data that in the button to the form in the modal by the function:
$('#exampleModal').on('show.bs.modal', function (event).
the button is in a div (parent).
when I click on the button the parent event called before the child.
I don't want the parent event to be run.
I need only the popup modal to open.
when I try to open the button by onclick its call first but the data is not transfer.
this is my code example: codepen
this is the html
<div class="row">
<div class="col-12 parent">
I'm the parent!
<div class="child">
I'm the child
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo" data-message="#test message" >Open modal </button>
</div>
</div>
</div>
<!-- Bootstrap Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="form-control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
this is the script
<script>
$(".parent").click(function(event){
alert("Parent event");
})
/*
if I add this function I cant transfer the data that in the button
$(".child").click(function(event){
alert("Child event");
event.stopPropagation();
$('#exampleModal').modal('show');
})*/
$('#exampleModal').on('show.bs.modal', function (event) {
alert("btn event");
var button = $(event.relatedTarget) // Button triggered the modal
var recipient = button.data('whatever')
var message = button.data('message')
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
modal.find('.modal-body textarea').val(message)
})
</script>
Quite simple in the parent click , check if target is different to the button with data-target='#exampleModal' or not , all that using the .is() jquery function like below :
//get reference to the button
var $button = $("button[data-target='#exampleModal']");
$(".parent").click(function(event){
if (!$(event.target).is($button)) { // be sur button was'nt clicked
alert("Parent event");
}
})
Updated Pen
See below working snippet :
var $button = $("button[data-target='#exampleModal']");
$(".parent").click(function(event){
if (!$(event.target).is($button)) {
alert("Parent event");
}
})
$('#exampleModal').on('show.bs.modal', function (event) {
alert("btn event");
var button = $(event.relatedTarget) // Button triggered the modal
var recipient = button.data('whatever')
var message = button.data('message')
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
modal.find('.modal-body textarea').val(message)
})
body {
background-color: #a3d5d3;
}
.col-12{ background:red; height:100px;}
.child{background:white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-12 parent">
I'm the parent!
<div class="child">
I'm the child
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo" data-message="#test message" >Open modal </button>
</div>
</div>
</div>
<!-- Bootstrap Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="form-control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>

get image after press submit button in angularjs

I have following bootstrap html
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<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="myModalLabel">Modal title</h4>
</div>
<form ng-submit="setFile()" enctype="multipart/form-data">
<div class="modal-body">
<input type="file" accept="image/*">
</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 changes</button>
</div>
</form>
</div>
</div>
</div>
And following function in controller
$scope.setFile = function () {
console.log($scope.image); // this console logs undefined
}
The above code somehow does not get image from input type file. How can I get that image and the I want to preview it when user clicks submit button?
UPDATE
I want to get file on form submit not on input change.

One input triggers Chrome validation, but another isn't

I have three inputs across two pages, all of which I want Chrome to validate (i.e. they won't allow the form to be submitted if it doesn't contain a valid email address).
The input on this page (input A) is validating fine, so I'd like to do the same with the inputs on this page: the one you see when you click Options -> Add/remove feeds or Options -> Edit account (input B) and the one you see when you click 'Get notified' (input C).
This is the code for input A, which is validating properly:
<form role="form" class="form-inline" method="POST">
<p>Get notified when Shopaholic launches</p>
<input type="email" name="email" class="form-control input-lg" id="inputEmail" placeholder="Enter email">
<button type="submit" class="btn btn-primary btn-lg" data-dismiss="modal">Notify me</button>
</form>
This is the code for inputs B and C, which aren't validating:
<!-- Modal containing input B -->
<div class="modal fade" id="getNotifiedModal1" tabindex="-1" role="dialog" aria-labelledby="getNotifiedLabel1" 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="getNotifiedModal1Label">Sorry, this feature is unavailable in the demo version.</h4>
</div>
<div class="modal-body">
<p id="p">But why not get notified when the full version of Shopaholic launches?</p>
<form role="form" class="form-inline" method="POST">
<input type="email" name="email" class="form-control" id="inputEmail" placeholder="Enter email">
<button type="submit" class="btn btn-primary" data-dismiss="modal">Notify me</button>
</form>
</div>
</div>
</div>
</div>
<!-- Modal containing input C -->
<div class="modal fade" id="getNotifiedModal2" tabindex="-1" role="dialog" aria-labelledby="getNotifiedLabel2" 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="getNotifiedModal2">Get notified when Shopaholic launches!</h4>
</div>
<div class="modal-body">
<form role="form" class="form-inline" method="POST">
<input type="email" name="email" class="form-control" id="inputEmail" placeholder="Enter email">
<button type="submit" class="btn btn-primary" data-dismiss="modal">Notify me</button>
</form>
</div>
</div>
</div>
</div>
UPDATE
I have just realised that it is Chrome doing this, not Bootstrap.

Use Handlebar template with bootstrap modal

I have a bootstrap modal with handlebar script-
<script id="data-template" type="x-handlebars-template">
<div class="modal fade" id="myModal" 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">Add Data</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="form" enctype="multipart/form-data" action="upload.php" method="POST">
<fieldset>
<div class="control-group">
<label class="control-label" for="input01">Message</label>
<div class="controls">
<textarea class="input-xlarge" id="input01" name="text" value="{{value}}"></textarea>
</div>
</div>
</fieldset>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" name="submit" value="submit">
Save
</button>
<button name="cancel" value="cancel" class="btn btn-default" data-dismiss="modal">
Cancel
</button>
</div>
</form>
</div>
</div>
</div>
</script>
now on a button click I am opening the modal as well as onClick method is calling getDataWithId() method to fill data in the modal-
<b>+</b> Add
and this my getDataWithId() method.
function getDataWithId(id){
var newData;
var theTemplateScript = $("#data-template").html();
var theTemplate = Handlebars.compile (theTemplateScript);
$.get("http://localhost:8092/data_service.php?method=news&id="+id,
function(data, textStatus, jqXHR) {
newData= $.parseJSON(JSON.stringify(data.data.posts));
$(".modal").append (theTemplate(newData));
}).fail(function(jqXHR, textStatus, errorThrown) {
});
}
Data is not showing on the input field though modal is opening perfectly.

Categories