Develop Reference

Executing form autosubmit on page load?

I have tried many of the scripts and jquery examples here on this website, but none of them worked for my specific situation.
Basically I'm trying to autosubmit a form (without user needing to press submit).
As soon as the page loads, the autosubmit will be triggered.
My Form:
<form method="post" id="adduser" action="<?php the_permalink(); ?>" >
<input type="text" name="confirmed" id="confirmed" value="yes" class="regular-text" />
<p class="form-submit">
<?php echo $referer; ?>
<input name="updateuser" type="submit" id="updateuser" class="submit button" value="<?php _e('Update', 'profile'); ?>" />
<?php wp_nonce_field( 'update-user' ) ?>
<input name="action" type="hidden" id="action" value="update-user" />
</p>
</form>
As you can see I have php in the form's action, so javascript/jquery that needs to set an action URL inside the script won't work, as they don't allow a php.
Any help would be greatly appreciated.

You could set an event to trigger after the document has loaded, like this:
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const form = document.querySelector('#adduser')
form.submit()
})
</script>
This will submit the form right after all the contents in the DOM will be loaded.

$(function () {
$('#adduser').submit();
}
This should work.

try the following code:
<script>
$(document).ready(function () {
var formData = $('#adduser').serializeArray();
if(formData.length != 0) {
$("#adduser").submit();
}
})
</script>

Submit checkbox value on form without page refresh AJAX PHP

I just started learning ajax and its really great and time saving i agree.
But i got stuck at this point sending form data without page reload.
Below is my html code.
<form id="form4" method="post">
<input type="checkbox" name="test" id="agreed" value="check">
<br>
<br>
<input type="submit" id="form-submit" name="submit" value="Send">
<p class="form-message"></p>
</form>
Below is my Ajax script
<script>
$(document).ready(function() {
$("#form4").submit(function(event) {
event.preventDefault();
var action = 'another_test';
var agreed = $("#agreed").val();
var submit = $("#form-submit").val();
$(".form-message").load("test3.php", {
test: agreed,
submit: submit,
action: action
});
});
});
</script>
Below is my php code
<?php
if (isset($_POST['action'])) {
if ($_POST['action'] == 'another_test') {
$test = $_POST["test"];
$errorEmpty = false;
if (!empty($test)) {
echo "<p>Click the checkbox pls</p>";
$errorEmpty = true;
}
else {
echo "<p>Checkbox clicked</p>";
}
} else {
echo "Error.. cant submit";
}
}
?>
<script>
var errorEmpty = "<?php echo $errorEmpty ?>";
</script>
The php file is on another page called test3.php
This particular code works if it was an input text but doesn't work for a checkbox.
Please help me so i can learn well.
Thanks in advance.

.load() (as per the documentation) performs a GET request, not a POST, but your PHP is (as shown by the $_POST references) expecting a POST request - and it usually makes sense to submit form data using POST.
So you'd be better to use $.post() - this will send a POST request. Then you can handle the response and load it into your "form-message" element in the "done" callback triggered by that request.
N.B. You could also make the code shorter by putting the "action" variable as a hidden field in the form, and then simply serialize the form in one command instead of pulling each value out separately.
Example:
HTML:
<form id="form4" method="post">
<input type="checkbox" name="test" id="agreed" value="check">
<br>
<br>
<input type="submit" id="form-submit" name="submit" value="Send">
<input type="hidden" action="another_test"/>
<p class="form-message"></p>
</form>
JavaScript
$(document).ready(function() {
$("#form4").submit(function(event) {
event.preventDefault();
$.post(
"test3.php",
$(this).serialize()
).done(function(data) {
$(".form-message").html(data);
});
});
});
Documentation:
jQuery Load
jQuery Post
jQuery Serialize

how to go to another page when clicking on each dynamically added submit button using jquery or javascript?

I have a form in which by using javascript and in a while I add content to it.
Denpending on the number of data in database different number of forms are added to the page.
<?php
while($row = mysql_fetch_array ($result)){
?>
<form method="post" accept-charset="UTF-8" >
//add some content to the form by reading from database
<div class="form-group ">
<input type="submit" name="print" id="button" value="print"/>
</div>
</form>
<?php
}//end while
?>
and below I want to redirect to another page when clicked on each "print" button.
But not only it doesn't redirect to another page but also alert just works for the first button.
Below is the code:
<script>
$("#button").click(function(){
alert('hi');
window.location.href = "design_card.php";
});
</script>
how to solve?
jquery, php or javascript solutions are acceptable. other workable solutions, if work, are good.
Thanks for your response in advance.

Check your HTML
<?php
while($row = mysql_fetch_array ($result)){
?>
<form method="post" accept-charset="UTF-8" >
//add some content to the form by reading from database
<div class="form-group ">
<input type="submit" name="print" id="button" value="print"/>
</div>
</form>
<?php
}//end while
?>
You have created multiple <input> element dynamically with duplicate id so the better way is to assign a class to them like
<?php
while($row = mysql_fetch_array ($result)){
?>
<form method="post" accept-charset="UTF-8" >
//add some content to the form by reading from database
<div class="form-group ">
<input type="submit" name="print" class="buttonClass" value="print"/>
</div>
</form>
<?php
}//end while
?>
And then use this buttonClass class as a jquery selector like this
$(".buttonClass").click(function(){
alert('hi');
window.location.href = "design_card.php";
});

How to simply post javascript data to PHP with HTML form

I have this in my javascript code:
var data = signaturePad.toDataURL('image/png');
document.write(data);
the output looks slimier to that:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADICAYAAADGFbfiAAAHFklEQVR4Xu3VsQ0AAAjDMPr/0/yQ2exdLKTsHAECBAgQCAILGxMCBAgQIHAC4gkIECBAIAkISGIzIkCAAAEB8QMECB...
Instead of document.write(data); I want to post the data to the self page by using a simple HTML form with hidden filed that can hold the data from JS. then, I want to use PHP to handle $_POST and store the data in a variable...
<?php
// check for form submission...
if(isset($_POST['send'])) {
// get the data
$data = $_POST['data'];
}
?>
HTML form:
<form method="post">
<input type="hidden" name="data" value="">
<input type="submit" name="send" value="submit">
</form>
I understand that I can somehow do it with AJAX but I couldn't figure out with the form, how should I get this done?
I guess that I'm looking for 2 solutions - first, how to use the form with JS to store the data in the hidden field and afterwords, maybe how to post it via AJAX to PHP if it can't be just posted to the same page...

There is a lot of ways to achieve this. In regards to the way you are asking, with a hidden form element.
change your form to:
<form method="post" name="myform" method="post" action="script.php">
<input type="hidden" name="data" value="">
<input type="submit" name="send" value="submit">
</form>
Javascript:
var data = signaturePad.toDataURL('image/png');
document.myform.data.value = data;
document.forms["myform"].submit();
Or Jquery:
var data = signaturePad.toDataURL('image/png');
$('form input[name="data"]').val(data);
$("form").submit();

use like this
<?php
$data="<script>signaturePad.toDataURL('image/png')</script>";
?>
<form method="post">
<input type="hidden" name="data" value="<?php echo $data; ?>">
<input type="submit" name="send" value="submit">
</form>
works all the time.

How do I run a PHP code when user submit data with html

I wrote a piece of code, when the user click on submit button it send a string to PHP and then my code will run a Mysql query (based on the submitted string) and then using file_put_content it will upload the mysqli_fetch_array result to the file.
All I want to do is without refreshing the page it submit the value to php form and run the code then show Download From Here to the user.
How should I do that using javascript or jQuery ?
if(#$_POST['submit']) {
if (#$_POST['export']) {
$form = $_POST['export'];
echo $form;
$con1 = mysqli_connect("localhost", "root", "", "test_pr");
$sql2 = "SELECT email FROM `my_data` WHERE email LIKE '%$form%'";
$result2 = mysqli_query($con1, $sql2);
$rows = array();
while ($row = mysqli_fetch_array($result2, MYSQLI_ASSOC)) {
$rows[] = $row['email'] . PHP_EOL;
}
$nn = implode("", $rows);
var_dump($rows);
echo $nn . PHP_EOL;
$file = fopen("export.csv", "w");
file_put_contents("export.csv", $nn);
fclose($file);
}
}
?>
<html>
<form enctype="multipart/form-data" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method=post>
<input name="export" type="text" value="example" /> Export Address<br/>
<input name="submit" type="submit" value="submit" />
Download From Here
</form>
</html>

Assuming you know how to include jquery, you would first bind a submit handler to the submit button, (I've added an id to make it easier) and prevent the default submit action. Then add an AJAX post request to the handler. This will post to your php file. Have that file echo out your link, then have the ajax callback function append it to the desired element. Something like this:
<form enctype="multipart/form-data" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" id="form1" //Add an id to handle with >
<input name="export" type="text" value="example" /> Export Address<br/>
<input name="submit" type="submit" value="submit" />
Download From Here
</form>
<script>
$("#form1").submit(function (event) {
event.preventDefault();
$.post("//path of your php file here",{inputText: $("input[type='text']")},function (returnedString) {
$("#whereToPutReturnedString").append(returnedString);
});
});
</script>
Also, if you want to just show the link when the button is clicked, do the following:
<script>
$("input[type='submit']").submit(function () {
$("#idOfElementToPlaceLink").append("Your anchor text");
});
</script>
or you could just have it hidden with css or jquery and do $("#theId").show();
If you need more help, just holler!