Page transition on form button? - javascript

I'm trying this on my site
http://www.fasw.ws/demos/transitions1/slide1.html
everything is working good but not when i add data-ftrans="slide" to a form button.
example:
<form action"http://google.com"> <button data-ftrans="slide" type="submit" style="height:50px; font-size:20px;">Submit</button>
What does i need to change to get this working ?

I think you must change your button to a depend on the context.
And must have 2 attribute 'href' and 'data-ftrans'. It'll run function slideTo(href, effect, pushstate) in the context.
href: one html page
data-ftrans: transition type
Maybe, you want to submit then change to another page (but not submit page)
<form action="your server script" method="post">
<button click="ajax_submit"></button>
Hide
</form>
<script>
function ajax_submit(){
//do some ajax code
//when success
//a.click();
}
</script>

Related

Invisible reCaptcha iframe not showing, form stuck

I am loading two scripts on my websites:
<script src="scripts/my_site.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async="" defer=""></script>
Where my_site.js looks like this:
... many other functions, not nested
function captachaCallback() {
console.log("Captcha");
}
... other functions
Then in my form I am using:
<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback">Send</button>
Whenever I press the button, a white half-transparent overlaying empty div appears, but nothing happens (console message doesn't appear) and the form is stuck.
I am using the latest Chrome.
Thanks in advance
The problem was that I had a CSS setting affecting all divs on my website.
div { overflow: hidden; }
Apparently this makes the popup window with the captcha test invisible.
Removing this setting solved the problem.
I'm suspecting that the element is going out of the visibility. So can you try adding data-badge="inline" to the recaptcha element in the html
<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-badge="inline" data-callback="captachaCallback">Send</button>
Hope this helps.
You're not rendering the captcha.
The submit button is trying to verify the response of the captcha once the user completes the captcha by sending a callback to the function specified on data-callback. Since you haven't created the component it gets stuck in a loop.
The submit button cannot be the same tag where you load the CAPTCHA. You need to render the captcha in an empty tag.
Instead of:
<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback">Send</button>
Render it like:
<div id="captcha_element" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback"></div>
Wrap it up inside a form. You already have it, so just modify it.
Since you're specifying what function to run once the captcha is completed you don't need to worry about the submit button.
The structure should look something like this:
<form action="?" method="POST">
/// The other elements in your form
/// ...
<div id="captcha_element" class="g-recaptcha" data-sitekey="my-key" data-callback="captachaCallback"></div>
<br/>
<input id="btnSubmit" type="submit" value="Submit">
</form>
Also be sure to look up the documentation ;)
https://developers.google.com/recaptcha/docs/display

Upload dialog disappears, immediately after it appears, on web page, that I am creating

I am trying to use elninotech/uppload, as it looks like it will do what I want (give me a portable, easy to use, powerful file upload button). However when I click on the button, the upload dialog appears and disappears (press pause, in debugger, before pressing button, then single step. On 2nd step dialog appears, on 3rd step it disappears).
What am I doing wrong?
<html>
<body>
<form class="profile">
<button id="uploadButton">upload image</button>
</form>
<img id="profilePicImage"/>
</body>
<script src="https://unpkg.com/uppload/dist/uppload.min.js"></script>
<script>
const profilePicture = new Uppload({
value: "https://randomuser.me/api/portraits/men/17.jpg",
bind: ["#profilePicImage"],
call: ["form.profile button#uploadButton"],
//endpoint: "https://example.com/upload_backend",
allowedTypes: "image"
});
</script>
</html>
I found a very complex example on their website https://elninotech.github.io/uppload/ I spent some time debugging, and looking at their code. This is what I found.
An element may have the attribute data-uppload-button to mark it as an uppload button. I don't know how that can work with more than one button.
A default button in form dose not work (it causes the problem described in the question). Changing the button to a span works (but is un-intuitive to user). Changing the form to a div, works. Changing the button type to button works.
From the git-hub issue tracker https://github.com/elninotech/uppload/issues/21#issuecomment-445997614
When you have an HTML form element without a method, it defaults to GET. If it has a button inside it, the form assumes it's a submit button, and therefore refreshes the page on pressing it. This means that if you have button without a type="button", the page is refreshed. This means the original state is reverted and you don't see Uppload open up. That's why you need a type="button" on buttons you don't want to submit the page. Alternately, you can have a event.preventDefault() and return false on the onSubmit event on the form too.
Here is the working code:
<html>
<body>
<form class="profile">
<button type="button" id="uploadButton">upload image</button>
</form>
<img id="profilePicImage"/>
</body>
<script src="https://unpkg.com/uppload/dist/uppload.min.js"></script>
<script>
const profilePicture = new Uppload({
value: "https://randomuser.me/api/portraits/men/17.jpg",
bind: ["#profilePicImage"],
call: ["div.profile button#uploadButton"],
//endpoint: "https://example.com/upload_backend",
allowedTypes: "image",
services: ["upload", "camera", "link"],
crop: {
startSize: [100,100, "%"]
}
});
</script>
</html>
I have not yet tested with a working endpoint (server)

