Submit the form by clicking links without using the submit button
I am trying to submit a form by clicking links without using a submit button. Each form element has its own value that must be submitted when clicked. This does not work. I could use JavaScript or jQuery. Please take a look at the code:
<head>
<style>
div {
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
</head>
<body>
<form name="myform" action="test.php" method="post">
<div>
<a href="javascript: submitform()" value='h1'>h1</a><br>
<a href="javascript: submitform()" value='h2'>h2</a><br>
<a href="javascript: submitform()" value='h3'>h3</a><br>
</div>
</form>
<script type="text/javascript">
function submitform()
{
document.myform.submit();
}
</script>
<div>
<?php
$form=$_POST['myform'];
echo $form.' bla<br>';
?>
</div>
</body>
</html>
with suggestions for a baruch!
<head>
<script src="jquery.js" type="text/javascript"></script>
<style>
div {
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
</head>
<body>
<form name="myform" action="test.php" method="post">
<input type='hidden' id='hx' name='hx' value=''>
<div>
<a href="javascript: submitform('h1')">h1</a><br>
<a href="javascript: submitform('h2')">h2</a><br>
<a href="javascript: submitform('h3')">h3</a><br>
</div>
</form>
<script type="text/javascript">
function submitform(val)
{
$("#hx").val(val);
document.myform.submit();
}
</script>
<div>
<?php
echo $_POST['hx'];
?>
</div>
</body>
</html>
source to share
Add the following line after <form...>
:
<input type='hidden' id='hx' name='hx' value=''>
Then change your calling function to:
<a href="javascript: submitform('h1')">h1</a><br>
Your function:
<script type="text/javascript">
function submitform(val)
{
$("#hx").val(val);
document.myform.submit();
}
</script>
in your php:
echo $_POST['hx'];
How it works?
1.You click the link
2. The js function changes the value of the HIDDEN INPUT field
3. The js function submits the form
4. $ _ POST refers to a hidden input value
source to share
First, I wouldn't use href="javascript:submitForm();"
, instead usehref="#" onclick="submitForm(this)"
Add a hidden field to your form
<input type="hidden" value="" id="hiddenId" />
In the submitForm method, change myform to forms [0]. I believe this will be more browser friendly. Anywho ... add a parameter to your method so you can set the value of the hidden field.
<script type="text/javascript">
function submitform(el)
{
document.getElementById('hiddenId').value = el.value;
document.forms[0].submit(el);
}
</script>
source to share
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function() {
$("form a").click(function() {
var value = $(this).data('value');
$.post('.', { myform: value });
return false;
});
});
</script>
</head>
<body>
<form>
<a href="" data-value="h1">h1</a>
<a href="" data-value="h2">h2</a>
<a href="" data-value="h3">h3</a>
</form>
</body>
</html>
source to share