Develop Reference

Call JS function on click of a button in a Bootstrap modal

I have a bootstrap modal, where I have few buttons to capture feedback.
I want to call a JS function on click of one of the buttons.
However, on click of the button, the modal just closes without calling the JS Function.
But, if I do the same onclick event on any other element not in the modal, it works fine.
js
<script>
function sayHello() {
alert("Demo Alert")
}
</script>
HTML
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div
class="modal-dialog modal-lg modal-dialog-centered"
role="document"
>
<div class="appie-signup-area">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="appie-signup-box">
<h3 class="title">How was the Session?</h3>
<form action="#" id="mood-tracker">
<div class="row">
<div class="input-box">
<button type="submit" value="Good" onclick="sayHello()">
<i
class="fa fa-smile"
></i
>Good
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Where am I going wrong?

Please do not use button type "submit". Use type "button" instead of like this:
<button type="button" value="Good" onclick="sayHello()"><i class="fa fa-smile"></i>Good </button>

I think you should use window.confirm() instead of window.alert().
HTML
<button type="submit" value="Good" onclick="sayHello()">
JS
function sayHello() {
return confirm('Demo Alert');
}
I found this answer on another Stack Overflow page : HTML - How to do a Confirmation popup to a Submit button and then send the request?

C must be capital
use onClick not onclick
<button type="button" onClick="sayHello()">Button</button>

Where should submit buttons be located for a form located in a Bootstrap modal?

Below is example HTML straight from the docs except that I added an id to the form element. Why are they showing the buttons outside of the form? Shouldn't they be located within the form so that when clicked, the form is submitted? Please see my typical JavaScript at the bottom. If not, is it required to attach an event to the button.btn-primary which will then submit the form, or not even use this event and just do the work within the click primary button event?
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="my-form">
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-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-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
My typical JS would be something like the following:
const form = document.getElementById( "my-form" );
form.addEventListener( "submit", function ( event ) {
event.preventDefault();
// Make a XMLHttpRequest as necessary
} );

The button element has an optional form attribute that is used to associate it with a form. This allows the button to be positioned anywhere, not necessarily inside of the form element. It also allows for multiple button elements to be associated with a single form in cases where different submit parameters might be needed.

Input in Bootstrap Modal not editable

I have created a bootstrap modal with a input text as shown in the following image. The input gets focus on click(sometimes), however when I try to enter text, nothing happens.
I am using angular 4, and in my project structure I have a component which has another modal dialog - and the inputs work fine, however the child of that component has this modal (which is appended to the document body on show) and the input is not editable.
Do you have any idea why this is happening?
Thanks
Code for modal:
<div class="modal fade" id="boardDetailsModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit timeline</h4>
</div>
<div class="modal-body">
<input type="text">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="saveTimeline()">Save</button>
<button type="button" class="btn btn-default" (click)="close()">Close</button>
</div>
</div>
</div>
</div>
Code for showing modal:
ngAfterViewInit() {
let self = this;
self.element.appendTo("body").modal('show');
}

I think you have a small typo.
Change your input to:
<input type="text" />
Notice the forward slash.

jQuery Bootstrap - Reset form value on modal dismiss

I have a modal that contains just one form field, however once the user enters this value it remains even when the modal is closed. I want it to reset on dismiss so that when the modal is opened again, the form is empty. I have some code for this already, however it's not working as it should. If anyone could help out it would be greatly appreciated.
HTML/Modal:
<!-- Modal -->
<div id="myModalViewAddress" class="modal fade" 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">View Hidden Information</h4>
</div>
<div class="modal-body">
<p>Please enter authorisation code</p>
<form id="auth_form10">
<div class="form-group has-feedback" name="auth_code10" id="auth_code10">
<input class="form-control" id="auth_code_input10" autocomplete="new-password" name="auth_code_input10" type="password" required>
<span class="form-control-feedback glyphicon" id="iconBad10"></span>
</div>
</form>
<hr>
<div id="modal-loader" style="display: none; text-align: center;">
<!-- AJAX loader -->
<img src="img/ajax-loader.gif">
</div>
<div id="dynamic-content-address" class="hidden">
<!-- Dyanamic address -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
jQuery:
$('.myModalViewAddress').on('hidden.bs.modal', function() {
$(this).find('auth_form10')[0].reset();
});
JSFiddle

A few issues here. You were using .myModalViewAddress instead of #myModalViewAddress. Also you need to just clear the value with:
$('#myModalViewAddress').on('hidden.bs.modal', function() {
$('#auth_form10 input').val('');
});
jsFiddle example

try this:
after the onclick action:
$('#auth_code_input10').val() == null;

Your problem is given because of your selectors.
if you want to reset your form elements you shold select your form by his id using # and then call the .reset() method.
also your event registration wasn't being made because you are using class selector . $('.myModalViewAddress') instead of id selector # $('#myModalViewAddress')
https://jsfiddle.net/cLkekytx/1/

Setting textbox value in modal window using onclick button using Bootstrap

I ma trying to display username in modal text box using onclick button
I have a button from there on onclick i am calling onclick="getUserName(this.id)"
this.id
gives me name which i want to set in
modal textbox userName
Here is my function
function getUserName(username) {
$('#editUserPopUp').bind('show',function(){
alert(username);
$("#userName").val(username);
});
}
I am getting username in alert(username)
but how do i set thsi value to my modal, username text field
Here is my Modal
<div class="modal fade" id=editUserPopUp tabindex="-1"
role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Update Password</h4>
</div>
<div class="modal-body">
<form class="EditUserBody" role="form" id="usermanagement_editUser="novalidate" method="POST">
<div class="input-group col-md-8">
<span class="input-group-addon">User Name</span>
<input class="form-control" id="userName" type="text" class="input-medium" disabled />
</div>
</form>
</div>
</div>
</div>
</div>

This should work.
But you should also take a look at the Bootstrap documentation about modal windows. There is a section explaining how to vary modal content.
Varying modal content based on trigger button
Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked.
function getUserName(username) {
var $modal = $('#editUserPopUp'),
$userName = $modal.find('#userName');
$userName.val(username);
$modal.modal("show");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button onclick="getUserName(this.id)" id="Foo Bar">Open Modal</button>
<div class="modal fade" id=editUserPopUp tabindex="-1"
role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Update Password</h4>
</div>
<div class="modal-body">
<form class="EditUserBody" role="form" id="usermanagement_editUser="novalidate" method="POST">
<div class="input-group col-md-8">
<span class="input-group-addon">User Name</span>
<input class="form-control" id="userName" type="text" class="input-medium" disabled />
</div>
</form>
</div>
</div>
</div>
</div>

I think the problem is you are using show event,instead try call shown event after all, like so :
function getUserName(username) {
$('#editUserPopUp').modal('show');
$('#editUserPopUp').on('shown', function () {
alert(username);
$("#userName").val(username);
})
}
p/s : did't test it. Hope this help. Comment if did't work.