We Keep Coding

load content to modal after form submit

I want to load content to a result div that is located inside a modal-body after form is submitted and after modal is shown but i can't figure out the problem. when i want to load content to a result div outside modal it works, but when i use the result div inside a modal it doesn't.
this is my code so far:
html:
<div class="col-lg-12">
<div class="row">
<div id="form-content">
<form method="post" id="reg-form" autocomplete="off" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div id="monetarylayout" class="form-group">
<input class="form-control number" type="text" value="0" name="subjectvalue" id="txt_subjectvalue">
</div>
<div class="form-group">
<button class="btn btn-primary">submit</button>
</div>
<input class="form-control number" type="text" value="0" name="coinquantity" id="txt_coinquantity" style="display:none"> <!--just to make the form post work-->
</form>
</div>
<!-- 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>
<div id="result"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
jquery:
<script type="text/javascript">
$(document).ready(function() {
// submit form using $.ajax() method
$('#reg-form').submit(function(e){
e.preventDefault(); // Prevent Default Submission
$.ajax({
url: 'testcontroller.php',
type: 'POST',
data: $(this).serialize() // it will serialize the form data
})
.done(function(data){
$('#myModal').modal(), function() {
// do something when the modal is shown
$('#result').fadeIn('slow').html(data);
}
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
});
});
</script>

i figured out myself. i should have added these attributes to my form button:
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">submit</button>
and edited this function as follows:
.done(function (data) {
$('#result').fadeIn('slow').html(data);
})

Display a modal once per session using the sessionstorage function

I have a modal on a page which makes use of javascript to display once the page has loaded, however, on refresh, I would like this modal to not be repeated as it can be a bit of a nuisance.
I have done some research and found a method using 'sessionstorage' but the problem is I don't know how to incorporate it into my code. My java is very poor.
Excerpt of my modal html and Javascript code below.
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p class="text-left-side">
<b>Check out your order now </b><br><br>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><b>Close<b></button>
</div>
</div>
</div>
<!-- sCRIPT FOR THE PAGE LOAD MODAL -->
<script type="text/javascript">
$(window).load(function(){
setTimeout(function(){ $('#myModal').modal('show'); }, 1400);
});
</script>

Few mistakes.
Use $(document).ready() function.
Use localStorage and set a flag. If it is set, don't display modal. Display only when it is not set.
Snippet
$(function() {
if (typeof Storage != "undefined") {
if (!localStorage.getItem("done")) {
setTimeout(function() {
$('#myModal').modal('show');
}, 1400);
}
localStorage.setItem("done", true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p class="text-left-side">
<b>Check out your order now </b><br><br>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><b>Close<b></button>
</div>
</div>
</div>
</div>
The above code will not execute in Snippets because of sandboxing. Kindly check with your code.
You can check the working demo at JSBin. Be careful. It works only once. :D

How can you bootstrap instead of an old JQuery div pop up?

So I have a PHP button that opens a modal. It then works off an old java script code for an older JQuery. I am trying to upgrade it to Bootstrap and not sure what I am doing wrong - the window pops up, but the Yes button won't work. The No button just closes the modal.
PHP code creates a remove button (I tried adding a Modal to it that does pop up):
if (can2('delete audit')) {
$admin_actions .= "
<a data-toggle=\"modal\" data-target=\"#myModal\" href=\"#\" id=\"$row[auditID]\" class=\"remove modify\" Title=\"Remove\" ><span class=\"hidding\">Remove</span></a>";
}
Old Code:
<div id="question_alert" class="question_alert" >
<div id="alert">
Are you sure you want to <strong>DELETE</strong> this Audit? You will not be able to get it back.
</div>
<input type="button" id="yes_delete" value="Yes " />
<input type="button" id="no_delete" value="No" />
</div>
New code:
<div class="modal fade" id="myModal" role="dialog" data-backdrop="false" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<!-- Modal header-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="myModalLabel">DELETE?</h4>
</div>
<!-- Modal content-->
<div class="modal-body">
<p>Are you sure you want to <strong>DELETE</strong> this Audit? You will not be able to get it back. </p>
</div>
<!-- Modal Footer-->
<div class="modal-footer">
<div id="question_alert" class="question_alert">
<!-- problem here for yes -->
<input type="button" id="yes_delete" value="Yes " />
<input type="button" id="no_delete" value="No" data-dismiss="modal" />
</div>
</div>
</div>
</div>
</div>
old code JQuery used for the yes button mainly:
$(".remove").click(function(){
var auditID = this.id;
$.blockUI({message: $('#question_alert')});
//Continue with unanswered questions
$('#yes_delete').click(function() {
$.post("edit_audits.php?action=delete&auditID="+auditID,function(data) {
if(data) alert(data);
$.growlUI('Success','You have successfully DELETED the audit.','success',1000);
setTimeout(function() {
window.location.reload();
}, 2000);
return false;
});
});
//Fix answered questions
$('#no_delete').click(function() {
$.unblockUI();
return false;
});
});

2 (or more) forms in a modal with tabs

I have a modal with some tabs, and each tab has its own form. I am looking for some way to change the footer so the submit works based on the active tab.
http://jsfiddle.net/r9b3ugs5/
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="tabbable">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active">
One
</li>
<li>
Two
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="One">
<form id="FormOne" role="form" class="container-fluid" action="One.asp" method="post">
<div class="row">
FormOne
</div>
</form>
</div>
<div class="tab-pane" id="Two">
<form id="FormTwo" role="form" class="container-fluid" action="Two.asp" method="post">
<div class="row">
FormTwo
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
What should be the way to do this? adding one footer for each tab and show it when the tab is active? Some other way?
UPDATE:
http://jsfiddle.net/r9b3ugs5/2/
Everthing is ok, besides the trigger url when I click in each button.

use jquery:
$("#tab1").click(function(){
$("#submit1").css("display","inline-block !important");
$("#submit2").css("display","none");
});
$("#tab2").click(function(){
$("#submit2").css("display","inline-block !important");
$("#submit1").css("display","none");
});
Fiddle: Demo

I updated the JFiddle. Look at this:
http://jsfiddle.net/r9b3ugs5/1/
Instead of alerting the id you can decide which tab has to be saved using the retrieved id. All you need to do is to add an id and a unique class (mytabs here) to all the tabs (on the li tag).
$("#save-button").click(function() {
alert($(".mytabs.active")[0].id);
});
EDIT: Actually you don't really need the class you could select over the parent ("#my-tab-ul li.active"). Several possibilities.
EDIT2: Further explanation
give the form ids like tab-id-form (tab-id = id of tab belonging to form)
replace the alert line with
$("#" + $(".mytabs.active")[0].id + "-form").submit();
Complete solution (tested in IE and FF): http://jsfiddle.net/r9b3ugs5/5/
// optional: change the text on the button when the tab is switched
$("#tab1").click(function() {
$("#save-button").html("Submit 1");
});
$("#tab2").click(function() {
$("#save-button").html("Submit 2");
});
$("#save-button").click(function() {
var id = $(".mytabs.active")[0].id;
if (id == "tab1") {
// you can also do the submits here, then there is no need for a
// special id, e.g. $("#completely-unrelated-form-id").submit()
} else {
// other submit if done in here, however with this approach you
// always have to modify the code when adding tabs.
}
$("#" + id + "-form").submit(); // == EDIT2, no more code manipulation needed
});

How does one pop up a modal AND run a checkbox check in JavaScript/jQuery?

I need a question answered, that in all honesty is almost completely identical to this one. The only difference is that instead of displaying a JS alert, I'm trying to display a modal using Bootstrap 3.1.1.
Here's what I have for relevant code so far:
HTML
<!DOCTYPE HTML>
<form id="aForm" method="post" action="">
...
<p class="alert alert-error alert-danger" id="errorMsg" style="display:none;">You must check the checkbox!</p>
<label class="checkbox"><input type="checkbox" id="theChkbox" required="required" />Click the box.</label>
<button id="clickButton" class="btn" type="button" onclick="submitCheck('theChkbox','errorMsg');">Click</button>
...
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Modal Title</h4>
</div>
<div class="modal-body">
<!-- Content here -->
</div>
<div class="modal-footer">
<button type="button" onclick="submitModal()" class="btn">Click Me</button>
</div>
</div>
</div>
</div>
...
</form>
JavaScript
function submitCheck(chkbox,error) {
if (document.getElementById(chkbox).checked == false) {
document.getElementById(error).style.display = "block";
} else {
window.location.href = "#myModal";
}
}
Now, the condition that the checkbox must be checked has to be there, and only when it is checked, and the button is pressed is the modal supposed to pop up.
Any advice is welcome. Seriously, this is driving me nuts! >.<

I'll guess that you have JQuery...
Here is a JSFiddle that might show you how to do so with bootstrap : JSFIDDLE
// everytime the button is pushed, open the modal, and trigger the shown.bs.modal event
$('#openBtn').click(function () {
$('#modal-content').modal({
show: true
});
});
HTML
Open modal
<div id="modal-content" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>
<input type="text" id="txtname" />
</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>