I am displaying a modal after a button click . The code of button for opening a modal is as follows :
<button type="button" name="btnEditIP" data-toggle="modal" data-target="#myModal" class="sultan_btn">Edit IP</button>\
The code of modal is as follows :
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form id="ipForm" class="form-horizontal" role="form" method="post" action="info_edit.jsp">
<div class="modal-header modal-header-warning">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title ">Please Enter IP Address</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="inputName">IP Address</label>
<input type="text" class="form-control" name="ip"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" name="btnSave" id="btnSave" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>
</form>
</div>
</div>
In edit_info.jsp page, I am trying to determine whether the btnSave button is pressed by the following code :
if ((request.getParameter("btnSave") == null) ? false : true) {
out.println("Form submitted");
}
else{
out.println("Form not submitted");
}
Although , I am pressing the Save button in modal , I am always getting this message , "Form not submitted!" .That means , either the form is not submitted or there is an error in pressing button .
I am not sure where is the error . I have tried a lot but could not identified where is the error . Please help me to solve this error .
Please change request.getAttribute("btnSave") to request.getParameter("btnSave").
Because getParameter() returns http request parameters.
EDIT
I am not sure if one would see btnSave server side since the button
name would not be sent ?
We can use type="submit" to send the pressed button's name to the server.
<input type="submit" name="btnSave" value="SAVE"/>
Also Check:
Difference between getAttribute() and getParameter()
Difference between type='button' and type='submit'
How do I call a specific Java method on click/submit event of specific button in JSP?
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 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 have this code for show confirm delete message before send form data:
JS:
$('input[name="S1"]').on('click', function (e) {
var $form = $(this).closest('form');
var checked = $("input:checked").length;
var action = $('select[name="todo"]');
if (action.val() === "delete" && checked) {
e.preventDefault();
$('#confirm').modal({
backdrop: 'static',
keyboard: false
})
.one('click', '#delete', function (e) {
$form.trigger('submit');
});
}
});
HTML Code:
<div class="panel-body">
<form method="POST" role="form" action="#">
<div class="row margin-bt-15">
<div class="col-md-6 col-sm-6 col-xs-12">
<select name="todo" class="contentgroup">
<option value="">choose</option>
<option value="delete">delete</option>
<option value="mark">mark</option>
<option value="unmark">unmark</option>
</select>
<input type="hidden" name="csrf_token" value="MTQzNjU3MDc3NjZPNXFKUmZWVlJWcE9ZNnd4VUZFbmRiSzMzSTZwMzRD">
<input type="submit" value="ok" class="btn btn-primary btn-sm" name="S1" />
</div>
</div>
</div>
<input type="checkbox" name="selected[]" class="check" value="4" />
</form>
</div>
<div id="confirm" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<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">delete</h4>
</div>
<div class="modal-body text-center">
<i class="fa fa-exclamation-triangle text-danger fa-lg flashitmap"></i>
<label>message</label>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-danger btn-sm" id="delete"><i class="fa fa-trash"></i>delete</button>
<button type="button" data-dismiss="modal" class="btn btn-sm">back</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Now in PHP file i check $_POST using isset like this :
if ($_POST['todo'] && isset($_POST['S1']) && $_SERVER['REQUEST_METHOD'] == 'POST'){
echo 'true';
} else {
echo 'false';
always in result I see: false and my php code not detect isset($_POST['S1']) for my input name. how do can fix this ?
NOTE: when i remove bootstrap delete confirm, my form worked true and detect input name isset($_POST['S1']). I think my problem with bootstrap confirm code.
DEMO: http://jsfiddle.net/530j1hmp/2/
Apart form the things mentionned in the comments, there are several other to consider revision in your code.
$_POST['todo'] can be an empty string if the user has not selected an item, because there is value="". In PHP and other languages an empty string evaluates to false. Do you want it like this ?
if you have data in the $_POST array, then there it's a good bet your $_SERVER['REQUEST_METHOD'] equals 'POST'
To the main point: isset($_POST['S1']) will always be false. The element with name S1 is an input with type submit, and as such, it will be submitted ONLY if it is the submitter, ie only if it has been clicked. But with e.preventDefault(), you prevent that action, and the form is submitted through $form.trigger('submit');.
If you really need it, a solution could be to use a hidden field (type="hidden").
For more about which elements get submitted or not, you have the main rule on w3's site. Two other well known elements aren't submitted : radio button and checkbox if they have checkedness == false.
I am trying to get a Bootstrap 3 modal form to trigger a form.submit() in jQuery, but no matter what I try, I can't get it to fire .
<div class="modal fade" id="modal-signup" tabindex="-1" role="dialog" aria-labelledby="modal-signup" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Sign up</h4>
</div>
<div class="modal-body">
<form role="form" action="/" id="modal-signup-form" >
<div class="form-group">
<input type="email" class="form-control input-lg" placeholder="email">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" placeholder="password">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" placeholder="confirm">
</div>
</form>
</div>
<div class="modal-footer">
<p>Already have account ? Sign in here.</p>
<input type="submit" class="btn btn-success btn-block btn-lg" value="Sign up">
</div>
</div>
</div>
</div>
and the JS
$("#modal-signup-form").submit(function( event ) {
event.preventDefault();
alert("made it");
$.ajax({
type: "POST",
url: "adduser.php",
data: $('form.adduser_model').serialize(),
success: function (msg) {
$("#thanks").html(msg)
$("form.noteform").modal('hide');
},
error: function () {
alert("failure");
}
});
return false;
});
I've created a fiddle...
http://jsfiddle.net/menriquez/sreco3jt/
If you hit "Sign Up" and "Sign Up" in the model form, I would expect the event to fire and see the alert, but it doesn't.
It's because the submit button isn't inside the #modal-signup-form form element.
Either add the button to the inside of the <form>, or add an event handler to trigger a submit when the button is clicked:
$(document).on('click', '#modal-signup-form-submit', function (e) {
$('#modal-signup-form').submit();
});
Updated Example
You have to add following submit button code before closing of form tag.
<input type="submit" class="btn btn-success btn-block btn-lg" value="Sign up">
JS Fiddle
I have a form in a modal with some required fields, but when I hit submit the form just reloads and I don't get any message for validation that I am using for submitting the form jQuery, as below :
<script>
$('#InfroTextSubmit').click(function(){
$('#InfroText').submit();
});
</script>
The Twitter Bootstrap Modal Code is :
<!-- Modal1 -->
<div id="myModal1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Edit Introduction</h3>
</div>
<div class="modal-body">
<form id="InfroText" method="POST">
<input type="hidden" name="InfroText" value="1"/>
<table>
<tr><td>Title</td><td><input type="text" name="title" style="width:300px" required="require"/></td></tr>
<tr><td>Introudction</td><td><textarea name="contect" style="width:300px;height:200px"></textarea></td></tr>
</table>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" id="InfroTextSubmit">Save changes</button>
</div>
</div>
<script>
$('#InfroTextSubmit').click(function(){
$('#InfroText').submit();
});
</script>
So how can i Validate the Form and not let the model close and reload if something is wrong with the form ?
Regards,
You don't have to add any script for validating form text fields if you added the required attribute.
Try this
<input type="text" name="title" style="width:300px" required="required"/>
or
<input type="text" name="title" style="width:300px" required/>
You can add "data-dismiss=modal" to the InfroTextSubmit button, and then use 'return false' on the '#InfroTextSubmit' click function to prevent the form from closing. If the form is valid you call 'submit()'.
Button code:
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true" id="save">Save changes</button>
Click function:
$('#save').click(function(){
if ($('#myField1').val()==="") {
// invalid
$('#myField1').next('.help-inline').show();
return false;
}
else {
// submit the form here
$('#InfroText').submit();
return true;
}
});
There a several different approaches to the validation itself.
Working on Bootply: http://bootply.com/60244