google_cloud_crud/form.php at main · nickiscool0301/google_cloud_crud · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<div class="InputForm">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
            <h2 id="formTitle">
                CREAT NEW PROJECT
            </h2>
        </div>
    </div>
    <div class="d-flex justify-content-center">
        <div class="col-md-5" >
            <form id="project-form" class="form row g-3" action="/" method="POST" role="form">
                <div class="form-group col-md-6" style="display: none;">
                    <label class="form-label" for="id">Project ID:</label>
                    <input type="text" class="form-control" id="id" name="id" tabindex="1" value="" readonly>
                </div>
                <div class="form-group col-md-6">
                    <label class="form-label" for="form1">Project Name</label>
                    <input type="text" class="form-control" id="form1" name="form1" tabindex="1" value="" required>
                </div>
                <div class="form-group col-md-6" >
                    <label class="form-label" for="form2">Subtype</label>
                    <input type="text" class="form-control" id="form2" name="form2" tabindex="2">
                </div>
                <div class="form-group col-md-6">
                    <label class="form-label" for="form3">Current Status</label>
                    <input type="text" class="form-control" id="form3" name="form3" tabindex="3">
                </div>
                <div class="form-group col-md-6" >
                    <label class="form-label" for="form4">Capacity (MW)</label>
                    <input type="text" class="form-control" id="form4" name="form4" tabindex="4">
                </div>
                <div class="form-group col-md-6" >
                    <label class="form-label" for="form5">Year of Completion</label>
                    <input type="text" class="form-control" id="form5" name="form5" tabindex="5">
                </div>
                <div class="form-group col-md-12" >
                    <label class="form-label" for="form6">Country list of Sponsor/Developer</label>
                    <textarea rows="5" cols="50" class="form-control" id="form6" name="form6"
                                tabindex="6"></textarea>
                </div>
                <div class="form-group col-md-12">
                    <label class="form-label" for="form7">Sponsor/Developer Company</label>
                    <textarea rows="5" cols="50" name="form7" class="form-control" id="form7"
                                  tabindex="7"></textarea>
                </div>
                <div class="col-md-12 text-center" id="buttonFields">
                    <button id="formButton" type='submit' value="1" name='addNew' class="btn btn-primary btn-block">SAVE
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    var updatingID = null;

    function updateForm(event, id) {
        event.preventDefault();
        event.stopPropagation();
        if (updatingID !== id) {
            updatingID = id;
            //retrieve data from inpy
            var data = $(`tr[data-id=${id}] td.info`);
            project = {
                'id':data.eq(0),
                'form1': data.eq(1),
                'form2': data.eq(2),
                'form3': data.eq(3),
                'form4': data.eq(4),
                'form5': data.eq(5),
                'form6': data.eq(6),
            };
            $.map(project, function (val, i) {
                $(`#${i}`).val(val.html());
            });
            formTitle.innerText = 'Updating Project: ' + id;
            formButton.name = 'editProject';
            formButton.value = id;
            document.getElementById("buttonFields").innerHTML=`<button id="formButton" type='submit' value="`+id+`" name='editProject' class="btn btn-primary btn-block">SAVE
                    </button>
                     <button id="formButton" onclick="Window.location='/'" type='submit' class="btn btn-danger btn-block">Cancel
                    </button> `;
        } else {
            updatingID = null;
            $('#InputForm').find("input.form-control,select").val("");
            $("#InputForm").attr('action', 'home.php');
            formTitle.innerText = "New Project";
            formButton.name = 'addNew';
            document.getElementById("buttonFields").innerHTML=`<button id="formButton" type='submit' value="1" name='addNew' class="btn btn-primary btn-block">ADD
                    </button>`;
        }
    }
</script>