当我使用 ng-view 加载表单时，表单未提交答案

【问题标题】：Form not submitting when I load it with ng-view当我使用 ng-view 加载表单时，表单未提交
【发布时间】：2017-12-28 02:40:30
【问题描述】：

我已经配置了 angularjs 文件，以便在我按下导航栏中的“添加项目”按钮时加载视图，但是当我尝试提交表单时没有任何反应。但是如果我单独加载 php 文件，它可以正常工作并将数据添加到我的 json 文件中。

我的 HTML

<head>

    <title></title>

    <link href="almstyle.css" type="text/css" rel="stylesheet">
    <link href="Framework/css/mycss.css" type="text/css" rel="stylesheet">
    <link href="Framework/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script src="Framework/js/jquery-3.1.1.min.js"></script>
    <script src="Framework/js/bootstrap.min.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
    <div class="container">
        <!-- Start of header -->
        <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <h4 id="banner">LOGO</h4>
                </div>
        </div>
        <!-- End of header -->

        <nav class="navbar navbar-default">
          <div class="container-fluid">
            <div class="navbar-header navbar-left">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#!home">Home <span class="sr-only">(current)</span></a></li>
                <li><a href="hairtab.html">Hair</a></li>
                <li><a href="#!cart">Shop</a></li>
                <li><a href="News.html">News</a></li>
                <li><a href="#!addItem">Add Item</a></li>
                <li class="dropdown">
                  <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">LifeStyle <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Food</a></li>
                    <li><a href="#">Passion</a></li>
                    <li><a href="#">Travel</a></li>
                  </ul>
                </li>
              </ul>
            </div>

          </div>

        </nav>

        <div data-ng-view></div>

    </div>


    <script type="text/javascript" src="https://code.angularjs.org/1.6.5/angular.js"></script>
    <script type="text/javascript" src="../node_modules/angular-route/angular-route.js"></script>
    <script src="app.js"></script>
    <script src="home/home.js"></script>
    <script src="addItem/addItem.js"></script>

    </body>
</html>

我的 PHP 模板

    <?php  
 $message = '';  
 $error = '';  
 if(isset($_POST["submit"]))  
 {  
      if(empty($_POST["item"]))  
      {  
           $error = "<label class='text-danger'>Enter Item Name</label>";  
      }  
      else if(empty($_POST["id"]))  
      {  
           $error = "<label class='text-danger'>Enter Item Id</label>";  
      }  
      else if(empty($_POST["size"]))  
      {  
           $error = "<label class='text-danger'>Enter a size for your item</label>";  
      }
      else if(empty($_POST["price"]))  
      {  
           $error = "<label class='text-danger'>Enter a suitable price for the item</label>";  
      } 
      else  
      {  
           if(file_exists('items.json'))  
           {  
                $current_data = file_get_contents('items.json');  
                $array_data = json_decode($current_data, true);  
                $extra = array(  
                     'item'            =>     $_POST['item'],  
                     'id'          =>     $_POST["id"],  
                     'selected'     =>     $_POST["selected"],
                     'prices' => [[
                     'size' => $_POST["size"],
                     'price' => $_POST["price"]

                     ]]
                );  
                $array_data[] = $extra;  
                $final_data = json_encode($array_data);  
                if(file_put_contents('items.json', $final_data))  
                {  
                     $message = "<label class='text-success'>The Item has been added successfully</p>";
                }  
           }  
           else  
           {  
                $error = 'JSON File does not exist';  
           }  
      }  
 }  
 ?>  
 <!DOCTYPE html>  
 <html>  
  <head>  
       <title>Add items</title>  
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
  </head>  
  <body>  
       <br />  
       <div class="container" style="width:500px;">  
            <h3 align="">Add items</h3><br />                 
            <form method="post">  
                 <?php   
                 if(isset($error))  
                 {  
                      echo $error;  
                 }  
                 ?>  
                 <br />  
                 <label>Item Name</label>  
                 <input type="text" name="item" class="form-control" /><br />  
                 <label>Item Id</label>  
                 <input type="text" name="id" class="form-control" />
                <input type="hidden" name="selected" value="0" class="form-control" hidden="hidden"/><br />
                <div class="panel panel-default">
                    <div class="panel panel-heading">
                        Prices
                    </div>
                    <div class="panel panel-body">
                        <label>Size</label>
                        <input type="text" name="size" class="form-control" />

                        <label>Price</label>
                        <input type="number" name="price" class="form-control" />
                    </div>
                     <br /> 
                </div>

                 <input type="submit" name="submit" value="Add Item" class="btn btn-info" /><br />                      
                 <?php  
                 if(isset($message))  
                 {  
                      echo $message;  
                 }  
                 ?>  
            </form>  
       </div>  
       <br />  
  </body>

