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.
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 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?
I have a Button called "Add New Menu" in my HTML page , onclick i am opening the Modal which contain a form and some <select></select>elements.
like this.
<button class="btn btn-success" onclick="add_menu()"><i class="glyphicon glyphicon-plus"></i> Add New Menu</button>
Here is my 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">Menu Form</h3>
</div>
<div class="modal-body form">
<form id="form" class="form-horizontal" name="form">
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Menu Title</label>
<div class="col-md-9">
<input name="menu_title" placeholder="Menu Title" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Parent Menu</label>
<div class="col-md-9">
<select name="parent_id" id="parent_id" class="form-control">
<option value=""> -- Select Parent Menu -- </option>
</select>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
If you have checked i have <select name="parent_id" id="parent_id" class="form-control"> in a form inside modal and having single option.
Now when user click on "Add New Menu" button i am calling the below function which is in Javascript.
function add_menu()
{
AppendMenuTitles();
$('#modal_form').modal('show'); // show bootstrap modal
$('.modal-title').text('Add Menu'); // Set Title to Bootstrap modal
}
function AppendMenuTitles(){
// ajax delete data to database
$.ajax({
url : "<?php echo site_url('insoadmin/menu/getMenus')?>/",
type: "POST",
dataType: "JSON",
success: function(data)
{
$.each(data.menus, function(i, item) {
//console.log(data[i].expert_name);
$('#parent_id').append($('<option>', {
value: data.menus[i].menu_id,
text : data.menus[i].menu_title,
}));
});
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error getting Menus , Please try again');
}
});
}
here everything works fine, i am getting data through an ajax but the problem is , each time user clicks on the "Add New Menu" button it keep appending the options to my select box, when it should be once only.
I dont want to append each time user clicks on the "Add new Menu" button and ya make sure each time user click on the "Add new button" i need to make an Ajax call for compulsory, then append options to the <select>
Another possibility is to test if the select has already the element.
Add element only if it does not exist in the select:
$.each(data.menus, function(i, item) {
if ($('#parent_id option[value="' + data.menus[i].menu_id + '"]').length == 0) {
$('#parent_id').append($('<option>', {
value: data.menus[i].menu_id,
text: data.menus[i].menu_title,
}));
}
});
success: function(data){
$('#parent_id').html('')
$.each(data.menus, function(i, item) {
//console.log(data[i].expert_name);
$('#parent_id').append($('<option>', {
value: data.menus[i].menu_id,
text : data.menus[i].menu_title,
}));
});
},
Put $('#parent_id').html(''), this will remove your older html
You should make the #parent_id empty before you append the code to it.
SO use this.
$('#parent_id').html('')
if you have any predefined values in the select box.add some class to the predefined options.
<select name="parent_id" id="parent_id" class="form-control">
<option class="predefined" value=""> -- Select Parent Menu -- </option>
and remove the rest of the options using jQuery.
$('#parent_id option:not(".predefined")').remove();
i'm having this problem with my codes. what im supposed to achieve is to enable a disabled button with a certain condition. my code is working when the condition is invalid, but if its correct it will not work right away. i have to re click it to be enabled. $sentEmailClients (will be a mysql data if i got it working).
Here's my code
<?php
$sentEmailClients = 'test#test.com';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$email = $_POST["validEmail"];
if ($email === $sentEmailClients) {
echo '
<script>
function enableButton2() {
document.getElementById("addToClient").disabled = false;
}
< /script>
';
} else {
echo 'Please enter a valid email';
}
}
and here's the form BTW i've used Bootstrap for this
<form class="form-horizontal" method='post' data-toggle="validator">
<fieldset>
<div >
<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" id="myModalLabel">Validate My Email!</h4>
</div>
<div class="modal-body">
<label for="validEmail">Email:</label>
<input type="text" class="form-control input-sm " id="validEmail" name = "validEmail" required>
</div>
<div class="modal-footer">
<button class="btn btn-warning btn-lg " id="submit" type="submit text-center" onclick="enableButton2()" >Validate!</button>
<button class="btn btn-success btn-lg " id="addToClient" type="submit text-center" onclick="addClientInformation();" disabled >Submit Information</button>
</div>
</div>
</div>
</div>
</fieldset>
</form>
The function is rendered only when the condition is true, on 1st click you will make its disabled = false and it will get enabled.Instead of triggering the function 'onclick' make it document.ready.
$(document).ready(function(){
$(#id).show()
}
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