Develop Reference

jQuery Show Loading Image on Button Click and display the button once job finishes

I'm using a button to submit two forms(which will run few scripts at the backend and displays the output on the frontend)".
HTML -
<form id="form2" class="form-wrapper" name="myForm" action="http://10.1.6.65/cgi-bin/testresult2.py" method="get" >
<div class="container">
<label><b> Client Name</b></label>
<input id="clientName_details" placeholder="Enter client name" type="text" name="De_Client_name" required >
<label><b> Version</b></label>
<input id="Version_details" placeholder="Enter version" type="text" name="De_version" >
<label><b> DB Name</b></label>
<input id="dbName_details" placeholder="Enter DB name" type="text" name="De_dbname" >
<label><b> HOST Name</b></label>
<input id="hostName_details" placeholder="Enter HOST name" type="text" name="De_Host">
<label><b> Email</b></label>
<input type="email" class="input-field" placeholder="Enter Email" name="email" value="" required/>
</div>
</form>
<dev class=bottom>
<form id>
<dev class=tag><b>Do you want to proceed with Upgrade : </b> </dev>
<input type="button" id="subbut" value="YES">
<div id="divMsg" style="display:none;">
<img src="http://www.javascriptsource.com/img/ajax-loader.gif" alt="Please wait.." />
</div>
<div id="msg"></div>
</form>
JS -
$(document).ready(function() {
$("#subbut").click(function() {
$(this).parent().append('<img src="data:image/gif;base64,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" />');
$.post($("#form1").attr("action"), $("#form1").serialize(),
function(data) {
$("#msg").append(data);
$.post($("#form2").attr("action"), $("#form2").serialize(),
function(data) {
$("#msg").append(data);
$(this).hide();
});
});
});
});
But only the problem is the loading is for infinite time.But how can we restrict so that as soon as the code behind Execution completes the loading image should be vanished.

Why don't you simple show/Hide divMsg
Here is the code
$(document).ready(function() {
$("#subbut").click(function() {
$("#divMsg").show();
$.post($("#form1").attr("action"), $("#form1").serialize(),
function(data) {
$("#msg").append(data);
$.post($("#form2").attr("action"), $("#form2").serialize(),
function(data) {
$("#msg").append(data);
$("#divMsg").hide();
});
});
});
});

Reset form after submitting via jQuery

I want to write simple a contact form which after submitting that should clean all fields and alert. I am beginner in Javascript also in programming. My code shows me error:
$().reset(); is not a function
<form method="POST" id="myForm" data-toggle="validator" action="email.php">
<h2 class="section-heading">Свяжитесь с нами:</h2>
<div class="form-group">
<label for="exampleInputEmail1">Имя:</label>
<input style="background:none;" id="firstName" name="firtname" class="form-control" placeholder="Имя" required>
<p id="p1"></p>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Тема:</label>
<input style="background:none;" id="subjectTheme" name="subject" class="form-control" placeholder="Тема" required>
<p id="p2"></p>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Электронная почта:</label>
<input style="background:none;" type="email" id="email" name="email" type="email" class="form-control" placeholder="Электронная почта" required>
<p class="help-block with-errors"></p>
</div>
<div class="form-group">
<label>Сообщение:</label>
<textarea style="background:none;" name="message" class="form-control" rows="3"></textarea>
</div>
<input type="submit" id="sendButton" class="btn btn-default"/>
</form>
$('#myForm').submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'email.php'
});
$('#myForm').reset();
alert("Success!");
})

reset() is a method on the form DOMElement, not the jQuery object, hence the error. To achieve what you need, any of the following methods will work:
// call reset on the DOMElement
$('#myForm')[0].reset();
$('#myForm').get(0).reset();
// trigger a reset event via the jQuery object
$('#myForm').trigger('reset');

It is a javascript function, not jQuery
$('#myForm')[0].reset();

Validate and submit two forms as one jquery

