Fancybox doesnt open onclick submit form - javascript

When I fill in my form and send it the fancybox is not coming up.
Here is the code i am using for the fancybox:
<div class="hidden" id="fancybox-popup-form">
(your Fancybox content goes in here)
</div>
<style>
.hidden { display: none; }
</style>
This is the confirmtation text i filled in at the plugin Gravity forms
<script type='text/javascript'>
$('#gform_submit_button_2').click(function () {
$#gform_submit_button_2([
{ href : '#fancybox-popup-form' }
]);
});
</script>
And this is the HTML for the button where i need to click on the fire the function
<input type="submit" id="gform_submit_button_2" class="button gform_button" value="Verzenden" tabindex="6" onclick="if(window["gf_submitting_2"]){return false;} window["gf_submitting_2"]=true; ">
Thanks for your time!

When I fill in my form and send it the fancybox is not coming up.
When you send it the page will be refreshed by the submit so your fancybox will not shown, so try to prevent the default action (submit) using preventDefault() :
$('#gform_submit_button_2').click(function (e) {
e.preventDefault();
//Your code
})
Hope his helps.

Related

Stop CSS loader spinning if form validation error, django, javascript

How do I stop the loader spinner showing if the form submit fails and the user has to complete a missing form field. The spinner keeps spinning forever while the user enters the missing information.
My submit button in the form:
...
<div class="control">
<button type="submit" class="button" onclick="showDiv()">Submit
</button>
</div>
</form>
My spinning loader below the form:
<span class="loader" id="loadingdisplay" style="display:none;"></span>
My javascript on click event to display spinning loader:
<script type="text/javascript">
function showDiv() {
document.getElementById('loadingdisplay').style.display = "block";
}
</script>
You can add a listener on your form or your field that will hide your loader.
<script>
var x = document.getElementById("myInputField");
x.addEventListener("focus", myFunctionHideDiv);
function myFunctionHideDiv() {
document.getElementById('loadingdisplay').style.display = "None";
}
</script>
Ressources :
EventListener documentation
Event documentation

Show div element when button is clicked before the form is submitted