Refresh Captcha , but also refreshing whole register form

Javascript Code
<script language="javascript" type="text/javascript">
function refreshCaptcha()
{
$("#captchaimage").attr('src','captcha_image.php');
}
</script>
Image Code
<img src="captcha_image.php" id="captchaimage">
Button Code
<button name="submit" class="btnRefresh" onClick="refreshCaptcha();">Refresh Captcha</button>
When i tried to click on refresh captcha button , it will refreshed the whole page. Any idea which causing the problem ?
<button>
by default has the attribute type="submit" which causes the form to submit.
Hence, adding type="button" to the button will suffice.
Because your form has property action, button triggers action behavior,then redirecting to action's url.
You can remove action or change button to a,or use event.preventDefault.

How do I make permanent changes to javascript variables or html elements inside of .click()?

For example:
$(document).ready(function(){
$('#submit').click(function(){
$('#rightAd').text("HELLO EVERYBODY");
});
});
This only changes the text in #rightAd for the moment the button is clicked. How do I make it remain, "HELLO EVERYBODY" after the click ends? Or am I thinking about this the wrong way?
changing via script will reflect until the page gets refreshed.
Try this:
HTML:
<div id="rightAd"> some text.....</div>
<button id="submit">Submit</button>
JQuery:
$('#submit').click(function(){
$('#rightAd').text("HELLO EVERYBODY");
});
If you are using <input type="submit"/> this will submit your page, so changes will be flashed as page gets refresh.
Use event.preventDefault() to prevent form from submission

Firefox HTTP Form Action doesn't fire

In Chrome and IE, the following code, when the Anchor tag is clicked, pops up the form (modal box ID of "modalContent", form ID of "DL") and adds an "OnSubmit" to the Form. When the Form is submitted, it will navigate to the requested PDF via Javascript, and run some ASP to send an email with their details attached.
<script language="javascript">
function downloadAnyway(link) {
$('#DL')[0].setAttribute('ONSUBMIT', 'return checkform("' + link + '")');
$('#modalContent').modal();
}
function checkform(navName) {
window.open(navName);
$.modal.close();
}
</script>
<!-- link to download a product guide -->
Product Guide
<div id="modalContent">
<form id="DL" action="contactusprocessNew2.asp" method="post" name="contact" >
<div align="center">
<input type="image" src="templates/default/images/submit_download.gif" class="imagebutton" value="submit" />
</div>
</form>
</div>
This works fine in IE and Chrome, in Firefox, the Javascript onsubmit works, but the action of the asp never fires. If I remove the javascript, the asp fires as expected.
So, the final form in FireFox, after the "onsubmit" has been dynamically added looks as below:
<form id="DL" action="contactusprocessNew2.asp" method="post" name="contact" onsubmit="return checkform("downloads/ProductGuide.pdf")">
The onsubmit fires, opening the product guide in another tab, however, the ASP Action never fires. There is more that goes on here, like we write a cookie making sure we don't ask the client for a download every time they use our downloads, however, I've trimmed off anything I think is outside the problem domain.
In the asp, I have gotten rid of all code and put a simple response.redirect to see if it fires and make sure nothing is going on in the ASP.
Any idea how I can get this to function in FireFox?
UPDATE:
I have replaced the onsubmit event wireup with a 'proper' jquery submit wireup replacing the first line below, with the second. The asp on the form still does not function.
//$('#DL')[0].setAttribute('ONSUBMIT', 'return checkform(\'' + link + '\')');
$('#DL').submit(function checkform() {
$.modal.close();
window.open(link);
return true;
});
UPDATE 2
Right, it is because to modal popup CLOSES before the ASP fires. If we comment out the line $.modal.close(); then the asp fires as expected. In Chrome and IE the javascript and the ASP must fire at the same time, in Firefox, the javascript fires which "hides" the div with the "modelContent" and the asp can no longer fire. So this is the real problem... now how to sort it out...

Categories