个人中心
gpt4 book ai didi

javascript - 单击添加按钮后未显示提交按钮(AngularJS)

转载 作者：行者123 更新时间：2023-11-30 16:43:20 24 4
gpt4 key购买 nike

我有这样的问题(video)。

我只是想这样，如果我点击添加按钮，那么表单的提交按钮就会直接显示出来。如果我手动输入内容或粘贴到文本区域，它就可以工作。

我的代码是这样的:

<?php
    include('c2gcon.php');
    $nameajax=isset($_REQUEST['nameajax'])?$_REQUEST['nameajax']:null;
    if($nameajax<>null){
        $username=$nameajax;
        $_SESSION['simpanun8']=$_SESSION['simpanun8']."','".$username;
        $_SESSION['simpanun8'][0]='';
        $_SESSION['simpanun8'][1]='';
        echo "$_SESSION[simpanun8]'"; //tanda petiknya tidak boleh dihilangkan, itu penting
        exit;
    }
    include('logincheckadmin.php');
?>
<html>
<head>
    <title>DELETE MULTIPLE RECORD</title>
    <link rel="shortcut icon" href="http://c2gdragonteam.com/img/dragonhead.ico">
    <link href="/css/bootstrap.css" rel="stylesheet">
    <style>
        p,td {
            font-size: 70%;
        }
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.min.js"></script>
</head>
<body ng-app="ctrljs">
<?php
    $_SESSION['simpanun8']=null;
    $ssloginadmin=$_SESSION['ssloginadmin'];
    $page=isset($_REQUEST['page'])?$_REQUEST['page']:null;
    if($page=='form'){
?>
        <form method='post' name='formupgrade' id='idForm' action='?page=submit' ng-controller='formctrl'>
            <table>
                <tr><td>Username : </td></tr>
                <tr>
                    <td>
                        <select name='username' id='username' ng-model='username' required>
                            <option value='' selected></option>
<?php
                                $q=mysql_query("SELECT username FROM t_un WHERE upgrade='1' and t1count='0' and t2count='0' ORDER BY username");
                                while($f=mysql_fetch_object($q)){
?>
                                    <option value='<?php echo "$f->username";?>'><?php echo "$f->username";?></option>
<?php
                                }
?>
                        </select>
                        <input type='button' value='add' onclick='checkusername();'></input>
                        <input name='forawhile' id='forawhile'></input>
                    </td>
                </tr>
                <tr>
                    <td>
                        <textarea rows='4' cols='50' name='gulungresult' id='gulungresult' placeholder='paste in here' ng-model='gulungresult' required ng-pattern="/^[A-Za-z0-9'/\.\-\s\,]*$/"></textarea>
                    </td>
                </tr>
            </table>
            <input type='submit' value='submit' ng-hide="!formupgrade.$valid"></input>
        </form>
        <br>
        <div id='finallyresult'></div>
<?php
    }
    if($page=='submit'){
        $gulungresult=isset($_REQUEST['gulungresult'])?$_REQUEST['gulungresult']:null;
        //echo "gulungresult=$gulungresult<br>";
        mysql_query("DELETE FROM t_un WHERE username IN(".$gulungresult.")") or die(mysql_error()); 
        echo "<script type='text/javascript'>window.opener.document.location.reload(true);window.close();</script>";
    }
?>
<script>
    function checkusername(){
        var status = document.getElementById("gulungresult");
        var u = document.getElementById("username").value;
        if(u != ""){
            status.innerHTML = "<font color='red'><img src='/img/loading.GIF'></img> checking...</font>";
            var hr = new XMLHttpRequest();
            hr.open("POST", "admintreedelrec.php", true);
            hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            hr.onreadystatechange = function() {
                if(hr.readyState == 4 && hr.status == 200){
                    status.value=hr.responseText;
                }
            }
            var v = "nameajax="+u;
            hr.send(v);
        }
    }
</script>
<script>
    var app = angular.module('ctrljs', []);
    app.controller('formctrl', function($scope, $http){
      $scope.digits = {};
    });
</script>
</body>
</html>

谢谢你帮助我。

最佳答案

如果你想让它正常工作，你必须对所有表单操作使用 AngularJS，或者干脆不用 AngularJS。

无论如何，要在 AngularJS 中执行此操作，您必须使用 ngClick指令而不是使用 onclick，例如:

<form ng-submit="vm.confirmUsers()" name="myForm">
    <select ng-model="vm.username">
        <option>User 1</option>
        <option>User 2</option>
        <option>User 3</option>
        <option>User 4</option>
        <option>User 5</option>
    </select>
    <button ng-click="vm.addUser(vm.username)" type="button" ng-disabled="vm.username == null">Add</button>
    <textarea ng-model="vm.users" required></textarea>
    <button type="submit" ng-hide="myForm.$invalid">Submit</button>
</form>

不是使用 onclick=checkUsername(); 东西，您必须使用 Controller 将它添加到您的模型中，例如:

vm.addUser = function(username) {
    if (vm.users == null || vm.users.length === 0) {
        vm.users = "'" + username + "'";
    } else {
        vm.users += ", '" + username + "'";  
    }
};

这种方式与手动输入数据和使用选择列表添加详细信息的方式相同。

但是，不仅要取消 onclick，您还必须使用 AngularJS 提交表单才能正确执行此操作，使用 ngSubmit .

要发送 HTTP 请求，您可以使用 $http服务，例如:

vm.confirmUsers = function() {
    $http.post('?page=submit', {
        usernames: vm.users
    }).success(function() {
        // What to do if it was successful?
    });
};

这将向您在表单中提供的相同 URL 发送 POST 请求，并将用户名(您必须将它们作为参数传递)作为参数添加到它。

无论如何，这里最大的问题是您在这里混合了几样东西，这违背了 AngularJS 应用程序中常用的所有原则。但是要在这里详细说明所有问题，答案会太长。

关于javascript - 单击添加按钮后未显示提交按钮(AngularJS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31607230/

24 4 0
文章推荐： javascript - 每当组件加载到 DOM 时，Knockout.js 回调
文章推荐： c - 通过网络发送的 MAC 地址格式
文章推荐： c++ - 如何使用 WM_CLOSE 关闭子窗口？
文章推荐： javascript - Angular 平移函数被无限调用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com