Develop Reference

When I disable submit button (after form submit) the page does not load

I have an HTML form which submits to another page via POST. Nothing special about it, except that after the form validates I try to hide and/or disable the submit button so that it cannot be double-submit, while also telling the user the next page might take a while to load.
The relevant code is:
jQuery(document).ready(function () {
jQuery("form#form").submit(function() {
var result = validate();
jQuery(this).find('input[type=submit]').prop('disabled', true);
jQuery("#submit-button-wrapper").html(jQuery("#submit-button-wrapper").html()+
"<br/><br/><span style='margin: 25px; padding: 5px; background: yellow; "+
"width: 100%; font-weight: bold;'>Loading... this may take a few minutes! "+
"<i class='fa fa-spinner fa-spin' style='color: blue;'></i></span>");
return result;
});
});
function validate() {
return true; // Does stuff, then returns a simple true or false
}
By request, here is the (very simple) button wrapper HTML:
<div class="col-sm-12" id="submit-button-wrapper">
<input type="submit" value="One More Step" />
</div>
When the I remove the which changes the button wrapper's HTML, the form submits just as you'd expect. When I have that line in, however, it still calls the next page and executes that code, without the displayed page ever changing.
I have tested in both Chrome and Firefox, so I know it's not a browser issue, but this is really weird behavior. What am I doing wrong?
My goal: (1) validate the user's input, (2) give the user a clue that the page is going to take a while to load and (3) display the output from the action="complete.php" page once the PHP on it has run.

Maybe you can achieve this with $ajax and show results on the same page.
Send POST data to /some.php
After sending data, give feedback to user changing button behavior
When the task is complete, receive data and verify success or error and act accordingly. If OK, change button text to "complete!" or something else, and append response data to some div. If NOT OK, give feedback as well.
In code:
$("form#form").submit(function(e) {
e.preventDefault();
$.ajax({
method: "POST",
url: "some.php",
data: $(this).serialize(),
dataType : 'json',
timeout: 2000,
cache: false,
afterSend: function() {
/*change button behavior here*/
},
success: function(result) {
if (result === "ok"){
/*maybe append data to div and update button text to complete*/
} else {
/*if result not ok, send feedback*/
}
}
});
});
BTW: ajax documentation http://api.jquery.com/jquery.ajax/

When you return true (if validated) then the form is submitted. However, you're changing the DOM / submit button wrapper and essentially removing the submit button, right? Likely that is what is causing your problem. Leave the submit button wrapper alone. If you want to display a message display it as an overlay or hide the submit button wrapper and show the message wrapper in its place, don't remove the submit button altogether.

I know that you're just showing a slight jQuery and HTML portion of the script, but that isn't quite enough to figure out your problem. Since not all of it seems to be there because you mention action="complete.php" but I don't see that within your jQuery or HTML sample of code. So I have a few questions of my own.
Is the form small or large. If it's a small form then why aren't you displaying the output on the submit page? You could do that with what you currently have but a single PHP or ASP page could save you on amount of pages to make and what not. As a side note, depending on size of the form, you can do the validation on same page or continue to use action="" for it if large.
Do you have need for a database file or are you saving to one? If you do/are, you could write to the DB file, have the submit open the next page and view what was saved in the database on that new page. Again, you can probably use a single PHP or ASP page.
This last part sounds more valid for your purpose. You could use location.href="http://www.domain.com/home.html";
or use window.location("http://www.domain.com/home.html"); to redirect to the new page.
On another matter about some of the comments others made.
You don't exactly need the + unless you're dividing each of those out into their own separate lines when you could just use one line to do that. That's probably what confused Rajesh about the '. In fact I'm not sure why you yourself mentioned the + when referring to Rajesh comment about "concat string" and "append" ,because those two have nothing to do with the +. In fact to take a guess, he might have been referring to your jQuery("#submit-button-wrapper").html(jQuery("#submit-button-wrapper").html() which kinda looks like a concat string.
Speaking about append, not really needed unless for example you're doing something like giving the user the option to add rows to a form question.

Form method and lightbox (or alternative)

I've been looking over an older post trying to work out a solution for showing the confirmation PHP in a lightbox.
As my knowledge on javascript and ajax is close to zero - well, it IS zero - I'm hoping someone might elaborate.
<form method="post" action="contact.php">
Is the basic form method. Would I be able to use something like Tinybox2 and simply add
TINY.box.show({url:'submit.php',post:'id=16',width:200,height:100,opacity:20,topsplit:3})
to the action, rather than a php?
Cheers, Trin

