a submit button (AngularJS) is not showing after click add button

Question

i have a problem like this (video).

I just want like this, if i click the add button then the submit button of the form is showing up directly. It's work if i type something manually or paste in the textarea.

My code is like this:

<?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>

Thank you for helping me.

The whole point of AngularJS-Like frameworks is to avoid combining PHP/HTML code and to have the power of keeping a dashboard updated live with data. So if you decided to start learning Angular, please make a `/templates` folder, import them via JSON_ENCODE as `templates` object into your page and initiate them one by one as needed PLEASE stop doing this.. it's horribly wrong. — Eduard, Jul 24 '15 at 09:46
You're doing it wrong. You're combining plain JavaScript/event handling with AngularJS and default form handling and that's why it's not working. The inline PHP to render a list of users doesn't make it any better either, though that is still usable. — g00glen00b, Jul 24 '15 at 09:48
ok @edduvs thank you, i'm sorry guys, i'm a newbie become a programmer, ok i will learn about JSON_ENCODE (even still don't know at all). Ok **g00glen00b**, thanks for your advice, i'll try to not combining anymore. — Juna serbaserbi, Jul 24 '15 at 11:18

score 2 · Accepted Answer · answered Jul 24 '15 at 10:15

If you want it to work properly you'll have to use AngularJS for all form actions or just leave AngularJS away.

Anyways, to do it in AngularJS you'll have to use the ngClick directive in stead of using onclick, for example:

<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>

In stead of having the onclick=checkUsername(); stuff, you'll have to add it to your model using a controller, for example:

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

This way it will work the same for manually inputting data and having a selection list to add details.

However, not only the onclick has to go, you also have to submit your form using AngularJS to do it properly, using ngSubmit.

To send an HTTP request you can use the $http service, for example:

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

This will post a POST request to the same URL you provided in your form, and adds the usernames (you'll have to pass them as a parameter) to it as parameters.

Anyways, the biggest issue here is that you're mixing several things here, going against all principles commonly used in AngularJS applications. But to detail all issues here, the answer would be way too long.

Wow your answer is the best @g00glen00b, i see i see, ok i understand, thank you very much for your solution, i will learn AngularJS for more further and i will try your solution to my code. I will inform you back, if i made it. thank you. — Juna serbaserbi, Jul 24 '15 at 11:24
g00glen00b, please help me again in [here](http://stackoverflow.com/questions/33669459/confusing-about-this-cookies-in-redirecting-system) — Juna serbaserbi, Nov 12 '15 at 12:46

a submit button (AngularJS) is not showing after click add button

1 Answers1