Submitting a post form using JavaScript - 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();
});

Related

click submit button every 4 secconds

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

Activating popup (HTML,PHP,Javascript/Jquery)

I have a simple request for you brainies today. What i am trying to do is to activate a pop-up inside PHP tags. I have tested to see if the pop-up works by itself, and it does. My problem is the button, i have used the same setup elsewhere, but this time no cigar. I have also tried echoing the button inside the PHP tags but nothing happens.
My code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Lib\JqueryUIcss.css">
<script src="Lib\Jquerylib.js"></script>
<script src="Lib\JqueryUI.js"></script>
</head>
<body>
<button type=" button" class="LeButton"> Clicky Clicky!</button>
<?php
if(isset($_POST['LeButton'])){
echo'<script> $(function() { $( "#dialog" ).dialog(); }); </script>';
echo'<div id="dialog" title="Basic dialog">';
echo'<p>Image:</p>'; </div>';}
?>
</body>
</html>
I tried specifying it as a function aswell and added onclick() to the button to call that function, nothing happend either. Mind that this is the first time i am ever using Javascript/jQuery.
I (kindly) lauched a bit about the echo <script> part.
Allow me to write you a piece of code, with explanation and documentation:
HTML button:
<button type="button" id="LeButton" class="LeButton"> Clicky Clicky! </button>
&
<div id="dialog" title="Basic dialog" style="visibility:hidden"><p>Image:</p> <img src="http://placehold.it/50x50" alt="Placeholder Image" /></div>
Explanation:
Your button needs an id value. Which is called 'LeButton' in this example.
Documentation:
https://www.w3schools.com/tags/att_id.asp
jQuery part:
<script>
jQuery(document).ready(function() {
/**
* #version 1.0.0.
*
* Do magic on button click 'LeButton'
*/
$("#LeButton").click(function() {
$("#dialog").css("visibility", 'visible'); // make the div visible.
$("#dialog").dialog(); // Post here your code on forexample poping up your modal.
});
});
</script>
Explanation:
Your tag can be placed on the bottom of your page. Your browser will 'read' the whole page. By saying '(document).ready', your script will be executed once the page has been red by your browser.
For the '.click' part it's a jQuery function you can use. So which
means: once id attribute 'LeButton' (#) is clicked, jQuery will
execute a function, which will alert text in this case.
Documentation:
https://api.jquery.com/click/
Note: Make sure you have jQuery included/enabled.
Link:
https://jquery.com/download/
Note from Simon Jensen:
You should elaborate that the Class-attribute is for styling and the
Id-attribute can be for whatever code or identifying purposes and are
unique. Therefore should people be careful with styling with the
Id-attribute as things might conflict at some point. The ID-attribute
is used to interact with the "#LeButton" attribute.
The PHP can't be run from the client. If you want the dialog to be shown onclick of the button, you must send the element before it's clicked, at the moment when it is sent to the client. You should have the dialog element hidden until the user clicks the button. It could be something like:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Lib\JqueryUIcss.css">
<script src="Lib\Jquerylib.js"></script>
<script src="Lib\JqueryUI.js"></script>
</head>
<body>
<button type=" button" class="LeButton" onclick="$('#dialog').dialog()"> Clicky Clicky!</button>
<div id="dialog" title="Basic dialog" style="display:none">
<p>Image:</p>
</div>
</body>
</html>
You could also change the onclick attribute to a script in the head like this:
<script>
$(function() {
$(".LeButton").click(function() {
$('#dialog').dialog();
});
});
</script>
I recommend you to change the class of the button for an id, and then using #LeButton instead of .LeButton
You can handle this on the client-side without the need to use PHP to do so you need to give your button a unique identifier so whenever the button is clicked you can open the dialog using a simple evenlisener like so:
var dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
close: function() {
// do stuff here whenever you close your dialog
}
});
document.getElementById('my-button').addEventListener('click', function () {
dialog.dialog('open');
});
#dialog-form {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button type=" button" id="my-button" class="LeButton"> Clicky Clicky!</button>
<div id="dialog-form">
Name: <input><br/>
Password: <input type="passowrd">
</div>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Lib\JqueryUIcss.css">
<script src="Lib\Jquerylib.js"></script>
<script src="Lib\JqueryUI.js"></script>
</head>
<body>
<form action="index.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="LeButton" value="an_arbitraty_value">
<input type="submit" class="LeButton">
</form>
<?php
if(isset($_POST['LeButton'])){
echo'<div id="dialog" title="Basic dialog">';
echo'<p>Image:</p></div>';
}
?>
</body>
</html>
When you load the html page $_POST['LeButton'] is not set. Therefore the intended dialog box wil not be generated in the page. In order to have $_POST['LeButton'] set, you should pass it to the html page first, hence the form I added.
Alternatively you could go for a full javascript solution like so:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.hidden { display: none }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<button type=" button" class="LeButton" onclick="showDialog();">
Clicky Clicky!
</button>
<div id="dialog" title="Basic dialog" class="hidden">
<p>
This is the default dialog which is useful for displaying information.
The dialog window can be moved, resized and closed with the 'x' icon.
</p>
</div>
<script>
function showDialog() {
$( "#dialog" ).dialog();
};
</script>
</body>
</html>

