I have a link/popup working with a confirmation box. But now need to migrate it to a checkbox and submit button. I need some assistance with getting the JQuery to work with the form. Any ideas?
https://jsfiddle.net/829mf5qx/2/
<!-- Used with JQuery function below -->
Confirm order?
<!-- Need to edit the Jquery below to work with this code block -->
<div style="margin-top:20px;">
<form name="orderReceived" action="" method="post" onsubmit="return confirm_update();">
<input type='checkbox' name='files' id='1' value='1' /> Confirm order?
<br>
<input type="submit" value="Submit" name="submit">
</form>
</div>
$(document).ready(function() {
$('a[data-confirm]').click(function(ev) {
var href = $(this).attr('href');
if (!$('#dataConfirmModal').length) {
$('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="dataConfirmLabel">Please Confirm</h3></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-primary" id="dataConfirmOK">OK</a></div></div>');
}
$('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
$('#dataConfirmOK').attr('href', href);
$('#dataConfirmModal').modal({show:true});
return false;
});
});
Here is your solution: jsfiddle
$(function(){
$('#submit').click(function(){
if($("#checkbox").is(':checked')){
if(confirm('Are you sure you want to confirm the order?')){
$('#submitHelper').click();
}
}
});
});
Related
I am using 2 buttons to open two separate php pages but I would like to use one function to trigger both the buttons. The AJAX function that gets triggered should check which button was pressed and then open the php page associated with it. Such that "Export Page 1" should open Page 1.php and "Export Page 2" should open Page 2.php.
I am able to open one php page with my AJAX function. Now how do I check which button was pressed so I could open the right php page. How do I achieve this?
<html>
<body>
<div>
<input type ="submit" name="login" id="login" style="float: right; margin-right: 5px;" class= "btn btn-primary" value="Export Page 1" data-toggle="modal" data-target="#loginModal"/>
<input type ="submit" name="login" id="login" style="float: right; margin-right: 5px;" class= "btn btn-primary" value="Export Page 2" data-toggle="modal" data-target="#loginModal"/>
</div>
</body>
</html>
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<label>Username</label>
<input type="text" name="username" id="username" class="form-control" />
<br/>
<label>Password</label>
<input type="password" name="password" id="password" class="form-control" />
<br/>
<button type="button" name="login_button" id="login_button" class="btn btn-primary">Login</button>
<script>
$('#login_button').click(function(){
var username = $('#username').val();
var password = $('#password').val();
if(username != '' && password != '')
{
$.ajax({
url:"Login.php",
method:"POST",
data:{username:username, password:password},
success:function(data){
if(data == 'No')
{
alert("Wrong Data");
}
else
{
$('#loginModal').hide();
window.open("Page 1.php"); //For page 1
// OR window.open("Page 2.php"); //For page 2
}
}
});
}
else
{
alert("Both fields are requried");
}
});
});
</script>
Because IDs must be unique, give each button a different ID
<input type="submit" id="login1" value="Export Page 1"...
<input type="submit" id="login2" value="Export Page 2"...
you can then give both buttons the same event - this would also work if you gave them both the same class and did the event on that class.
Within the event, store the button id somewhere where it can be picked up later by the modal's login button.
Because you're auto-opening the modal, there's a separation from open-dialog with button1/2 to click login on modal, so they're not related. You'll need to store on the modal/global/etc which button was used to open the modal when it's opened so that you can use that value when you actually login.
Let's store it on the modal's login_button:
$("#login1,#login2").click(function() {
$("#login_button").data("source_button", this.id);
});
where this.id will be login1 or login2.
Now when the login_button is clicked, we can see which button it was:
$("#login_button").click(function() {
$.ajax({
method: "POST",
data: { username: username, password: password },
success: function(data) {
$('#loginModal').hide();
var source_button = $("#login_button").data("source_button");
if (source_button == "login1")
window.open("Page 1.php");
else
window.open("Page 2.php");
}
});
});
To make this a little more usable (and less maintenance-heavy), you can make some small changes:
don't use an ID on the page button
code the destination page onto the page button
<input type="submit" class="pagelogin" data-page='page1.php' value="Export Page 1"...
<input type="submit" class="pagelogin" data-page='page2.php' value="Export Page 2"...
then
$(".pagelogin").click(function() {
$("#login_button").data("page", $(this).data("page"));
});
and in the callback
success: function() {
$('#loginModal').hide();
window.open($("#login_button").data("page"))
}
so when you want to add page3 etc you just add a new input with no code changes and keeps the separation of data (the page1.php) from the code (the js), which is always a goodthing(tm).
You can use functions for that:
function openPage(page) {
$.ajax({
method:"POST",
data:{
username:username, password:password
},
success:function(data) {
$('#loginModal').hide();
window.open(page);
}
});
}
In the html:
<input type="submit" onclick="openPage('Page 1.php')" name="login" id="login" style="float: right; margin-right: 5px;" class= "btn btn-primary" value="Export Page 1" data-toggle="modal" data-target="#loginModal" />
<input type="submit" onclick="openPage('Page 2.php')" name="login" id="login" style="float: right; margin-right: 5px;" class= "btn btn-primary" value="Export Page 2" data-toggle="modal" data-target="#loginModal" />
you can use the dataset aswell
make a single function for both buttons use the event parameter to extract the data-page out of the clicked element and pass through it
function submitButtonHandler(e) {
var targetPage = e.target.dataset.page;
console.log('Target is ' + targetPage);
}
window.addEventListener('load', function() {
document.getElementById('button1').addEventListener('click', submitButtonHandler);
document.getElementById('button2').addEventListener('click', submitButtonHandler);
});
<input type="submit" value="Login 1" data-page="Page 1" id="button1">
<input type="submit" value="Login 2" data-page="Page 2" id="button2">
I want to disable submit button when page loads and after finishing the loading of page it becomes active can anyone help me how to do that
<form>
Firstname:
<input type="text">
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Disable the button in HTML and give it an ID - this is assuming you do not need to support browsers with JavaScript disabled.
<form>
Firstname:
<input type="text">
<button id="subbut" type="submit" class="btn btn-primary" disabled>Submit</button>
</form>
Then you can do
jQuery:
$(function() {
$("#subbut").attr("disabled",false); // or removeAttr("disabled")
});
Plain JS
window.addEventListener("load", function() {
document.getElementById("subbut").disabled=false; // or removeAttribute("disabled")
})
Try this once
<form>
Firstname:
<input type="text">
<button type="submit" class="btn btn-primary" disabled>Submit</button>
</form>
<script>
$(document).ready(function(){
$('button').attr('disabled',false);
});
</script>
<form>
Firstname:
<input type="text">
<button type="submit" class="btn btn-primary" disabled="disabled">Submit</button>
</form>
and then in jQuery
<script type="text/javascript">
$(function() {
$('button').attr('disabled',false);
});
</script>
Add disabled="disabled" attribute to your button and this script:
<button type="submit" class="btn btn-primary" disabled="disabled">Submit</button>
<script type="text/javascript">
$(document).ready(function() {
$('button').removeAttr('disabled');
});
</script>
After the page is loaded the ready event will be fired and the disabled button becomes available.
Set your button as disabled
<button id="myButton" type="button" disabled>Click Me!</button>
and on document ready, enable it using below code:
$( document ).ready(function() {
$('#myButton').prop('disabled', false);
});
Step 1:
Inside init method in c#, you can disable the button by applying css dynamically.
controlname.attributes.add("disabled","disable");
Step 2:
Inside pageload, at the end of method, you can enable the button again by applying css dynamically.
controlname.attributes.add("disabled","enable");
I make some form different action within different button
<form id="form" method="post" class="form-horizontal" enctype="multipart/form-data">
<input name="name" class="form-control" type="text" required>
</form>
<button type="button" class="btn btn-primary" onClick="submitForm('<?php echo base_url('order/add');?>')">Submit</button>
<button type="button" class="btn btn-warning" onClick="submitForm('<?php echo base_url('order/print');?>')">Print</button>
Javascript
function submitForm(action)
{
document.getElementById('form').action = action;
document.getElementById('form').submit(
);
}
Then, my required attribute not working. Did I do something wrong? Let me know if there is other solution.
Thanks,
I can't give you a good explanation but you need the submit buttons inside the form.
So if you would have a button like:
<input type="submit" value="Submit">,
it will trigger the required attribute.
#Remn If you would still stay on your structure with submit inside a function you could trigger yourself the validation like:
if ($("form")[0].checkValidity())
{
$("form").submit()
}
and then do something with inputs that are invalid by passing through each required element ( input is set in code ):
$('form :input[required="required"]').each(function()
{
if(!this.validity.valid)
{
$(this).focus();
// break
return false;
}
});
In the below case the invalid inputs will be focused one by one.
The whole code is:
$( function () {
$("body").on("click", "#trigger", function() {
if ($("form")[0].checkValidity())
{
$("form").submit()
}
$('form :input[required="required"]').each(function()
{
if(!this.validity.valid)
{
$(this).focus();
// break
return false;
}
});
});
});
Where #trigger is an id I set on the button to submit, you can make your own functions to achieve your goal I just used on().
I hope it helps!
Please try bellow code. i hope solve your problem.
<html>
<head>
<title>Submit</title>
<script type="text/javascript" language="javascript">
function submitForm(action)
{
document.getElementById('form').action = action;
document.getElementById('form').submit(
);
//alert(document.getElementById('form').action);
}
</script>
</head>
<body>
<form id="form" method="get" class="form-horizontal" enctype="multipart/form-data">
<input name="name" class="form-control" type="text" required="required">
<button type="submit" class="btn btn-primary" onclick="return submitForm('<?php echo base_url('order/add');?>');" id="submit">Submit</button>
<button type="submit" class="btn btn-warning" onclick="return submitForm('<?php echo base_url('order/print');?>');" id="print">Print</button>
</form>
</body>
</html>
I have test your code by adding Javascript part in Script tag it is working fine. And i tested it on Chrome Windows 10.
<form id="form" method="post" class="form-horizontal" enctype="multipart/form-data">
<input name="name" class="form-control" type="text" required>
</form>
<button type="button" class="btn btn-primary" onClick="submitForm('<?php echo base_url('order/add'); ?>')">Submit</button>
<button type="button" class="btn btn-warning" onClick="submitForm('<?php echo base_url('order/print'); ?>')">Print</button>
<script>
function submitForm(action) {
document.getElementById('form').action = action;
document.getElementById('form').submit();
}
</script>
Using javascript's form.submit() function will cause input validation to be bypassed (according to the HTML specification in point 4 of the form submission algorithm). The only way to trigger HTML input validation is to use a click event on a submit button inside the form, either by the user actually clicking, or in javascript with something like form.querySelector('input[type="submit"]').click().
I want to show a Next button once my checkbox is checked. Below is my jquery code for the checkbox. Once the checkbox is checked the Next button should shows up and the Submit button should hide. If the checkbox is not checked, only the Submit button will be shown. I have created the code accordingly but i dont know why the program is not running as it should.
<input type="checkbox" name="checkrecc" ><label>Check this</label>
<script type="text/javascript">
$(document).ready(function() {
var $submit = $("#indrecc").hide(),
$cbs = $('input[name="checkrecc"]').click(function() {
$submit.toggle( $cbs.is(":checked") );
});
});
</script>
<br>
<input type="nextstep" id="indrecc" value="Next" class="btn btn-info btn-block" style="margin-bottom:5px;">
<input type="submit" name="indsubmit" value="Submit" class="btn btn-info btn-block" style="margin-bottom: 5px;">
And the problem with your HTML is type="nextstep", there is no such input type. HTML assign default text type to it.
<input type="nextstep" id="indrecc" value="Next" class="btn btn-info btn-block" style="margin-bottom:5px;">
//^ type="button"
Change it to :
<input type="button" id="indrecc" value="Next" class="btn btn-info btn-block" style="margin-bottom:5px;">
You need to toggle submit button along with the next element.
This should work for you.
$(document).ready(function () {
var $submit = $("#indrecc").hide(),
$cbs = $('input[name="checkrecc"]').click(function () {
$submit.toggle($cbs.is(":checked"));
$('[name=indsubmit]').toggle(!$cbs.is(":checked"));
});
});
DEMO
I have a page using a modal to get the users email and I want to add it to a list of subscribers (which is a Django model). Here is the modal code for that:
<div id="notifications" class="modal hide fade" role="dialog" ara-labelledby="Notification" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h4>Subscribe to Status Notifications</h4>
</div>
<form>
<div class="modal-body">
<input type="email" placeholder="email"/>
<p>This service will notify you by email should any issue arise that affects your plivo service.</p>
</div>
<div class="modal-footer">
<input type="submit" value="SUBMIT" class="btn"/>
</div>
</form>
</div>
I tried to look in the Twitter Bootstrap doc but it really is minimal. I want to POST the data to a Django view that's listening forPOST` requests.
This is the bare essential. I am using regex to compare the format of the email before storing the email id. So if the email does not match the regex the view returns an Invalid Email. So I would like to notify the user about that within the modal itself. But I really have no idea as to how to do this. Someone please help.
UPDATE 1
Tried this based on karthikr's answer:
<form id="subscribe-email-form" action="/notifications/subscribe/" method="post">
<div class="modal-body">
<input type="email" placeholder="email"/>
<p>This service will notify you by email should any issue arise that affects your service.</p>
</div>
<div class="modal-footer">
<input id="subscribe-email-submit" type="submit" value="SUBMIT" class="btn" />
</div>
</form>
<script>
$(function(){
$('subscribe-email-form').on('submit', function(e){
e.preventDefault();
$.ajax({
url: "/notifications/subscribe/",
type: "POST",
data: $("subscribe-email-form").serialize(),
success: function(data){
alert("Successfully submitted.")
}
});
});
});
</script>
There is something that is confusing me. What about the onclick event of the modal button?
I got it! I added name="Email" in the line <input type="email" placeholder="email"/>
The Django field is looking for the Email Field. So in my Django view the code is:
request.POST.get("Email", '')
So specifying the field name helps. But it takes me to the URL where I am posting. I want it to display a alert in the same page.
UPDATE 2
So part 1 is working. As in the posts are working. Now I need to show a modal for the success or failure.
Here's what I am trying. So I created this modal with a textarea:
<div id="subscription-confirm" class="modal hide fade in" aria-hidden="true">
<div class="modal-header">
<label id="responsestatus"></label>
</div>
</div>
And the JavaScript:
<script>
$(function(){
$('#subscribe-email-form').on('submit', function(e){
e.preventDefault();
$.ajax({
url: 'notifications/subscribe/',
type: 'POST',
data: $('#subscribe-email-form').serialize(),
success: function(data){
$('#responsestatus').val(data);
$('#subscription-confirm').modal('show');
}
});
});
});
</script>
So the modal comes up, but the data is not set into the label field of the modal.
You need to handle it via ajax submit.
Something like this:
$(function(){
$('#subscribe-email-form').on('submit', function(e){
e.preventDefault();
$.ajax({
url: url, //this is the submit URL
type: 'GET', //or POST
data: $('#subscribe-email-form').serialize(),
success: function(data){
alert('successfully submitted')
}
});
});
});
A better way would be to use a django form, and then render the following snippet:
<form>
<div class="modal-body">
<input type="email" placeholder="email"/>
<p>This service will notify you by email should any issue arise that affects your plivo service.</p>
</div>
<div class="modal-footer">
<input type="submit" value="SUBMIT" class="btn"/>
</div>
</form>
via the context - example : {{form}}.
I was facing same issue not able to post form without ajax.
but found solution , hope it can help and someones time.
<form name="paymentitrform" id="paymentitrform" class="payment"
method="post"
action="abc.php">
<input name="email" value="" placeholder="email" />
<input type="hidden" name="planamount" id="planamount" value="0">
<input type="submit" onclick="form_submit() " value="Continue Payment" class="action"
name="planform">
</form>
You can submit post form, from bootstrap modal using below javascript/jquery code :
call the below function onclick of input submit button
function form_submit() {
document.getElementById("paymentitrform").submit();
}
You CAN include a modal within a form. In the Bootstrap documentation it recommends the modal to be a "top level" element, but it still works within a form.
You create a form, and then the modal "save" button will be a button of type="submit" to submit the form from within the modal.
<form asp-action="AddUsersToRole" method="POST" class="mb-3">
#await Html.PartialAsync("~/Views/Users/_SelectList.cshtml", Model.Users)
<div class="modal fade" id="role-select-modal" tabindex="-1" role="dialog" aria-labelledby="role-select-modal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Select a Role</h5>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Add Users to Role</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</form>
You can post (or GET) your form data to any URL. By default it is the serving page URL, but you can change it by setting the form action. You do not have to use ajax.
Mozilla documentation on form action