Here is my Codepenlink
I've created a button to show the html code behind a certain area in the layout.
And when I want to edit the code in the textarea such as change the class or add more id... then I press submit to update the new HTML code back into the area but it didn't work and the layout change into a pure HTML code also.
So I don't know if it possible to submit new HTML code back into the layout without reload the page, I'm thinking about apply a form and using AJAX but so far still have no idea how to use it.
Please try this:
//generate html
$(document).on('click', '.btn-success', function() {
var target = $('.example-form').find('form');
$('.bs-example-modal-lg').on('shown.bs.modal', function(e) {
var htmlString = $(target).html();
$("#codeContainer").val(htmlString);
});
});
//apply new html to layout
$("body").on('click', ".modal.bs-example-modal-lg .btn-primary", function() {
var htmlcode = $("#codeContainer").val();
$(".example-form form").html(htmlcode);
});
.btn-html {
margin: 10px 0;
}
.example-form {
padding: 10px;
border: 1px solid #343434;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="btn-html">
<button class="btn btn-success" data-toggle="modal" data-target="#myModal">Show HTML</button>
</div>
<div class="example-form">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade bs-example-modal-lg" 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">Show HTML code behind layout</h4>
</div>
<div class="modal-body">
<textarea id="codeContainer" rows="25" style="width: 100%;"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Close">Save changes</button>
</div>
</div>
</div>
</div>
The problem is you've already loaded the page by the time you're trying to change it so what you have to do is save the markup to local storage or a database somewhere and reload the page
or...
If you're only allowing changes within a certain portion of your page markup, you could use jquery to apply the changes.
Your jquery of
//apply new html to layout
$(".btn-primary").click(function () {
var htmlcode = $("#codeContainer").text();
$(".example-form form").text(htmlcode);
});
looks like you're on the right track to do it this way, however, you're using the wrong method.
Change it to this:
//apply new html to layout
$(".btn-primary").click(function () {
var htmlcode = $("#codeContainer").text();
$(".example-form form").html(htmlcode);
});
Related
I have a newsletter modal setup, which works fine. I have it set to launch automatically on page load via some javascript code, but how could I make it so that it doesn't open if you successfully submitted the form inside the modal?
Javascript:
<script type="text/javascript">
$(window).on('load', function() {
$('#newsletter-modal').modal('show');
});
</script>
HTML Modal Code:
<div class="modal fade" id="newsletter-modal">
<div class="modal-dialog modal-lg">
<div class="modal-content primary-modal">
<div class="modal-header">
<h4 class="modal-title"><i class="fas fa-envelope-open-text primary-modal-icon"></i> Subscribe to our Newsletter</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: #fff;">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body primary-modal-body">
<form method="post" action="">
<div class="col-sm-12">
<div class="form-group col-md-6 col-md-offset-3 primary-modal-form">
<label class="justify-content-center" style="color: rgba(255,255,255,.55); text-align: center;">Your Name</label>
<input type="text" class="form-control" placeholder="John Doe" name="newsletter_name">
</div>
</div>
<div class="col-sm-12">
<div class="form-group col-md-6 col-md-offset-3 primary-modal-form">
<label style="color: rgba(255,255,255,.55); text-align: center;">Your Email</label>
<input type="email" class="form-control" placeholder="johndoe123#gmail.com" name="newsletter_email">
</div>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-default swalDefaultSuccess" name="signup_newsletter">Subscribe <i class="fas fa-arrow-circle-right primary-modal-subscribe-icon"></i></button>
</div>
</form>
</div>
</div>
</div>
</div>
Check this it will help you:
Dismiss Bootstrap Modal (Forever!) with jQuery Cookie, On Click
By doing it in PHP you prevent people from mucking about with the JS which is 'client-side'.
Additionally, you can only set the cookie if the subscribe works, ie after you've validated the email etc.
On the page PHP
if (isset($_POST['newsletter_email'])) {
//you subscribe stuff here
$_SESSION['subscribed']=true;
}
then wrap your modal js in
if (!isset($_SESSION['subscribed'])) {
///output your onload js.
}
I made a modal which includes a form asking for information about a book. After clicking the button Add Book the modal is supposed to show so that one can enter the information about the book and after clicking add the entered data is used to create a Bootstrap card element and append it to the page. The problem is when clicking the Add Book button the modal shows but it isn't displaying properly (it appears fragmented with the Title and inputs floating above the page contents).
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add-book-modal">AddBook</button>
<div class="modal fade" id="add-book-modal" tabindex="-1" aria-labelledby="add-book-modal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add a new book</h5>
</div>
</div>
<div class="modal-body">
<form id="add-form">
<div class="form-group">
<label for="title" class="col-form-label">Title:</label>
<input type="text" class="form-control" id="title" name="title">
</div>
<div class="form-group">
<label for="author" class="col-form-label">Author:</label>
<input type="text" class="form-control" id="author" name="author">
</div>
<div class="form-group">
<label for="comment" class="col-form-label">Comments:</label>
<textarea class="form-control" id="comment" name="comment"></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" id="add">Add</button>
</div>
</div>
</div>
Is seems strange for me that div with class="modal fade" is inside button type="button". Move it inside container div class="container".
I have a button and upon clicking that button I am showing a form in bootstrap model. What I want to achieve is to show confirmation box on form submit. Everything is fine but confirmation is appear at the background of bootstrap model.
HTML
<div class="text-right">
<button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target=".bs-example-modal-lg">Notify Customer</button>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class ="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title mt-0" id="myLargeModalLabel">Notification Message</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<form class="form-horizontal submit-notify" method="POST" action="{{route('backend.customers.notify', $customer->id)}}">
{{csrf_field()}}
<div class="form-group">
<label for="title" class="col-form-label">Title</label>
<div>
<input type="text" name="title" class="form-control" required placeholder="Enter Notification Title" value="#if(old('title')){{old('title')}}#endif" />
</div>
</div>
<div class="form-group">
<label for="message" class="col-form-label">Message</label>
<div>
<textarea type="text" name="message" class="form-control" rows="5" placeholder="Enter Notification Message">#if(old('message')){{old('message')}}#endif</textarea>
</div>
</div>
<div class="form-group">
<label>Options</label>
<div>
<label class="custom-control custom-checkbox" style="display: inline-block !important;">
<input type="checkbox" class="checkbox m-r-10" name="options[]" value="mail" data-parsley-required="true" data-parsley-multiple="groups"
data-parsley-mincheck="1">
<span class="custom-control-indicator"></span>
<span class="custom-control-indicator">Mail</span>
</label>
<label class="custom-control custom-checkbox" style="display: inline-block !important;">
<input type="checkbox" class="checkbox m-r-10" name="options[]" value="push" data-parsley-multiple="groups"
data-parsley-mincheck="1">
<span class="custom-control-indicator"></span>
<span class="custom-control-indicator">Push</span>
</label>
<span id="error-box"></span>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-pink waves-effect waves-light confirm-submit">
Send
</button>
</div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Here is the javascript for alertyfy.
Javascript
<script type="text/javascript">
$(document).ready(function () {
$(".confirm-submit").on('click',function(event){
event.preventDefault();
var form = $(this).closest('form');
var confirm = alertify.confirm("Are you sure you want to submit details ?",function (e) {
if(e){
form.submit();
}
else{
return false;
}
});
});
});
</script>
I have tried following two as recommended in stack overflow and medium.
First
By removing tabindex="-1" from model.
Recommended here: alertify upon a bootstrap modal not working
Second
By placing following css:
.alertify-logs{
z-index:999999 !important;
}
None of these work in my case. What would be the problem. I am using laravel framework.
Finally a following css trick for me and nothing problem with javascript,
.alertify{
z-index:999999 !important;
margin-top: -50px;
}
Main div class for alertyfy pop up was .alertyfy and adding z-index on that div worked for me.
In case of people searching, latest alertify 1.12.0 uses:
.alertify-notifier { z-index:999999 !important; }
instead of:
.alertify { z-index:999999 !important; }
This trick works for me. I am using 1.13.1 version alertify.
I can see into HTML
<div class="alertify-notifier ajs-bottom ajs-right"></div>
So, add Z-index for .alertify-notifier class.
.alertify-notifier { z-index:999999 !important; }
CSS:
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.13.1/build/css/alertify.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.13.1/build/css/themes/default.min.css"/>
JS:
<script src="//cdn.jsdelivr.net/npm/alertifyjs#1.13.1/build/alertify.min.js"></script>
This question have many answers out there but none of those answers solved my problem. I have a modal with some <select> tags. I am trying to save the values from the select options. after they click Save the modal should close but not submit the result yet because the user still need to review stuff after they click save on the modal.
HTML
<!-- Modal -->
<div id="1" 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">
//select tags go here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="save" onclick="save()" class="btn btn-width bkgrnd-cyan save-details" type="button" name="save-details">Save</button>
</div>
</div>
JS
$('#save').click(function() {
$('#1').modal('hide');
});
Since my code is really long, I just copied a modal from google but I added my Save button, so this is the real Save button that my modal is using.
Thanks
EDIT
I changed the id number to letters so now the code doesn't include any id starting with number, thanks.
PS still need help =/
EDIT
I also tried this one and it did not work
$(document).ready(function(){
$('#save').click(function(){
$('#modal_1').modal('hide');//modal_1 is the id 1
});
});
HTML
<div id="someModalId" 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">
<select id="exampleSelect">
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="save" onclick="save()" class="btn btn-width bkgrnd-cyan save-details" type="button" name="save-details">Save</button>
</div>
</div>
JS
$('#save').click(function() {
$select_value = $("#exampleSelect").value();
$('#someModalId').modal('hide');
});
Give your select a name or id
Set the value of select to a global variable. Make sure to declare the variable at the top if you are getting an error.
I'm not sure the id=1 is fine, but you can use this code to simulate a click on the close button (or you can add an id or a class to it).
You may have to remove the onclick="save()"
data = {};
$("#save").on("click", function(e){
e.preventDefault(); // prevent de default action, which is to submit
// save your value where you want
data.select = $("#exampleSelect").value();
// or call the save function here
// save();
$(this).prev().click();
});
<button id="save" class="btn btn-width bkgrnd-cyan save-details" type="button" name="save-details" onclick="save()" data-toggle="modal" data-target="#myModalList" data-dismiss="modal">Save</button>
this worked very well for me, and its a simple way to do it. after the onclick I used the data-toggle, data-target and data-dismiss
in the js function save() I didn't need to code anything but to save data into to my database
// Insere notas na base de dados
function save() {
console.log("func guardar");
if ($("#message-text").val() == "") {
alert("Texto vazio");
} else {
$(document).ready(function () {
$.ajax({
method: "POST",
url: "../portal/portalphp/notas.php",
data: {
num: num,
text: $("#message-text").val()
}
}).done(function (msg) {
if (msg == 1) {
//alert("Nota guardada com sucesso");
readyNotas(num);
console.log("func guardar done == 1");
} else {
alert("Erro: não foi possivel guardar");
}
});
texto.value = "";
});
console.log("func guardar ready");
}
}
First, you need to remove onclick="save()" from your button. You don't need that when you are using the on click function directly $('#save').click(function()...
As was pointed out in the comments by #Eshwaren, you can't use a number to start an id, so you need fix that as well.
To get the value from a select, you have to be able to identify it. A simple solution would be to give your select element an ID.
For example:
<div class="modal-body">
<select id="data_1">
</select>
</div>
In your code, you can then assign the value of the select element to a variable.
For example:
var data_1;
$('#save').click(function() {
data_1 = $("#data_1").value();
$('#modalid').modal('hide');
});
You can then use that variable elsewhere in your code.
There are many more possibilities for solving this, but the root of the issue is being able to identify the select elements in code and recording their respective values.
thats my modal window
$(function () {
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "Column Preferences",
button: "save",
width: 750,
height: 620
});
try this to close or hide the window
$('#dialog').dialog('close');
I finally got this working with a hint from Ricardo Almeida:
<%=form_with id: :friend_email_form, url: friend_emails_create_path do |f|%>
# form fields entered here
<div class="actions">
<%= f.submit "Send Email", class: 'btn btn-primary', "onclick":"submit_form();", "data-dismiss":"modal"%>
</div>
<script>
function submit_form() {
document.getElementById('friend_email_form').submit();
}
</script>
just add 'data-dismiss="modal"' when click save
example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
<!-- Button trigger modal -->
<button type="button" id="test2" class="btn btn-primary" data-toggle="modal" data-target="#test">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="test" tabindex="-1" role="dialog" aria-labelledby="test" 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">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
</form> </div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I have the following lines of code in my website - CodePen.
What I am trying to do, is make it so that the user must fill in the form first, before downloading an item:
<div class="container">
<!-- Trigger the modal with a button -->
Download Item #1
Download Item #2
<!-- Modal -->
<div class="modal fade" id="myModal" 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">
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
How can I make it so that when the user selects the first or second button on the page, it will send this information to the submit button?
You could store the link in a variable. Then, when the button is clicked, check if the fields are empty (and apply any validation rules). If not empty, apply the submit to the form.
$link = 'example.com/download.pdf';
$('.button').click(function(){
// CHECK THE FIELDS ARE NOT EMPTY
// APPLY YOUR OWN VALIDATION
if($field1 = $('.field1').val() != '' && $('.field2').val() != ''){
// DO WHAT YOU NEED TO DO WITH THE LINK
$('form').submit();
}
})
On a side note, it's possible that you were down-voted (not by myself) for not providing us with your attempts to solve your own problem. You provided us with your html but not any of your tested logic.
You add a click handler to your button in JavaScript :
var fieldsAreReadyToBeSent = function() {
// Validation code goes here
// return true if valid & false if invalid
};
document.querySelector("[type=submit]").addEventListener("click", function() {
if(!fieldsAreReadyToBeSent()) {
event.preventDefault();
}
});
The method event.preventDefault() prevents your your form from being submitted if it is considered invalid!
A demo :
var fieldsAreReadyToBeSent = function() {
return false; // FOR THIS DEMO, ALWAYS RETURN FALSE
};
document.querySelector("[type=submit]").addEventListener("click", function() {
if(!fieldsAreReadyToBeSent()) { // FOR THIS DEMO, THIS IS ALWAYS TRUE
event.preventDefault();
}
});
<div class="container">
<!-- Trigger the modal with a button -->
Download Item #1
Download Item #2
<!-- Modal -->
<div class="modal fade" id="myModal" 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">
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>