How to call popup after popup with form submission without refreshing - php

I have one pop popup form after filling that form(validations) then it will call another popup form
This is my form:
<form class="form-horizontal" action="#" method="post" name="mobnumber" enctype="multipart/form-data" id="frm-otp" style="display:none;">
<div class="form-groups">
<div class="col-sm-12">
<input type="text" class="form-control" id="mobileNumber" placeholder="otp" name="mobileNumber" required="required">
</div>
</div>
<div class="form-groups">
<div class=" col-sm-12 text-center">
<!-- <button type="submit" class="btn btn-info">SEND OTP</button>-->
<input type="submit" value="SendOTP'" id="submit" class="btn btn-info" data-toggle="modal" >
</div>
</div>
</form>
OTP Popup form
<!--enter otp-->
<div class="modal fade" id="enter-otp" role="dialog">
<div class="modal-dialog ">
<div class="modal-body">
<form action="ex1.php" method="post" name="otp" enctype="multipart/form-data" novalidate="novalidate">
<div class="form-group">
<input class="form-control" name="userotp" id="userotp" minlength="5" maxlength="5" required="required" placeholder="Enter OTP"
aria-required="true" type="text">
</div>
<input name="loginOTP" value="1" type="hidden">
<div class="form-group text-center">
<input class="btn btn-info" value="Verify" type="submit">
</div>
</form>
</div>
</div>
</div>
<!--enter otp form end-->
Popup calling fine but i want to validate that form form and after that will call popup, but validation is not calling only popup calling..
How to call popup after validating another form with popup and submission using jquery ajax...........I mean after clicking on id submit in first form then open other popup(id=enter-otp)
Ajax:
$(document).ready(function(){
alert("fsdg");
$("#frm-otp").submit(function() {
var mobnum = $(this).val('mobileNumber');
$.ajax({
type: "POST",
url: "<?php echo base_url('verify-mobilenumber'); ?>",
data: {mobnum: mobnum},
success: function(data) {
alert("Form With PopUp Opened");
}
});
});
});
I want mobile number value in second popup.How to put popup in this function

Related

Text & image is not inserted into database through bootstrap modal without page refresh in php mysqli

In PHP MySQLi i have insert text & image in database through bootstrap modal without page refresh but it did not works properly,
(1). page has refreshing
(2). data is not inserted into database.
<div align="right">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#add-record"><span class="glyphicon glyphicon-plus"></span>Add Record Here</button>
</div>
<div id="add-record" class="modal fade " role="dialog">
<div class="modal-body">
<form class="form-horizontal form" action="" method="post" enctype="multipart/form-data" >
<div class="form-group">
<label class="control-label col-md-4">Name:</label>
<div class="col-md-6">
<input type="text" name="sname" class="form-control" placeholder="Enter Student Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4">Photo:</label>
<div class="col-md-6">
<input type="file" name="sphoto" class="form-control">
</div>
</div>
<div class="form-group">
<button type="submit" onclick="addData()" class="btn btn-primary">Add New Record</button>
</div>
</form>
</div>
</div>
add_record.php
<?php
include('dbconn.php');
if(isset($_POST["action"]) && $_POST["action"]=="add"){
$a = $_POST["sname"];
$g = $_FILES["sphoto"]["name"];
$sql = "insert into users(sname,sphoto) value('$a','$g')";
$run = mysqli_query($conn, $sql);
}
?>
custom.js
function addData(){
var formData = new FormData(this);
formData.append('action', 'add');
//alert(formData);
$.ajax({
url: 'add_record.php',
type: 'POST',
data: formData,
success: function(msg){
//alert(msg);
$("#add-record").hide();
$("#response").html(msg);
},
});
}
HTML Page
on the form set an id property id="sform" also change the button property value to type="button" instead of type="submit"
<div align="right">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#add-record"><span class="glyphicon glyphicon-plus"></span>Add Record Here</button>
</div>
<div id="add-record" class="modal fade " role="dialog">
<div class="modal-body">
<form class="form-horizontal form" id="sform" action="" method="post" enctype="multipart/form-data" >
<div class="form-group">
<label class="control-label col-md-4">Name:</label>
<div class="col-md-6">
<input type="text" name="sname" id="sname" class="form-control" placeholder="Enter Student Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4">Photo:</label>
<div class="col-md-6">
<input type="file" name="sphoto" class="form-control">
</div>
</div>
<div class="form-group">
<button type="button" onclick="addData()" class="btn btn-primary">Add New Record</button>
</div>
</form>
</div>
</div>
JS Page
function addData() {
var formData = new FormData($('#sform')[0]);
formData.append('action', 'add');
$.ajax({
method: 'post',
processData: false,
contentType: false,
cache: false,
enctype: 'multipart/form-data',
url: 'add_record.php',
data: formData,
success: function (msg) {
//alert(msg);
$("#response").html(msg);
$('#add-record').modal('hide');
$('#sform')[0].reset()
},
});
}

