CODEWITHSUNDEEP
javascriptangularjsformsionic-frameworksubmit
Nono
Nono

Reputation: 1103

Ionic Framework - How can I submit a form with dynamic content?

I have some texboxes which are dynamically generated by using ng-repeat:

<ion-content>

    <div class="matchList">

        <div class="matchListItem" ng-repeat="match in matchData">

            <div class="home-team-name">
                {{match.Team1.TeamName}}
            </div>

            <div class="tip-input">
                <input type="text" style="border:1px solid #CCC; width:100%; height:23px; padding-left:4px;" />
            </div>

            <div class="tip-center">
                <center>:</center>
            </div>

            <div class="tip-input">
                <input type="text" style="border:1px solid #CCC; width:100%; height:23px; padding-left:4px;" />
            </div>

            <div class="guest-team-name">
                {{match.Team2.TeamName}}
            </div>

            <div style="clear:both"></div>
        </div>

    </div>

    <div class="save-button">
        <button class="button button-block button-positive" ng-click="save()">
            Save
        </button>
    </div>
</ion-content>

It is a tip game for a Football League. So there are two text boxes for each match of a matchday. I want to send the values of the text boxes to a php file. I know I can do something like this:

$scope.save = function () {

    $http.get('http://localhost/saveTips.php?data=' + data).then(function (response) {
        $scope.doesItWork = response.data;
    })

}

But how can I save the values of each textbox in the data variable to send that to the php file?

Upvotes: 0

Views: 2912

Answers (2)

mgiesa
mgiesa

Reputation: 1013

You would use ng-model on each input, then just post the array to the server. On the server you would have to accept an array of match objects.

Assuming your match object is

match:{
  Team1:{
    TeamName:'',
    InputValue:''
  },
  Team2:{
    TeamName:'',
    InputValue:''
  }
}

Then your inputs would have ng-model="match.Team1.InputValue" (or Team2)

Also, you should use $http.post('http://localhost/saveTips.php', data) and change your php file to accept a POST request, since it looks like you're saving data.

Upvotes: 0

Italo Ayres
Italo Ayres

Reputation: 2663

You need to atribute models to the fields, allowing accessing data on the controller. You could do something as simple as storing the data on an array (a new one, or even the same array you did the ng-repeat, as seen in this simple example.)

<input type="text" ng-repeat="input in inputs" ng-model="input.model" />

Live JSFiddle

If you like to see a more complicated example let me know, but I think you can get the ideia.

Upvotes: 1

Related Questions