I'm trying to work on bootstrap's alert. Particulary this:
<div class="alert alert-success" role="alert">...</div>
I wanted it to pop-up on the modal after I successfully hit the submit button. How do I do that?
Here are my codes:
<!--____________________________ADD AGENT________________________-->
<div class="modal fade" id="addAgent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<form role="form" action="php/addAgent.php" method="POST">
<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">Add Agent</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="fullname">Full Name</label>
<div class="row">
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="First Name" name="fname">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="Middle Name" name="mname">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="Last Name" name="lname">
</div>
</div>
</div><!--___________FORM GROUP_____________-->
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<label for="sel1">Type:</label>
<select class="form-control" name="agentType" id="sel1">
<option value="1">Broker</option>
<option value="2">Agent</option>
<option value="3">Sub-Agent</option>
</select>
</div>
<div class="col-sm-4">
<label for="sel1">Project:</label>
<select class="form-control" id="sel1">
<option>Mezza</option>
<option>Tivoli Gardens</option>
<option>Verawoods Residences</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label for="email">Email Address</label>
<input type="email" class="form-control" name="email" id="email">
</div>
<div class="col-sm-4">
<label for="contact">Contact Number</label>
<input type="text" class="form-control" name="contact" id="contact">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label for="homeAdd">Home Address</label>
<input type="text" class="form-control" name="homeAdd" id="homeAdd">
</div>
</div>
</div>
</form>
</div>
</div> </div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="submit"/>
<button type="button" class="btn btn-default" data-dismiss="modal"> Close</button>
</div>
</div>
</div>
</div><!--______________________ADD AGENTS MODAL_______________________-->
<!-- Button trigger modal -->
Here's my PHP:
<?php
$user="root"; $pass=""; $db="realesate";
$db = new mysqli('localhost', $user, $pass, $db);
//check connection
if ( $db->connect_error) {
die('Connect Error: ' . $db->connect_errno . ': ' . $db->connect_error );
}
//insert data
$sql = "insert into agent (AgentFName , AgentMName , AgentLName , AgentContact , AgentEmail, AgentAddress , agentType)
values (
'{$db->real_escape_string($_POST['fname'])}' ,
'{$db->real_escape_string($_POST['mname'])}' ,
'{$db->real_escape_string($_POST['lname'])}' ,
'{$db->real_escape_string($_POST['contact'])}' ,
'{$db->real_escape_string($_POST['email'])}' ,
'{$db->real_escape_string($_POST['homeAdd'])}' ,
'{$db->real_escape_string($_POST['agentType'])}')";
$insert = $db->query($sql);
if ($insert) {
echo"";
}
//close connection
$db->close();
?>
How do I do that after I successfully added the values on my database?
If you're not using AJAX to call addAgent.php and your PHP and HTML are in one file, then one way would be to set a variable in your PHP like so:
if ($insert) {
$alert_success = '<div class="alert alert-success" role="alert">...</div>';
}
Then anywhere in your HTML you can add a line that echos that variable.
<?php
echo $alert_success;
?>
You could use a submit handler for your form:
// Add an ID to your form
$( "#formID" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
term = $form.find( "input[name='s']" ).val(),
url = $form.attr( "action" );
// Send the data using post
var posting = $.post( url, { s: term } );
// Put the results in a div
posting.done(function( data ) {
$(".modal-body, #orModalBodyID"). append('<div class="alert alert-success" role="alert">Post Success</div>')
});
});
You can find more information on jQuery's post() method # their API documentation website
Related
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 !
With reference to my previous question > Displaying php echo $row data into bootstrap modal form
I have set the "SAVE" button data-id when I clicked on the row edit button with $(".saveContact").attr('data-id', result[0]['id']);
In the jQuery for #editForm submit, I've retrieved the id by var uid = $(".saveContact").attr('data-id'); and pass it to updateContact.php, however nothing happens when I click on the save button and the modal just stays open. May I know if I did not pass the id correctly or my UPDATE statement is incorrect in updating the database?
tables.php modal
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<form class="form-horizontal" method="POST" id="editForm" role="form">
<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">Edit Contact</h4>
</div>
<div class="modal-body">
<div class="form-group animated fadeIn">
<label for="nameInput" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="name" name="name" class="form-control" id="nameInput" placeholder="Name" required>
</div>
</div>
<div class="form-group animated fadeIn">
<label for="companyInput" class="col-sm-2 control-label">Company</label>
<div class="col-sm-10">
<input type="company" name="company" class="form-control" id="companyInput" placeholder="Company" required>
</div>
</div>
<div class="form-group animated fadeIn">
<label for="posInput" class="col-sm-2 control-label">Position</label>
<div class="col-sm-10">
<input type="position" name="position" class="form-control" id="posInput" placeholder="Position/Job Title">
</div>
</div>
<div class="form-group animated fadeIn">
<label for="contactInput" class="col-sm-2 control-label">Contact Number</label>
<div class="col-sm-10">
<input type="number" name="contact" class="form-control" id="contactInput" placeholder="Office/Mobile Number" data-error="Please enter a valid mobile number" required>
</div>
</div>
<div class="form-group animated fadeIn">
<label for="emailInput" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" name="email" class="form-control" id="emailInput" placeholder="Email Address">
</div>
</div>
<div class="form-group animated fadeIn">
<label for="genderInput" class="col-sm-2 control-label">Gender</label>
<div class="col-sm-10">
<input type="gender" name="gender" class="form-control" id="genderInput" placeholder="Male/Female">
</div>
</div>
<div class="form-group">
<input type="hidden" name="id" class="form-control" id="idInput" placeholder="ID">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="editContact" type="submit" class="saveContact btn btn-primary" data-id="">Save</button>
</div>
</div>
</form>
</div>
</div>
jQuery to submit form
$("#editForm").submit(function(e){
e.preventDefault();
var uid = $("#idInput").val();
var name = $("#nameInput").val();
var company = $("#companyInput").val();
var position = $("#posInput").val();
var contact = $("#contactInput").val();
var email = $("#emailInput").val();
var gender = $("#genderInput").val();
var dataForm = 'name=' + name + '&company=' + company + '&position=' + position + '&contact=' + contact + '&email=' + email + '&gender=' + gender + '&id=' + uid;
$.ajax({
type: 'POST',
url: '../admin/dataprocess/updateContact.php',
data: dataForm,
success: function(html){
if(html == "success"){
$('#contactsTable').dataTable().reload();
$('#editModal').modal('toggle');
}
}
});
});
updateContact.php
<?php
include("dbconnect.php");
$name = $_POST['name'];
$company = $_POST['company'];
$position = $_POST['position'];
$contact = $_POST['contact'];
$email = $_POST['email'];
$gender = $_POST['gender'];
$id = $_POST['id'];
$stmt = $link->prepare("UPDATE businesscontact SET name = ?, company = ?, position = ?, phone = ?, email = ?, gender = ? WHERE id = $id");
$stmt-> bind_param("ssssss", $name, $company, $position, $contact, $email, $gender);
if($stmt->execute()){
echo "success";
}else{
echo(mysqli_error($link);
}
mysqli_close($link);
?>
as I stated in comments;
echo(mysqli_error($link); // <- theoretically missing a )
is causing the error here, since there was a missing bracket.
#Fred-ii- Thanks for pointing that out, it was indeed just that that caused the update to not work. – Kayden"
You don't even need the "echo" here anyway.
Just use the following, which is all you need. It will trigger an "echo"'d error on its own:
mysqli_error($link);
Since "echo" is a language construct, brackets are not required.
http://php.net/manual/en/function.echo.php
Error reporting would have helped you here.
http://php.net/manual/en/function.error-reporting.php
I have a real interesting problem with a bootstrap modal, let's start from beginning.
I have a list of inventories - with the function that you can book, edit, view, and delete. See image
All my functions works except edit, the problem I have with edit is that I can only edit one item before a page refresh. If I click edit on the first row that image shown is used on any subsequent edit I do - if I click the 2 or 3 row edit I get the first image - see popup image
This is the javascript to call the modal to pop up, as you can see I'm clearing the form first - making an Ajax call to get the data for that button. I only have a problem with an image not being able to show the actual image for an item.
//
// Edit the inventory
//
function edit_inventory(id)
{
save_method = 'update';
$('#form')[0].reset(); // reset form on modals
$('.form-group').removeClass('has-error'); // clear error class
$('.help-block').empty(); // clear error string
$('[name="image_name]').empty();
//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('warehouse/inventory/ajax_edit/')?>/" + id,
type: "GET",
dataType: "JSON",
success: function(data)
{
var previewimage = data.image_name;
$('[name="image_name]').val(data.image_name);
$('[name="id"]').val(data.id);
$('[name="user_id"]').val(data.user_id);
$('[name="name"]').val(data.name);
$('[name="description"]').val(data.description);
$('[name="type_id"]').val(data.type_id);
$('[name="certifications_id"]').val(data.certifications_id);
$('[name="condition_id"]').val(data.condition_id);
$('[name="location_id"]').val(data.location_id);
$('[name="location_in_warehouse"]').val(data.location_in_warehouse);
$('[name="quantity_id"]').val(data.quantity_id);
$('[name="size_id"]').val(data.size_id);
$('[name="skills_required_id"]').val(data.skills_required_id);
$('[name="use_id"]').val(data.use_id);
$('#modal_form').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Edit Inventory'); // Set title to Bootstrap modal title
$("#image_name").fileinput({
uploadUrl: "<?php echo site_url('warehouse/inventory/ajax_fileupload')?>",
deleteUrl: "<?php echo site_url('warehouse/inventory/ajax_deletefile')?>",
showUpload: true,
uploadAsync: true,
// your upload server url
allowedFileExtensions : ['jpg', 'jpeg', 'png','gif'],
overwriteInitial: false,
maxFileSize: 1000,
minFileCount: 1,
maxFileCount: 5,
maxFilesNum: 10,
initialPreview: [
// IMAGE DATA
"<?php echo site_url('assets/uploads/')?>/" + previewimage,
],
initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
initialPreviewFileType: 'image', // image is the default and can be overridden in config below
initialPreviewConfig: [
{caption: previewimage, size: 576237, width: "120px", url: "warehouse/inventory/ajax_fileupload", key: 1},
],
layoutTemplates: {
main1: "{preview}\n" +
"<div class=\'input-group {class}\'>\n" +
" <div class=\'input-group-btn\'>\n" +
" {browse}\n" +
" {upload}\n" +
" {remove}\n" +
" </div>\n" +
" {caption}\n" +
"</div>"
}
});
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}
For each item that I select to edit, I'm calling the backend to get the latest image from the database, each time a new image name is set in
var previewimage = data.image_name;
For the file input, I'm using the krajee bootstrap fileinput library, as I need to upload images. http://plugins.krajee.com/file-input/demo
You would expect by adding the new previewimage variable to the
initialPreview: [
// IMAGE DATA
"<?php echo site_url('assets/uploads/')?>/" + previewimage,
],
It would show a different image - somehow the first edit click done that image resides in the modal and is not cleared.
I have tried several things to clear the modal e.g.
$('#image_name').val('');
$('form').find('input[type=file]').val('');
Nothing works, it seems that I'm not getting the right element to clear or there is something in the krajee bootstrap file input that is not cleared correctly.
This is the code for my modal
<!-- Bootstrap modal -->
<div class="modal fade" id="modal_form" 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">Inventory Form</h3>
</div>
<div class="modal-body form">
<form action="#" id="form" class="form-horizontal" role="form" data-toggle="validator">
<input type="hidden" value="" name="id"/>
<div class="form-body">
<div class="form-group">
<label class="control-label">Select File</label>
<div class="col-md-9">
<input id="image_name" name="image_name[]" type="file" multiple class="file-loading">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Name</label>
<div class="col-md-9">
<input name="name" placeholder="Item Name" class="form-control" type="text" data-validate="true" data-error="Required Field" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Description</label>
<div class="col-md-9">
<input name="description" placeholder="Give a Description" class="form-control" type="text" data-validate="true" data-error="Required Field" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Location in Warehouse</label>
<div class="col-md-9">
<input name="location_in_warehouse" placeholder="Give details on were to find in Warehouse" class="form-control" type="text" data-validate="true" data-error="Required Field" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Type</label>
<div class="col-md-9">
<select id="types" name="type_id" class="form-control">
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Usage</label>
<div class="col-md-9">
<select id="usages" name="use_id" class="form-control">
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Skills Required</label>
<div class="col-md-9">
<select id="skills" name="skills_required_id" class="form-control">
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Certifications</label>
<div class="col-md-9">
<select id="certificates" name="certifications_id" class="form-control">
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Location</label>
<div class="col-md-9">
<select id="locations" name="location_id" class="form-control">
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Quantity</label>
<div class="col-md-9">
<input name="quantity_id" placeholder="Quantity" class="form-control" type="number" data-validate="true" data-error="Only numbers allowed" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Condition</label>
<div class="col-md-9">
<select id="conditions" name="condition_id" class="form-control">
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Item Size</label>
<div class="col-md-9">
<input name="size_id" placeholder="Enter a size of the item" class="form-control" type="text">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I appreciate any help or suggestion to resolve this issue.
Here is the server side code:
switch ($inventory->status) {
case '0':
$row[] = '<img alt="sign in" src="' . base_url() . 'assets/uploads/warehousein.png">';
$row[] = '<a class="btn btn-sm btn-primary" href="javascript:void(0)" title="Book" onclick="book_inventory('."'".$inventory->id."'".')"><i class="glyphicon glyphicon-check"></i> Book</a>
<a class="btn btn-sm btn-success" href="javascript:void(0)" title="Edit" onclick="edit_inventory('."'".$inventory->id."'".')"><i class="glyphicon glyphicon-pencil"></i> Edit</a>
<a class="btn btn-sm btn-info" href="javascript:void(0)" title="View" onclick="view_inventory('."'".$inventory->id."'".')"><i class="glyphicon glyphicon-list-alt"></i> View</a>
<a class="btn btn-sm btn-danger" href="javascript:void(0)" title="delete" onclick="delete_inventory('."'".$inventory->id."'".')"><i class="glyphicon glyphicon-trash"></i> Delete</a>';
break;
As you can see, I add the inventory->id to the button.
just put this code first before you declare file input
$('#selector').fileinput('destroy');
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.