My form code is
<form name="myForm" ng-controller="Ctrl" action="form.php" method="POST">
Name: <input name="input" ng-model="userName" name="name" required placeholder="Enter Name"><br>
Email: <input name="email" ng-model="userEmail" name="email" required placeholder="Enter Email"><br>
<input type="submit" name="submit"><br>
<tt>userType = {{userName}}</tt><br>
<tt>userEmail = {{userEmail}}</tt><br>
</form>
My script is
<script >
function Ctrl($scope) {
$scope.userName = '';
$scope.userEmail = '';
}
</script>
form.php code is
if(isset($_POST['submit']))
{
$name=$_POST['name'];
$email = $_POST['email'];
echo $name."<br>";
echo $email."<br>";
}
how to pass form value to php , any idea
I would prefer to keep my model inside an object:
here is a plunker: http://plnkr.co/edit/fC1GikCS0v1tDVTG37vZ?p=preview
controller
function Ctrl($scope, $http) {
$scope.user = {
name : '',
email: ''
};
$scope.submit = function(user){
$http.post('/form.php', user);
}
}
html
<form name="myForm" ng-controller="Ctrl" ng-submit="submit(user)">
Name: <input type="text" ng-model="user.name"><br>
Email: <input type="email" ng-model="user.email"><br>
<input type="submit" name="submit"><br>
</form>
in ur code above u used name tag twice..
thats y in php code it was not picking up the data.
Related
Form Submission using Amp template is not working, I can't post data from amp-form by using php .Simply No action is getting performed. How to fix it?
Mypage: http://samiakhalil.com/theinfotime/amp/register1.php
<?php
if (isset($_POST['register'])) {
$name = $_POST['name'];
$email = $_POST['email'];
echo $name;
}
?>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<form method="post"
action-xhr="https://ampbyexample.com/components/amp-form/submit-form-input-text-xhr"
target="_top">
<input type="text" class="data-input" name="name" placeholder="Name" required>
<input type="email" class="data-input" name="email" placeholder="Email" required>
<input type="submit" value="Register" name="register" class="button button-primary">
</form>
add
<input type="hidden" name="register" value="a">
button name is empty, i dont know
I have created an HTML form that stores data in a database and later on I take them, and today I wanted to make it more advanced.
I have a form that looks like this (not for login, just for example)
<form method="post" action="process.php" autocomplete="off">
Name: <input type="text" name="name"/>
Surname: <input type="text" name="surname" />
Phone: <input type="text" name="phone" />
<input type="submit" />
In process.php, it stores data in the database so later I can use them.
I want to make it so if one or more of them are empty, when you press submit button it shows error like "Must fill all fields", but if you have done everything, it just submits and stores data in database.
I thought I can make with this kind of code:
<?php
$required = array('name', 'surname', 'phone');
$error = false;
foreach($required as $field) {
if (empty($_POST[$field])) {
$error = true;
}
}
if ($error) {
Write an error message and don't react to submit
}
else {
If everything is done, allow to submit
}
?>
How can I make it work, so that you can't press Submit while you haven't finished all fields?
You're wanting something client side to validate the fields before you're able to submit to the next page. Look up validation in jQuery and maybe include the "required" attribute that's been added into HTML5.
Add name attribute to button set required to all required fields
<input name="submit" type="submit" />
in php
<?php
if(isset($_POST['submit'])){
$required = array('name', 'surname', 'phone');
$error = false;
foreach($required as $field) {
if (empty($_POST[$field])) {
$error = true;
}
}
if ($error) {
write and error message and don't react to submit
} else {
if everything is done, allow to submit
}
}
?>
Try the below code
<?php
if(isset($_POST['submit'])){
$required = array('name', 'surname', 'phone');
$error = false;
$message='';
foreach($required as $field) {
if (empty($_POST[$field])) {
$error = true;
}
}
if ($error) {
$message = 'All fields required';
}else{
//Submit process here
}
}
?>
<?php echo $message; ?>
<form method="post" action="process.php" autocomplete="off">
Name: <input type="text" name="name"/>
Surname: <input type="text" name="surname" />
Phone: <input type="text" name="phone" />
<input type="submit" name="submit" value="Submit" />
Easiest and quickest way, You can use HTML5 required.
<form method="post" action="process.php" autocomplete="off">
Name: <input type="text" name="name" required />
<BR>
Surname: <input type="text" name="surname" required />
<BR>
Phone: <input type="text" name="phone" required />
<BR>
Gender: Male <input type="radio" name="gender" value="1" required />
Female <input type="radio" name="gender" value="2" required />
<BR>
<input type="submit" />
</form>
HTML :
<script src="bilal.js"></script>
<form action="action.php" method="post" id="Form1">
<input type="text" name="otherData" value="xxx">
<input type="hidden" name="nameExample" value="" id="nameExampleCopy">
<input type="submit">
</form>
Username: <input type="text" name="nameExample" id="nameExampleOriginal">
and a JS code copies the value of an external input field to a hidden input field.
JS :
document.getElementById('Form1').addEventListener('submit', function () {
var originalElement = document.getElementById('nameExampleOriginal');
var hiddenElement = document.getElementById('nameExampleCopy');
hiddenElement.value = originalElement.value;
});
action.php :
<?php
echo $_POST['otherData'];
print "\n";
echo $_POST['nameExample'];
?>
but i only get the "otherData" that inside the form and can't get the username , any way to do that ? and i heard about Sessions is it useful to use it here ? and how ?
Try putting JS part in the same page..
<form action="action.php" method="post" id="Form1">
<input type="text" name="otherData" value="xxx">
<input type="hidden" name="nameExample" value="" id="nameExampleCopy">
<input type="submit">
</form>
Username: <input type="text" name="nameExample" id="nameExampleOriginal">
<script>
document.getElementById('Form1').addEventListener('submit', function () {
var originalElement = document.getElementById('nameExampleOriginal');
var hiddenElement = document.getElementById('nameExampleCopy');
hiddenElement.value = originalElement.value;
});
</script>
I am currently learning forms and Ajax posting without a page refresh. I have tree forms and one submit button. I have assigned php variables to each input field that will take the value of what’s typed in. The value is echoed for each input box. Is it possible to submit all three forms at the same time? And if yes, how would I submit these values to a MySQL database after the button click?
Ajax:
function() {
$.ajax({
type: "POST",
url: "posting.php",
data: {
"name": $("#name").val(),
"age": $("#age").val(),
"phone": $("#phone").val(),
"email": $("#email").val(),
"job": $("#job").val(),
"hobby": $("#hobby").val(),
},
success: function(data) {
$("#inputResult").html(data);
}
});
}
PHP
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
if (isset($_POST['name'])) {
$name = $_POST['name'];
echo '<div id="name_input"><h2 class="lastTab">Name:</h2>' . $name . '</div>';
}
if (isset($_POST['age'])) {
$age = $_POST['age'];
echo '<div id="age_input"><h2 class="lastTab">Age:</h2>' . $age . '</div>';
}
if (isset($_POST['phone'])) {
$phone = $_POST['phone'];
echo '<div id="phone_input"><h2 class="lastTab">Phone:</h2>' . $phone . '</div>';
}
if (isset($_POST['email'])) {
$email = $_POST['email'];
echo '<div id="email_input"><h2 class="lastTab">Email:</h2>' . $email . '</div>';
}
if (isset($_POST['job'])) {
$job = $_POST['job'];
echo '<div id="job_input"><h2 class="lastTab">Job:</h2>' . $job . '</div>';
}
if (isset($_POST['hobby'])) {
$hobby = $_POST['hobby'];
echo '<div id="hobby_input"><h2 class="lastTab">Hobby:</h2>' . $hobby . '</div>';
}
}
HTML
<div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
<form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm1" name="postForm1" class="postForm">
Name
<input type="text" id="name" class="detail" name="name" value="" />
Age
<input type="text" id="age" class="detail" name="age" value="" />
</form>
</div>.
<div id="tab-2" class="ui-tabs-panel ui-tabs-hide">
<form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm2" name="postForm2" class="postForm">
Phone Number
<input type="text" id="phone" class="detail" name="phone" value="" />
Email
<input type="text" id="email" class="detail" name="email" value="" />
</form>
</div>
<div id="tab-3" class="ui-tabs-panel ui-tabs-hide">
<form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm3" name="postForm3" class="postForm">
Job
<input type="text" id="job" class="detail" name="job" value="" />
Hobby
<input type="text" id="hobby" class="detail" name="hobby" value="" />
</form>
</div>
You can either use javascript to catch the submit of the form or you can trigger a function that you ve created. It doesn t have to be 3 forms or even a form element for the second case to work
HTML:
<div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
<form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm1" name="postForm1" class="postForm">
Name
<input type="text" id="name" class="detail" name="name" value="" />
Age
<input type="text" id="age" class="detail" name="age" value="" />
</form>
</div>.
<div id="tab-2" class="ui-tabs-panel ui-tabs-hide">
<form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm2" name="postForm2" class="postForm">
Phone Number
<input type="text" id="phone" class="detail" name="phone" value="" />
Email
<input type="text" id="email" class="detail" name="email" value="" />
</form>
</div>
<div id="tab-3" class="ui-tabs-panel ui-tabs-hide">
<form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm3" name="postForm3" class="postForm">
Job
<input type="text" id="job" class="detail" name="job" value="" />
Hobby
<input type="text" id="hobby" class="detail" name="hobby" value="" />
<input type="button" value="SAVE" onclick="saveThem()" />
</form>
</div>
AJAX:
function saveThem() {
var name = $.trim($("#name").val());
var age = $.trim($("#age").val());
var phone = $.trim($("#phone").val());
var email = $.trim($("#email").val());
var job = $.trim($("#job").val());
var hobby = $.trim($("#hobby").val());
var dataString = 'name='+name+'&age='+age+'&phone='+phone+'&email='+email+'&job='+job+'&hobby='+hobby;
$.ajax({
type: "POST",
url: 'http://www.yourdomain.com/something.php',
data: dataString,
dataType: "json",
success: function(data) {
if(data.response){ alert(data.message); }
$("#inputResult").html(data);
}
});
}
something.php
//Get posted variables
$name = (isset($_POST['name'])) ? strip_tags($_POST['name']) : NULL;
$age = (isset($_POST['age'])) ? strip_tags($_POST['age']) : NULL;
$phone = (isset($_POST['phone'])) ? strip_tags($_POST['phone']) : NULL;
$email = (isset($_POST['email'])) ? strip_tags($_POST['email']) : NULL;
$job = (isset($_POST['job'])) ? strip_tags($_POST['job']) : NULL;
$hobby = (isset($_POST['hobby'])) ? strip_tags($_POST['hobby']) : NULL;
//execute your query
$sql = "INSERT INTO ...";
//Return results back to ajax
$result = array(
'response' => 1,
'message' => 'We have a success!'
);
echo json_encode($result);
So in conclusion is pretty much the same as using php but in the middle there is some javascript.
Form: create an id for each element that you want to send to your server(php)
Js: catch values based on element ids and send them to php
Php: get values, clean them, query or anything else and send results back to js
EDIT: Using jQuery serialize()
$('form').submit(function() {
$dataString = $(this).serialize(); //This will produce the same result, based on input names
});
I have a form on one page, and the submit button on that page leads the user to the next page of the form. I'm trying to set it up so that the info from form 1 is submitted along with form 2's info when the submit button on form 2 is clicked and all forms have been filled out, however, the first form's data is being submitted to my database when proceeding to form 2. Any ideas why this is the case? And any ideas of a solution?
Also, I am getting an error "undefined index GET" from the first form and I am struggling to understand why?
Thanks in advance!
Form 1 (parent.php)
<?php session_start();
$_SESSION['fName']=$GET['fName'];
$_SESSION['sName']=$GET['sName'];
$_SESSION['email']=$GET['email'];
$_SESSION['address']=$GET['address'];
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>table2</title>
</head>
<h1>Is this in xamppfiles and htdocs?</h1>
<form action="child2.php" method="post" class="validate">
<div>
<input class="tb" type="text" name="fName" placeholder="first name" id="fName" value=" <?php $fName ?>" required/><br/>
<br/>
<input class="tb" type="text" name="sName" placeholder="surname" id="sName" value="<?php $sName ?>" required/><br/>
<br/>
<input class="tb" type="email" name="email" required placeholder="email address" id="email" value="<?php $email ?>" required/>
<br/>
<input class="tb" type="address" name="address" placeholder="address" value="<?php $address ?>" id="address" />
<br/>
<input id="submit" name="submit" type="submit" value="Next">
</div>
</form>
</body>
</html>
Form 2 (child2.php)
<?php
session_start();
include("connect.php");
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>table2</title>
</head>
<body>
<?php
function renderForm($fName, $sName, $email, $address){
?>
<form action="" method="post" class="validate">
<label class="label">first name</label><input class="tb" type="text" id="fName" name="fName" value="<?php if (isset($fName)) { echo $fName = $_SESSION['fName'];} else { if(!isset($fName)) { echo ""; }}?>"/>
</br>
<label class="label">surname</label><input class="tb" type="text" id="sName" name="sName" value="<?php if (isset($sName)) { echo $sName = $_SESSION['sName'];} else { if(!isset($sName)) { echo ""; }}?>"/>
</br>
<label class="label">email</label><input class="tb" type="email" id="email" name="email" value="<?php if (isset($email)) { echo $email = $_SESSION['email'];} else { if(!isset($email)) { echo ""; }}?>""/>
</br>
<label class="label">address</label><input class="tb" type="text" id="address" name="address" value="<?php if (isset($address)) { echo $address = $_SESSION['address'];} else { if(!isset($address)) { echo ""; }}?>""/>
</br>
<input id="submit" type="submit" value="Submit"/>
</form>
<?php
}
// check if the form has been submitted. If it has, start to process the form and save it to the database
if (isset($_POST['submit']))
{
// get form data, making sure it is valid
$fName = mysql_real_escape_string(htmlspecialchars($_POST['fName']));
$sName = mysql_real_escape_string(htmlspecialchars($_POST['sName']));
$email = mysql_real_escape_string(htmlspecialchars($_POST['email']));
$address = mysql_real_escape_string(htmlspecialchars($_POST['address']));
// check to make sure both fields are entered
if ($fName == '' || $sName == '' || $email == '')
{
// generate error message
$error = 'ERROR: Please fill in all required fields!';
// if either field is blank, display the form again
renderForm($fName, $sName, $email, $address, $error);
}
else
{
// save the data to the database
mysql_query("INSERT formtest SET fName='$fName', sName='$sName',email='$email', address='$address'")
or die(mysql_error());
// once saved, redirect back to the view page
header("Location: child2.php");
}
}
else
// if the form hasn't been submitted, display the form
{
renderForm('','','','','');
}
?>
</body>
</html>
The action field of your parent.php is child2.php . Also, you are checking for
if (isset($_POST['submit']))
which is set true by your first page, hence, it goes inside the loop and inserts the data in your database. This can be resolved by placing this in your parent file
<input id="submit" name="submitINIT" type="submit" value="Next">
A possible solution can be, you extract the values of the first form and store it in some session variables , and finally at final submission, you can use those values for insertion.
In your child2.php, do this
if (isset($_POST['submitINIT'])){
// store all the available values in some session variables
$_SESSION['value1']=$POST['fName'];
$_SESSION['value2']=$POST['sName'];
$_SESSION['value3']=$POST['email'];
$_SESSION['value4']=$POST['address'];
}
if (isset($_POST['submit'])){
// proceed after final submission
}
Also, change the action of 2nd file to itself using this
<form action="child2.php" method="post" class="validate">
Also, do this modification in your child2.php
<input id="submit" name="submit" type="submit" value="Submit"/>