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)
Related
I have a form that is being used as a basic contact form. I have added a checkbox that adds some fields if selected. How can I change the onclick action of the submit button based on if this box is checked or not. Here is what I have currently.
<form class="homeContact">
<label for="chkJob">
Interested in a career? Check to apply
<input type="checkbox" id="chkJob" />
</label>
<div id="dvApply" style="display: none">
Download Application
Download the application. Fill it out and upload below:
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<div id="popErr"></div>
<input type="hidden" name="nospam">
<div class="field">
<div class="label-form">
<input type="text" placeholder="Name *" value="" name="name" id="popName">
<span class="form-icon fa fa-user"></span>
</div>
</div>
<div class="field">
<div class="label-form">
<input type="text" placeholder="Email *" value="" name="email" id="popEmail">
<span class="form-icon fa fa-envelope"></span>
</div>
</div>
<div class="field">
<div class="label-form">
<input type="text" placeholder="Phone *" value="" name="phone" id="popTel">
<span class="form-icon fa fa-phone"></span>
</div>
</div>
<div id="submit_button">
<input type="button" class="button submit" id="contact-submit" onclick="submitForm()" value="Request Information">
</div>
</form>
<script>
jQuery(document).ready(function($) {
$("#chkJob").click(function () {
if ($(this).is(":checked")) {
$("#dvApply").show();
} else {
$("#dvApply").hide();
}
});
});
</script>
You can implement this login into your submitForm function:
function submitForm()
{
if ($('#chkJob').is(":checked")) {
$("#dvApply").show();
} else {
$("#dvApply").hide();
}
}
But if you want dvApply to be toggled every time checkbox button is clicked without waiting for submit button to be clicked you can do something like:
jQuery(document).ready(function($) {
$('#chkJob').change(function() {
$('#dvApply').toggle();
});
});
I am really new to PHP and HTML.
The problem I have now is:
I've got 2 buttons: (1) Temp (2)Submit, and both of them are created for a form which user can write something on. But some of the form's fields are required, so in HTML I have written "required" in the end of those fields in my form.
But the problem is, I want the system check those required field when i press the "Submit" button, instead of the "Temp" button. But I really don't know how?
These are things I have so far:
<form action='' method='post' enctype='multipart/form-data'>
<div class='well'><strong><h4><center>Intern Record File</center></strong>
</h4></div>
<br>
<div class="input-group">
<span class="input-group-addon">Company Name</span>
<input type="hidden" name="ent_name_title" value="Company Nmae">
<input type="text" class="form-control" name="ent_name" value="<?php echo $ent_name;?>" required readonly>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">Job Name</span>
<input type="hidden" name="intern_name_title" value="Job Name">
<input type="text" class="form-control" name="intern_name" value="<?php echo $intern_name;?>" required readonly>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">Job Department</span>
<input type="hidden" name="ent_acc_dept_title" value="Job Department">
<input type="text" class="form-control" name="ent_acc_dept" value="<?php echo $ent_acc_dept;?>">
</div>
<br>
You could preventDefault() on the click event of your Temp button
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
You could always change the temp button to an <a></a> tag styled like a button with an onclick event instead of a href
Example:
<button onclick="functionName();" >Temp</button>
I would avoid using a <input type="submit" /> as this will cause the form data to be submitted (which if they have the required field on them they be validated)
A code snippet
function funTemp() {
console.log("validation did not fire");
}
.btnClass {
border: 1px solid rgb(36, 39, 41);
background-color: rgb(221, 221, 221);
border-radius: 2px;
padding: 3px;
}
<form>
<input type="text" id="text1" name="text1" required />
<input type="submit" id="submitBtn" name="submitBtn" />
<a class="btnClass" onclick="funTemp();">Temp</a>
</form>
I have two inline radio button in a form using Bootstrap. But when I validate it then the message showing inside of first radio button instead of showing after second radio button. I would like to show that radio button message like Email and password. Here is the screenshot of my form.
Without Validation:
With Validation:
HTML Form:
<form name="registration" action="">
<div class="signingInner">
<h4 style="font-weight: 500; text-align:center; font-size: 20px ">Sign in to your Account</h4>
<div class="form-group">
<label for="emailId">Email Address:</label>
<input type="text" class="form-control" id="login_email" name="login_email" placeholder="Please enter Email address">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" name="login_password" id="login_password" placeholder="●●●●●●">
</div>
<div class="form-group">
<div class="radio-inline" style="padding-left: 100px;">
<input type="radio" id="user" name="LoginMode" value="user" >
As <strong>User</strong> </>
</div>
<div class="radio-inline" style="padding-left: 30px;">
<input type="radio" id="company" name="LoginMode" value="company" >
As <strong>Company</strong></>
</div>
</div>
<input type="submit" name="btnLogin" class="btn btn-lg btn-primary btn-block" value="Login"></input>
</div>
</form>
Plunker Link:
https://plnkr.co/edit/0vpvU9QbRu8Mlwbi04ti?p=preview
The trick is to use errorPlacement callback function.
So I am checking whether the rendered type is radio button then I am tracking the appropriate topmost parent div and inserting the message after that.
errorPlacement: function(error, element) {
if ( element.is(":radio") ) {
error.insertAfter( element.parent().parent().parent().parent());
}
else { // This is the default behavior of the script for all fields
error.insertAfter( element );
}
},
See the updated plunkr here.
And the output looks like
EDIT:
I have finally updated the original plunkr provided by you.
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();
});
});
});
});
I have a form that auto populates based on records returned from my MySQL database. I have all fields but the search field as read only because the user shouldn't be able to edit them. I would like my submit button disabled until the field "beerID" has been populated, but I can't seem to get it working. Onkeyup doesn't work because the user isn't actually typing in that field. And I can't seem to get onChange to work either. Any ideas?
Here is my JavaScript (enableSubmit is the code for the submit button):
<script>
$(function() {
$('#brewery').val("");
$('#style').val("");
$('#ABV').val("");
$('#IBU').val("");
$('#OG').val("");
$('#FG').val("");
$('#beerID').val("");
$("#beer").autocomplete({
source: "beers.php",
minLength: 2,
select: function(event, ui) {
$('#beerID').val(ui.item.beerID);
$('#brewery').val(ui.item.brewery);
$('#style').val(ui.item.style);
$('#ABV').val(ui.item.ABV);
$('#IBU').val(ui.item.IBU);
$('#OG').val(ui.item.OG);
$('#FG').val(ui.item.FG);
}
});
});
function enableSubmit(){
if(beerID.value.length > 0) {
document.getElementById('newJournalEntry').disabled = false;
} else {
document.getElementById('newJournalEntry').disabled = true;
}
}
</script>
And here is my HTML:
<div data-role="page" id="view" data-url="currentpage">
<div data-role="header" data-position="fixed" data-theme="b" data-content-theme="b">
Menu
<h2>Beer Journal</h2>
</div>
<div class="ui-body ui-body-a">
<form action="journal.php" method="post" data-ajax="false" enctype="multipart/form-data">
<fieldset>
<p class="ui-widget">
<label for="beer"></label>
<input type="search" name="beer" id="beer" placeholder="Start Typing a Beer's Name..." >
<div class="ui-field-contain">
<label for="brewery">Brewery:</label>
<input type="text" id="brewery" name="brewery" readonly>
<label for="style">Style:</label>
<input type="text" id="style" name="style" readonly>
<label for="ABV">ABV(%):</label>
<input type="text" id="ABV" name="ABV" readonly>
<label for="IBU">IBU:</label>
<input type="text" id="IBU" name="IBU" readonly>
<label for="OG">OG:</label>
<input type="text" id="OG" name="OG" readonly>
<label for="FG">FG:</label>
<input type="text" id="FG" name="FG" readonly>
<label for="beerID" onChange="enableSubmit()">BeerID:</label>
<input type="number" id="beerID" name="beerID" readonly>
</div>
</p>
</fieldset>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><input type="submit" name="newJournalEntry" id="newJournalEntry" data-inline="false" data-shadow="false" data-corners="false" value="Create Beer Journal Entry" data-theme="e" disabled></div>
<div class="ui-block-b"><input type="button" onClick="location.href='newentryaddbeer.php'" data-inline="false" data-shadow="false" data-corners="false" value="Start from Scratch" data-theme="f"></div>
</fieldset>
</form>
</div>
As kehrk said, the .change event handler would be a good fit. Something like this is what I'd use:
$(document).on('change', '#beerID', function(){
if($(this).val() == ''){
$('input[type=submit]').attr('disabled', 'disabled');
}
else {
$('input[type=submit]').removeAttr('disabled');
}
});
The reason why change isn't working is because change is only fired on user interaction with a field. Since the value of beerID is being changed by jQuery, a change event isn't fired.
From this SO question, it is suggested that you manually fire the change event yourself:
$('#beerID').change();
Two other issues:
Issue 1:
You are attaching the onchange handler to the label rather than the beerID element itself.
Issue 2:
In your enableSubmit() function, you are referencing a variable beerID that doesn't exist.
Solution:
<script>
$(function() {
$('#brewery').val("");
$('#style').val("");
$('#ABV').val("");
$('#IBU').val("");
$('#OG').val("");
$('#FG').val("");
$('#beerID').val("");
$("#beer").autocomplete({
source: "beers.php",
minLength: 2,
select: function(event, ui) {
$('#beerID').val(ui.item.beerID).change();
$('#brewery').val(ui.item.brewery);
$('#style').val(ui.item.style);
$('#ABV').val(ui.item.ABV);
$('#IBU').val(ui.item.IBU);
$('#OG').val(ui.item.OG);
$('#FG').val(ui.item.FG);
}
});
});
function enableSubmit(){
if($('#beerID').val().length > 0) {
$('#newJournalEntry').parent().removeClass('ui-state-disabled');
} else {
$('#newJournalEntry').parent().addClass('ui-state-disabled');
}
}
</script>
<div data-role="page" id="view" data-url="currentpage">
<div data-role="header" data-position="fixed" data-theme="b" data-content-theme="b">
Menu
<h2>Beer Journal</h2>
</div>
<div class="ui-body ui-body-a">
<form action="journal.php" method="post" data-ajax="false" enctype="multipart/form-data">
<fieldset>
<p class="ui-widget">
<label for="beer"></label>
<input type="search" name="beer" id="beer" placeholder="Start Typing a Beer's Name..." >
<div class="ui-field-contain">
<label for="brewery">Brewery:</label>
<input type="text" id="brewery" name="brewery" readonly>
<label for="style">Style:</label>
<input type="text" id="style" name="style" readonly>
<label for="ABV">ABV(%):</label>
<input type="text" id="ABV" name="ABV" readonly>
<label for="IBU">IBU:</label>
<input type="text" id="IBU" name="IBU" readonly>
<label for="OG">OG:</label>
<input type="text" id="OG" name="OG" readonly>
<label for="FG">FG:</label>
<input type="text" id="FG" name="FG" readonly>
<label for="beerID">BeerID:</label>
<input type="number" onchange="enableSubmit()" id="beerID" name="beerID" readonly>
</div>
</p>
</fieldset>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><input type="submit" name="newJournalEntry" id="newJournalEntry" data-inline="false" data-shadow="false" data-corners="false" value="Create Beer Journal Entry" data-theme="e" disabled></div>
<div class="ui-block-b"><input type="button" onClick="location.href='newentryaddbeer.php'" data-inline="false" data-shadow="false" data-corners="false" value="Start from Scratch" data-theme="f"></div>
</fieldset>
</form>
</div>
There's no reason that the .change event handler shouldn't work.
$(function () {
//this should work...
$("#beerID").change(function () {
$("#newJournalEntry").prop("disabled", false);
});
$('#brewery').val("");
$('#style').val("");
$('#ABV').val("");
$('#IBU').val("");
$('#OG').val("");
$('#FG').val("");
$('#beerID').val("");
$("#beer").autocomplete({
source: "beers.php",
minLength: 2,
select: function (event, ui) {
$('#beerID').val(ui.item.beerID);
$('#brewery').val(ui.item.brewery);
$('#style').val(ui.item.style);
$('#ABV').val(ui.item.ABV);
$('#IBU').val(ui.item.IBU);
$('#OG').val(ui.item.OG);
$('#FG').val(ui.item.FG);
}
});
});
function enableSubmit() {
if (beerID.value.length > 0) {
document.getElementById('newJournalEntry').disabled = false;
} else {
document.getElementById('newJournalEntry').disabled = true;
}
}
I don't see where you set beerID try adding
beerID= $('#beerID');
before the if statement
Then call the enablesubmit function once you have completed the auto fill of the fields.
You can put it here to enable it:
select: function (event, ui) {
$('#beerID').val(ui.item.beerID);
$('#brewery').val(ui.item.brewery);
$('#style').val(ui.item.style);
$('#ABV').val(ui.item.ABV);
$('#IBU').val(ui.item.IBU);
$('#OG').val(ui.item.OG);
$('#FG').val(ui.item.FG);
if($('#beerID').val() !== ''){
$('#newJournalEntry').prop('disabled', false);
}
}