HTML
<button type="submit" name="save" id="btn"> ok </button>
<div id="acc">
<h3>First header</h3>
<form name="form1" id="id_form1" method="post">
<div><input type="text" id="firstname" name="firstname" required></div>
</form>
<h3>Second header</h3>
<form name="form2" id="id_form2" method="post">
<div><input type="text" id="lastname" name="lastname" required></div>
</form>
<h3>Third header</h3>
<form name="form3" id="id_form3" method="post">
<div><input type="text" id="address" name="address" required></div>
<button type="submit" name="create"> create </button>
</form>
</div>
JS
$(document).ready(function() {
$( "#acc" ).accordion({
collapsible: true,
heightStyle: "content",
active: false
});
$('#btn').click(function() {
$('#id_form1').submit();
});
$('#id_form1').validate({
ignore: "",
invalidHandler: function(event, validator) {
alert('ttt');
},
});
});
Please visit the link jsfiddle
I got there 3 headers (panels). The first two I would like to validate and submit as one after pressing the OK button, but I can't put them into the one form in the html code because of the accordion header <h3>. The third panel is just for this example (doesn't need to be coded now), it's separate one. As you noticed the code under the above link works only with one form for validation.

Put hidden inputs in one form, and have the OK button copy the values from the inputs of the second form to them after validating.
<button type="submit" name="save" id="btn"> ok </button>
<div id="acc">
<h3>First header</h3>
<form name="form1" id="id_form1" method="post">
<div><input type="text" id="firstname" name="firstname" required></div>
<input type="hidden" id="hidden_lastname" name="lastname">
</form>
<h3>Second header</h3>
<form name="form2" id="id_form2" method="post">
<div><input type="text" id="lastname" name="lastname" required></div>
</form>
<h3>Third header</h3>
<form name="form3" id="id_form3" method="post">
<div><input type="text" id="address" name="address" required></div>
<button type="submit" name="create"> create </button>
</form>
</div>
jQuery:
$("#btn").click(function() {
if ($("#id_form1").valid() && $("#id_form2").valid()) {
$("#id_form2 input").each(function() {
$("#id_form1 #hidden_" + this.id).value(this.value);
});
$("#id_form1").submit();
}
});

