HTML make h-captcha form required in post form - html

Hello I am currently trying to implement h-captcha into a html form in my website
However I noticed that by default its not "required" like for example text boxes can made to be
I havent found any good solutions out there who can help me out with this issue
Heres btw how I implement the h-captcha form itself
<form action="/end" method="post">
<button type="submit">Submit</button>
<div class="h-captcha" data-sitekey="sitekey here" data-theme="dark"></div>
<script src="https://js.hcaptcha.com/1/api.js" async defer</script>
</form>

try importing the script in your header.

Even when importing to the head. I also found with my form the same issue. You can leave the hcaptcha and still proceed to submit

If you have a server why not use https://github.com/Realsphere/OpenCAPTCHA
Its free, but only compatible with NodeJS

Related

How to add buttons and inputs in a wordpress.com site

I added a custom html block on my wordpress.com site and wrote a simple bit of code to act as a search widget.
I've tried many things. I tried making button run a script function, I tried making the function listen for the button, I tried using a a href link (maybe woud work if I tried harder).
<input type="text" id="input" value="Search...">
<br>
<button onclick="window.location.href = 'https://vinelings.home.blog/?s=' + document.getElementById('input').value">🔎 Search</button>
I want it to make the button grab the input text then redirect the tab the search for that term.
Not sure if this is a wordpress.com problem, if it is can i get around it in any way?
Code: https://imgur.com/iRvb29V.jpg
Result: https://imgur.com/GUcwIg9.jpg
EDIT:
I am using the Custom HTML block.
My theme is ALtoFocus.
You need to put your html markup into custom html block

Difficulties With Button Functionality

Good Day,
I am working through freecodecamp and am currently grappling with the quote generator problem. I have run into a bit of an issue with getting functionality for me scripting a change when clicking the button. Basically I have my own code which I'll post below, but also trying to simply copy and paste the code from them I am still unable to get functionality in my button.
I am sure it's an honest and easy mistake but hopefully that should make it all the easier to resolve :) Let me know if you have any questions and I genuinely appreciate it!
(please note I simply want to change the display message upon clicking the button)
<script>
$(document).ready(function(){
$("#getMessage").on("click", function(){
$(".message").html("New Message");
});
});
</script>
<div id="wrapper">
<button type="button" id = "getMessage" class = "btn btn- primary">Generate New Quote</button>
</div>
<div class= "text-center">
<div class = "message">
Sample
</div>
</div>
As the others have mentioned, you are most likely not adding jQuery, yet you are attempting to use it ($). To confirm this, check your console. It's probably filled with Uncaught ReferenceError: $ is not defined.
Assuming you're using CodePen as the challenege says in the objective, you can very quickly and easily include jQuery. To do so, just click the settings cog next to JS, use the Quick-add drop down, and select jQuery.
If you wish to include it manually (as you will most likely have to in future development) I recommend Drefetr's answer.
There do not appear to be any major issues with the code (with respect to the logic, the editor may have rendered your formatting a little nastily).
Can you confirm that you have included the jQuery libraries within the header of your HTML document? e.g.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
For more information: https://developers.google.com/speed/libraries/#jquery

Change form submission URL based on button clicked

i want to use a button as a link to another page. i have looked around and read some solutions but none worked. i dont want to use action in my form tag because i might want to have couple of buttons as links in that form tag.
here is what i have tried last:(didnt work)
<button onclick="location.href='../ClientSide/Registration/registration.aspx'">register</button>
what am i doing wrong? or is there a better/other way?
i really would like to use only html if possible, if not then to use: javascript or asp.net( i dont know jquery or php)
You cannot do this directly using only HTML.
You have two options:
Option 1 Post the data to a single script on the server that decides what to do based on which button is clicked.
<form action="/some-url.aspx" method="post">
<button name="button_action" value="register">register</button>
<button name="button_action" value="another">another</button>
</form>
Then your script at /some-url.aspx would decide what to do next based on the value of button_action.
Option 2 Use JavaScript to change the form's action attribute based on which button is clicked.
<form id="form-with-buttons" action="/some-url" method="post">
<button id="register-button" data-url="/some-url.aspx">register</button>
<button id="another-button" data-url="/another-url.aspx">another</button>
</form>
<script>
$("#register-button, #another-button").click(function(e) {
e.preventDefault();
var form = $("#form-with-buttons");
form.prop("action", $(this).data("url"));
form.submit();
});
</script>
Option 1 is more accessible but requires some messiness on the server side. Option 2 is fairly clean but requires JavaScript and a little messiness to work. It really depends on where you want the extra logic and how you feel about the accessibility of your form.
use jQuery on you page and this code
$(function(){
$("button").on("click",function(e){
e.preventDefault();
location.href='../ClientSide/Registration/registration.aspx';
})
});
e.preventDefault() makes form NOT SUBMITING
Use the formaction="url" tag on the <input> or <button>, as per: https://css-tricks.com/separate-form-submit-buttons-go-different-urls/
A simple answer would be wrapping the button inside anchor
<a href='../ClientSide/Registration/registration.aspx'>
<button>Click Here</button>
</a>

Autofill, Autocomplete in all browsers in form in fancybox

Hi I have the following problem. I am building a form inside a div which initially is with display:none; inside that form I have two fields - e-mail and password like this:
<form id="formino" name="blah" action="" autocomplete="on"><input type="text" name="emal" id="maila" autocomplete="on"> .................. </form> ....
So in that way the integrated in the browser autocomplete(autofill) doesn't work no matter what I do.
The doctype is html5. The html is perfectly constructed. It never worked before . The browser is thousand times checked and is with the best settings for that with all the privacy stuff done right (IE,FF,Chrome).
Please don't suggest "we need more info, etc , etc". Assume that everything is ok with the code.
Again:
Fancybox, div - display:none; form , inputs, AJAX after button click, bind on the submit() with return false;
Thanks

how to add pagination in HTML

I have created one .html page. I have to use pagination in it so that i can avoid scrolling upto last page.and i can move to next page by click on button("Next")
You can create a form like this:
<form action="nextpage.html" method="get">
<input type="submit" value="Next" />
</form>
That will give you a form with a button that redirects the user to the page nextpage.html
Assuming you are looking for a way to implement pagination, take a look at this jquery plugin. And I believe you will find a tons more plugins across the web.
Use Jquery Pager
You can find its Demo here.
You can do that with PHP. With PHP, you can dynamcally generate HTML pages, in this case with a certain amount of items on it and links to the next and previous page.