这是提交后的样子

【问题讨论】：

我没有看到您在哪里设置了表单 ctrl 或应用名称？
啊....奇怪的是，当我复制粘贴代码时它没有添加它。 ng-app 在标签中，对于这个表单，我没有使用任何控制器，这就是为什么它不在模板中！我只用angularjs来路由！ :)
我现在才看到你的评论，我正在写一个答案。刚刚注意到你已经接受了。哦，好吧..看起来你最后已经有一个表格，但它只是设置不正确？没有？

标签： php html angularjs

【解决方案1】：

这里有几个错误，

我没有看到将 action 属性设置为 php 资源路径的表单。
对于要提交的表单，您应该有一个提交类型的按钮。像这样的东西。

<html>
<body>

<form action="welcome.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>

</body>
</html>

你的PHP文件可以是

<html>
<body>

Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>

</body>
</html>

我希望这可以帮助您解决这个问题

【讨论】：

【解决方案2】：

要使表单以“角度方式”工作，您需要指定几个额外的位。

您首先需要名称ng-app 在开始的 html 标记之后表明该代码块将被一个角度模块“监视”（您也将在代码中指定）。

您还需要将 ng-controller 标记添加到您将命名的表单中，然后在您的 javascript 中引用

在angular表单中，添加ng-click，如果表单验证成功，发送它以提交表单：ng-click=”formsubmit(userForm.$valid)”

这里有一些sample code：

<!DOCTYPE html>
<html ng-app="formExample">
    <head>
        <title>simple form with AngualrJS</title>
        <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
        <script src="js/angular.js" ></script>
        <script src="js/formjs.js"></script>
    </head> 

    <body>

        <div ng-controller="formCtrl">
            <form  name="userForm"  class="well form-search"   >

                <input type="text" ng-model="name" class="input-medium search-query" placeholder="Name" required >
                <input type="email" ng-model="email" class="input-medium search-query" placeholder="Email" required >
                <input type="text" ng-model="message" class="input-medium search-query" placeholder="Message" required >
                <button type="submit" class="btn" ng-click="formsubmit(userForm.$valid)"  ng-disabled="userForm.$invalid">Submit </button>

            </form>
            <pre ng-model="result">
                {{result}}
            </pre>
        </div>
    </body>

</html>

 JS:
<pre class="lang:default decode:true " title="formjs.js" >
/**
 * @filesource : formjs.js
 * @author : Shabeeb  <mail@shabeebk.com>
 * @abstract : controller fo HTML page
 * @package sample file 
 * @copyright (c) 2014, Shabeeb
 * shabeebk.com/blog
 * 
 *  */
var app = angular.module('formExample', []);
app.controller("formCtrl", ['$scope', '$http', function($scope, $http) {
        $scope.url = 'submit.php';
        $scope.formsubmit = function(isValid) {


            if (isValid) {
                $http.post($scope.url, {"name": $scope.name, "email": $scope.email, "message": $scope.message}).
                        success(function(data, status) {
                            console.log(data);
                            $scope.status = status;
                            $scope.data = data;
                            $scope.result = data; 
                        })
            }else{            
                  alert('Form is not valid');
            }
        }
    }]);</pre> 

 submit:

<?php
/**
 * @filesource : submit.php
 * @author : Shabeeb  <mail@shabeeb.com>
 * @abstract : simple submission php form
 * @package sample file 
 * @copyright (c) 2014, Shabeeb
 * 
 * 
 *  */

$post_date = file_get_contents("php://input");
$data = json_decode($post_date);


//saving to database
//save query

//now i am just printing the values
echo "Name : ".$data->name."n";
echo "Email : ".$data->email."n";
echo "Message : ".$data->message."n";



?>

【讨论】：

这给了我一个改进表格的好主意。非常感谢