I am having a form scenario where user select one form from multiple forms and starts to fill it. After filling when he/she clicks on submit button the data will be posted to server and the server after successful operation returns status as OK then i am showing user pop up where user will get confirmation. Now when user clicks on ok button on the pop up, I want to show the user, same form again to fill. For that the form need to be refreshed. How is it done with angularJS. I am developing app in cordova with ionic framework and it has AngularJS in it.
My form div is this:
<form name="fieldForm" method="post" ng-submit="submitFormData($event, htmlValue)">
<div class="bootstrap" ng-bind-html="htmlValue.Html | unsafe">
......form html.......
</div>
<div class="padding">
<button class="button button-block button-calm">
Submit
</button>
</div>
</form>
My controller looks like this:
var formId = html.Id;
var url = base_url+"put/putFormFilledRawData.php";
var data = $(obj.target).serialize();
$http.post(url, data).
success(function(data, status, headers, config) {
if(data.alert == 'SUCCESS'){
var myPopup = $ionicPopup.show({
title: 'Confirmation',
subTitle: 'Your data has been submitted successfully',
scope: $scope,
buttons: [
{
text: '<b>Ok</b>',
type: 'button-calm',
onTap: function(e) {
$(this).hide();
}
},
]
});
}else{
var myPopup = $ionicPopup.show({
title: 'Error Report',
subTitle: 'Unknown error has been occurred',
scope: $scope,
buttons: [
{
text: '<b>Ok</b>',
type: 'button-calm',
onTap: function(e) {
$(this).hide();
}
},
]
});
}
What you need is to reset the form. You can use the reset function via plain javascript like this
document.getElementById("form_id").reset();
or using jquery like this
$('#form_id').trigger("reset");
You can call this function in close pop up function of the modal.