I want to show a spinner div element on my page when user clicks submit button. There seems to be a bug in my code as I checked multiple answers and suggestions here for similar problems and nothing seems to work - on click console message is shown and the page starts reloading without showing the div element.
HTML:
<form action="/uploader" id="upload_form" method="POST" enctype="multipart/form-data" runat="server">
...
<div class="form-group">
<input type = "submit" id="upload_button" class="btn btn-primary btn-lg" />
</div>
</form>
Jquery:
$(document).ready(function(){
$('#upload_form').on('submit', function(e) {
e.preventDefault();
$('.sk-cube-grid').show();
console.log('Upload button was clicked');
this.submit();
});
});
I also tried without success :
$('#upload_button').on('click', function(e) {
console.log('Clicked on upload form');
$('.sk-cube-grid').show();
});
EDIT: when I remove this.submit(); the spinner is shown after click but the form is not submitted - so CSS seems to be fine. Also, upload takes several seconds before page is reloaded so I have time to see the messages on console and verify that no spinner is shown...
The code works. But the message quickly disappear becouse a new page is rendered.
$('.sk-cube-grid').hide();
$('#upload_form').on('submit', function(e) {
e.preventDefault();
$('.sk-cube-grid').show();
console.log('Upload button was clicked');
var form = this;
setTimeout( function () {
form.submit();
}, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/7914637" id="upload_form" method="GET">
<p>...</p>
<div class="form-group">
<input type = "submit" id="upload_button" class="btn btn-primary btn-lg" />
</div>
</form>
<div class="sk-cube-grid">My hide message</div>
I think that you should make an additional submit button that is hidden and is being pressed automatically by JavaScript after an interval that the spinner should have been shown.
Code:
<form action="/uploader" method="POST">
<input type="button" value="Submit" onclick="showSpinner()">
<div id="loading"></div>
<input type="submit" style="visibility: hidden" id="submit">
<script>
function showSpinner() {
document.getElementById("loading").style = "background: blue";
document.getElementById("animation").innerHTML =
'#keyframes loading {
100% { background: red; }
}';
setTimeout(redirect, 2000)
}
function redirect() {
document.getElementById("submit").click();
}
</script>
<style>
#loading {
height: 50px;
width: 50px;
animation: loading 2s linear infinite;
</style>
<style id="animation"></style>
You can increase the setTimeout to fit your spinner, or if you use percentage, make it redirect when it's 100%.
You need to make a check before confirmation like:
$(function() {
$('#upload_button').on('click', function(e) {
if (confirm("Click OK to continue?")){
$('form').submit();
}
else
{
e.preventDefault();
}});
});
Hope it will help you.

Show Upload Button on Click of an Image

In my html file, I have a file input that is hidden behind an image, so that when an image is clicked, the window where you search for images shows. The problem is with the submit part, I need a submit button, but I don't want it to show unless the image is clicked.
Then when the button is clicked, I want to reload the page, now with the button not showing (unless the image is clicked again, of course).
Here's my html code:
<form>
<input id="file-input" type="file" file-model="formData.img" style="display: none;"/>
<br>
<button class="btn btn-booking" id = "uploadButton" ng-click = "changeImage(user._id)" style = "display:block; margin: 0 auto; "> Upload </button>
</form>
You can use the CSS display property to hide the form until the image is clicked, then hide the image until the form is submitted, like so:
var hiderImg = document.getElementById('hiderImg');
hiderImg.addEventListener('click', function() {
// hide image, show form
document.forms[0].style.display = "inline";
hiderImg.style.display = "none";
});
document.getElementById('uploadButton').addEventListener('click', function() {
// show image, hide form
hiderImg.style.display = "inline-block";
document.forms[0].style.display = "none";
});
#hiderImg {
height: 200px;
width: 200px;
}
#hiddenForm {
display: none;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/7/74/White_domesticated_duck%2C_stretching.jpg" id="hiderImg" />
<form id="hiddenForm" onsubmit="javascript: return false;">
<input id="file-input" type="file" file-model="formData.img" />
<br>
<button class="btn btn-booking" id = "uploadButton" ng-click = "changeImage(user._id)" style = "display:block; margin: 0 auto; "> Upload </button>
</form>
Note: I added onsubmit="javascript: return false;" to the form just so that it won't try to submit in this example; you can remove that.
Another note: If you want the upload button to display under the Browse bar, remove the display:block; setting from the button.
First of All put this directive to the your image:
ng-show="fileExist"
After that put this in the your controller:
var uplader = angular.element(document.getElementById("file-input"));
uplader.bind("change", function(){
if(uplader.val()){
$scope.fileExist =true;
}else{
$scope.fileExist =false;
}
});
it's kind of watch in the your input file that handle visibilty of your image.

How to hide form by mouse click beyond the form area withou JQuery

I've the follwoing form:
<form method="get">
<!-- This is form's content -->
</form>
I want to hide the form by mouse click beyond the form area. I'm trying to set window.onclick event handler but this handler is override others onlcick handler on my page. I need to do this WITHOUT JQUERY. Thanks.
Give your form an Id and add use e.target.id in addEventListener:
<form method="get" id="myform">
<!-- This is form's content -->
Dummy content
</form>
<script>
window.onclick = function(e) {
alert('other handlers');
}
window.addEventListener('click', function(e) {
if (e.target.id != "myform") {
document.getElementById('myform').style.display = 'none';
}
});
</script>
Working demo: http://jsfiddle.net/6bewY/

HTML5 Input Form Reappears after Submit and Hide

When a user puts in some text into my form and clicks the button, I want to hide the form and show a "thanks" message to the user to let them know I got their text.
By the way, this is for embedding into a Chrome extension pop-up.
Here's what I have:
<!doctype html>
<html>
<head>
<title>Extension</title>
<style>
body {
min-width:200px;
min-height:75px;
overflow-x:hidden;
}
img {
margin:5px;
border:2px solid black;
vertical-align:middle;
width:75px;
height:75px;
}
.visible{
display:block;
}
.invisible{
display: none;
}
</style>
<script>
var PopupController = function () {
this.button_ = document.getElementById('button');
this.form_ = document.getElementById('userIdForm');
this.userId_ = document.getElementsByName('userID')[0];
this.submitThanks_ = document.getElementById('submitThanks');
this.addListeners_();
};
PopupController.prototype = {
button_: null,
form_: null,
userId_: null,
submitThanks_: null,
addListeners_: function () {
this.button_.addEventListener('click', this.handleClick_.bind(this));
},
handleClick_: function () {
console.log("Submit button clicked");
var userId = this.userId_.value;
// Hide the form
this.form_.classList.add('invisible');
this.submitThanks_.classList.remove('invisible');
}
};
</script>
</head>
<body onload="window.controller = new PopupController()">
<h2 class="invisible" id="submitThanks">Thanks!</h2>
<div id="userIdForm">
<form>
<input type="text" name="userID" placeholder="User ID" required/>
<button id="button" type="submit">Submit</button>
</form>
</div>
</body>
</html>
The problem is that the form reappears after the button is clicked. I have noticed that the functionality slightly changes when I put in the required attribute into the input field.
I'm using the latest version of Chrome for Mac.
This is because your button is a "submit" button. So when you click on it, it does its standard behavior, which is to submit the form. It makes an HTTP request and your page is refreshed.
If you don't want this to happen, just change the button type to "button".
The form is reloading because the page is reloading, try returning false from your submit.
<button id="button" type="submit" onclick="return false;">Submit</button>
Edit
Ah, sorry about that. So the page isn't reloading?
Perhaps try this instead:
handleClick_: function () {
console.log("Submit button clicked");
var userId = this.userId_.value;
// Hide the form
this.form_.className = "invisible";
this.submitThanks_.className = "visible";

Categories