I want to open bootstrap modal after click "Submit" button in Form-1 and if "Send" button in the modal is clicked then send an email and also save the Form-1 into the database.
If I close it should Reject and Redirect to some page.
Thanks in advance.
PHP Code for Auto-generate Code
<?php
$this->db->select_max('id');
$result= $this->db->get('numform')->row();
$result-id++;
$result = "Num-".date('Ym')."-".$result->id;
?>
Form-1
<form method="post" action="<?php echo base_url(); ?>controller/method" onsubmit="return openModal();">
<section class="content">
<input type="submit" class="form-control" name="aValue" id="aValue" value="<?php echo $result; ?>" readonly> // This is form auto generating number
<button type="submit" class="btn btn-primary">Submit</button>
</form>
//Javascript Code
function openModal(){
var aValue= document.getElementById('aValue').value;
// I want place the above value(aValue) to the modal and fill up and some fields in the modal and save to submit into the database
}
<!--Bootstrap Modal-->
<!--Email Modal -->
<div id="emailModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<form action='<?php echo base_url(); ?>controller/method' method="POST">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Send email to User</h4>
</div>
<div class="modal-body">
<label class="col-md-3">Email</label>
<div class="form-group col-md-9">
<input type="email" class="form-control" name="emailId" id="emailId" placeholder="Email ID" value="" required>
</div>
<label class="col-md-3">CC:</label>
<div class="form-group col-md-9">
<input type="email" class="form-control" name="emailCC" id="emailCC" placeholder="CC" required>
</div>
<label class="col-md-3">Message</label>
<div class="form-group col-md-9">
<textarea name="message" id="message" class="form-control" placeholder="Message" required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-info" id="send_email">Send</button>
</div>
</div>
</form>
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
If I Click send it how to end a message and Save the form -1 into the database. If I close it should save the data.
1) Instead of the submit button in the form you can use simple HTML button and bind the click event of it. In click event grab the value of the aValue and set in the hidden value in the form (which is in the modal).
$('#YOUR_BUTTON_ID').on('click',function(e){
e.preventDefault();
var aValue= $('#aValue').val(); //grab the value
$('#HIDDEN_INPUT').val(aValue); //set this is has hidden value in the form
$('#emailModal').modal("show"); // open the modal
});
2) Now in the opened modal bind the two event : 1) To submit the form 2) To reject the form
$(document).on('click','#ACCEPT_BTN_ID',function(){
$('#MODAL_FORM_ID').submit(); //submit the form
});
$(document).on('click','#REJECT_BTN_ID',function(){
window.location.reload(); //refresh the same page.
});
3) In the method of controller you can write sub-functions for sending message and saving the form values.
Hope this helps.
Related
$('#form1').on('click',function(e){
e.preventDefault();
$('#emailModal').modal("show"); // open the modal
});
$(document).on('click','#sendEmail',function(){
$('#UpdateEmailModal').modal("show"); // open the modal
}
});
$(document).on('click','#UpdateSendEmail',function(){
$('#form1method').submit();
});
$(document).on('click','#Update_Close',function(){
$('#form2method').submit();
});
$(document).on('click','#Close',function(){
window.location = "<?php echo base_url(); ?>controller/page_method";
});
<!--Form 1-->
<form action="<?php echo base_url(); ?>mycontroller/method1" method="post" id="form1method">
<input type="text" name="name">
<input type="email" name="email">
<button type="submit" id="form1">Submit</button>
</form>
<!--Form 2 -->
<form action="<?php echo base_url(); ?>mycontroller/method2" method="post" id="form2method">
<input type="text" name="name">
<input type="email" name="email">
<button type="submit" id="form2">Submit</form>
</form>
<!--Modal 1 -->
<!--Email Modal -->
<div id="emailModal" 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">Send Email to User</h4>
</div>
<div class="modal-body">
<label class="col-md-3">To Email</label>
<div class="form-group col-md-9">
<input type="email" class="form-control" name="email_id" id="email_id" placeholder="Email ID">
</div>
<label class="col-md-3">Message</label>
<div class="form-group col-md-9">
<textarea name="message" id="message" class="form-control" placeholder="Message"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-info btn-block" id="sendEmail"><strong>Update</strong></button>
<button class="btn btn-danger pull-right btn-block" data-dismiss="modal" id="Close"><strong>Close</strong></button>
</div>
</div>
</div>
</div>
<!--Modal 2 -->
<!--Email Status and Update Modal -->
<div id="UpdateEmailModal" 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">Update Form</h4>
</div>
<div class="modal-body">
<p>Click Submit to Update and Send Email (or) Click Cancel to Update</p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-info btn-block" id="UpdateSendEmail"><strong>Submit</strong></button>
<button class="btn btn-danger pull-right btn-block" data-dismiss="modal" id="Update_Close"><strong>cancel</strong></button>
</div>
</div>
</div>
</div>
enter code here
<?php
*//My Controller*
public function method1(){
$result = $this->model->update_model();
if($result == true){
$this->session->set_flashdata("msg","post_page");
redirect("post_page");
}}
public function method2(){
$result = $this->model->update_model2();
if($result == true){
$this->session->set_flashdata("msg","post_page");
redirect("post_page");
}}
*`//My Model`*
public function update_model(){
$data = array(
'name' => $this->input->post("name"),
'email' => $this->input->post("email")
);
$this->db->update('user',$data);
}
public function update_model2(){
$data = array(
'name' => $this->input->post("name"),
'email' => $this->input->post("email"),
'status' => "1"
);
$this->db->update('user',$data);
}
?>
When clicking edit form, edit page will open, in that i have two forms (Form1 and Form2). Only one form should appear in a page. When i click submit of Form1 a Modal1 will open and clicking Update button the Modal2 will open. Based on the two buttons(Submit and Cancel) in Modal2 a response should happen. Like if i click "Submit" method2 in Controller should execute or else if i click method1 should execute. How do do it in Controller?. I don;t know if i doing it correctly. If you guys have any idea to solve this, please help me out.
Thanks in Advance
You can make each of your submit button with a different name. So when you press the submit button, like in the form1, form1submit_btn, the page reload and simply check the post input :
You button
<button type="submit" name="form1submit_btn" class="btn btn-info btn-block" id="sendEmail"><strong>Update</strong></button>
Both of your form action have the same action action="<?base_url("myController/method")?>, and you treat them directly in the controller :
function method(){
//form 1 has been submit
if($this->input->post("form1submit_btn")){
$result = $this->model->update_model();
if($result == true)
$this->session->set_flashdata("msg","post_page");
}
//form 2 has been submit
if($this->input->post("form2submit_btn")){
$result = $this->model->update_model2();
if($result == true)
$this->session->set_flashdata("msg","post_page");
}
redirect("post_page");
}
I'm new to modals, i want to submit a form and then show success popup if user form is validated else want to show error popup. Also my it should execute php file for sending the email to user in background.
So, far i'm successful in executing the php file in background and show the model when user clicks on submit button.
But i want the popup to show when the form is validated. Also i want to use type="submit" instead of type="button" for form submit.
Here's my code :
<!-- javascript code to execute php file -->
<script type="text/javascript">
function executePhp() {
$.post("sendmail.php");
return false;
}
</script>
<!-- javascript code ends -->
<form class="well" action="" method="">
<div class="form-group col-md-6">
<label for="inputPassword4">Full Name</label>
<input type="text" name="name" class="form-control" id="inputPassword4" placeholder="Enter Full Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Phone Number</label>
<input type="number" name="mobile" class="form-control" id="inputEmail4" placeholder="Enter Mobile Number">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Email</label>
<input type="email" name="email" class="form-control" id="inputPassword4" placeholder="Enter Your Email">
</div>
</div>
<button type="button" class="btn btn-primary" onclick="executePhp()" style="margin-left: 3%;"
data-toggle="modal" data-target="#myModal">Check</button>
</form>
<!-- Code for popup -->
<!-- Modal -->
<div class="modal fade mymodal" id="myModal" role="dialog">
<div class="modal-dialog mydialog">
<!-- Modal content-->
<div class="modal-content mycontent">
<div class="modal-header myheader">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Message</h3>
</div>
<div class="modal-body mybody">
<br>
<br>
<h3>Thanks for choosing</h3>
<h4>
Your details will arive by email.
Sit back, we'll get back to you soon.
</h4>
<br>
<br>
</div>
<div class="modal-footer myfooter">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Code for popup end-->
Thank you.
You can use Jquery to achieve this.
In you php you can have two variables before the validation like:
$popup_message = "";
$popup_message_color = "";
Now if the form is validated you can display the modal like this:
$popup_message = "login successfully.";
$popup_message_color = "success";
//Open Modal
echo "<script type='text/javascript'>
$(document).ready(function(){
$('#myModal').modal('show');
});
</script>";
In the modal body you can display the message and color.
<div class="modal-body">
<p class="text-<?php echo $popup_message_color; ?>"><?php echo $popup_message; ?></p>
</div>
The same would be done for if validation fails, just change your message and color to $popup_message_color = "danger";
Note If you are validation to another page then the modal should be in that page and you change the close buttons to a link to go back.
Also php script should come after you loaded the jquery.
I have a specific request from a customer. I'm more a designer than a developer. I'm working on a WordPress theme with a custom contact form integrated.
I need to place a link on the "Submit" button that when clicked will open a confirm popup. In the popup, the user would find a checkbox with a text saying "I declare that I have read, understood and accepted the information on the processing of my personal data".
Once they check the checkbox, a "Continue" button on the bottom of that popup should enable (prior to checking the checkbox, the Continue button is disabled). When the Continue button is clicked, the popup would go away and the form will be launched.
Here's how I would like the popup to look like:
Here's the HTML of the form:
<form method="post" name="contactform" class="peThemeContactForm">
<div class="col-md-5 col-sm-5 col-xs-12 animated hiding" data-animation="slideInLeft">
<div class="form-group">
<input type="text" name="author" class="form-control input-lg" placeholder="<?php _e("Full Name",'Pixelentity Theme/Plugin'); ?>" required />
</div>
<div class="form-group">
<input type="email" name="email" class="form-control input-lg" placeholder="<?php _e("Email",'Pixelentity Theme/Plugin'); ?>" required />
</div>
<div class="form-group">
<input type="text" name="phone" class="form-control input-lg" placeholder="<?php _e("Phone",'Pixelentity Theme/Plugin'); ?>">
</div>
</div>
<div class="col-md-7 col-sm-7 col-xs-12 animated hiding" data-animation="slideInRight">
<div class="form-group">
<textarea name="message" class="form-control input-lg" placeholder="<?php _e("Message",'Pixelentity Theme/Plugin'); ?>" required ></textarea>
</div>
</div>
<input type="submit" class="btn btn-custom up animated hiding" value="<?php _e("Send Message",'Pixelentity Theme/Plugin'); ?>" data-animation="fadeInUpBig">
</form>
You are use Bootstrap Modal. If the control that should close the dialog is placed within the modal, then just add data-dismiss="modal" attribute to this control. To lock or unlock Continue button use handler for the chechkbox click event.
Also you could implement another sequence of user actions that is demonstrated below.
$(".modal").on('show.bs.modal', lock);
$("#MyModal [type=checkbox]").click(lock);
$("#MyModal .btn-primary").click(function() {
$("#MyForm").submit();
});
function lock() {
var flag = $("#MyModal [type=checkbox]").prop('checked');
if (!flag) {
$("#MyModal .btn-primary").attr("disabled", "disabled");
} else {
$("#MyModal .btn-primary").removeAttr("disabled");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Modal -->
<div id="MyModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<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">Privacy Policy</h4>
</div>
<div class="modal-body">
<div class="checkbox">
<label>
<input type="checkbox"> I declare that I have read, understood and accepted the information on the processing of my personal data.
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" disabled="disabled">Continue</button>
</div>
</div>
</div>
</div>
<!-- Form with confirmation request -->
<form id="MyForm" action="/">
<p>You will have to accept our privacy policy to submit the form data.</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MyModal">Submit</button>
</form>
The Submit button opens dialog box that contains the checkbox for confirmation. The Continue button submits the form, but it is disabled until the checkbox will be checked.
You should do it with JavaScript jQuery. So install the jQuery plugin first.
Put the popup inside the form like this and change the submit button to a onclick event:
<form method="post" name="contactform" class="peThemeContactForm">
<div class="col-md-5 col-sm-5 col-xs-12 animated hiding" data-animation="slideInLeft">
<div class="form-group">
<input type="text" name="author" class="form-control input-lg" placeholder="<?php _e("Full Name",'Pixelentity Theme/Plugin'); ?>" required />
</div>
<div class="form-group">
<input type="email" name="email" class="form-control input-lg" placeholder="<?php _e("Email",'Pixelentity Theme/Plugin'); ?>" required />
</div>
<div class="form-group">
<input type="text" name="phone" class="form-control input-lg" placeholder="<?php _e("Phone",'Pixelentity Theme/Plugin'); ?>">
</div>
</div>
<div class="col-md-7 col-sm-7 col-xs-12 animated hiding" data-animation="slideInRight">
<div class="form-group">
<textarea name="message" class="form-control input-lg" placeholder="<?php _e("Message",'Pixelentity Theme/Plugin'); ?>" required ></textarea>
</div>
</div>
<a onclick="popupshow()" class="btn btn-custom up animated hiding" data-animation="fadeInUpBig"><?php echo _e("Send Message",'Pixelentity Theme/Plugin'); ?></a> //Submit-Button
//PopUP
<div id="popup" style="display:none;">
<input type="checkbox" id="checkbox" onchange="checkboxclick()">
<button type="submit" id="mycheckbox" disabled>Continue</button>
</div>
</form>
Now do the Javascript Functions (Put them in your head section):
<script>
function popupshow() {
document.getElementById("popup").style = "";
}
function checkboxclick() {
if (document.getElementById("mycheckbox").checked) {
$('#mycheckbox').prop('disabled', false);
} else {
$('#mycheckbox').prop('disabled', true);
}
}
</script>
This should show the popup if you click the submit-button and should activate the continue-button if the checkbox is checked.
I am using Codeigniter Framework and now, i have a modal with a form inside of it. Now in my modal footer, i put the submit form for it. It is already outside of the modal. Now why is it doesn't submit in my controller?. I put a var_dump in my controller for it to echo when it was submitted, I am sending it thru without javascript.
Here is my modal with form:
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Category</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<form id="frm_category" class="form-horizontal" method="POST" action="Admin_controls/insertCategory">
<div class="form-group">
<label for="cat_name">Category: </label>
<input type="text" class="form-control" name="cat_name">
</div>
<div class="form-group">
<label for="cat_desc">Description: </label>
<input type="text" class="form-control" name="cat_desc">
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" value="submit" form="frm_category">Add</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
Here is my controller:
public function insertCategory() {
$data = array (
'Category_name' => $this->input->post('cat_name'),
'Category_desc' => $this->input->post('cat_desc')
);
var_dump($data);
}
You should place your submit button before </form>. other wise you need javascript to submit your form
you can use the following code
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Category</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<form id="frm_category" class="form-horizontal" method="POST" action="Admin_controls/insertCategory">
<div class="form-group">
<label for="cat_name">Category: </label>
<input type="text" class="form-control" name="cat_name">
</div>
<div class="form-group">
<label for="cat_desc">Description: </label>
<input type="text" class="form-control" name="cat_desc">
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" value="submit" onclick="myFunction()">Add</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
<script>
function myFunction() {
document.getElementById("frm_category").submit();
}
</script>
You should change the button type to submit. So it can submit the form.
Submit button should be inside of form tag
I have modified your modal code. And I hope it will work
×
Add Category
Category:
Description:
Add
Close
If you want to insert a data then you should follow this step:
To POST or GET you should have add that action attribute in side the <form> tag.
Now For post you need to give address of your controller into the <form action = "<?= base_url('your_controller/your_function') ?>" method="post">.
Now at the controller side:
public function your_function(){
// By using this you can get all posted data at once
$your_post_data = $this->input->post();
// By using this you get the post data seperatedly
$your_post_data = $this->input->post('user_name'); // your form input name
//Now for sending data to the model for database querys
$this->load->model ('your_model');
$data = $this->your_model->your_model_function($your_post_data);
}
if you don't want to load model every time then you can add the model in to __construct
public function __construct() {
parent::__construct ();
$this->load->model ('your_model');
// So now on you just need to call the model name in your function.
}
public function your_function(){
// By using this you can get all posted data at once
$your_post_data = $this->input->post();
// By using this you get the post data seperatedly
$your_post_data = $this->input->post('user_name'); // your form input name
$data = $this->your_model->your_model_function($your_post_data);
}
Now Inside the model:( i am giving example for insert)
public function your_model_function($your_post_data ){
$this->db->insert_batch('your_table_name', $your_post_data );
//If you want to understing of query execuation
// for thie you need to enable the log from config.php form config folde.
//Remove comment from log_message after emeble the log message
//log_message('debug', 'Last Insert query: ' . print_r($this->db->last_query(), TRUE).' Inserted Data: '.print_r($your_post_data, TRUE));
if($this->db->affected_rows() > 0){
return TRUE;
} else {
return FALSE;
}
}
For Mode detail regarding querys please visit this CI documentation
Your Code should be:
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Category</h4>
</div>
<form id="frm_category" class="form-horizontal" method="POST" action="<?= base_utl('Admin_controls/insertCategory') ?>">
<div class="modal-body">
<div class="container-fluid">
<div class="form-group">
<label for="cat_name">Category: </label>
<input type="text" class="form-control" name="cat_name">
</div>
<div class="form-group">
<label for="cat_desc">Description: </label>
<input type="text" class="form-control" name="cat_desc">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" value="submit" form="frm_category">Add</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
Your controller should be:
public function insertCategory() {
// You should have to validate befor insert
$this->load->model ('your_model');
$your_post_data = $this->input->post();
$insert_status = $this->your_model->your_model_function($your_post_data);
if($insert_status == TRUE){
//return to your view or load the view
$this->load->view ('your_view_directory');
} else {
// Send Error Message
}
For Validation Visit this CI documentation
I am using bootstrap admin theme in one of my project. I have a popup modal in one of the php page and i have a registration form in that popup, now when i enter the details and click on submit, the data is actually being inserted into the database and modal closes by default, but the page doesn't refreshes, as i have a table of registered members in the page, i only can see that entry when i refresh the page, and again when i refresh the page, it asks me to reload the page or close the alert box, when i click on reload, the entry goes into the database for two times, i am attaching my code, please help, i am new to stack overflow and bootstrap as well.
Modal code
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Add New Member </button>
<!-- Modal -->
<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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Add New Member</h4>
</div>
<div class="modal-body">
<form method="post">
<fieldset>
<div class="form-group">
<label>First Name</label>
<input name="fname" class="form-control" placeholder="First Name" type="text" required>
</div>
<div class="form-group">
<label>Last Name</label>
<input name="lname" class="form-control" placeholder="Last Name" type="text" required>
</div>
<div class="form-group">
<label>Email Address</label>
<input name="email" class="form-control" placeholder="Email Address" type="email" required>
</div>
<div class="form-group">
<label for="h-input">Cell Number</label>
<input name="cell" type="text" class="form-control" placeholder="XXX XXX XXXX (Enter number without space)">
</div>
<div class="form-group">
<label>Member Type</label>
<select class="form-control" name="membertype">
<option value="Member">Member</option>
<option value="Guest">Guest</option>
</select>
</div>
<div class="form-group">
<label>Member Status</label>
<select class="form-control" name="memberstatus">
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
</fieldset>
<div>
<input name="addmember" class="btn btn-primary" value="Add New Member" type="submit"/>
</div>
</form>
<?php
if(isset($_POST['addmember'])) {
require('config.php');
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];
$cell = $_POST['cell'];
$mtype = $_POST['membertype'];
$mstatus = $_POST['memberstatus'];
$addmember = "INSERT INTO members (fname, lname, email,cellnumber,type,status,regdate) VALUES (:fname,:lname,:email,:cell,:mtype,:mstatus,CURDATE())";
$q = $conn->prepare($addmember);
$q->execute(array(
':fname'=>$fname,
':lname'=>$lname,
':email'=>$email,
':cell'=>$cell,
':mtype'=>$mtype,
':mstatus'=>$mstatus,
));
if(!$q) {
echo "Error: Member not added.";
}
else {
header("Location: addMembers.php");
}
}
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
i have created this modal file as a separate file and included in my main php file where table of registered members is printed.
Location requires an absolute path. Check the second to last note in the Notes section.
http://php.net/manual/en/function.header.php
When you manually refresh the page you are just resending the form data that was submitted which is why you get two entries in the DB.