Post a form from a modal window

[Pedro Silva4]

Having some issues posting a form from a modal window.

What am I doing wrong in here?   ... Getting quite desperate

HTML

<div class="row"> 
   <div class="panel panel-default" ng-click="c.supportFeedback(member)">
<p>click here to give feedback</p>
   </div>
</div>
<!--template-->
<script>   
{{m.name}}
   <form name="form" ng-submit="c.submit()" class="form-horizontal">   
       <label class="col-sm-4 control-label">How likely is it that you would recommend in the future </label>   
       <input type="radio" ng-model="form.recommend" name="not_likely"   id="notLikely"   value="not likely"/>Not Likely   
       <input type="radio" ng-model="form.recommend" name="likely"   id="likely"   value="likely" />Likely   
       <input type="radio" ng-model="form.recommend" name="very_likely" id="veryLikely" value="very likely" />Very Likely   
       <textarea ng-model="form.text" style="margin: 0px;width: 368px;height: 120px;"></textarea>   
       <input class="btn btn-primary" ng-click="c.closeModal()" value="Cancel"/>
       <input class="btn btn-primary" type="submit" id="submit" ngClick="Submit" value="Submit"/>
   </form>   
</script> 

Client Script:

function(spModal, $uibModal, $scope) {   
var c = this;
var formData = {   
recommend: "",   
text: ""   
};   
c.supportFeedback = function(m) {   
$scope.m=m;   
c.modalInstance = $uibModal.open({   
templateUrl: 'modalTemplate',   
scope: $scope,   
backdrop: 'static'
//shared: formData
});   
}   
c.closeModal = function() {   
c.modalInstance.close();   
}   
c.submit = function() {   
console.log("posting data....");   
//console.log(arguments);
formData = $scope.form;   
//console.log();
console.log(this);
console.log(formData);
console.log($scope);   
//c.modalInstance.close();   
};     
} 

The arguments are not being passed on to the Submit function.

If I make the form directly on the HTML (comment that script tags) the form works fine. and the values are passed on to the Client Script.

Makes me think the Modal Window scope is not correct

Any ideas what might be wrong?

Thanks,

[Ahmed Hmeid1 · Accepted solution]

Hi,

Best to bind to c like this:

<div class="row">    

  <div class="panel panel-default" ng-click="c.supportFeedback(member)">  

<p>click here to give feedback</p>  

  </div>  

</div>  

<!--template-->  

<script>      

{{m.name}}  

  <form name="form" ng-submit="c.submit()" class="form-horizontal">      

      <label class="col-sm-4 control-label">How likely is it that you would recommend in the future </label>      

      <input type="radio" ng-model="c.recommend" name="not_likely"   id="notLikely"   value="not likely"/>Not Likely      

      <input type="radio" ng-model="c.recommend" name="likely"   id="likely"   value="likely" />Likely      

      <input type="radio" ng-model="c.recommend" name="very_likely" id="veryLikely" value="very likely" />Very Likely      

      <textarea ng-model="c.text" style="margin: 0px;width: 368px;height: 120px;"></textarea>      

      <input class="btn btn-primary" ng-click="c.closeModal()" value="Cancel"/>  

      <input class="btn btn-primary" type="submit" id="submit" ngClick="Submit" value="Submit"/>  

  </form>      

</script>    

Then the client script updated to:

c.submit = function() {      

console.log("posting data....");      

/

console.log(c.recommend);  

console.log(c.text);  

};        

[Pedro Silva4]

Cheers Ahmed!