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.
Related
I have a problem with a small project for class, which does not insert the data to the database, the data I collect with a bootstrap modal and pass them to the php file using ajax. The error comes at the time of using the script, I think it is correct, but I do not execute the actions.
This is the script I use:
<script type="text/javascript">
$(document).ready(function(){
$('#confirm').click(function() {
var tk = $("#task").val();
var dt = $("#date").val();
var at = $("#amount").val();
var st = $("#status").val();
$.ajax({
type: "POST",
url: "insert.php",
data: {"task": tk, "date": dt, "amount": at, "status": st},
success: function (msg) {
$("#task").val("");
$("#date").val("");
$("#amount").val("");
$("#status").val("");
}
});
});
});
</script>
And this is the modal:
<div class="modal fade" id="exampleModal" 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">New task</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body" id="task_insert">
<div class="form-group">
<label for="recipient-name" class="form-control-label">Task:</label>
<input type="text" required class="form-control" id="task">
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Date:</label>
<input class="form-control" required type="text" id="date">
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Amount:</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<input type="number" class="form-control" required id="amount">
<div class="input-group-addon">€</div>
</div>
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Status:</label>
<input type="text" class="form-control" id="status" >
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="confirm" class="btn btn-success" data-dismiss="modal">Confirm</button>
</div>
</div>
</div>
</div>
Thanks to everyone for your support
Hope this will help You
add jquery at top of page:
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
then write your ajax script and get your value in insert.php page like:
$task = $_POST['task'];
echo $task;
if still not work then take form inside modal and submit form using jquery.
I've a modal dialog.
<div id="myLoginModal" 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">Войти в учетную запись</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" method="post" action="">
<div class="form-group">
<label class="col-md-4 control-label" for="login">Логин</label>
<div class="col-md-4">
<input id="login" name="login" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="password">Пароль</label>
<div class="col-md-4">
<input id="password" name="password" type="password" class="form-control input-md" required="">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="loginBttn" class="btn btn-success" data-dismiss="modal">Войти</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button>
</div>
</div>
</div>
...and have menu.php file.
<?php
$login = $_POST['login'];
$password = $_POST['password'];
echo $login.$password;
How can I get and load in div element user's login and password from modal dialog when he is pressing submit button?
I've tried to write that, but it's not working - exception "undefined index $login and $password".
$(document).ready(function() {
$("#loginBttn").click(function() {
$("#content").load('menu.php');
});
});
You can submit the form and use the success callback:
$(document).ready(function() {
$("#loginBttn").click(function() {
$.post('menu.php', $("#myLoginModal form").serialize(), function(html){
$('#content').html(html);
}, 'html')
});
});
EDIT: Also you can check https://api.jquery.com/jquery.post/
I've just used PHP Tools for VS and I did it!
The problem was the default settings for the php interpreter v7.1 !
Here i added one form with data model in codeigniter views page
<a class="handCursor " href="javascript:void(0)" id="franchise">Franchisee </a>
<!-- Modal -->
<div class="modal fade" id="franchisee_signup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form action="<?php echo base_url();?>general/general_form" method="POST" name="signup">
<div class="modal-header bg-primary">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><i class="fa fa-desktop"></i> Request For Franchisee Program</h4>
</div>
<div style="clear: both;"></div>
<div class="modal-body clearfix">
<div class="bk_lft" style="width:100%;">
<div class="bk_gr" style="width:100% !important">
<div class="contact_form2">
<div class="bk_roominfo">
<div class="clearfix"></div>
<div class="frm_clmn">
<label>First Name: <em style="color:#F00;">*</em></label>
<input name="first_name" id="txt_name" type="text">
<input name="form_type" id="company_name" type="hidden" value="franchise">
</div>
<div class="frm_clmn1">
<label>Last Name: <em style="color:#F00;">*</em></label>
<input name="last_name" id="txt_lname" type="text">
</div>
<div class="frm_clmn">
<label>Phone: <em style="color:#F00;">*</em></label>
<input name="mobile" id="txt_mobile" type="text">
</div>
<div class="frm_clmn1">
<label>Email: <em style="color:#F00;">*</em></label>
<input name="email" id="txt_email" type="text">
</div>
<div class="frm_clmn1" style="width:100%;">
<label>Message:<em style="color:#F00;">*</em></label>
<textarea name="message" id="txt_message" cols="" rows="" style="resize:none;"></textarea>
</div>
<div class="bk_bt" style="float:left; margin-top:12px;">
<button type="submit" name="send_contact_enq" id="send_contact_enq" value="Continue" style="float:left;">Send</button>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
This is the form and we add the insert query in controller
public function general_form()
{
$post = $this->input->post();
unset($post['send_contact_enq']);
$insert_id = $this->custom_db->insert_record('corporate_form_reqlist',$post);
redirect(base_url()."general/index");
}
after submitting the form while inserting into db and we redirect to front page . we need before redirect from controllers is there is any possible to show the success popup after close the popup message redirect happened .
we tried all my logic which i know but not get the correct response
try passing some value as param and give success message by checking that in redirected page..
redirect(base_url()."general/index?status=success");
and in general/index file
if(isset($_GET['status']) && $_GET['status'] == "success"){
echo "Successfull Message";
}
if($insert_id=='success'){//change success based on the returned value of the model
echo "<script>
alert('Success');
window.location.href='".base_url('general/index')."';
</script>";
}
You can use ajax function for your form that will send data to PHP to execute general_form tasks without redirecting. PHP returns true if successfully inserts record to db and javascript then triggers alert() or prompt() and windows.location = "your redirection link"
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.
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