Validating a form in Twitter Bootstrap Model - javascript

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

Related

Two forms in a single page and with Bootsrap modal using Codeigniter

$('#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");
}

Processing form after modal submit in JSP

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?

PHP not detect input name after check bootstrap confirm delete

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.

Bootstrap 3 modal form not triggering jQuery .submit()

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

input focus issue using bootstrap modal

I'm using a pretty straightforward modal window for a webapp. For some reason whenever I click on any of the inputs in the modal, the focus is set to the input before it. However, if I click on the label, the focus is set to the proper input. Scratching my head on this one...
Here's the markup:
<!--Admin Approve Modal -->
<div id="admin_approve_modal" class="modal hide fade" role="dialog" aria-labelledby="adminApproveModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="adminApproveModalLabel">Approval For Order #<span class="js-orderID"></span></h3>
</div>
<form id="admin_approve_form" name="admin_approve_form" method="post" action="admin-form-submit.php?query=adminApprove">
<div class="modal-body">
<label for="poNumber" />Factory PO #:
<input type="text" id="poNumber" name="poNumber" />
<script>
$(function() {
$( "#etaDate" ).datepicker();
});
</script>
<label for="etaDate" />ETA Date:
<input type="text" id="etaDate" name="etaDate" value="" />
<label for="comments" />Comments:
<input type="text" id="comments" name="comments" value="" />
<div id="admin_validation_error" name="admin_validation_error"></div>
<!--Hidden inputs-->
<input type="hidden" id="adminOrderID" name="orderID" value="" />
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button type="submit" class="btn btn-primary">Approve</button>
</div>
</form>
</div>
<!-- end modal -->
There is no conflicting javascript (to my knowledge) on the page. Any ideas?
i cannot reproduce your bug, can you setup a jsfiddle? It worked for me with clean bootstrap files.
Well I'm dumb. For some reason I thought labels were self-closing... they aren't!

Categories