Develop Reference

Call javascript function in PHP file and load html file after?

I need to call a js function in my php but it's not working. Can someone tell me what I'm doing wrong? How can I do this in an easy way?
Thank you!
I have three files:
mail.php
Responsible for sending my $_POST stuff (it works fine). I call my javascript function to toggle a modal depending if the mail was send or not.
<?
...
$response = $sendgrid->send($email);
if ($response) {
echo '<script type="text/javascript">',
'confirmaEnvio();',
'</script>';
header('Location: /contato');
}
else {
echo '<script type="text/javascript">',
'falhaEnvio();',
'</script>';
header('Location: /contato');
}
?>
functions.js
Two functions, one toggle the modal with a text telling the mail was sent, one toggle the modal with a text telling the mail was not sent.
function confirmaEnvio () {
$("#modal").find(".modal-body").text("Mensagem enviada com sucesso!");
$("#modal").modal("show");
}
function falhaEnvio() {
$("#modal").find(".modal-body").text("Erro!");
$("#modal").modal("show");
}
view.html
Form sending data to mail.php using POST
<form name="contato" method="post" action="../php/mail.php">
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="Email" required>
</div>
</div>
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Nome</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Nome" required>
</div>
</div>
<div class="form-group row">
<label for="msg" class="col-sm-2 col-form-label">Mensagem</label>
<div class="col-sm-10">
<textarea class="form-control" name ="msg" rows="10" id="msg" placeholder="Mensagem" required></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" name="submit" class="btn">Enviar</button>
</div>
</div>
my modal, same file, view.html
<div class="modal fade" id="modal" 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>

This seems like an odd way to call a Javascript function as a result of a php call. It looks like you are calling a Javascript function, then immediately loading a new page. So even if the Javascript started to execute, it would be dumped as soon as the new page loads.
A better approach would be to call the php function from Javascript and then respond based on the response from the php function.

PHP Code Igniter cannot show data in modal bootstrap

I'm using codeigniter franmework. I try to appear the data into a modal. but i have a problem with my datas. They don't appear in modal. I followed the tutorial on the internet but it doesn't work. Here is my button click code which purposed to show data :
<a href="javascript:;"
data-id="<?php echo $row->id ?>"
data-kode="<?php echo $row->kode ?>"
data-subkode="<?php echo $row->subkode ?>"
data-nama_kegiatan="<?php echo $row->nama_kegiatan ?>"
data-toggle="modal" data-target="#edit-data">
<button data-target="#ubah-data" data-toggle="modal" class="btn btn-info">Ubah</button>
</a>
This is my modal code
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="edit-data" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 class="modal-title">Ubah Data</h4>
</div>
<form class="form-horizontal" action="<?php echo base_url('dashboard/rka2/ubah')?>" method="post" enctype="multipart/form-data" role="form">
<div class="modal-body">
<div class="form-group">
<label class="col-lg-2 col-sm-2 control-label">Kode</label>
<div class="col-lg-10">
<input type="hidden" id="id" name="id">
<input type="text" class="form-control" id="kode" name="kode">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-sm-2 control-label">Subkode</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="subkode" name="subkode">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-sm-2 control-label">Nama Kegiatan</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="nama_kegiatan" name="nama_kegiatan">
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-info" type="submit"> Simpan </button>
<button type="button" class="btn btn-warning" data-dismiss="modal"> Batal</button>
</div>
</form>
</div>
</div>
And this is the script for getting datas
<script>
$(document).ready(function() {
// Untuk sunting
$('#edit-data').on('show.bs.modal', function (event) {
var div = $(event.relatedTarget) // Tombol dimana modal di tampilkan
var modal = $(this)
// Isi nilai pada field
modal.find('#id').attr("value",div.data('id'));
modal.find('#kode').attr("value",div.data('kode'));
modal.find('#subkode').attr("value",div.data('subkode'));
modal.find('#nama_kegiatan').attr("value",div.data('nama_kegiatan'));
});
});
</script>

How to prevent close of a bootstrap modal after submitting the form?

I am using a Bootstrap modal window for a form. I need to prevent the modal from closing after pressing the submit button. I need to close the modal only after clicking the close button. Please help me.
<!--Login, Signup, Forgot Password Modal -->
<div id="login-signup-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<!-- login modal content -->
<div class="modal-content" id="login-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"><span class="glyphicon glyphicon-lock"></span> Login Now!</h4>
</div>
<div class="modal-body">
<form method="post" id="Login-Form" role="form">
<div class="form-group">
<div class="input-group">
<input name="email" id="email" type="email" class="form-control input-lg" placeholder="Enter Email" required data-parsley-type="email" >
</div>
</div>
<div class="form-group">
<div class="input-group">
<input name="password" id="login-password" type="password" class="form-control input-lg" placeholder="Enter Password" required data-parsley-length="[6, 10]" data-parsley-trigger="keyup">
</div>
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-success btn-block btn-lg">LOGIN</button>
</form>
</div>
<div class="modal-footer">
<p>
<a id="FPModal" href="javascript:void(0)">Forgot Password?</a> |
<a id="signupModal" href="javascript:void(0)">Register Here!</a>
</p>
</div>
</div>

