I'm trying to use Bootstrap Modal as my confirm dialog before form submit. However I want to validate first my form before showing the Modal. How can I do that?
This is what I've tried so far:
<script type="text/javascript">
$(function(){
$(".btn-show-modal").click(function(e){
e.preventDefault();
var id = $(this).attr('id');
var modal_id = "dialog-example_"+id;
$("#"+modal_id).modal('show');
});
$(".btn btn-custom").click(function(e) {
var id = $(this).attr('id');
var modal_id = "dialog-example_"+id;
$("#reservationForm").submit();
$("#"+modal_id).modal('hide');
});
});
</script>
<form class="form" method="POST" action="unit-reservation.php" id="reservationForm">
<div class="form-horizontal">
<div class="control-group">
<label class="control-label"><b>Firstname (*):</b></label>
<div class="controls">
<input type="text" name="customerfname" required />
</div>
</div>
<div class="control-group">
<label class="control-label"><b>Middlename (*):</b></label>
<div class="controls">
<input type="text" name="customermname" required />
</div>
</div>
<div class="control-group">
<label class="control-label"><b>Lastname (*):</b></label>
<div class="controls">
<input type="text" name="customerlname" required />
</div>
</div>
<div class="control-group">
<label class="control-label"><b>Email Address (*):</b></label>
<div class="controls">
<input type="email" name="customeremailaddress" required />
</div>
</div>
<div class="control-group">
<label class="control-label"><b>Address:</b></label>
<div class="controls">
<input type="text" name="customeraddress" required />
</div>
</div>
<div class="control-group">
<label class="control-label"><b>Telephone Number:</b></label>
<div class="controls">
<input type="tel" name="customertelnumber" />
</div>
</div>
<div class="control-group">
<label class="control-label"><b>Mobile Number:</b></label>
<div class="controls">
<input type="number" step="any" min="0" name="customermobilenumber" required /
</div>
</div>
</div>
<input type="hidden" value="<?php echo $user; ?>" name="user_id">
<button id="<?php echo $code; ?>" class="btn btn-custom btn-show-modal" data-toggle="modal">Reserve Now</button>
</form>
<div class="modal hide fade" id="dialog-example_<?php echo $code; ?>">
<div class="modal-header">
<h5>Confirm Reservation</h5>
</div>
<div class="modal-body">
<p class="modaltext">Are you sure you want to reserve unit: <?php echo $code; ?>?</p>
</div>
<div class="modal-footer">
No
Yes
</div>
</div>
The problem is that you submit your form when you click on your modal-button because it has the same class as the modal anchor.
$(".btn-show-modal").click(function(e){ ...
$(".btn btn-custom").click(function(e) {...
You have to add another class to your modal anchor for the submit.
Yes
and call this for your submit click handler:
$(".btn-show-modal").click(function(e){ ...
$(".btn-submit").click(function(e){}
Like this the submit action is only triggered by your modal anchor. You have to be careful if you use classes for css-styling and the same classes for javascript selectors. A better approach is to give those buttons (if only used once) an id so the javascript can access it more quickly. And keep the .btn, .btn-custom for the css only.
Related
I'm trying to build a User interface of an application where user could add ul and li element when clicking on add question, I successfully managed to develop the front end part here's a preview:
but the problem is when saving this to the database which is so overwhelming I'm stuck at this, is there any way to save the data to an array so I can display them with php, any idea is welcomed.
here's the jquery code:
wrapper.on("click", "button", function(e){
e.preventDefault();
var parent = $(this).parent().parent().parent().parent().parent().parent();
var parentID = $(this).attr('element-id');
var elementID = 1000000000000000000*Math.random();
parentIDs.push(elementID);
if($(this).attr('class') == "add_field_button btn btn-success"){
if(parent.find('ul').length){
parent.find('ul').first().append(`
<li>
<div class="panelcb white-box">
<div class="form-horizontal form-material">
<div class="form-group">
<label class="col-md-12">Question</label>
<div class="col-md-12">
<input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
</div>
<div class="form-group">
<label class="col-md-12">Response</label>
<div class="col-md-12">
<input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
</div>
<div class="col-sm-4">
<button class="delete_field_button btn btn-error" >Delete</button>
</div>
</div>
</div>
</div>
</div>
</li>`);
}else{
$(this).closest('li').append(`
<ul><li>
<div class="panelcb white-box">
<div class="form-horizontal form-material">
<div class="form-group">
<label class="col-md-12">Question</label>
<div class="col-md-12">
<input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
</div>
<div class="form-group">
<label class="col-md-12">Response</label>
<div class="col-md-12">
<input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
</div>
<div class="col-sm-4">
<button class="delete_field_button btn btn-error" >Delete</button>
</div>
</div>
</div>
</div>
</div>
</li></ul>`);
}
}else if($(this).attr('class') == "delete_field_button btn btn-error"){
parent.remove();
}
Thanks is advance.
Well...
If the whole user-interative-area, I'd call a playground, can be put inside a container:
<div id='playground'>
.. all the ul's and li's..
</div>
And if you've got a form or something else:
<form action='/' id='form-playground' method='post'>
<textarea id='playground-container' name='playground' class='hidden'>
</textarea>
<input type='submit' value='Save My Playground'>
</form>
Then on submit you can copy the contents of the the playground to a hidden textarea:
$(document).ready(function () {
$('#form-playground').on('submit', function () {
$('#playground-container').html($('#playground').html());
return true;
});
});
Or perhaps an AJAX post:
$.post( PostUrl, { playground: $('#playground').html() } );
I have 2 buttons for which I want to call same modal but the text on the modal should be changed depending on which button was clicked. How do I do that please?
<div>
<a class="button" data-open="new-modal"
(click)="confirmModal(studentInfo)>Edit</a>
<a class="button" data-open="new-modal"
(click)="confirmModal(studentInfo.id)>Delete</a>
</div>
Modal
<div class="reveal" data-reveal id="new-modal">
<h5>Edit Student Info?</h5> // I want to add "Delete student info
here too"
<div class="secondary button-group">
<a class="button" href="#">Yes</a>
<a class="button" href="#">No</a>
</div>
</div>
pass a second parameter to your confirmModal() function, and store the content in a variable accessible by the modal within your ts or js code, and use this variable to load relevant configuration in your modal
I have done bootstrap modal in different page means modal in another page(modal.html) and button in different page(career.php) it's working but same modal i want to link for multiple buttons. How to do that i am not getting
<script>
$(document).ready(function(e){
$('#btnModal') .click(function(){
//using ajaz post
$.post('modal.html' ,function(xx){
$('#tmpModal').html(xx) //fill div tmpmodal with modal.html content..!!
//calling modal
$('#testModal').modal('show');
})
})
});
</script>
<div class="modal fade" id="testModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4>Apply Now</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleFormControlInput1">Role</label>
<input class="form-control" type="text" placeholder="Dest" readonly>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Name</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Full Name" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Email</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Phone</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Phone" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Comment</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleFormControlFile1">Upload File</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</div>
<div class="modal-footer">
<div class="btn btn-danger" data-dismiss="modal">Close</div>
<button class="btn btn-primary" onclick="contact_send();">SEND</button>
</div>
</div>
</div>
</div>
I cannot for the life of me figure out why my form will not serialize when using jQuery prior to posting via AJAX.
Whenever I debug the javascript 'formData' results in "".
I've tried this with the form id's hardcoded and it still results in the blank serialization, tried .get(0) at the end of the $(this) selector and tried without underscores in names and to no avail.
When debugging the selector contains the inputs as children, and I've serialized forms before where the inputs are nested in other elements without problems.
The reason I'm dynamically selecting the form with $(this) and not hardcoding the event handlers is that this will be part of the application where we will bolt on additional forms so I'd like it to be concise and maintainable.
Any insight is greatly appreciated.
My code is below:
HTML/PHP view (using CodeIgniter)
<div class="tabs-content">
<section role="tabpanel" aria-hidden="false" class="content active" id="details">
<div class="login-form">
<p class="lead">To change basic personal details such as name and email address use this form.</p>
<form action="<?php echo base_url() ?>ajax/update_details" method="POST" name="updateDetailsForm" id="updateDetailsForm">
<div class="row">
<div class="small-12 columns">
<label>First Name
<input type="text" placeholder="e.g. John" name="first_name" value="<?php echo $first_name ?>" />
</label>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<label>Surname
<input type="text" placeholder="e.g. Smith" name="last_name" value="<?php echo $last_name ?>" />
</label>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<label>Email
<input type="email" placeholder="e.g. me#example.com" name="email" value="<?php echo $email ?>" />
</label>
</div>
</div>
<input type="submit" class="button small" value="Update" />
</form>
</div>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="password">
<div class="login-form">
<p class="lead">You can use the form below to update your account password.</p>
<p>Passwords must be between 8 and 50 characters in length.</p>
<form action="<?php echo base_url() ?>ajax/update_password" method="POST" name="updatePasswordForm" id="updatePasswordForm">
<div class="row">
<div class="small-12 columns">
<label>Old Password <small>Required</small>
<input type="password" name="oldpw" />
</label>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<label>New Password <small>Required</small>
<input type="password" name="newpw1" />
</label>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<label>Confirm New Password <small>Required</small>
<input type="password" name="newpw2" />
</label>
</div>
</div>
<input type="submit" class="button small" value="Update Password" />
</form>
</div>
</section>
</div>
Javascript
$('form').on('submit', (function (e) {
e.preventDefault();
var url = $(this).attr('action');
$(this).html(loadingHTML);
var formData = $(this).serialize();
$.ajax({
type: 'POST',
url: url,
data: formData,
done: function (data) {
$(this).html(data);
}
});
}));
Swap lines
var formData = $(this).serialize();
$(this).html(loadingHTML);
I am passing data-id to twitter bootstrap model and I can assign that to a hidden field just fine however based on what data-id has, I am trying to echo a text and I am stuck
This is how I am calling the modal, you will notice the first link is passing goal_holidays in data-id and the second one is passing goal_house in data-id
<a class="open-GoalDialog" data-toggle="modal" href="#editGoals" data-id="goal_holidays">Edit</a>
<a class="open-GoalDialog" data-toggle="modal" href="#editGoals" data-id="goal_house">Edit</a>
What I need to do
On the modal i need to put a check like this. Please note that this is not the actual code i am using, this is the dummy code i wrote to explain what i need to do
if(data-id = goal_holidays){
echo "holiday";
}else if (data-id = goal_house){
echo "house";
}
This is what my modal looks like
<div id="editGoals" class="modal hide fade" data-keyboard="false" data-backdrop="static">
<div class="modal-header">
<a type="button" class="close" data-dismiss="modal" aria-hidden="true">×</a>
<h3 style="font-size: 18px;" id="myModalLabel"><img src="assets/img/logo_icon.png">Goal Tracker</h3>
</div>
<div class="modal-body">
<div id="message2"></div>
<form action="dashboard-goals-ajax.php" method="post" name="goaldataform" id="goaldataform"
class="form-horizontal goaldataform">
<div class="control-group">
<label class="control-label goal_label_text"><?php _e('Goal Target'); ?>
</label>
<div class="controls">
<div class="input-prepend input-append">
<span class="add-on">$</span><input type="text" class="input-medium" name="goal_target"
id="goal_target" value="">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label goal_label_text"><?php _e('How much have you saved towards your goal?'); ?>
</label>
<div class="controls">
<div class="input-prepend input-append">
<span class="add-on">$</span><input type="text" class="input-medium" name="goal_progress"
id="goal_progress" value="">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label goal_label_text"><?php _e('Goal deadline'); ?>
</label>
<div class="controls">
<div class="input-prepend input-append">
<span class="add-on"></span><input class="input-medium datex" type="text" id="goalDeadline"
name="goalDeadline">
</div>
</div>
</div>
<input type="hidden" name="goal_type" id="goal_type" value=""/>
<input type="hidden" name="goal_target_submitted">
</form>
</div>
<div class="modal-footer">
<button data-complete-text="Close" class="dt-btn btn-yellow dt-btn-1 pull-right"
id="goaldatasubmit" name="goaldatasubmit"><?php _e('Submit'); ?></button>
<div class="gap-10"></div>
</div>
</div>
and this is the JS I am using the assign the data-id to hidden field goal_type
$(document).on("click", ".open-GoalDialog", function () {
var myGoal = $(this).data('id');
$(".modal-body #goal_type").val(myGoal);
I will really appreciate if anyone can help me in how to echo a text based on the goal_type data.
There is an error in your comparisonpart.
if(data-id = goal_holidays){
echo "holiday";
}else if (data-id = goal_house){
echo "house";
}
goal_holidays and goal_house are strings, not variables.
So, you have to replace the code like that;
if(data-id == "goal_holidays"){
echo "holiday";
}else if (data-id == "goal_house"){
echo "house";
}
I want to disable all the form components so that it can't be edited when view button is clicked.
this is my form
<form action="#" class="form-horizontal" >
<div class="form-group">
<label for="fieldname" class="col-md-3 control-label">Name</label>
<div class="col-md-6">
<input type="text" ng-model="newItem.customSelected" typeahead="name as name.name for name in members | filter:{name:$viewValue}" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="fieldhname" class="col-md-3 control-label">House name</label>
<div class="col-md-6">
<input type="text" ng-model="newItem.customSelected1" typeahead="house_name as house_name.house_name for house_name in family | filter:{house_name:$viewValue}" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="" class="col-md-3 control-label"><?php echo $this->lang->line('label_family_id'); ?></label>
<div class="col-md-6">
<input type="text" ng-model="newItem.customSelected2" typeahead="fm as fm.family_reg_no for fm in family | filter:{family_reg_no:$viewValue}" class="form-control" />
</div>
</div>
<div class="col-md-3"></div>
</form>
and this is my button
<input type="button" class="finish btn-success btn" ng-click="view(newItem)" value="view"/>
Rather than handling it at per-field level, you can put all form elements into fieldset and use ng-disabled to disable the whole fieldset.
you can use fieldset tag by surrounding your buttons with a fieldset and using ng-disabled attribute:
<form action="#" class="form-horizontal" >
<fieldset ng-disabled="isClicked">
<!--your form here --!>
</fieldset>
</form>
now all that left is in the view(newItem) function do:
$scope.view = function(newItem){
$scope.isClicked = true;
// Your code here and set it to false when your are done with it
}
You could use an overlay and have a ng-show on it or you could add to each input ng-disabled
Set a scope variable when the view button is clicked.
Use ng-disabled in combination with the scope variable to disable the fields.