click submit button every 4 secconds - javascript

how can i make automatic click per each 4 sec ?
i want that submit button be clicked every 4 sec.
but its not work correctly
my works :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>*BruteForce*</title>
<script src="!Needs/jquery.min.js"></script>
<style>
#form {
margin: 0 auto;
text-align: center;
}
#getHash {
width: 440px;
text-align: center;
}
#length {
text-align: center;
}
#boxContent {
width: 833px;
height: 469px;
border: 1pt solid black;
text-align: left;
margin: 0 auto;
}
</style>
</head>
<body>
<form id="form" method="post" action="server.php">
<span>Enter Your Hash (SHA256) : </span>
<input id="getHash" type="text" value="" name="getHash" title="">
<input id="length" type="number" value="" name="length" placeholder="Enter the Length">
<input id="create" type="submit" value="create" title=""><br><br>
<div id="boxContent"></div>
<input id="btn" type="button" value="..." title=""><br><br>
</form>
<script>
setInterval(function () {
$("#create").click(function () {
event.preventDefault();
$("#boxContent").html(("Loading ..."));
$.ajax({
type: 'POST',
url: "server.php",
data: $("#form").serialize(),
success: function (response) {
$("#boxContent").html((response));
}
});
});
}, 4000);
</script>
</body>
</html>
as you can see . im trying to make simple brutforce method
but its manual , i want to create a auto .
i used setinterval for every 4 sec . but it doesnt work . ? any idea?

Instead of creating click events every 4s, trigger it!
Use that event argument!
PS: if you haven't already (not present in your code above...) You need to include also the jQuery library! <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
const $create = $("#create"); // Cache your elements!
$create.on("click", function (event) {
event.preventDefault(); // Use the `event` argument
// ... other code here
});
setInterval(() => {
$create.trigger("click");
}, 4000);

add jquery library script before your script ex:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
and try this it works for me:
setInterval(() => {
$create.click();
}, 4000);

Execute the same code that the button will execute every 4 seconds and if you want, change the button's style to look like i'ts clicked

Related

Why doesnt my website sub url working when submitting form but works when i manually enter it