add text of a tag to input tag by clicking on it

I want to show information to submit or reject.
I have a tag() include the information that should be checked.
if some of them are not correct, should be added to input tag and then by click on reject button, all input tag data pass to controller.
The following code does not work.
I dont know is there a better way to do it ?
thanks a lot for your attention.
<html lang="en">
<head>
<title>example</title>
<link href="#Url.Content("https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css")" rel="stylesheet">
<script src="#Url.Content("https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js")"></script>
<script src="#Url.Content("https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js")"></script>
</head>
<body>
Name
<div style="width: 500px; margin: 0px auto;">
<h2 style="font-family:cursive;">Jquery - input tags plugin example</h2>
<input name="tags" id="input-tags" style="width:500px !important" />
</div>
<script>
$("a").click(function () {
i = $(this).data("value");
$('#input-tags').tagsInput('add', i);
});
</script>
</body>
</html>
You are using jQuery TagsInput not Bootstrap TagsInput so you should use addTag not .tagsInput('add')
$('#input-tags').tagsInput();
$("a").click(function(e) {
e.preventDefault();
var i = $(this).data("value");
$('#input-tags').addTag(i);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js"></script>
Name
<div style="width: 500px; margin: 0px auto;">
<h2 style="font-family:cursive;">Jquery - input tags plugin example</h2>
<input name="tags" id="input-tags" data_role="tagsinput" style="width:500px !important" />
</div>
Source

form not working in jquery hovercard

I am using jquery hovercard plugin. I created a hiddendiv which contains a form. So it returns the form on hovering.
Later I noticed that the form's submit,reset,clear options were not working. Let me know where I'm doing wrong. I think this plugin doesn't handle the <form>. I might be wrong.
Below is what I've tried.
<script type="text/javascript" src="http://dl.dropbox.com/u/40036711/jquery.hovercard.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$('#demo-basic').hovercard({detailsHTML:$('#hiddenDiv').html(),
width: 210
});
});
</script>
<style type="text/css">
body
{
font-family:Sans-serif;
font-size:12px;
padding:15px;
line-height:1.5em;
}
#hiddenDiv
{
display:none;
}
strong
{
font-weight:bold;
}
</style>
</head>
--------------
--------------
<body>
<p><label id="demo-basic">Filter</label></p>
<div id="hiddenDiv">
<form name='testform' action='$action'>
some <input> and <option> tags...
<a href='javascript:document.testform.reset()'><img src='$path/resetimage.png'></a>
<a href='javascript:document.testform.clear()'><img src='$path/clearimage.png'></a>
<a href='javascript:document.testform.submit()'><img src='$path/submitimage.png'></a>
</form>
-----
-----
Got it, it's not due to the plugin, the reason of the error was that I tried to use <form> inside another <form> which was stupid. Actually the html file was too big that I didn't come to know that.

Adding data dynamically to a HTML page

In a htmlpage using jQuery or JavaScript how can the following be achieved?
User types in a question in a textarea and press on enter button, then the same question should be displayed dynamically in the page below the textarea and the user can enter as many questions.
And when the user is done the page is submitted through a submit button.
Can you give a small hint of how this can be done?
Try this to get started :
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#textareabutton').click(function(){
var q = $('#textarea').val(),
$p = $('<p>').html( q );
$('#questions').append( $p );
});
$('#submit').click(function(){
var tab;
tab = $('#questions p').serializeArray();
// now do something with $.ajax to submit the questions
$.post("myphp.php",tab,function(resp){
// what do I do with the server's reply ???
});
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<textarea id='textarea'></textarea>
<button type='button' id='textareabutton'>Add question</button>
<div id='questions'></div>
<button type='button' id='submit'>Submit questions</button>
</body>
</html>
Use the innerHTML property of a div to add the questions to.

Categories