If you want to use TinyBox, you need to serialize your form before you post it. One of the fastest and nonpainful way to do this to use jQuery (Just add reference if you haven't done this.)
TINY.box.show({url: $("form").prop("action"), post:$('form').serialize(),width:200,height:100,opacity:20,topsplit:3})
First one grabs the "action" url from your form, and the second method makes your form to be posted with TinyBox.
This code should display a tinybox when user submits the form:
$("form").submit(function( event ) {
event.preventDefault();
TINY.box.show({
url: $("form").prop("action"),
post: $('form').serialize(),
width:200,
height:100,
opacity:20,
topsplit:3
});
return;
});
Just put this inside
<script type="text/javascript">
$(document).ready(function () {
// Here.
}
</script>
block.

Alternative of this script in jQuery?

I use the following script to get the content of the remaining.php.
The drawback is that sometimes it doesn't work or it is kinda slow to display the text. Is there any other way of doing this ?
Thank you
$(document).ready(function(){
$("#SubmitButton").click(function (){
$('#remaining').load('remaining.php');
});
});

You could directly include the contents of remaining.php into the initial markup but make it hidden by applying display:none; style to the #remaining element. Then when the button is clicked simply show it:
$(function() {
$('#SubmitButton').click(function () {
$('#remaining').show();
});
});
Of course if you need to pass some parameters to the script which will depend on some javascript variables that are known only at the moment the button is clicked you will need to use AJAX as you are currently doing.

If "sometimes it doesn't work or it is kinda slow", the problem is probably the server you are using, not your javascript code.
The javascript code you're showing us here doesn't really do anything that could be slow, it only binds an event on a submit button. However, what could be slow is waiting for the answer from your web server when sending a request for remaining.php
From there, there is a thousand of reasons why your web server could be slow. Maybe you could post the content of your remaining.php file so we can see what is going on in there.

This isn't really a fault of jQuery, but the speed of return from your server. Perhaps there's a better way to handle it instead of fetching a full page?
For example, if your content request was only retrieving a message, you could return JSON from your server and have jQuery handle the data:
$(document).ready(function(){
$("#SubmitButton").click(function (){
$.post('remaining.php',
null,
function(data) {
// do stuff with your JSON result
});
});
});

When you're using .load(), you're sending a request to the server to get your content, which is why it can seem slow. I'm not sure why it sometimes won't work , but I would venture to guess that you may be clicking $("#SubmitButton") before $(document).ready fires.
Depending on your implementation, you may be able to refactor your application so that the text you want to display is pre-loaded on the page.

Could the current page not be affected when submitting a form from it?

I want to submit a form inside a page, but don't want the page to do any refresh. I just want to submit some data to the server. How can I make it?

Use AJAX for this. Cross-browser support for AJAX is a pain, and I'm not willing to demo it without a framework, but here's a jQuery example:
$("#myform").submit(function (e) {
e.preventDefault();
$.post(
url,
$(this).serialize(),
function () { /* What to do when the data is successfully posted */ }
);
});

You can just use an ajax post() to submit (POST/GET) the data to a page where the server uses this data. Also add e.preventDefault(); to stop refreshing the page from the forms action

AJAX jquery Form Post not working

I am trying to post a form using ajax.
Right now, the code I have is
$("#sub").click(function() {
var tag = $("#tagbar").val();
var opinion = $("#op").val();
alert($("#expressform").serialize());
$.post("dbfunctions.php", $("#expressform").serialize());
});
This works, but it takes a long time to post and add to the database (thats what dbfunctions does) compared to how long it took before, when I was using a form action and refreshing the page. Why is this?
Also, if I remove the alert, the script stops working completely. I can't figure out anyway in which this makes sense.
Thanks

Make sure you cancel the default action of the button by returning false from the click handler:
$("#sub").click(function() {
$.post("dbfunctions.php", $("#expressform").serialize());
return false;
});
Also instead of subscribing for submit button clicks, it's better to subscribe to the submit event of the corresponding form directly:
$("#expressform").submit(function() {
$.post(this.action, $(this).serialize());
return false;
});
This way you are no longer hardcoding any urls in your javascript files. You are simply unobtrusively AJAXifying your form.

You can use below function for submit the data
through Ajax form Submit
$('#form1').ajaxForm({
success:function(response){
$('#save_data').html(response);
});
$('#btnSubmit').click(function() {
$('#form1').submit();
});