I have form inside modal and want to create a user. when I click on submit nothing happens.
How can I submit the modal form and save the content of the modal in other page in rails application with Ajax?
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#getbootstrap">Open modal for #getbootstrap</button>
<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="text" class="col-form-label">firstname:</label>
<input class="form-control" id="text2"></input>
</div>
<label for="text" class="col-form-label">lastname:</label>
<input class="form-control" id="text2"></input>
</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">submit</button>
</div>
</div>
By clicking submit button the text field value will be passed to the controller via Ajax method
$(document).ready(function(){
$("#submit").click(function(){
alert($("#name").val());
});
$.ajax({
type: 'POST',
url: 'path/to/controller',
data: {'value' : $("#name").val() }
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<input type="text" name="name" id="name"></input>
<input type="submit" id="submit"></input>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Related
i have created the bootstrap model and i am opening the the model on button click, Now the problem is i want to pass the object of data to that model so once the user enter the comment in the model i will get the comment as well as my object back for identification, can some one help me out with the solution
MY HTML CODE
<div class="modal" tabindex="-1" role="dialog" id="mymodal">
<div class="modal-dialog displayMainmodel" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color: #aeb3b7; color:White">
<h5 class="modal-title">Insert Your comment</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div style="text-align: center;">
<textarea [value]="precomment" #comment placeholder="Enter your Comment"
rows="4" cols="50"
style="resize: none; border: 1px solid #aeb3b7;width: 100%;">
</textarea>
</div>
</div>
<div class="modal-footer" style="justify-content: center; border:none">
<button type="button" class="btn btn-primary"
style="background-color: #3CB371;"
(click)="submitcomment(comment.value)">Submit</button>
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My Ts code
openpopup(datacommentid,name){
console.log("data is",datacommentid,name)
this.data.forEach(element => {
console.log("sjdksa",element)
if(element.id==datacommentid){
this.precomment=name.comments
}
});
$('#mymodal').modal();
}
submitcomment(mycomment){
console.log("the comment is",mycomment)
}
Use shown.bs.modal event
Here is the demo: https://jsfiddle.net/chille1987/ozud4cgq/9/
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- 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">Modal 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>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
$('#exampleModal').on('shown.bs.modal', function (e) {
var element = $('<div>Modal is opened</div>');
$('.modal-body').append(element);
})
So once the user has filled out their information and clicks submit I want to display the information in a bootstrap model with a confirmation button underneath.
This would be a summary of their information before it submitted to the database. So far here's what I've got:
const text = document.getElementsByClassName("myText").innerHTML;
const modalBody = document.getElementById("bodyModal")
function submitText () {
modalBody.innerHTML = text
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<label>Name</label>
<input type="text" class="myText">
<br>
<label>Age</label>
<input type="text" class="myText">
<br>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong" onClick="submitText">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="bodyModal">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
function submitText(){
var html="Your name is "+$("#name").val()+"<br>Your age is "+$("#age").val();
$("#bodyModal").html(html);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<label>Name</label>
<input type="text" class="myText" id="name"> <!-- i only added name id to this element -->
<br>
<label>Age</label>
<input type="text" class="myText" id="age"> <!-- i only added age id to this element -->
<br>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong" onClick="submitText()"> <!-- here was an syntax error. you were calling method by uts name without () sign -->
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="bodyModal">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
const modalText = $("#modalText")
function submitText () {
var name = $("#myName").val();
var age = $("#myAge").val();
modalText.text("Hello " + name + " with " + age + " years old ");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<label>Name</label>
<input type="text" id="myName" class="myText">
<br />
<label>Age</label>
<input type="text" id="myAge" class="myText">
<br />
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong" onClick="submitText()">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="bodyModal">
<lable id="modalText"></lable>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
You need to get the value of the input fields. I suggest giving the inputs two ids like this:
<label for="id1">Name</label>
<input type="text" class="myText" id="id1">
<label for="id2">Age</label>
<input type="text" class="myText" id=id2">
and then get their value with:
var name = document.getElementById("id1").value
var age = document.getElementById("id2").value
Finally, you can append the text you just got on the modal by doing so:
$("#bodyModal").html("<p>"+name+"</p><p>"+age+"</p>")
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.
I try to focus() an input in a Bootstrap modal, but nothing seems to work. I have tried the setTimeout and the tabindex fixes, but nothing.
Even when I run it in the console:
$("#inpProperty").focus();
$("#inpProperty")[0].focus();
it doesn't focus. I am using Firefox 53.0, 64 bit on Fedora.
This is the modal:
<div id="mdlAddProperty" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create New Property</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger collapse" id="divAlert">
×
<span id="spnMessage"></span>
</div>
<p>Property Name:</p>
<p><input class="input" id="inpProperty" tabindex="1"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" tabindex="2" onclick="btnAddProperty_Click()">Create</button>
<button type="button" class="btn btn-default" tabindex="3" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Update it works one time in Chrome, zero times in Firefox.
If you need to focus it in just the beginnig you can add autofocus event on the html element you want to focus in.
<div id="mdlAddProperty" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create New Property</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger collapse" id="divAlert">
×
<span id="spnMessage"></span>
</div>
<p>Property Name:</p>
<p><input class="input" id="inpProperty" tabindex="1" autofocus></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" tabindex="2" onclick="btnAddProperty_Click()">Create</button>
<button type="button" class="btn btn-default" tabindex="3" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
But if you want to do it with jQuery you need to surround your code with $(document).ready(function());
$(document).ready(function() {
$("#inpProperty").focus();
$("#inpProperty")[0].focus();
});
Here is the Bootstrap Modal events you can use:
Read more here: https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp
Also if you are running js at console you need use this(open modal first):
jQuery("#inpProperty").focus();
$(document).ready(function() {
$("#myBtn").click(function() {
$("#mdlAddProperty").modal("show");
});
$("#mdlAddProperty").on('shown.bs.modal', function() {
$("#inpProperty").focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Modal Events - shown.bs.modal</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>
<!-- Modal -->
<div id="mdlAddProperty" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create New Property</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger collapse" id="divAlert">
×
<span id="spnMessage"></span>
</div>
<p>Property Name:</p>
<p>
<input class="input" id="inpProperty" tabindex="1">
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" tabindex="2" onclick="btnAddProperty_Click()">Create</button>
<button type="button" class="btn btn-default" tabindex="3" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
I have 2 bootstrap models on the same page, the first modal opens and runs as expected. After saving the form data in the first modal, a button is visible to open up the second modal. The button however is not clickable:
<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal1">modal1</button>
I've found a few that have had similar problems with two modals on the same page but there appears to be no common causes. How can I fix this? Preferably I would like the button to work. Iif for whatever reason it's not possible, I'm ok with JS automatically opening the second modal after the 1st one closes. I have also been unsuccessful with getting that to work. I've triple checked that all my tags are closed and correctly spaced. I've omitted a lot of the form content within the modals in the code below for purposes of brevity. I've also included my JS at the end of the page that directs the visibility of the modals.
<div class="add_left">
<div id="crop-avatar" class="container">
<div class="bigpicture"> <img src="" > </div>
<div class="avatar-view" title="Add new listing"> <img src="../0images/cropy.jpg" alt="Listing Image" width="400px"</div>
<!-- modal 1 -->
<div class="modal fade" id="avatar-modal" tabindex="-1" role="dialog" aria-labelledby="avatar-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form name="avatar-form" class="avatar-form" method="post" action="crop-avatar.php" enctype="multipart/form-data">
<div class="modal-header"> </div>
<div class="modal-body">
<div class="avatar-body">
<div class="row"> </div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
<button id="nxtbutt" class="btn btn-primary avatar-save" disabled type="submit">Save Image</button>
</div>
</form>
<div class="loading" tabindex="-1" role="img" aria-label="Loading"></div>
</div>
</div>
</div>
</div>
</div>
<div class="add_right">
<h4 class="instructiondata" style="padding-top:20px">Click the button below to add your pdf file and data:</h4>
<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal1">modal1</button>
<!-- modal 2 -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<form name="data-form" class="data-form" method="post" action="add_data.php" enctype="multipart/form-data">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<h2>Listing Designation</h2>
<fieldset style="padding-left:5px;">
<legend> Designation </legend>
</fieldset>
</div>
<div class="modal-footer">
<input class="avatar-src" name="avatar_src" type="hidden">
<input type="hidden" name="id" value="">
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
<button id="nxtbutttwo" class="btn btn-primary avatar-save" type="submit">Save Listing</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
<script Content-Type: application/javascript src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$("#avatarInput").on("change", function() {
$("#nxtbutt").prop('disabled', !$(this).val());
});
$(document).ready(function(){
$(".add_right").hide();
$(".add_display").hide();
$(".bigpicture").hide();
$(".instructiondata").hide();
});
$( "#nxtbutt" ).click(function () {
$(".add_right").show();
$(".bigpicture").show();
$(".add_display").hide();
$(".avatar-view").hide();
$(".instruction").hide();
$(".instructiondata").show();
});
$( "#nxtbutttwo" ).click(function () {
$(".add_right").show();
$(".add_display").show();
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
Thank you in advance!
Don't use show() and hide() here.
You can close and open using the modal method:
$("#secondModalButton").click(function() {
$("#firstModal").modal('hide');
$("#secondModal").modal('show');
});
Or (I just noticed) you can do it purely with bootstrap attributes:
<button type="button" class="btn btn-primary" id="secondModalButton"
data-dismiss="modal"
data-toggle="modal"
data-target="#secondModal">Second modal</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#firstModal">
Launch first modal
</button>
<!-- First Modal -->
<div class="modal fade" id="firstModal">
<div class="modal-dialog">
<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>
<div class="modal-body">
First Modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="secondModalButton" data-dismiss="modal" data-toggle="modal" data-target="#secondModal">Second modal</button>
</div>
</div>
</div>
</div>
<!-- Second Modal -->
<div class="modal fade" id="secondModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="secondModal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
Second modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>