I have a form on localhost:8080 which when you enter form data (user & pass), then press submit, it meant to send a POST to localhost:8080/submit, then should show text on that page saying "Submit page". When I enter "localhost:8080/submit" into my browser, it works, but when I use the submit button to get there, it says "This site can’t provide a secure connection" (aka, doesn't work)
script.js
const url = "https://localhost:8080";
const data = {
"user": "user",
"pass": "pass"
}
function send() {
alert("Sent")
$.post(url, data, function (data, status) {
console.log("Sent " + data + ", status is: " + status)
});
}
body {
background-color: #444444;
}
.form-div {
width: 100%;
height: auto;
text-align: center;
justify-content: center;
align-content: center;
border: 1px solid red;
}
form {
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Harley Swift</title>
<link rel='stylesheet' href='styles.css'/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="form-div">
<form method="POST" action="https://localhost:8080/submit">
<div>
<label for="user">Username</label>
<input name="user" type="text" id="user"><br>
</div>
<div>
<label for="pass">Password</label>
<input name="pass" type="password" id="pass"><br>
</div>
<br>
<div>
<button class="btn" onclick="send()">Submit</button>
</div>
</form>
</div>
</body>
</html>
app.js: https://hastebin.com/udunalurub.lua (couldn't figure out how to use code snippets on here, sorry)
Thank you in advance! I am not too familiar with nodejs servers yet
Don't use https, use http when developing locally.

How to add a form/input/text to end of fetch() request?

Im building a random DogAPI image generator, where you put a number from 1-50 into a form text box, and hit send, and it returns the number you input into (linked) images printed to the console. I can manually put the number at the end of fetch, and it prints that amount to the console, but I'm having trouble connecting the number you put in your form to put it on the end of your fetch request.
Ive tried using template literals. If you manually type ${5} at the end of fetch, it prints 5 images to console. Great! But... how do I use Template Literals to connect what I put in the form to the end of the fetch. ${text} obviously doesn't work! Or am I doing it all wrong? Thanks for your help everyone!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>How Many?</title>
<link rel="shortcut icon" href="#">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<h1>How Many Dog Pics Do You Want?</h1>
<form>
<input type="text" placeholder="1-50?">
<input type ="submit" value="Send">
</form>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
}
JS:
'use strict';
function getDogImage() {
fetch(`https://dog.ceo/api/breeds/image/random/${text}`)
.then(response => response.json())
.then(responseJson => console.log(responseJson));
}
function watchForm() {
$('form').submit(event => {
event.preventDefault();
getDogImage();
});
}
$(function() {
console.log('App loaded! Waiting for submit!');
watchForm();
});
You need to get the value from the input (using .val()), and pass it to getDogImage(text) (see comments in code):
function getDogImage(text) { // add the text parameter
fetch(`https://dog.ceo/api/breeds/image/random/${text}`)
.then(response => response.json())
.then(responseJson => console.log(responseJson));
}
function watchForm() {
$('form').submit(event => {
event.preventDefault();
var text = $('.number').val() || 3; // get the text from the input or use 3
getDogImage(text); // pass to getDogImage
});
}
$(function() {
console.log('App loaded! Waiting for submit!');
watchForm();
});
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h1>How Many Dog Pics Do You Want?</h1>
<form>
<input class="number" type="text" placeholder="1-50?">
<input type="submit" value="Send">
</form>
</div>

Why several clicks fire for each instance of a Class?

I have three tooltip buttons on a page. I can close any open tooltip by clicking anywhere outside buttons. And this is what I came across:
In the code below, when I click on any place on the page, the handler of this part of code is activated $(document).on('click', (event) => this.closeOnOutsideClick(event));
I can see in inspector, that function closeOnOutsideClick is fired three times - it makes three checks for each tooltip button present on the page. I cannot figure out what mechanism is responsible for that and why the check if (!$(event.target).closest(this.$elem)) is not performed only once? My code can be found here and also below: https://jsfiddle.net/bakrall/786cz40L/
This is a simplified version of a more complex code just to give example of my issue:
const selectors = {
tooltip: '.tooltip-container',
tooltipButton: '.tooltip-button',
tooltipMessage: '.tooltip-message'
}
class Tooltip {
constructor(tooltip) {
this.$elem = $(tooltip);
this.$tooltipButton = this.$elem.find(selectors.tooltipButton);
this.$tooltipMessage = this.$elem.find(selectors.tooltipMessage);
this.$tooltipMessageText = this.$tooltipButton.attr('data-tooltip-content');
this.bindUiEvents();
}
bindUiEvents() {
$(document).on('click', (event) => this.closeOnOutsideClick(event));
this.$tooltipButton.on('click', () => this.showTooltipMessage());
this.$tooltipButton.on('blur', () => this.hideTooltip());
}
showTooltipMessage() {
this.$tooltipMessage
.text(this.$tooltipMessageText)
.addClass('shown-message');
}
hideTooltip() {
this.$tooltipMessage
.text('')
.removeClass('shown-message');
}
closeOnOutsideClick(event) {
if (!$(event.target).closest(this.$elem)) {
this.hideTooltip();
}
}
}
//class in another file
const tooltip = $('.tooltip-container');
tooltip.each(function(index, item) {
new Tooltip(item);
})
.input-wrapper {
margin-bottom: 2em;
}
.tooltip-container {
position: relative;
display: inline-block;
}
.tooltip-message {
display: none;
position: absolute;
left: 100%;
top: 0;
width: 10em;
padding: 0.5rem;
background: #000;
color: #fff;
}
.tooltip-message.shown-message {
display: inline-block;
}
button {
width: 1.2em;
height: 1.2em;
border-radius: 50%;
border: 0;
background: #000;
font-family: serif;
font-weight: bold;
color: #fff;
}
button:focus {
outline: none;
box-shadow: 0 0 0 0.25rem skyBlue;
}
input {
display: block;
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title> </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="tooltip.css">
</head>
<body>
<div class="input-wrapper">
<label for="name">
What's your name?
<span class="tooltip-container">
<button class="tooltip-button" type="button" aria-label="more info"
data-tooltip-content="This clarifies whatever needs clarifying">i</button>
<span class="tooltip-message" role="status"></span>
</span>
</label>
<input id="name" type="text"/>
</div>
<div class="input-wrapper">
<label for="age">
What's your age?
<span class="tooltip-container">
<button class="tooltip-button" type="button" aria-label="more info"
data-tooltip-content="This is to know how old you are">i</button>
<span class="tooltip-message" role="status"></span>
</span>
</label>
<input id="age" type="text"/>
</div>
<div class="input-wrapper">
<label for="nationality">
What's your nationality
<span class="tooltip-container">
<button class="tooltip-button" type="button" aria-label="more info"
data-tooltip-content="What country are you from?">i</button>
<span class="tooltip-message" role="status"></span>
</span>
</label>
<input id="nationality" type="text"/>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<script src="tooltip.js" async defer></script>
</body>
</html>
tooltip.each(function(index, item) {
new Tooltip(item);
})
Since you instantiate 3 Tooltips, you bind a separate event listener to the document each time. Each listener is getting triggered with each click. However, each of those listeners has a different this which is what allows each listener to tell if its Tooltip was clicked and if not, hide it.
If you want a single listener you could store a list of all your Tooltips and have the event listener iterate through the list of Tooltips, closing all Tooltips that were not clicked.
Your click event is firing on mutliple elements, because you specified just (document). Maybe you can be more specific:
$(document).on('click', '.input-wrapper', (event) => this.closeOnOutsideClick(event));

How to correctly execute a function JS with onclick?

I'm trying to execute a function by clicking on a span, but it tells me that it is undefined.
$(document).ready(function() {
function callTo(param) {
alert(param);
}
});
.file-up {
background: #f5f5f5 none repeat scroll 0 0;
border: 1px solid #ccc;
color: #383f45;
font-size: 12px;
margin-bottom: 10px;
padding: 6px;
font-size: 10px;
text-align: center;
text-transform: uppercase;
cursor: pointer;
}
<div>
<span class="file-up" onclick="callTo('test')">Click to call</span>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>
sample
</title>
</head>
<body>
<script>
function callTo(param) {
alert(param);
}
</script>
<div>
<span class="file-up" id="index" onclick="callTo('test')">
Click to call
</span>
</div>
</body>
This is a working example without using jQuery, just by vanilla javascript. Insert it and use it directly.
If you want me to post an answer which uses only jQuery for the stated task that you want to accomplish then please let me know.
This is code using jQuery, as you asked -
<!DOCTYPE html>
<html>
<head>
<title>
sample
</title>
</head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#index').click (function callTo() {
alert("Your values is :"+ $(this).data("value"));
});
});
</script>
<div>
<span class="file-up" id="index" data-value="test">
Click to call
</span>
</div>
Try to move your function definition away from $(documents).ready
<script>
function callTo(param) {
alert(param);
}
</script>
Or define event listener like
<script>
$(document).ready(function() {
$('.file-up').click(function() {
//action
});
});
</script>
(I'd better give it an id in this case and change the selector to #id instead of .file-up because other elements can have the same class applied)

Submitting a post form using JavaScript

I would like to replace my HTML button with a JavaScript action. Though I need to a function to submit the form for this to work.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>reCAPTCHA | Blazzike</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
$(function(){
$("header").load("HTML/header.html");
$("footer").load("HTML/footer.html");
});
</script>
<script>
var submit = function(){
document.getElementById("rec").submit();
}
</script>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
<style>
#submit {
background: #1a1a1a;
color: #ffffff;
font-size: 25px;
margin: 0px;
padding: 0.7em;
border: 0px;
width: 303px;
min-width: 250px;
}
</style>
</head>
<header></header>
<body>
<center>
<form id="rec" method="POST" action="<?php echo $_GET["r"]; ?>">
<div data-theme="dark" class="g-recaptcha" data-sitekey="<siteKey>" data-callback="submit"></div>
<input value="Continue" type="submit" id="submit">
</form>
</center>
</body>
<footer></footer>
</html>
the script above does not work because I assume JavaScript can't submit post forms this way. Any help will do.
Thanks,
Blazzike.
If you want the user to click the submit button, have a Javascript function run and do some tasks, then submit the form you can do something like this using jQuery.
//First prevent form from submitting on button click
$("#rec").on('submit', function(e) {
e.preventDefault();
});
//Detect submit button click and perform some actions, then submit form
$("#submit").on('click', function() {
//Do whatever you want here
//...
$("#rec").submit();
});
Try some javascript to select the element by id. Make sure uou put the "rec" as id of the form jn the html!
document.getElementById("rec").submit();
Docs about getElementById
Docs about submit function
Edit 1:
Use input type="button" instead of submit. Then use the second part of Matt Elliot's snippet:
//Detect submit button click and perform some actions, then submit form
$("#submit").on('click', function() {
//Do whatever you want here //...
$("#rec").submit();
});

Categories