How to open a pdf file in popup window?

I want to open a pdf file(from database) using onclick event to pass two parameters.
Here is my html
<td class="text-center">
<button data-toggle="modal" data-target="#myModal1" onclick="edit_book1(<?php echo $row['markid'].'/'.$row['appno'];?>)"><i class="glyphicon glyphicon-eye-open"></i></button>
</td>
AJAX
function edit_book1(markid)
{
save_method = 'update';
$('#form2')[0].reset(); // reset form on modals
//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('/users/ajax_edit1')?>/" + markid,
type: "POST",
dataType: "JSON",
success: function(data)
{
console.log(data.file_name);
alert(data);
$('[name="title"]').val(data);
$('#modal_form2').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Upload Images'); // Set title to Bootstrap modal title
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}
modal window
<div class="modal fade" id="modal_form2" role="dialog" >
<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>
<h3 class="modal-title">Book Form</h3>
</div>
<div class="modal-body form">
<!-- <form action="#" id="form1" class="form-horizontal"> -->
<?php $this->load->helper("form"); ?>
<form action="<?php echo base_url();?>upload/do_upload" id="form2" method="post" class="form-horizontal" enctype="multipart/form-data">
<input type="text" value="<?php echo $appno; ?>" name="appno" readonly/>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3"></label>
<div class="col-md-3">
<input name="title" readonly="true" placeholder="Markid" class="form-control" >
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" id="submit" value="Upload" />
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Modal window could not opened. what mistake did I make? Somebody please help me solve the problem. The alert shows correctly but not display the window

how to use submit form on codeigniter?

I want to try no fresh my login after the user insert their username & password. I'm using on submit on form field like this to returning the same function without be refreshing. onsubmit="return login();
view
<?php $this->load->view('header');?>
<body>
<nav class="navbar navbar-default">
<div class="navbar-header">
Store
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="panel panel-default login">
<div class="panel-heading">Sign In</div>
<div class="panel-body">
<form data-toggle="validator" role="form" method="POST" onsubmit="return login();">
<div class="form-group">
<label for="username">Username</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" name="username" id="username" placeholder="Username" required>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>
<input type="password" class="form-control" id="password" placeholder="Password" required>
</div>
</div>
<div class="alert alert-danger text-center" style="display:none;" id="error">
<p>Invalid username or password !!</p>
</div>
<button type="submit" class="btn btn-lg btn-success btn-block" id="login"><span class="glyphicon glyphicon-lock frm-general"></span>Login</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="<?=base_url('assets/js/jQuery-2.1.4.min.js');?>"></script>
<script src="<?=base_url('assets/js/bootstrap.min.js');?>"></script>
<script src="<?=base_url('assets/js/validator.min.js');?>"></script>
<script src="<?=base_url('assets/js/view/login.js')?>"></script>
</body>
</html>
Ajax
$(function(){
$('#login').submit(function(e){
var username = $('#username').val();
var password = $('#password').val();
URL_GET_ACCESS = BASE_URL+"Login_controller/login";
$.ajax({
url: URL_GET_ACCESS,
type: 'POST',
data: 'username='+username+'&password='+password;
}).done(function(ans){
console.log(resp);
if(ans === '0'){
$('#error').show().delay(2000).fadeOut();
}else if(ans === '1'){
window.location.href='<?php echo base_url() ?>home/';
}else{
window.location.href='<?php echo base_url() ?>home/';
}
});
});
return false;
});
I assume the problem is that the submission is being triggered and is taking you to the URL defined by your form action (in this case to itself). To prevent this try using jQuery's e.preventDefault(); as soon as you start your submit function.
Another solution I often use is not using a submit button but instead just a span (<span id='iWillSubmit' class='iLookLikeAButton'>) styled as a button and then attach the submit function to a .on('click') on that span element.

Dynamically inserting a bootstrap modal partial view into a view

I have a bootstrap 2.32 modal form which is kind of long ( see below ). I'd like to implement this as a separate partial view to be dynamically inserted in the HTML of another view ( for maintainability ), but I'm not sure exactly how to do this. I'm working with Codeigniter 2.1.
The button of the main view is:
<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>
Here is what I'd like to store separately as a partial view:
<div id="form-content" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Send me a message</h3>
</div>
<div class="modal-body">
<form class="contact" name="contact">
<fieldset>
<!-- Form Name -->
<legend>modalForm</legend>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="user">User</label>
<div class="controls">
<input id="user" name="user" type="text" placeholder="User" class="input-xlarge" required="">
<p class="help-block">help</p>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="old">Old password</label>
<div class="controls">
<input id="old" name="old" type="text" placeholder="placeholder" class="input-xlarge">
<p class="help-block">help</p>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="new">New password</label>
<div class="controls">
<input id="new" name="new" type="text" placeholder="placeholder" class="input-xlarge">
<p class="help-block">help</p>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="repeat">Repeat new password</label>
<div class="controls">
<input id="repeat" name="repeat" type="text" placeholder="placeholder" class="input-xlarge">
<p class="help-block">help</p>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<input class="btn btn-success" type="submit" value="Send!" id="submit">
Nah.
</div>
</div>
You can do this in any point into a view where you need to load the 'partial' view.
$this->load->view('modal_view');
EDIT: Load dynamic content
In this example I will use an jQuery AJAX call to retrieve the view dynamically.
In your view you have to include a target div to insert the AJAX response.
<div id="modal_target"></div>
The button to load the modal and show.
<button type="button" class="btn btn-primary btn-medium" onclick="get_modal();" >Show Modal</button>
The javascript function that do the magic
<script type="text/javascript">
function get_modal(){
$.ajax({
type : 'POST',
url : '<?php base_url() ?>controler/get_modal',
cache : false,
success : function(data){
if(data){
$('#modal_target').html(data);
//This shows the modal
$('#form-content').modal();
}
}
});
}
</script>
You have also to include in your contoller the function called in AJAX
public function get_modal()
{
$this->load->view('modal_view');
}

Contact form with AJAX ( without pageload )

I am new with AJAX, I have to make a modal contact form that pops up. I have everything the html the css the validation etc. Only the AJAX not, I don't know where to start, please can you help me out. I just want to preventDefault it and without pageload sending the e-mail.
This is the Javascript ( i think only the id is needed I wont post the whole code )
form id = #contact-form
The HTML
<div class="modal fade" id="contact" 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 style="color:#31708f" class="modal-title" id="myModalLabel">Contact</h4>
</div>
<div class="modal-body">
<div class="col-lg-6">
<form role="form" name"contact-form" id="contact-form" method="post" action="contactengine.php">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" id="name" type="text" name="name" />
</div>
<div class="form-group">
<label for="e-mail">E-mail adres</label>
<input class="form-control" id="email" type="email" name="email" />
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input class="form-control" id="subject" type="text" name="subject" />
</div>
<div class="form-group">
<label for="bericht">Message</label>
<textarea class="form-control" id="message" name="message" placeholder="" cols="30" rows="5"></textarea>
</div>
<div class="form-group">
<input class="btn btn-info" id="submit" type="submit" value="Send" />
</div>
</form>
</div>
First, this is not JavaScript: form id = #contact-form.
Basically what you want to do is first making it work without AJAX and JavaScript. You need to have the PHP stuff working on the server.
Then, you use some JavaScript to prevent the Form from being sent (this is with jQuery):
$('#contact-form').on('submit', function(e) {
e.preventDefault();
//Here you send the ajax-request to the php-script.
$.ajax('send.php', {
data: $(this).serialize(),
type: 'POST',
success: function(data) {
alert(data); //for testing
}
});
});
See for example the jQuery documentation about ajax for further information about how to send the request.

Categories