Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

Here is my form:

<form ng-submit = "submit()">
                    <input ng-model="formData.data" type="text" name="sticky_content" placeholder="protein" required="true"/>
                    <input type="hidden" name="time_start" ng-value="{{getStuff.e_time}}" required="true"/>
                    <input ng-model="formData.end" type="text" name="time_end" placeholder="{{getStuff.e_time+100}}" required="true"/>
                    <input type="hidden" name="zoom_level" ng-value="{{getStuff.zoom}}" required="true"/>
                    <input type="hidden" name="latitude" ng-value="{{getStuff.lat}}" required="true"/>
                    <input  type="hidden" name="longitude" ng-value="{{getStuff.lon}}" required="true"/>
                    <button type="submit" name="add_sticky" value="add a new stickie!">new sticky</button>   
            </form>

And this is in my controller:

app.controller('mainCtrl',function($scope,$http,sluiceStuff){

    $scope.formData={};

    $scope.formData.e_time = sluiceStuff.e_time;  //again, these are all filling correctly in the "inspect element tab. They just aren't submitting in the POST"
    $scope.formData.zoom = sluiceStuff.zoom;
    $scope.formData.lat = sluiceStuff.lat;
    $scope.formData.lon = sluiceStuff.lon;

Right now only the 1rst and 3rd inputs work - the ng-model ones. By work I mean get sent with the POST request. I know that for the other ones, the "{{getStuff.e_time}}" is filling correctly because i can see the number itself when I do inspect element. However, these other 4 inputs don't even submit, let alone submit correctly. Is this the correct format for my form and am I using ng-value correctly? I am running a node.js server, but since the request isn't even being sent with all of the data, I don't believe that there can be an issue on the server.

Edit: upon request, here is the server side code:

app.post('/api/stickies',function(req,res){
        db.run("INSERT INTO stickies (data, start, end, zoom_level, latitude, longitude) VALUES (?,?,?,?,?,?)", [ req.body.data,req.body.time_start, req.body.end, req.body.zoom_level, req.body.latitude, req.body.longitude ]);
        res.send(200);
});

and also here is the submit function:

$scope.submit = function() {

            $scope.formData.e_time = sluiceStuff.e_time;    //these 4 lines I added
            $scope.formData.zoom = sluiceStuff.zoom;        //to make it work. But I am 
            $scope.formData.lat = sluiceStuff.lat;          //not sure that they are necessary
            $scope.formData.lon = sluiceStuff.lon;           // or that this is the best way to do it
            $http.post('/node/api/stickies', $scope.formData)
                    .then(function(data){
                            $scope.stickies.push(data.config.data);
                            //console.log(data.data);

                    },function(err){console.log(err)});
    };
share|improve this question
    
Can you show your submit function? –  Salem Aug 13 at 19:53
    
why is {{getStuff.zoom}} being used? what aren't you using {{formData.zoom}} that one is being defined in your controller.. isn't that why your 1st and 3rd input is working? because that's what you're doing? For your 2nd, 4th, and 5th fields, you're using "getStuff" instead of "formData" –  sksallaj Aug 13 at 19:54
    
yes I will add the submit function –  user3727514 Aug 13 at 20:09
    
@sksallaj: formData is an empty object defined in the scope as you can see in the controller. It is filled by the user with text entered in the fields. getStuff is an object returned from a factory that has those 4 attributes returned. Thats why they are hidden fields - they are not meant to be editable, but they need to be a part of the form POST –  user3727514 Aug 13 at 20:13
    
ah you needed to be clear in your original post then.. because yes.. if you did it the original way of course it wouldn't work because you're assigning values to the model of getStuff, which needed to be initialized as empty in your controller to make it work, but even then you never mentioned how you were submitting. Wrapping it in the submit function (like you just did in your edit), definitely seems like it would do the trick. –  sksallaj Aug 13 at 20:40

4 Answers 4

You should use ng-model directive and you can have access to this values in your scope and after that you can take this values and do your post requests

<input type="hidden" name="time_start" required="true" ng-model="getStuff.e_time"/>
share|improve this answer
    
I though ng-model was for two-way data binding? this is not two-way, as hidden fields are not editable? that is what I learned from this: stackoverflow.com/questions/18446359/… –  user3727514 Aug 13 at 20:15
    
ngValue Binds the given expression to the value of input[select] or input[radio], so that when the element is selected, the ngModel of that element is set to the bound value. –  Narek Mamikonyan Aug 14 at 9:26

You are not using the ng-value correctly. It should be without the curly braces

So your html should be:

<form ng-submit = "submit()">
                    <input ng-model="formData.data" type="text" name="sticky_content" placeholder="protein" required="true"/>
                    <input type="hidden" name="time_start" ng-value="getStuff.e_time" required="true"/>
                    <input ng-model="formData.end" type="text" name="time_end" placeholder="{{getStuff.e_time+100}}" required="true"/>
                    <input type="hidden" name="zoom_level" ng-value="getStuff.zoom" required="true"/>
                    <input type="hidden" name="latitude" ng-value="getStuff.lat" required="true"/>
                    <input  type="hidden" name="longitude" ng-value="getStuff.lon" required="true"/>
                    <button type="submit" name="add_sticky" value="add a new stickie!">new sticky</button>   
            </form>
share|improve this answer

Do those values need to be in the form? Could you include the data in a different way, perhaps by defining a custom submit function that sends along those generated values with the data the user inputs? Seems to me like an unnecessary workaround. What does the server expect? Is it a regular HTTP POST, or is it an API call that expects a JSON object? In the latter case, it would be trivial to add extra values after the form was submitted.

It's also best practice to name your form, and then validate the data. That would look something like this:

<form name="myForm" ng-submit="myForm.$valid && submit()">

Please provide more information to make it easier for us to answer your question. As it stands, I think having those fields in hidden inputs is not necessary.

share|improve this answer
    
I have added the server post code. Im not sure how to define a custom submit function though this sounds intriguing. Would this be a custom directive or just a different submit function in the form? –  user3727514 Aug 13 at 20:07
up vote 0 down vote accepted

Sorry to be answering my own question so early, but I solved this. But basically I had to add all of those definitions:

$scope.formData.e_time = sluiceStuff.e_time;  
$scope.formData.zoom = sluiceStuff.zoom;
$scope.formData.lat = sluiceStuff.lat;
$scope.formData.lon = sluiceStuff.lon;

into the submit() function in my scope. I guess this makes sense, because it needs to know what those are, but I though having them in the ng-value field would save them there so that they could be accessed in the post request.

edit: ah so furthermore: ,it seems like I didn't need any of those hidden fields at all. adding to the formData object upon submit is enough to add them to the post request.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.