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>

angular ng-if automaticly sends a form when true

I have a angular js form and a button that, if pressed, shows the login fields (2 inputs for username and password, and 1 submit button) and another button that hides it.
I've written this simple code below that uses the ng-if directive. it is working fine only problem that after the use press on show login, the div is being shown but the form is being submitted automaticly (without the user press on the submit button).
someone knows why this is happening and how to fix it?
thanks
<form name="loginForm" width="70%">
<br>
<button ng-click="NewConversation=true" >show login</button>
<button ng-click="NewConversation=false" >hide login</button>
<br><br>
<div ng-if="NewConversation">
<input autocomplete="off" name="name" ng-model="name" required placeholder="Name">
<br>
<input autocomplete="off" name="room" ng-model="room" required placeholder="Room">
<br><br>
<button ng-click="updateMsg({name: name,room: room})">Start Talking!</button>
</div>
</form>

Every button inside form tag has default behavior - submit, to prevent it add type="button" to every button inside the form tag.
<button type="button" ng-click="NewConversation=true" >show login</button>

This should help
show login
this will prevent it from submitting automatically

Form Submit Button Do not work

I have a form with a submit button. Unfortunately my javascript function does not work. Where is my mistake? It works by pressing enter but not by clicking on the submit button
<div id="form" class="contact-us-form">
<form id="myform" target="_self" onsubmit="" action="javascript: postContactToGoogle()">
<div>
<input spellcheck="false" autocomplete="off" id="email" type="text" name="email" value="deine eMail" onfocus="this.value=''" onblur="this.value='deine eMail'">
</div>
<br>
<div>
<button onclick="submits()" id="send" type="submit">EINTRAGEN</button>
</div>
</form>
<script type="text/javascript">
function submits() {
document.getElementById("myform").submit();
}
</script>
</div>

What you're doing is strange. You are trying to do the submission very "manually". The submit button (i.e. the type="submit" part) is already going to submit this form, so there is no need for your function submits().
Afterwards, in javascript, simply refer to your form's submit event. You can get the form by id like your doing already.

Add 'name' attribute in your form
<form id="myform" name="myform">
<!-- Form content -->
</form>
change your script function
<script type="text/javascript">
function submits() {
document.myform.submit();
}
</script>

I found the mistake by myself:
onblur="this.value='deine eMail'"
Do not use onblur in your submit button. It will kill the submit function and it will not work

Disable button on submit form

Hello so I am using foundation data-abide for input validation in my form and here is my code. In my index.php here is the code
Add Photo
<div id="uploadModal" class="reveal-modal tiny" data-reveal></div>
Whenever I click on add photo, the upload-photo.php shows up in a modal. In the modal it contains this code
<form action="<?= $_SERVER['PHP_SELF']; ?>" method="POST" enctype="multipart/form-data" data-abide name="formupload" id="uploadID">
<div class="photo-field">
<input type="file" name="file_img" pattern="^.+?\.(jpg|JPG|jpeg|gif|png|PNG)$" required>
<small class="error">Upload JPG or PNG only.</small>
</div>
<div class="title-field">
<input type="text" name="img_title" placeholder="Image title" required>
<small class="error">Image title is required.</small>
</div>
<input type="submit" value="Upload Image" name="btn_upload" class="button">
</form>
If I ever want to use a script like this and click the submit button, it doesn't work. It just shows the upload-photo.php again in a page, not in a modal.
$('form#uploadID').submit(function(){
$(this).find('input[type=submit]').attr('disabled', 'disabled');
});
What is the possible way to submit the form and then disables the button so no one can spam clicking it? Thanks!

Use this
$('#uploadID').submit(function(){
$('#uploadID input[name=btn_upload]').prop('disabled', true);
});

Redirecting after form submission in Javascript

I hope someone can assist with this. I dont have access to the website backend, so I cant change the js script uploaded there. What I am trying to achieve is make a simple form to submit an issue report and then display a "Thank you" popup and redirect back to main page of the account on our page.
So I can make a form no problem. I copied one of the functioning forms by going to Edit link and clicking on Show Source in Page Body. But I can't stop the default behavior of it going to another page after Submit button is pressed. I suspect it is in js script on the back end. I'll copy code below.
<center>
<b>App Issues Report Form</b>
<br>
</center>
<form action="/Modules/SendForm" method="post" class="form" id="NewForm">
<input name="formFields" value="CONTACTID,AgentName,Notes" type="hidden">
<input name="formLabels" value="Contact ID:,Agent Name:,Notes:" type="hidden">
<input name="fromAddress" value="no-reply#callcenter.com" type="hidden">
<input name="toAddress" value="name#CallCenter.com" type="hidden">
<input name="subject" value="A new message about app" type="hidden">
<input name="emailMsg" value="The following data has been collected:" type="hidden">
<input name="CONTACTID" value="##CONTACTID##" type="hidden">
<input name="companyId" value="##COMPANY_ID##" type="hidden">
<div class="clearfix">
<label>Agent Name:</label>
<div class="input"><input id="AgentName" name="AgentName"
class="validate[required] xlarge" value="##LOGGEDIN_AGENT_FIRST_NAME##
##LOGGEDIN_AGENT_LAST_NAME##" type="text">
</div>
</div>
<div class="clearfix">
<label>Notes:</label>
<div class="input"><textarea id="Notes" name="Notes"
class="validate[required] xxlarge"></textarea>
</div>
</div>
<div class="clearfix grey-highlight">
<div class="input no-label">
<input class="button blue" value="Submit" type="submit">
<input class="button grey" value="Reset" type="reset">
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("NewForm").click(function( event ) {
alert( "Thank you for your feedback" );
event.preventDefault();
});
});
</script>
It used to have only this at the end when I copied the code:
<script type="text/javascript">
$(document).ready(function () {
new setupAjaxForm('NewForm'); });
</script>
I tried searching and suggestions here didnt seem to work:
How to redirect user to another page after Ajax form submission
How to redirect user to another page after Ajax form submission?
http://learn.jquery.com/about-jquery/how-jquery-works/

The first thing you have to look at is action="/Modules/SendForm" - this is what does the redirection. If you don't want to redirect, set this to the name of the page you have the form. Obviously there is a whole lot more to forms and redirection (and some other js code might influence this too, nonetheless we don't see what the function setupAjaxForm is supposed to do here), but this is really the first thing to check / get right.
EDIT: I think I understand it more now: basically if you don't have access to the /Modules/SendForm page (where most probably, among others, like form validation, the redirection also happens, then you can't do much to change the redirection.