Write your own handler for the submit. In the handler you can validate your data, get the values from the forms (look at jQuery serialize), then use jQuery's post to send the data. Something like this (not real code, but should get you there)
$("#btn").click(function(){
if( input1.isValid() && input2.isValid){
var formInputSerial = $('form').serialize();
$.post("http://whereToSendData", formInputSerial, callbackFunction(ifNeeded))
}
}
You will have to implement the the validation checks for the input. You may need to add a common to class to the input then use $('.commonClass').serialize(); I'm not sure how the above will work with multiple forms.

AJAX/PHP Mulitple form POST submit

I am attempting to submit the form data to another page to be processed and am currently need receiving any data. Below are the forms in question. Default form is the login for requesting username/password. One submit button.
<div id="form_wrapper" class="form_wrapper">
<form class="register">
<h3>Register</h3>
<div>
<label>Username:</label>
<input type="text" name="regname"/>
<span class="error">This is an error</span>
</div>
<div>
<label>Password:</label>
<input type="password" name="regpass" />
<span class="error">This is an error</span>
</div>
<div class="bottom">
<div class="remember"><input type="checkbox" /><span>Keep me logged in</span></div>
<input type="submit" value="Register"></input>
You have an account already? Log in here
<div class="clear"></div>
</div>
</form>
<form class="login active">
<h3>Login</h3>
<div>
<label>Username:</label>
<input type="text" name="username"/>
<span class="error">This is an error</span>
</div>
<div>
<label>Password: Forgot your password?</label>
<input type="password" name="password" />
<span class="error">This is an error</span>
</div>
<div class="bottom">
<div class="remember"><input type="checkbox" /><span>Keep me logged in</span></div>
<input type="submit" value="Login"></input>
You don't have an account yet? Register here
<div class="clear"></div>
</div>
</form>
<form class="forgot_password">
<h3>Forgot Password</h3>
<div>
<label>Username or Email:</label>
<input type="text" name="forgotuser" />
<span class="error">This is an error</span>
</div>
<div class="bottom">
<input type="submit" value="Send reminder"></input>
Suddenly remebered? Log in here
You don't have an account? Register here
<div class="clear"></div>
</div>
</form>
</div>
I would like to submit what ever the current form data is
$form_wrapper.find('input[type="submit"]')
.click(function(e){
e.preventDefault();
$.ajax({
url: 'locallogin.php',
type: 'POST',
data: $(this).serialize(),
success: function (results) {
alert(results);
}
});
});
locallogin.php
<?php
print_r($_POST);
?>
Right now the only response is an empty Array. Any ideas?

There are two issues - one as indicated in the comments - you need to use $_POST.
Another lies in,
data: $(this).serialize(),
$(this) is pointing to the button, so you are posting the serialized button. Try as follows :
data: $(".register").serialize(),

As mentioned previously, fix the $(this) and make it $("#form_wrapper") also fix the $POST to $_POST. Your JS should look like this.
$('#form_wrapper').find('input[type="submit"]')
.click(function(e){
e.preventDefault();
$.ajax({
url: 'locallogin.php',
type: 'POST',
data: $(this).closest('form').serialize()+'&buttonName='+$(this).val(),
success: function (results) {
alert(results);
}
});
});
AFTER THE QUESTION ABOUT THE BUTTON NAME.
Added code to the data line of the ajax call.

First, you're serializing $(this) in the click even of an input element. You might want to use data: $(this).closest('form').serialize(). Second, it's print_r($_POST) (you're missing the underscore).

How to close fancybox and reset input form values

Hello I have a contact us form using fancybox, and I want to reset/clear the form input values when fancybox closes (either when user clicks outside the popup or using the "close" popup button)
the element which holds the fancybox content is 'inline' so my guess was:
...
$("#fancybox-overlay").fancybox({
'afterClosed': function() {
$('#inline').hide(250, function() {
$('#name input').val('');
$('#phone input').val('');
$('#email input').val('');
$('#subject input').val('');
$('#msgcontent textarea').val('');
$('#security_code input').val('');
$('#name input').removeClass('error');
$('#phone input').removeClass('error');
$('#email input').removeClass('error');
$('#subject input').removeClass('error');
$('#msgcontent textarea').removeClass('error');
$('#security_code input').removeClass('error');
$('#security_code_error').html('');
});
}
});
But the result is as below:
before :
and after:
Any help to make the form values reset/cleared during a "close" action from clicking outside the popup, will be very much appreciated. Thanks.
UPDATE:
The html requested by #Spokey is:
<div id="inline" style="z-index:999999;">
<h2 class="popupheader">...Contact Us: Send us a Message</h2>
<div style="margin:2% 8%;background:#fff;border-radius:5px;width:auto;box-shadow: 3px 3px 10px #bbb;">
<p style="display:inline-block;padding:10px;">
...
</p>
<p style="display:inline-block;padding:10px;float:right;">
...
</p>
</div>
<form id="contact" name="contact" action="#" method="post">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" class="txt" style="margin-left: 3px">
<br>
<label for="phone">Your Phone No.</label>
<input type="text" id="phone" name="phone" class="txt" >
<br>
<label for="email">Your E-mail</label>
<input type="email" id="email" name="email" class="txt">
<br>
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject" class="txt" size="45">
<br>
<label for="msgcontent">Enter a Message</label>
<textarea id="msgcontent" name="msgcontent" class="txtarea" style="margin-left: 3px"></textarea>
<br>
<label for="security_code" style="width:auto;">Verify you are human</label>
<img border="0" id="captcha" src="../../image.php" alt=""> <a href="JavaScript: new_captcha();">
<img border="0" alt="" src="../../images/refresh.png" align="bottom"></a>
<input name="security_code" id="security_code" class="txt" style="width:150px;vertical-align: top;margin: 0px;" size="20" type="text" >
<span id="security_code_error" name="security_code_error" style="background:#fefefe;color:red;"></span><? /*<div class="field_error error_pos"><?php if($error['security_code'] != "") echo $error['security_code']; ?></div> */ ?>
<br />
<hr style="color:#f2f2f2;border:1px solid #f2f2f2;width:auto;">
<button id="send" name="send">Send Message</button>
</form>
</div>

And you can do it a lot more easier and cleaner. E.g. if you want to clear all input fields just do it that way without repetitive and spaghetti code:
document.getElementById("yourFormId").reset();

You don't need to hide #inline, as the plugin will hide it itself
$("#fancybox-overlay").fancybox({
'afterClose': function() {
$('#inline input, #inline textarea').val('');
$('#inline').children().removeClass('error');
$('#security_code_error').empty();
}
});
NOTE changed 'afterClosed' for fancybox2
to 'afterClose' (typo error)