Submit form using <a> tag - javascript

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>

Related

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

Javascript/PHP auto submit keeps submitting form

This code:
<?php
if(isset($_GET['submit']))
{
?>
<head>
<script type="text/javascript">
document.getElementById('up').submit(); // SUBMIT FORM
</script>
</head>
<?php
}
?>
form:
<form name="up" id="up" action="" method="post">
<textarea name="text" rows="40" cols="100"></textarea>
<input type="submit" name="ingameban" value="Save in-game banlist (Upload to server and make new bans take effect)" style="height: 64px; width: 550px;" />
</form>
Keeps looping all the time, the same result as smashing the reload button.
It has to submit the form when the url states ?submit=submit
What to do to fix this?
Thanks
Your approach is right, but the problem is that submit=submit in the URL is copied to the new URL used to submit the form. Because in your form you have:
<form name="up" id="up" action="" method="post">
Since action is empty, the exact same URL is used, so submit=submit stays in the URL. Instead, provide the proper URL in action. Then submit=submit won't be copied to the new URL:
<form name="up" id="up" action="/my-url" method="post">
How about setting an input hidden field, which you mark as true when you submit.
Check this field before submitting again.
Try this:
<?php
if(isset($_GET['submit']))
{
if(isset($_GET['submitted']) && $_GET['submitted'] == 'false') {
?>
<head>
<script type="text/javascript">
document.getElementById('submitted').value = 'true';
document.getElementById('up').submit(); // SUBMIT FORM
</script>
</head>
}
<?php
}
?>
<body>
<form method="get" id="up">
<input type="hidden" id="submitted" name="submitted" value="false" />
...
</form>

passing javascript throught textarea inside a form

I would like to ask a question.
Is there a way to pass jquery script over textarea and being accepted by php with $_POST function?
just like w3schools did, I've tried but the jquery script are missing and I don't know why..
Please somebody help me. Thank you!
<form action="showHTML.php" method="post" >
<textarea name="html" id="hello">
<script src="lib/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("body").css({backgroundColor:"red"});
});
</script>
</textarea>
<form>
And this is my php file that i used to grab the content from the $_POST
<?php
if(isset($_POST['html']) and !empty($_POST['html'])){
$data = htmlentities($_POST['html']);
}else{
echo '<p>Edit the HTML to the right.</p>';
}
echo html_entity_decode($data);
?>
<script src="lib/jquery.min.js"></script>
<form action="showHTML.php" method="post" >
<textarea name="html" id="hello">
$(document).ready(function(){
$("body").css({backgroundColor:"red"});
});
</textarea>
<form>
Now get the script as text from showHTML.php and process it from there. I guess you can't put script tag inside text area like what you have done.
your code should look like this: close your form tag and add a button to submit.
<script>
$(document).ready(function(){
$("body").css({backgroundColor:"red"});
});
</script>
<form action="showHTML.php" method="post" >
<textarea name="html" id="hello">
</textarea>
<input type="submit" value="submit"/>
</form>
----^
php:
<?php
if(isset($_POST['html']) and !empty($_POST['html'])){
$data = htmlentities($_POST['html']);
}else{
echo '<p>Edit the HTML to the right.</p>';
}
echo html_entity_decode($data);
?>

pressing submit button with javascript

actually I have:
<form action="<?php echo $this->getUrl('checkout/cart/estimatePost') ?>" method="post" id="shipping-zip-form" name="shipping-zip-form">
<label for="postcode"<?php if ($this->isZipCodeRequired()) echo ' class="required"' ?>><?php echo $this->__('Zip/Postal Code') ?></label>
<div class="input-box">
<input class="input-text validate-postcode<?php if ($this->isZipCodeRequired()):?> required-entry<?php endif;?>" type="text" id="postcode" name="estimate_postcode" value="<?php echo "04000"; ?>" />
</div>
<div class="buttons-set">
<button type="button" id="send" title="<?php echo $this->__('Get a Quote') ?>" onclick="coShippingMethodForm.submit()" class="button"><span><span><?php echo $this->__('Get a Quote') ?></span></span></button>
</div>
</form>
and I unsuccessful tried:
<script type="text/javascript">
document.getElementById('send').submit();
document.forms['shipping-zip-form'].submit();
</script>
What I want to do it's quite simple, let javascript automatically press the button so submit the form. I will not need the submit button anymore, I need to automate the press button process. Thx
I"m guessing that your function isn't firing. Set it to execute on page load if that's when you'd like it to happen. Also, only <form> elements can be submitted so trying to target your <button id="send"> won't work.
window.onload {
document.getElementById('shipping-zip-form').submit();
}
document.getElementById('shipping-zip-form').submit();
You can use jQuery and try this :
$(document).ready(function(){
$('#send').click(function(){
$('#shipping-zip-form').submit();
});
});

Categories

Resources