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>

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";
});

auto fill current page url to html form input

I have html form using to send feedback by php email.
In one input I want to save url of current page. Where user hit feedback button.
I want to track from which web page user is sending feedback.
Here is my code.
I found php code but its not working
Please help.
<input class="inputst" name="s_link" type="text" value="<?php $dataUrl = "http://".$_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI]; ?>" name="productlink"><br>
<input type="submit" class="inputbtn" name="submit" style="margin-top:30px; float:right; margin-right: 15px;" value="Submit">

Instead of:
<input class="inputst" name="s_link" type="text" value="<?php $dataUrl = "http://".$_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI]; ?>" name="productlink">
Try:
<input class="inputst" name="s_link" type="text" value="<?php echo 'http://'.$_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI]; ?>" name="productlink">
Hope this helps!

try
<?php echo "http://".$_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI]; ?>
you are assigning a variable instead of echoing it..

why different effect in differnt browser after "onclick"

I want to enable the btn1 and disable btn2 on page-load. When I input value in txtbox1, then, on clicking btn1 ,btn1 should be disabled and enable btn2. If I click btn2, then btn2 should also be disabled.
$value= $_POST['tb1'.$id];
echo '<form name="f1" method="POST" action="">';
echo '<input type="text" id="txtbox1'.$id.'" name="tb1'.$id.'" value="'.$value.'" />';
echo '<input type="submit" id="btn1'.$id.'" name = "btnstart'.$id.'" value="START" onClick="document.getElementById(\'btn2'.$id.'\').disabled=false;this.disabled=true;"/><input type="submit" id="btn2'.$id.'" name = "btnend'.$id.'" value="End" onClick="this.disabled=true;" disabled/>';
echo '</form>';
if ( isset( $_POST['tb1'.$id] ) ) {
echo $value;
}
When I use Chrome, i can do the above button effects , but I cannot get the txtbox1 value.
When I use IE and Firefox, I can get the txtbox1 value, but the button effect is not want I want. Which means, I input value in txtbox1 then click btn1 only, then it will automatically enable btn2, then disable both then, then get back to the original status(btn1 enable, btn2 disable).
How to solve this problem?

Since you have dynamic button names, its better not to touch them for disbale/enable feature that you want :
Using jquery:
$(document).ready(function () {
/*Operations on the 1st button click */
$('#form').children("input[type='submit']:first").click(function () {
$(this).attr("disabled", "disabled"); /*disable the 1st button */
$('#form').children("input[type='submit']").eq(1).removeAttr("disabled"); /*enable the 2nd button */
});
/*Operations on the 2nd button click */
$('#form').children("input[type='submit']").eq(1).click(function () {
$(this).attr("disabled", "disabled");
});
});
Additionally : give your form an id, something like :
echo '<form name="f1" id="form" method="POST" action="">';
/* check the form id tag ^^ here*/
basic demo here
but you wont be able to see full feature in it!!

never write your code like this, this makes debugging like pain, just make a script tag and handle everything there like this, the point here is about setAttribute and removeAttribute:
<?php
// your server side code
// finish declaring your variables like
$input_id = 'an_id';
$input_value = 'some_value';
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>testing</title>
</head>
<body>
<form name="f1" method="POST">
<input type="text" id="txtbox1<?php echo $input_id; ?>" name="tb1<?php echo $input_id; ?>" value="<?php echo $input_value; ?>" />
<input type="button" id="btn1<?php echo $input_id; ?>" name="btnstart<?php echo $input_id; ?>" value="START" />
<input type="button" id="btn2<?php echo $input_id; ?>" name="btnend<?php echo $input_id; ?>" value="End" disabled="disabled"/>
</form>
<script type="text/javascript">
btn1 = document.getElementById('btn1<?php echo $input_id; ?>');
btn2 = document.getElementById('btn2<?php echo $input_id; ?>');
btn1.onclick = function() {
console.log(this);
btn1.setAttribute("disabled","disabled");
btn2.removeAttribute("disabled");
return false;
};
</script>
</body>
</html>

Submit form using <a> tag

