Develop Reference

Add a loading gif in button or in the whole form when u click submit form

Well i have a form and when u Submit it it redirects to another page,i would like to add a loader or something when u click the submit button,any help?
<form method="post" action="service.php" id="leadbox-form">
<div class="form-row stageButton">
<div class="col-md-12">
<input type="submit" class="btn btn_form btn-block" id="btnSubmit"name="btnSubmit" val="GET STARTED NOW"/>
</div>

Jquery `.click` Submits all forms

I have a form:
<form class=" id="form-edit_usr" action="edit_usr.php" method="post" enctype="multipart/form-data">
Inside of that form i have another form:
<button id="usrPhoto" class="btn">
<img src="" width='100' height='140'>
</button>
<form id="uploadForm" method="post">
<input type="file" id="uploadPhoto" name="uploadPhoto" data-usr="" style="display: none;"/>
</form>
To the "main" for i have a "submit button"
<input type="submit" class="btn" value="Update" />
</form>
With Jquery i control the file input:
$('#usrPhoto').on('click', function(){
//Check if user is selected
selectedUsr = $('#choosen_usr_email').val();
if(selectedUsr){
//If user is selected open file dialog
$("#uploadPhoto").click();
}
})
My problem is when i press the #userPhoto element,
#uploadPhoto shall open file dialog, but it also submits my main form.
How can i prevent the .click() from submitting all forms/Buttons?

By the HTML specification. You cannot have a form inside another form.
Check your resulting html in your browser's inspector and you will see the "inner form" is missing.
You could break them in 2 separate forms or use pure JS to upload the file.
There's a question (and answers) about it here.

Maybe you can using the jQuery submit function
$('.button').on('click',function(){
$('.formID').submit();
});

How to replace information in a form using jQuery on submit

Here is my form,
<div id="myForm">
<form method="post" id="contact-form" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
<div class="row uniform">
<div class="6u 12u$(medium)">
<input type="text" name="fullname" id="fullname" value="" placeholder="Enter your full name" required />
</div>
<div class="6u 12u$(medium)">
<input type="email" name="email" id="email" value="" placeholder="enter your email address" required />
</div>
<div class="6u 12u$(medium)">
<textarea name="comment" id="comment" value="" placeholder="Enter your message" ></textarea>
</div>
<div class="6u 12u$">
<ul class="actions">
<li><input type="submit" value="Submit" class="special" /></li>
</ul>
</div>
</div>
</form>
</div>
I want to replace form with, thank you for submitting on selecting the submit button, at the moment It just refreshes the page and does not replace the form, I don't want it to refresh the page I want it to just submit and fade in a message saying thank you for submitting your details.
here is my jquery
<script>
$("#contact-form").submit(function(){
$("#myForm").html("thank you for submitting your details.");
});
</script>
Please can you help?

We have to create a ajax call in order to submit without refreshing the page:
$("#contact-form").submit(function(e) {
e.preventDefault();
$.post($(this).attr('action'), $(this).serialize());
$("#myForm").html("thank you for submitting your details.");
});
https://jsfiddle.net/u2gyocj7/1/
Take a look in the network tab to display the POST data

In that case you will want to look at using ajax form. If you submit as it is then it will post back and refresh the page. Ajax will post the data without changing anything on the page.
http://api.jquery.com/jquery.post/
jQuery AJAX submit form
Then, once the data has been sent you can manipulate the DOM as you wish. This will also allow you to show different messages based on whether the data was saved correctly or not, if done correctly.

Formspree (HTML) and JavaScript not working simultaneously. (Toastr library)

I'm using Formspree - https://formspree.io/ to redirect my forms to my email as I'm hosting my website on a static page.
I'm also using an external library Toastr (http://codeseven.github.io/toastr/) to make a small notification appear once the user clicks the 'Submit' button for the form.
The problem is that I cannot get Formspree and Toastr to run at the same time. When I implement both of them, none of the features work.
Code: (Please say if I need to add more for the problem to be clearer).
<form action="http://formspree.io/emailhere" method="POST">
<div>
<div class="row">
<div class="6u 12u(mobile)">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="6u 12u(mobile)">
<input type="email" name="_replyto" id="email" placeholder="Your Email" />
</div>
</div>
<div class="row">
<div class="12u">
<input type="text" name="subject" id="subject" placeholder="Subject" />
</div>
</div>
<div class="row">
<div class="12u">
<textarea name="message" id="message" placeholder="Message"></textarea>
</div>
</div>
<div class="row 200%">
<div class="12u">
<ul class="actions"> //Pressing submit redirects to a 'thank you' page
<li> <input name="submit" type="submit" value="Send" id="submit"/> </li>
<li> <input type="reset" value="Clear Form" class="alt" /> </li>
</ul>
</div>
</div>
</div>
</form>
Now when you press the submit button it redirects you to a Formspring thank you page. When I add the Javascript for the toast notification it does not even do this meaning the JavaScript 'disrupts' the submit button functionality somehow.
$(document).on('click', '#submit', function(evt){
evt.preventDefault();
toastr.success('Thanks for the email, will be in touch promptly.');
});
Thanks for looking.
Edit: So I want it so both of them work together. This is the code for HTML were you can choose the redirect page after you press the submit button:
<input type="hidden" name="_next" value="//site.io/thanks.html" />
I want it so it does not redirect anywhere but does do my JS function notification.

You're preventing the default behavior (to redirect to the form URL) in your click handler. Simply remove
evt.preventDefault();
And it should work (although obviously, since your page is being redirected, the Toastr popup won't be visible).
If you want it to open in a new tab, you should prevent the default behavior (as you do currently) and then open the URL manually.

The best way to get around this is to use a button element instead of the submit input element. This would require you to submit the information to an endpoint of some sort using ajax and then notifying the browser of the submission using your javascript function. All of this is to avoid the redirect that happens when you use the default browser behavior to submit the form. If you don't use ajax, you have to redirect due to default browser behavior.

javascript clear php post return in modal window

I have a small form inside of a modal window. The window pops up when a link is clicked.
The form has 2 buttons, submit and close.
After something is submitted, the form posts to php. Php returns a thank you message. When I click the close button, it clears the info from the form, but it doesn't clear the thank you message, that remains.
How can I accomplish this? Here is my code. Thank you in advance.
The form
<div class="panel3">
<form id="form1" onsubmit="return submitForm2();">
<input type="text" name="url" size="34" />
<textarea placeholder="Please tell us why this should be reviewed." style="resize:none" name="flag" cols="25" rows="5"></textarea>
<br>
<input type="submit" name="submit" value="Submit" />
<input type="button" onclick="formReset()" value="Close" class="trigger3" />
<div class="form_result2"></div>
</form>
</div>
and the script
<script>
function formReset(){
document.getElementById("form1").reset();
}
</script>
Thanks!

Where is the "Thank you" message displaying? If it is inside the "form_result2", the reset() function won't clear the message. That function only clears the form elements. You have to clear the "form_result2" div separately.
You can use
document.getElementsByClassName("form_result2").item(0).innerHTML="";