This may be a stupid question so I'm sorry I'm new to web development. I am trying to write a page so it disables the search button until the reCAPTCHA is clicked (I know this can be circumvented by a spammer so this is not my concern). The way I have it currently set up is like this:
<div id="search_area">
<script type="text/javascript">
function enableButton() {
document.getElementById('search_submit').disabled = false;
}
</script>
<input id="ch_search" size="50" type="text"/><button class="search_button" id="ch_search_submit" disabled="true">Search</button>
<script src='https://www.google.com/recaptcha/api.js'></script>
<div class="g-recaptcha" data-sitekey="XXXXXXXXXX" data-callback = "enableButton()" ></div>
</div>
Currently just for initial testing I don't have a php validation checking form. When I check the text box and it turns green it is not enabling the search button as I would have thought it would. Can anyone point me in the right direction as to why this isn't working? Thank you for any help sorry about being a newbie.
I realized my problem was I was calling enableButton() and for it to work it needed to be enableButton without the parentheses.
Related
So I've inserted the Google Captcha validation script to my webform using the official documentation which can be found here: https://developers.google.com/recaptcha/docs/display#render_param
Despite me following the documentation to the letter, why am I still able to submit a form without checking the Captcha box? Forgive my arrogance by I thought the whole idea of this CAPTCHA service was that the user would not be able to submit a form without checking the CAPTCHA box so the webmaster can weed out the bots?
The end result looks fantastic, I have the CAPTCHA box on my website but right now, you may as well ignore it.
I don't see the point of Google investing time in writing documentation for this script when you can still use a form without the need to check the box. They may as well just not write said documentation because the result is still the same: scratching my head and confused.
Below is the code with only the relevant part of my form. Can anyone shed any light on what I'm missing here, then whoever can help should definitely consider a career writing coding help documentation for Google because clearly the individuals they employ at the moment - well - need I saw more?
Many thanks and all the best,
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="<PHP File Directory>" enctype="multipart/form-data" method="POST">
<div class="g-recaptcha" data-sitekey="<key>"></div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
I use this jquery function to check whether captcha is clicked or not before submission. Otherwise you have to validate the same after form submission. You will have to apply id to the form. Also place a div with class 'msg-error' just above recapthca div in the form.
// to enable recaptcha click validation before form submission
var form = $('#contact-form');
form.submit(function(event){
event.preventDefault();
var $captcha = $('#g-recaptcha-footer' ),
response = grecaptcha.getResponse();
console.log(response);
if (response.length === 0) { console.log("captcha not clicked)");
$( '.msg-error').html( "<div class='alert alert-danger mb-0 pb-0' role='alert'> reCAPTCHA is mandatory!</div>" );
if( !$captcha.hasClass( "error" ) ){
$captcha.addClass( "error" );
return false;
}
} else {
$( '.msg-error' ).text('');
$captcha.removeClass( "error" );
form.unbind('submit').submit();
}
});
I am fairly new to the world of coding and am currently designing something using WAMP to assist the misses with her maths. In short I have a page with some basic maths questions on and I have JavaScript running on it to check whether the answers are correct or not.
What I would like to know is, can I use JavaScript or something similar to add in a link that if clicked will open a popup or something similar that the user can write a few bits down to help working out the sums?
I have seen a <button onclick="window.open('whitespace.html');">Thinking Space</button> but this doesnt allow the user to write anything down, obviously as its just a link to another page.
A very basic sample, just pointing you in a possible direction:
<button onclick="window.getElementById('myDiv').style.display = 'block'">Thinking Space</button>
<div id="myDiv" style="display: none">
<textarea name="content" cols="40" rows="5">Test message</textarea>
<button onclick="window.getElementById('myDiv').style.display = 'none'">Close</button>
</div>
i think you can use window.promt
https://developer.mozilla.org/de/docs/Web/API/Window/prompt
Maybe not the best answer but works for me. I created a link to a blank page that the user can then open. They can work the questions out, minimise it, forget about it and if they were to try to open a fresh one, close it or try to refresh it, they will get a message asking if they are sure they want to continue. Works exactly as Id hoped.
<textarea placeholder="Please be aware no data will be saved here.
If closed or refreshed all data will be lost"</textarea>
<script>
window.addEventListener("beforeunload", function(event) {
event.returnValue = "Reloading will cause any notes to be lost.";
});
</script>
I´m trying to submit a HTML form while keeping content of displayed page on the screen and triggering browser to make an offer to save username and password.
<div id="signInForm" class="init">
<form>
<input id="username" type="text" placeholder="Username">
<br><br>
<input id="password" type="password" placeholder="Password">
<br><br>
<button type="submit">Sign in</button>
</form>
</div>
I´ve found out, that keeping content can be done various ways:
preventDefault(), onsubmit="return false", action="javascript:".
I successfully made work each of them. But each of them prevents browser (Chrome and Edge) from doing an offer of saving username and password. As long as I´ve learnt, an HTML form has a default behavior on submit which is navigating to the submission link. My theory is that the "navigating event" itself is what triggers an offer to save username and password. If I´m right, the only way to reach my goal is probably based on letting submission happen default way, while making browser keep the content somehow.
Bur all I ever get after hitting <button type="submit">Sign in</button> is a blank page.
Is it even possible to overcome this simply in Apps Script? Or am I missing something basic?
I tried to programmatically reload my page, but wasn´t able to do so. I don´t know how to work with reload().
I´ve tried this:
<!DOCTYPE html>
<html>
<body>
<div id="x">I´m ORIGINAL page</div>
<button onclick="document.getElementById('x').innerHTML= 'I´m EDITED page';">edit page</button>
<br>
<button onclick="myFunction()">Reload page</button>
</body>
<script>
function myFunction() {
window.location.reload(true);
}
</script>
</html>
The snippet above works for me in Stackoverflow snippet editor, but it doesn´t work in my published GAS web app.
EDIT Probably close to solution for my problem is answer in this post: Redirecting from doPost() in Google Web App, HTML form with App script where the author suggests this:
<form method="post" action="<?!= ScriptApp.getService().getUrl() ?>">
<input type="submit" value="submit">
</form>
But it does nothing for me when copied and pasted and I don´t know how to implement it any other way. It looks general...
I was having the same issue when trying to avoid the page to reload to a blank page. The solution that worked for me was a piece of code that is on Google Apps Script Documentation (I leave the link here)
I hope this solution can help you to solve the blank reloading issue.
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
</script>
got a problem and cant find the solution.
I am writing a chat. When a new user opens my site (a new session) a div popes out and the user is asked to fill in his name.
The form works fine when I use an input submit. I want it to work without the submit button, I want it to work when i press a div.
here is my code
html:
<form name="form" id="form" action="index.html" method="post">
<span id="nspan">First name:</span> <input type="text" id="firstname" name="name">
<div name="enter" id="enter">Submit</div>
</form>
the jquery:
$(document).ready(function(){
$("#enter").click(function () {
$("#form").submit();
});
});
nevermind is correct - no problem with that code.
Here's the JSFiddle to prove it: http://jsfiddle.net/8Xk7z/
Maybe you problem is that the id "form" is to general a name, and you already used it for another form.
Another thing, why not use a button or a link? You can style it like you want. Be careful when you use thing for what they are not suppose to be used for, it my give unexpected side effects.
In your case, you may only be able to login to you chat using a mouse, that would exclude blind people. You would also not be able to use the tabulater to get to the login "button". And last, if you are blind and uses a screen reader your would actually not know that there is at login "button", as the reader would not recognize the div as something you can click.
I would recomend using the button-tag like this
<button id="enter">Submit</button>
Or the a-tag like this
<a href id="enter">Submit</a>
If you don't like the predefined styling of them you may always override the styling.
try to define jquery at top of the page
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
Then put your script at next.
still issue.
Please check your other function on same page works fine or not.
I have a form which needs javascript to be enabled for validation, is there a way to disable submit button when javascript is disabled and warn user to enable it first ?
Disable it by default and use JavaScript to enable it.
<input type="submit" value="Submit" id="submitBtn" disabled />
<script type="text/javascript">
var _onload = window.onload || function()
{
document.getElementById('submitBtn').disabled = false;
}
_onload();
</script>
That way, if JavaScript is disabled then the button will also remain disabled.
jQuery version:
<script type="text/javascript">
$(function(){
$('#submitBtn').attr('disabled', false);
});
</script>
Have it disabled by default and if there is javascript, then enable it.
Don't define an HTML form action, but rather define only an onSubmit javascript event handler. If javascript is not enabled, the onSubmit will not fire, but since there is no form action, the submit button won't do anything either.
You could also opt to have the HTML form action go to an error page explaining that javascript must be enabled, so that the user has some sort of feedback.
Alternatively you can start with the button disabled (as other posters suggested). If you do that, you should also consider a message on the form indicating why the button is disabled. Remove that message with javascript if it is enabled at the same time you re-enable the button.
Because disabling a button programmatically depending on the environment and alerting him are both tasks depending on some kind of a scripting language ( like JavaScript ), the answer is no :-/
You got solution for enabling part. For Alerting part you can use good old tag. (-:
<noscript>
<H1> It Wont work w/o javascript. Please Enable</h1>
</noscript>
Excuse the late reply but this got me thinking on how to tackle this as I have a similar issue and it led me here. You should always program your site without javascript and add it after to enhance it, but in my case using things like lightbox are being used as input, which if javascript is disabled, doesn't work right (especially since mine passes values to its parent).
My suggestion is that hopefully you have PHP enabled, so you can simply put at the top of your document
<?php if (isset($_POST)) {
//redirect to page, or set a message variable saying "no results saved"
header('some_page');
$message = "We've detected you do not have " .
"javascript enabled. No results saved";
} ?>
From there, you will have to set all buttons on your page to say
<input name="button" id="button" type="submit" onclick="return false;" />
or you could more simply go
<form name="my_form" id="my_form" method="post" action="" onclick="return false;" />
Hope this helps!