I am trying to submit a form through onclick event on tag. I have tried triggering document.myform.submit(), this.form.submit(), parentNode.submit() etc. but none of this is working! Using a submit button, the code works fine. But I want to use tag in place of that. Need some help.
<form id="myform" name="myform" method="POST" action="process_edit_questionnaire.php?project=<?php echo $project_id; ?>">
<input name="module" type="hidden" value="<?php echo $module_id;?>"/>
<input name="project" type="hidden" value="<?php echo $project_id;?>"/>
<input name="hidden_ques_id" type="hidden" value="<?php echo $data_array_ques[$j]['ques_id'];?>"/>
<div id="question_block">
<div id="serial_block">
<p id="s_original_<?php echo $j+1; ?>"><a href="#" onclick="showSelectBox(<?php echo $j+1; ?>)">Serial :
<?php
if($data_array_ques[$j]['ques_position']==NULL){
echo $j+1;
}
else {
echo $data_array_ques[$j]['ques_position'];
} ?></a></p>
<p id="s_select_box_<?php echo $j+1; ?>" style="display: none;">Serial :
<select name="serial">
<?php for($p=1;$p<=count($data_array_ques);$p++){ ?>
<option value="<?php echo $p; ?>" <?php if($p==$data_array_ques[$j]['ques_position']){ echo "selected=\"selected\"";} ?> ><?php echo $p; ?></option>
<?php } ?>
</select>
</p>
</div>
<div id="question_text">
<p id="q_original_<?php echo $j+1; ?>"><?php echo $data_array_ques[$j]['ques_text']; ?></p>
<p id="q_text_box_<?php echo $j+1; ?>" style="display:none;"><textarea id="ques_text" name="ques_text" rows="3" cols="30"><?php echo $data_array_ques[$j]['ques_text']; ?></textarea></p>
</div>
</div>
<div id="menu_block">
Save Changes |
Delete This Question
</div>
</form>

you can do it like this with raw javascript
<html>
<body>
<form id="my_form" method="post" action="mailto://test#test.com">
submit
</form>
</body>
</html>
For those asking why I have a href element in my anchor tag, its because it's a compulsory part of an anchor tag, it may well work without but it's not to spec. So if you want to guarantee rendering etc you must give the engine a fully formed tag. So the above achieves this. You will see href="#" used sometimes but this is not always wanted as the browser will change the page position.

If jquery is allowed then you can use following code to implement it in the easiest way as :
Login
or
Login
You can use following line in your head tag () to import jquery into your code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Submit your form like this ...
Your HTML code
<form name="myform" action="handle-data.php"> Search: <input type='text' name='query' />
Search
</form>
JavaScript Code
<script type="text/javascript">
function submitform() { document.myform.submit(); }
</script>

Try this:
Suppose HTML like this :
<form id="myform" name="myform" method="POST" action="process_edit_questionnaire.php?project=<?php echo $project_id; ?>">
<div id="question_block">
testing form
</div>
Submit
</form>
JS :
<script type='text/javascript'>
function submit()
{
document.forms["myform"].submit();
}
</script>
you can check it out here : http://jsfiddle.net/Zm426/7/

<form id="myform_id" action="/myMethode" role="form" method="post" >
<a href="javascript:$('#myform_id').submit();" >submit</a>
</form>

Is there any reason for not using a submit button and then styling it with css to match your other a tags?
I think this would reduce your dependency on having javascript enabled and still get the desired result.

Clean and simple:
<form action="/myaction" method="post" target="_blank">
<!-- other elements -->
Submit
</form>
In case of opening form action url in a new tab (target="_blank"):
<form action="/myaction" method="post" target="_blank">
<!-- other elements -->
Submit
</form>

I suggest to use "return false" instead of useing some javascript in the href-tag:
<form id="">
...
</form>
send form

You can use hidden submit button and click it using java script/jquery like this:
<form id="contactForm" method="post" class="contact-form">
<button type="submit" id="submitBtn" style="display:none;" data-validate="contact-form">Hidden Button</button>
Submit
</form>

Using Jquery you can do something like this:
$(document).ready(function() {
$('#btnSubmit').click(function() {
$('#deleteFrm').submit();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="deleteFrm" method="POST">
<a id="btnSubmit">Submit</a>
</form>