基于角度 js 中的单选按钮选择的表单动作更改

Posted 2023-05-09

【中文标题】基于角度 js 中的单选按钮选择的表单动作更改

【英文标题】：form action change based on radio button selection in angular js

【发布时间】：2016-10-20 00:28:03

【问题描述】：

现在我有一个表单和两个单选按钮。 根据选择的单选按钮，我必须更改表单操作。

这里是代码

 <form action=action name="payform" method="post">
<div class="form-group">
<div class="radio radio-text">
<label>
<input type="radio" ng-model="cash" ng-click="paymethod('cash')" name="payment" value="cash">Cash
</label>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<div class="radio radio-text">
<label>
<input type="radio" ng-model="online" ng-click="paymethod('online')" name="payment" value="online">Online
</label>
</div>
</div>


<button class="btn btn-success" name="submit" type="submit">Submit</button>
</form>

这是控制器代码

$scope.paymethod = function(ptype)
alert("hi");
if(ptype=="cash")
$scope.action = "food.php";

else if(ptype=="online")
$scope.action = "online.php";

我在函数中使用了 alert 来检查函数是否被调用。并且警报正在工作，这意味着正在调用函数但是当我点击提交时没有任何反应。

【问题讨论】：

检查你是否获得了 ptype

是的，我正在获取 ptype。我通过在控制台中打印值来检查

我可以从网络选项卡中看到导航到相应的操作。您是否在控制台中看到任何错误。请检查这个小提琴的控制台和网络jsfiddle.net/vasi_32/n0pydc8k

谢谢。我有一个错误。谢谢推荐

请用您的解决方案回答自己或接受以下任何答案来结束问题。

【参考方案1】：

不完全符合您的要求，但它解决了您的问题：

在表单字段 ng-models 前添加 formData。 将 ng-submit 添加到您的表单中 使用该函数发出 $http 请求

非常基本的例子：

html：

<form name="payform" ng-submit="submitForm()">
     <input ng-model="formData.value1" />
     <input ng-model="formData.value2" />
     <button type="submit"></submit>
</form>

JS：

$scope.submitForm = function submitForm() 
    $http.post($scope.ptype + '.php', $scope.formData).then(
        function success(response) 
             // do something
        ,
        function error(response) 
             // not good
        
    ;

由于使用 formData 作为表单 ng-model 属性的前缀，所有字段都包含在一个对象中，您可以在发出 POST 请求时轻松使用。