Try this code to see if you can prevent the dialog from submit
$( "form" ).submit(function( event ) {
event.preventDefault();
});
And then close it using close button.

trouble sending modal form contents to PHP file with AJAX and Jquery

I'm trying to learn how to submit form data to a PHP file from a bootstrap modal. From the other questions I've seen, I thought I had it right, but I keep getting the error dialog. I must be missing something obvious.
test.php
<html>
<body>
<div class="container padding-top-10 change-width">
<div class="row padding-top-20" align="center">
<button class="btn btn-warning btn-lg" data-toggle="modal" data-target="#bandModal">Add Band(s)</button>
</div>
</div>
<div id="thanks"></div>
<div class="modal fade" id="bandModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content modal-lg">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="bandModalLabel">
Add a Show
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body row">
<div class="container col-md-12">
<form id="addBandForm">
<h3>Band Details<small>Enter each band name and primary contact information...</small></h3>
<div class="well" id="newBandRows">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for "newBandName">Band Name:</label>
<input type="text" class="form-control" id="newBandName" name="newBandName" placeholder="Enter Band Name" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="primaryContact">Primary Contact:</label>
<input type="text" class="form-control" id="primaryContact" name="primaryContact" placeholder="Enter Name" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for "personEmail">Primary Email:</label>
<input type="email" class="form-control" id="primaryEmail" name="primaryEmail" placeholder="Enter Email" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for "personPhone">Primary Phone #:</label>
<input type="text" class="form-control" id="primaryPhone" name="primaryPhone" placeholder="Enter Phone #" />
</div>
</div>
</div>
</div>
<div id="newRowButton">
<div class="row">
<div class="col-md-1">
<button type="button" class="btn btn-success pull-left" onClick="addNewBandRow();">+</button>
</div>
<div id="remover" class="col-md-1">
</div>
<div class="col-md-7">
</div>
<div class="col-md-3 padding-top-10">
<button id="addBandSubmit" class="btn btn-primary pull-right">Submit</button>
</div>
</div>
</div>
<script src="js/newBand.js" type="text/javascript"></script>
</form>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</body>
</html>
Jquery
$(function() {
//twitter bootstrap script
$("#addBandSubmit").click(function() {
$.ajax({
type: "POST",
url: "womhScripts/addBand.php",
data: $('#addBandForm').serialize(),
success: function(msg) {
$("#thanks").html(msg)
$("#bandModal").modal('hide');
},
error: function(xhr, status, error) { var err = eval("(" + xhr.responseText + ")"); alert(err.Message); }
});
});
});
addBand.php
<?php
if (isset($_POST['newBandName'])) {
$bandName = strip_tags($_POST['newBandName']);
$contact = strip_tags($_POST['primaryContact']);
$email = strip_tags($_POST['primaryEmail']);
$phone = strip_tags($_POST['primaryPhone']);
echo "bandName =".$bandName."</br>";
echo "contact =".$contact."</br>";
echo "email =".$email."</br>";
echo "phone =".$phone."</br>";
echo "<span class="label label-info" >your message has been submitted .. Thanks you</span>";
}?>

I looked through your code and found quite a few errors.
In your test.php change the Submit button from a button to an actual submit button.
<input id="addBandSubmit" type="submit" class="btn btn-primary pull-right">Submit</input>
In your Jquery
Add the preventDefault() function to stop the form from submitting to the same page.
$("#addBandForm").submit(function(event) {
event.preventDefault();
$.ajax({
url: "womhScripts/addBand.php",
type: "POST",
data: $('#addBandForm').serialize(),
success: function(msg) {
$("#thanks").html(msg);
$("#bandModal").modal('hide');
},
error:function(errMsg) {
console.log(errMsg);
}
});
});
You can read about what the preventDefault function here https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
In your addBand.php change the double quotes around your label label-info to single quotes. You cannot have double/single quotes inside double/single quotes inside php.
echo "<span class='label label-info' >your message has been submitted .. Thanks you</span>";
Also it helps to use the console to see exactly what is being posted using the Network tab in Chrome or Firefox .
Please mark this as the answer if it works for you. Hope this helps.

How to set password and username in javascript for a form placed inside a bootstrap modal

I have put a login modal using bootstrap 3 as explained in the link
http://bootstrapvalidator.com/examples/modal/
In the JavaScript code how to set the username and password to a particular value for the login form.
I am still learning html and css. I don't know much about javascript.

$('input[name="username"]').val('user');
$('input[name="password"]').val('password')
http://jsfiddle.net/sp5fcaLm/
Although I'm not sure setting password directly is the best idea.

You can try:
HTML code:
<div class="modal fade" id="loginModal" 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-hidden="true">×</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<!-- The form is placed inside the body of modal -->
<form id="loginForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">Username</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="username" id="username" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" name="password" id="password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-3">
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
and javascript code:
$('#loginModal').on('shown.bs.modal', function() {
$('#username').val('example#gmail.com');
$('#password').val('123456');
});
Remember include twitter-bootstrap. Its here