I have an issue when trying to check a checkbox inside a form inside a modal.
Here the code
<div id="modal-new-bill" class="modal">
<form action="NewBill" method="post">
<div class="modal-content">
<div class="row">
<div class="checkbox">
<input type="checkbox" value="remender" name="remender">
<label for="remender">Create Remender?</label>
</div>
</div>
</div>
<div class="modal-footer center">
Cancel
<button type="submit" class="btn waves-effect waves-light">Insert</button>
</div>
</form>
</div>
The problem is that i can't check that checkbox but if i came to it by tab clicks and then space it, it gets checked. anyone know how to made it checked by mouse click?.
Thanks.
It is working as you posted so you most likely have some JavaScript attached to it causing your issue.
<div id="modal-new-bill" class="modal">
<form action="NewBill" method="post">
<div class="modal-content">
<div class="row">
<div class="checkbox">
<input type="checkbox" value="remender" name="remender">
<label for="remender">Create Remender?</label>
</div>
</div>
</div>
<div class="modal-footer center">
Cancel
<button type="submit" class="btn waves-effect waves-light">Insert</button>
</div>
</form>
</div>
Related
I have this Bootstrap code which I would like to use to generate address and implement copy button functionality:
<div class="modal fade" id="bitcoinModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="container">
<div class="offset-top-20 text-md-left">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Copy address</h3>
</div>
<div class="section-60 offset-top-35">
<div class="offset-top-20 text-md-center">
<form class="rd-mailform form-inline-custom text-left" data-form-output="form-output-global" data-form-type="subscribe" method="post" action="http://.........">
<div class="form-group form-group-outside">
<div class="input-group">
<label class="form-label form-label-outside text-dark" for="forms-subscribe-email">Bitcoin Address</label>
<input class="form-control" id="forms-subscribe-email" type="text" name="bitcoin_address" value="3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy " data-constraints="#Required"/>
</div>
<div class="input-group-btn">
<button class="btn btn-width-165 btn-primary" type="submit">Copy</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
How I can copy the content from the input item and close the form when the value is copied into the clipboard?
You can use something like https://clipboardjs.com
p.s. To modify the state your site, you can use the success callback to modify the state of your site.
<script src="https://cdn.jsdelivr.net/npm/clipboard#2/dist/clipboard.min.js"></script>
<input class="form-control" id="forms-subscribe-email" type="text" name="bitcoin_address" value="3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy " data-constraints="#Required" />
<input type="button" value="copy" id="copy-button" data-clipboard-text="3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy" />
<script>
var clipboard = new ClipboardJS('#copy-button');
var button = document.querySelector('#copy-button')
clipboard.on('success', function(e) {
button.value = "copied"
});
</script>
I showed you how to change the button text. Closing the modal should be similar.. Without knowing any details.. you probably have to remove or add a class to the modal to make it disappear.
For the delay you can use setTimeout() https://www.w3schools.com/jsref/met_win_settimeout.asp
I made a login page on my computer but I don't know how to make it react after login. I am trying to make a website that people can send messages to each other.
I typed in this:
<html>
<!-- Button to open the modal login form -->
<button onclick="document.getElementById('id01').style.display='block'">Login</button>
<!-- The Modal -->
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'"
class="close" title="Close Modal">×</span>
<!-- Modal Content -->
<form class="modal-content animate" action="/action_page.php">
<div class="imgcontainer">
<img src="https://clipground.com/images/img_avatar2-png-2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="friends"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="friends" required>
</div>
<label for="keep secrets"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="keep secrets" required>
<div class="container">
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<span class="keep secrets">Forgot password?</span>
</div>
</form>
</div>
</html>
This type of application, a lot more complicated than a single page, i recommend you search for some tutorias like on youtube .-.
This is a good link https://jasonwatmore.com/post/2017/09/16/react-redux-user-registration-and-login-tutorial-example
I'm trying to recreate this example: https://getbootstrap.com/docs/3.3/components/#input-groups-buttons-multiple
Why if I copy this example, with the exact same code I see while inspecting elements, the buttons and input fields are not on the same line?
<body>
<div class="container-fluid">
<form class="bs-example bs-example-form" data-example-id="input-group-multiple-buttons">
<div class="row">
<div class="input-group">
<div class="col-lg-6">
<input class="form-control" aria-label="Text input with multiple buttons">
<div class="input-group-btn">
<button type="button" class="btn btn-default" aria-label="Help"><span
class="glyphicon glyphicon-question-sign"></span></button>
<button type="button" class="btn btn-default">Action</button>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
Fiddle.
You have your column and input group reversed. Typically all content should be inside the column, and the only children of a row should be columns.
<div class="col-lg-6">
<div class="input-group">
Demo
I want that when I move my cursor on an image, it should show 3 buttons coming and then when I click on any one of them, a modal should open. I am actually done with this, but the problem is when I click on any of the buttons appearing, a modal is reflected and as soon as I try to close that modal, those three options are shown on that image rather dis-appearing. Please anyone help.
Here is the code:
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<div class="caption">
<button class="btn" data-toggle="modal" data-target="#myModal1a" style="color:#000">Add</button>
<button class="btn" data-toggle="modal" data-target="#myModal1b" style="color:#000">Delete</button>
<button class="btn" data-toggle="modal" data-target="#myModal1c" style="color:#000">Modify</button>
</div>
<img src="Department.png" style="position:fixed" alt="ALT NAME" width="250" height="60">
</div>
<h3 class="text" id="D1"><b>Department Options </b></h3>
</div>
</div>
<!-- Modal 1a -->
<div class="modal fade" id="myModal1a" 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><span class="glyphicon glyphicon-lock"></span> Create Department</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="psw">Department Name</label>
<input type="text" class="form-control" id="psw" placeholder="Provide a name">
</div>
<div class="form-group">
<label for="usrname">Department ID</label>
<input type="text" class="form-control" id="usrname" placeholder="Provide an ID">
</div>
<button type="submit" class="btn btn-block">Submit
<span class="glyphicon glyphicon-ok"></span>
</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Cancel
</button>
<p>Need help?</p>
</div>
</div>
</div>
</div>
If you simply wanna hide those buttons whenever the modal is closed, then its a cakewalk if you use jQuery. You just need to use the hidden.bs.modal event of Bootstrap modals in the following way:
$('#myModal1a').on('hidden.bs.modal', function () {
$('.imgButton').each(function () {
$(this).hide();
})
})
Assuming that you provide a class called 'imgButton' to all the buttons :)
I have a crazy problem when I code an admin page. When i enter the "8" to this dialog, its how me like this picture. Every button else is ok.
Here my code:
<div class="modal-header">
<h4>{{'TITLE'|translate}}</h4>
</div>
<div class="modal-body">
<div class="row-fluid">
<form class="form-horizontal" ng-submit="addPoint()" id="add-point-form">
<div class="control-group">
<label class="control-label">{{'AMOUNT'|translate}}</label>
<div class="controls">
<input type="number" ng-model="input.amount" required>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" ng-click="close()">{{'CANCEL'|translate}}</button>
<button type="submit" class="btn btn-primary" form="add-point-form">{{'CONFIRM'|translate}}</button>
</div>
I don't know why 8?