In a form i am making,i need to inform the processing php script what button was clicked.I have three buttons,new,save and delete.I was expecting the form and all the buttons values to be posted but the form + the button clicked only gets posted.I am looking at the html spec here http://www.w3.org/TR/html401/interact/forms.html#submit-format but i am yet to find some explanation if this should be expected.I have this php script
<?php
/**
tpost.php
*/
//Buttons
$new = $_POST['new'];
$save = $_POST['save'];
$delete = $_POST['delete'];
//Error: Notice: Undefined index: save in C:\wamp\www\form-dev\troll.php on line 7
//Forms
$city = $_POST['city'];
$zip = $_POST['zip'];
$cs = $_POST['cs'];
//Error: Notice: Undefined index: save in C:\wamp\www\form-dev\troll.php on line 8
//Buttons echo
echo '<b>'.$new.'</b>' .'<br/>';
echo '<b>'.$save.'</b>' .'<br/>';
echo '<b>'.$delete.'</b>' .'<br/>';
//Forms echo
echo '<b>'.$city.'</b>' .'<br/>';
echo '<b>'.$zip.'</b>' .'<br/>';
echo '<b>'.$cs.'</b>' .'<br/>';
?>
this is the html i am using
<!Doctype html>
<head>
<meta charset="uft-8">
<title>Buttons post</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
label{
width:15%;
float:left;
font-style:italic;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.inew').on("click",function()
{
alert('new');
});
$('.isave').on("click",function()
{
alert('save');
});
$('.idelete').on("click",function()
{
alert('delete');
});
});
</script>
</head>
<body>
<form action="tpost.php" name="troll" method="post">
<label>Enter Your City</label><input type="text" name="city" value="some-city"/><br/><br/><br/>
<label>Enter Your Neighbourhood</label><input type="text" name="zip" value="my-zip" /><br/><br/><br/>
<label>Enter Your Nearest Shopping Mall</label><input type="text" name="cs" value="shop-here" /><br/>
<br/><hr/><br/>
<br/>
<hr/>
<input class="inew" type="submit" name="new" value="new" />
<input class="isave" type="submit" name="save" value="save" />
<input class="idelete" type="submit" name="delete" value="delete" />
</form>
</body>
</html>
What is the explanation for this?.
I found the answer here http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2
It says
If a form contains more than one submit button, only the activated
submit button is successful.
Related
I've been looking for over 2 days for solution to this problem of mine. Went through all the related posts on stack, but no luck. I have a form that accepts data, then passes on to a php procedure to process it which in turn calls on a html thank you page. I am not at all familiar with Javascript or JQuery but can make it work after spending some time. I am posting the codes here along with many suggestions that I tried to no avail. Any help that ends my misery is appreciated. Thanks.
HTML
<form method='post' action='contact-form-proc.php' name='contactform' id='contactform' onsubmit="setTimeout('clear_form()',200);return true">
<p>
<label for='fullname'>Your Name:</label><br/>
<input type='text' name='fullname' />
</p>
<p>
<label for='email' >Email Address:</label><br/>
<input type='text' name='email' />
</p>
<p>
<label for='mobile' >Mobile:</label><br/>
<input type='text' name='mobile' />
</p>
<p>
<label for='checkIndate' >Check in Date:</label><br/>
<input type='text' name='checkIndate'/>
</p>
<p>
<label for='comment' >Comment:</label><br/>
<textarea name='comment' cols='25' rows='3'></textarea>
</p>
<input type="image" src="submit.gif" name="submit"/>
<!--<input type='submit' name='submit' value='' id="submit" />-->
<input type="hidden" name="submit" value="Submit"/>
</form>
PHP
<?php
if(empty($_POST['submit']))
{
echo "Form is not submitted!";
exit;
}
if(empty($_POST["fullname"]) ||
empty($_POST["email"]))
{
echo "Please fill the form";
exit;
}
$name = $_POST["fullname"];
$email = $_POST["email"];
$mobile = $_POST["mobile"];
$checkindate = $_POST["checkIndate"];
$comment = $_POST["comment"];
mail( 'xxx#xxxxxx.com' , 'New form submission' , "New form submission: Name: $name, Email:$email, Mobile: $mobile, CheckIndate:$checkIndate, Comment:$comment" );
header('Location: thank-you.html');
?>
These are what I tried:
<script type="text/javascript">
/*$('#contactform').trigger("reset");*/
function clear_form() {
/* document.contactform.reset();
document.getElementById("contactform").reset();*/
/*$(window).load(function() {
$('#contactform input[type="text"]').val('');*/
$(window).load(function() {
$('#contactform').children('input').val('');
}
});
}
</script>
Thanks a ton for taking time out and trying to help me and all others with a solution to this weird problem.
I found a solution though. I kept everything as it is and additionally,
a. Wrote a function to reset the form(s)and,
b. Added that function to onload and onunload handler of the body element.
As below:
<script>
function clearForms()
{
var i;
for (i = 0; (i < document.forms.length); i++) {
document.forms[i].reset();
}
}
</script>
<body onload="clearForms()" onunload="clearForms()">
Hope it helps and stops many like me from wasting valuable hours and days. Regards.
try this one.
<script type="text/javascript">
$(document).ready(function(){
$('input').val('');
});
</script>
End you don`t have to call onsubmit action, document.ready would be enough.
I have a form in HTML with a submit button:
<button type="submit" class="subscribe-submit" onclick="return foo()">Subscribe</button>
I would like it to have the details written on the form to be sent to my personal email address.
I have searched on Stack Overflow, Google, Bing and Yahoo but I couldn't find the answer
You can't do this with pure HTML. However, with a little PHP you can get your form ready to go.
Here's an example of a form handler PHP code in a separate file called form_handler.php:
<?php
$field_name = $_POST['name'];
$field_email = $_POST['email'];
$field_message = $_POST['comment'];
$mail_to = 'yourPersonalEmail#email.com';
$subject = 'Message from a site visitor '.$field_name;
$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Message: '.$field_message;
$headers = 'From: '.$field_email."\r\n";
$headers .= 'Reply-To: '.$field_email."\r\n";
$mail_status = mail($mail_to, $subject, $body_message, $headers);
if ($mail_status) { ?>
<script language="javascript" type="text/javascript">
alert('Thank you for the feedback.');
window.location = 'form.html';
</script>
<?php
}
else { ?>
<script language="javascript" type="text/javascript">
alert('Something went wrong. Please try again or contact at myPersonalEmail#email.com');
window.location = 'form.html';
</script>
<?php
}
?>
And here's the HTML form in a file called form.html:
<html>
<head>
</head>
<body>
<form name="form" action="form_handler.php" method="POST">
<label class="name">Name</label>
<br>
<input name="name" type="text" required="required">
<br>
<label class="email">E-Mail</label>
<br>
<input name="email" type="email" required="required">
<br>
<label class="comment">Comment</label>
<br>
<textarea name="comment"></textarea>
<br>
<input type="submit" name="submit" value="Subscribe" align="center">
</form>
</body>
</html>
I suggest you learn a little bit about PHP and form handing. You might need to change the fields but I think you'll get the idea.
I am trying to make a suggestion box so that way I can see what my viewers think would make my site better. Here is some code that I have.
<form id="form1" name="form1" method="post" action="">
<label>
<textarea name="input" id="input" cols="45" rows="5"></textarea>
</label>
</form>
<form id="form2" name="form2" method="post" action="">
<label>
<input type="submit" name="export" id="export" value="Submit" />
</label>
</form>`
But this is all I have. It seems to work client side but not server side. Can someone tell me what language and if you know the code that I would have to use that would be great.
Post to another HTML file action="myformresults.html"
Post to a server side scripting language like PHP action="myphpformresult.php" which will 'do things' and then render an HTML document or any other thing (like send as email).
You can call a Javascript function to handle the form.
I would recommend PHP.
You can access a post variable in PHP by name:
HTML <input name="postVar">
PHP $myVar = $_POST['postVar'];
all you need is writing a jquery code as follows in your html file: //note that i rewrite your html code as no need for two forms
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
function submitters(){
event.preventDefault();
$.post( "mail.php.txt", $( "#form1" ).serialize(),function( data ) {
$("#formcontainer").fadeOut("slow");
$("#formcontainer").html(data);
} );
}
</script>
</head>
<body>
<div id="formcontainer">
<form id="form1" name="form1" method="post" action="">
<label>
<textarea name="input" id="input" cols="45" rows="5"></textarea>
</label>
<input Onclick="submitters()" type="button" name="export" id="export" value="Submit" />
</form>
</div>
</body>
</html>
then in mail.php file something like
<?php
$input=$_POST['input'];
$to = 'youremail#domain.com';
$subject = 'the subject';
$message = $input;
$headers = 'From: website.com' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);
?>
i am trying to assign a textbox value to a php variable now problem is i want one button to work for two different pages i.e if i enter in a text box 'a'and click on button it should redirect to 'a.php' page if i write in a text box 'b' it should redirect to 'b.php'.
so one textbox,one button two different pages.
Code :
<html><head>
<meta charset="UTF-8" />
<script>
function submitForm(action)
{
document.getElementById('a').action = action;
document.getElementById('a').submit();
}
function submitForm1(action)
{
document.getElementById('b').action = action;
document.getElementById('b').submit();
}
</script>
</head>
<body >
<h3><font face="verdana" size="3"><b>Enter Text:</b></h3>
<input type="text" align="right" style="font-size:15pt;height:32px;"><br><br>
<form action="b.php" name="b" id="b" method="post">
<form action="a.php" name="a" id="a" method="post">
<input type="submit" onclick="submitForm('a.php')" value="TRY" name="a">
<input type="button" onclick="submitForm1('b.php')" value="TRY" name="b">
</form>
</form>
</body>
</html>
You can change the action onsubmit based on the text inside the input.
<html>
<head>
<script type="text/javascript">
function onsubmit_handler(){
var myForm = document.getElementById('myForm');
var data = document.getElementById('data').value;
if(data == "a")
myForm.setAttribute('action', 'a.php');
else if(data == "b")
myForm.setAttribute('action', 'b.php');
else
myForm.setAttribute('action', 'error.php');
}
</script>
</head>
<body>
<h3>Enter Text:</h3>
<form id="myForm" method="post" onsubmit="onsubmit_handler()">
<input type="text" id="data" name="data" value="">
<input type="submit" value="Post">
</form>
</body>
</html>
Test code here : http://jsfiddle.net/Eg9S4/
use this codes buddy
<html><head>
<meta charset="UTF-8" />
<script>
function submitForm()
{
var link=document.getElementById('a');
var str1 = "a.php";
var n = str1.localeCompare(link);
if(n==1)
{
window.open("main.html");
}
else if(n==-1)
{
window.open("index.html");
}
}
</script>
</head>
<body >
<h3><font face="verdana" size="3"><b>Enter Text:</b></h3>
<input type="text" align="right" style="font-size:15pt;height:32px;"><br><br>
<input type="submit" onclick="submitForm()" value="TRY" name="a">
</form>
</form>
</body>
</html>
The problem looks to be that you're using getElementById but the input elements don't have an ID (they only have a name).
I'd also recommend attaching an onSubmit event to the form and removing the onClick events from the buttons.
Edit: After looking at the code in detail I saw that there were some other issues that were probably hindering the opersation. The most notable one was that you can't nest form tags. There were some other CSS and validation issues.
Here is some working code:
Test Page
function SubmitForm(el) {
// Get the form element so that we can set the action later
var form = document.getElementById('theForm');
// Set the action for the form based on which button was clicked
if (el.id == "A")
form.action = "a.php";
if (el.id == "B")
form.action = "b.php";
// You dont need to submit the form. It's alreasdy happening, so there is no need for an explicit call.
}
</script>
<h3 style="font-family: Verdana; font-weight: bold;">Enter Text:</h3>
<input type="text" style="font-size:15pt;height:32px;"><br><br>
<form method="post" onsubmit="SubmitForm();" action="fake.html" id="theForm">
<input type="submit" id="A" value="A" onclick="SubmitForm(this);">
<input type="submit" id="B" value="B" onclick="SubmitForm(this);">
</form>
I tried following a couple of examples on the web about adding to a mysql database using ajax but it isn't posting to the database but is executing the header at the bottom of the page.
This is the html document where you input the information
edit: Thank you for all your answers, This has now been fixed.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="message.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Add a comment!</title>
</head>
<body id="bodymain">
Home
<br>
<div id="main">
<?=$blog_post_history?>
</div>
<br>
<br>
<form method="post" action="addreply.php">
<input type="hidden" name="blogid" value="<?php echo $_GET['id'] ?>">
Author: <input type="text" name="poster" size="60">
<br>
Email: <input type="text" name="email" size"60">
<br>
Comment: <textarea name='content' rows=10 cols=50 id='content'></textarea>
<input type="submit" value="send" />
</form>
</body>
</html>
This is the javascript
$(function(){
//Whenever the form submites, call this
$("form").submit(function()) {
//submit using ajax
submitMessage();
//prevent from submitting
return false;
}
};
var submitMessage = function (){
if($("#content").val().length > 0 && $("author").val.length > 0)
{
//start ajax request
$.post(
"addreply.php"
{
content: $("#message").val(),
author: $("#author").val(),
email: $("email").val(),
blogid: $("blogid").val()
},
);
}
};
And this is the php page adding to database
<?php
include("connect.php");
$add_comment_query = $db->prepare("
INSERT INTO `comments`
(`email`, `author`, `content`, `postid`)
VALUES
(:email, :author, :content, :postid)
");
$add_message_query->execute(array(
':email' => $_POST['email'],
':author'=> $_POST['author'],
':content' => $_POST['content'],
':postid' => $_POST['blogid']
));
// This calls for a '301' response code instead of '200', with a 'Location'
// sent to tell the browser where to redirect to.
header("Location: home.php");
?>
Can anyone see where I am going wrong. I am completely stumped.
$("author") and $("#author") should be $("#poster").
Also, all your <input> elements are midding id attributes. So:
<input type="text" name="poster" size="60">
should be:
<input type="text" name="poster" id="poster" size="60">
and similarly for all the other inputs.
Your selectors aren't correct.
Did you try debugging the javascript in your browser to see what the value of for instance $("#author") is?
The hash is the ID selector so you need the HTML for that element to have an id property:
<input type="text" name="poster" id="poster" size="60">
All of your other fields should be modified similarly so that each element you are going to use has an ID and each jquery selector is in the format "#" Currently author, email, and blogid have wrong selectors.
Make the HTML:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="message.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Add a comment!</title>
</head>
<body id="bodymain">
Home
<br>
<div id="main">
<?=$blog_post_history?>
</div>
<br>
<br>
<form method="post" action="addreply.php">
<input type="hidden" id="blogid" name="blogid" value="<?php echo $_GET['id'] ?>">
Author: <input type="text" name="poster" id="poster" size="60">
<br>
Email: <input type="text" name="email" id="email" size"60">
<br>
Comment: <textarea name='content' rows=10 cols=50 id='content'></textarea>
<input type="submit" value="send" />
</form>
</body>
</html>
and your jquery:
var submitMessage = function (){
if($("#content").val().length > 0 && $("#poster").val.length > 0)
{
//start ajax request
$.post(
"addreply.php"
{
content: $("#message").val(),
author: $("#poster").val(),
email: $("#email").val(),
blogid: $("#blogid").val()
},
);
}
};