javascript - Sending POST with hidden <input> value does't work in AngularJs - Stack Overflow

admin管理员组

文章数量:1429482

In my web app, There are many form on a page. I want to submit it with AngularJS for specific form.

In each of form, it need unique ID with Hidden Value to submit. But value="UNIQUE_ID" seen doesn't work in hidden input box in AngularJS.

My HTML

<div ng-app>
    <div ng-controller="SearchCtrl">
        <form class="well form-search">
            <input type="text" ng-model="keywords" name="qaq_id" value="UNIQUE_ID">
<pre ng-model="result">

    {{result}}

</pre>
        <form>
    </div>
</div>

This is js script

function SearchCtrl($scope, $http) {
$scope.url = 'qa/vote_up'; // The url of our search

// The function that will be executed on button click (ng-click="search()")
$scope.search = function() {

// Create the http post request
// the data holds the keywords
// The request is a JSON request.
$http.post($scope.url, { "data" : $scope.keywords}).
success(function(data, status) {
    $scope.status = status;
    $scope.data = data;
    $scope.result = data; // Show result from server in our <pre></pre> element
})
.
error(function(data, status) {
    $scope.data = data || "Request failed";
    $scope.status = status;         
});
};
}

In my web app, There are many form on a page. I want to submit it with AngularJS for specific form.

In each of form, it need unique ID with Hidden Value to submit. But value="UNIQUE_ID" seen doesn't work in hidden input box in AngularJS.

My HTML

<div ng-app>
    <div ng-controller="SearchCtrl">
        <form class="well form-search">
            <input type="text" ng-model="keywords" name="qaq_id" value="UNIQUE_ID">
<pre ng-model="result">

    {{result}}

</pre>
        <form>
    </div>
</div>

This is js script

function SearchCtrl($scope, $http) {
$scope.url = 'qa/vote_up'; // The url of our search

// The function that will be executed on button click (ng-click="search()")
$scope.search = function() {

// Create the http post request
// the data holds the keywords
// The request is a JSON request.
$http.post($scope.url, { "data" : $scope.keywords}).
success(function(data, status) {
    $scope.status = status;
    $scope.data = data;
    $scope.result = data; // Show result from server in our <pre></pre> element
})
.
error(function(data, status) {
    $scope.data = data || "Request failed";
    $scope.status = status;         
});
};
}

• javascript
• angularjs

Share Improve this question Follow edited Jun 1, 2013 at 11:04 Hein Zaw Htet asked Nov 13, 2012 at 11:00 Hein Zaw HtetHein Zaw Htet 99111 gold badge99 silver badges1616 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

It may be that the only reason your code is not working is that $scope.keywords is a simple variable (with a text value) instead of an Object, which is required - see http://docs.angularjs/api/ng.$http#Usage

As angularJS works with variables within its own scope - its models, a form bees just a way to interact with those models, wich can be sent via whatever method you want.
You can have a hidden field, yes, but in angularJS it isn't even necessary. You only need that information to be defined in the controller itself - randomly generated for each instance, or received from some other source.. Or you can define it yourself, upon the loading of the controller, for instance.
So (and only for sake of clarity) if you define a formData variable within your formCtrl:

Your HTML:

<div ng-app>
    <div ng-controller="SearchCtrl">
        <form class="well form-search">
            <input type="text" ng-model="formData.title">
            <input type="textarea" ng-model="formData.body">
            <button ng-click="sendData()">Send!</button>
        </form>
<pre ng-model="result">

    {{result}}

</pre>

    </div>
</div>

And your controller:

function SearchCtrl($scope, $http) {
$scope.url = 'qa/vote_up'; // The url of our search

// there is a formData object for each instance of
// SearchCtrl, with an id defined randomly

// Code from http://stackoverflow./a/1349426/1794563

function makeid()
{
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  for( var i=0; i < 5; i++ )
    text += possible.charAt(Math.floor(Math.random() * possible.length));

  return text;
}

$scope.formData = {
  title: "",
  text: ""
};

$scope.formData.id = makeid();

// The function that will be executed on button click (ng-click="sendData()")
$scope.sendData = function() {

  // Create the http post request
  // the data holds the keywords
  // The request is a JSON request.
  $http.post($scope.url, { "data" : $scope.formData}).
  success(function(data, status) {
    $scope.status = status;
    $scope.data = data;
    $scope.result = data; // Show result from server in our <pre></pre> element
  })
  .
  error(function(data, status) {
    $scope.data = data || "Request failed";
    $scope.status = status;         
    });
  };
}

Also: If you wanted to set the unique id on the html itself, you could add an input type="hidden" and set it's ng-model attribute to formData.id, and whichever value you set it to, the model would have it binded. using a hidden input won't work, as the value attribute doesn't update the angularJS Model assigned via ng-model. Use ng-init instead, to set up the value:

HTML with 2 forms:

<div ng-controller="SearchCtrl" ng-init="formData.id='FORM1'">
  <form class="well form-search">
    <input type="text" ng-model="formData.title">
    <input type="textarea" ng-model="formData.body">
    <button ng-click="sendData()">Send!</button>
  </form>
</div>
<div ng-controller="SearchCtrl" ng-init="formData.id='FORM2'">
  <form class="well form-search">
    <input type="text" ng-model="formData.title">
    <input type="textarea" ng-model="formData.body">
    <button ng-click="sendData()">Send!</button>
  </form>
</div>

You can add a hidden field, but it acplishes nothing - the ng-init attribute does everything you need.

本文标签： javascriptSending POST with hidden ltinputgt value does39t work in AngularJsStack Overflow