Two Submit Buttons for One Form

Question

I'd like to send form data to a server however I can't send the form value and the button name to distinguish between the button call.

Here is my code:

<div class="widgets" id="top" hidden="true">
<ba-card title="Update User" baCardClass="with-scroll" >
    <div class='row'>
        <div class='col-md-6'>
            <form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">
                    <!-- FORM DATA -->
                    <button type="submit" value="update" [disabled]="!complexForm.valid" class="btn btn-success">Update User</button>
                </div>
                <div class="form-group">
                    <button type="submit" value="delete" class="btn btn-success">Delete User</button>
                </div>
            </form>
        </div>
    </div>
</ba-card>

My Backend call for submit form:

updateUser(value: any) {
    const _url
    const headers = new Headers();
    headers.append('X--User', sessionStorage.getItem('username'));
    headers.append('X--Token', sessionStorage.getItem('token'));
    headers.append('X--AccessTime', sessionStorage.getItem('AccessTime'));
    headers.append('Content-Type', 'application/json');
    const options = new RequestOptions({ headers: headers });

    return this.http.post(_url, value, options)
      .subscribe((response: Response) => {
      });
  }




deleteUser(value: any) {
    const _url
    const headers = new Headers();
    headers.append('X--User', sessionStorage.getItem('username'));
    headers.append('X--Token', sessionStorage.getItem('token'));
    headers.append('X--AccessTime', sessionStorage.getItem('AccessTime'));
    headers.append('Content-Type', 'application/json');
    const options = new RequestOptions({ headers: headers });

    return this.http.post(_url, value, options)
      .subscribe((response: Response) => {
      });
  }

So my problem lies here, I bind ngSubmit to updateUser(complexForm.value), complexForm.value contains all the form data I want to send to the backed. I have Update user and delete user that both require the form data. If I also bind ngSubmit to deleteUser() it will just call both updateUser and deleteUser.

I saw a solution of adding a name to each button, however I couldn't send the button value to the backend along with the form value (since I'm doing the call with ngSubmit).

Thank you.

That would work if I could send the button name, is it possible to send both the button and form values to my backend function? — Mustafa, Oct 17 '17 at 13:13
When you post that form, you should see the selected action. think like radio boxes. — Taha Paksu, Oct 17 '17 at 13:16

Taha Paksu · Answer 1 · 2017-10-17T13:44:18.250

0

Modify your form like this (change the buttons to inputs):

<div class="widgets" id="top" hidden="true">
<ba-card title="Update User" baCardClass="with-scroll" >
    <div class='row'>
        <div class='col-md-6'>
            <form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">
                    <!-- FORM DATA -->
                    <input type="submit" name="action" [disabled]="!complexForm.valid" class="btn btn-success" value="Update User"
                </div>
                <div class="form-group">
                    <input type="submit" name="action" value="Delete User" class="btn btn-success">
                </div>
            </form>
        </div>
    </div>
</ba-card>

Then on your typescript side,

submitForm(value: any) {
    switch(complexForm.action){
       case "Update User": return updateUser(value);
       case "Delete User": return deleteUser(value);
    }   
}

It may have some minor tweaks because I'm no good (yet) at angular or typescript, but I have ideas about how web forms work.

edited Oct 17 '17 at 13:44

answered Oct 17 '17 at 13:23

Taha Paksu

15,371
2
44
78

ERROR: Void elements do not have end tags "input" – Mustafa Oct 17 '17 at 13:33
Forgot to remove the ``s. My bad. – Taha Paksu Oct 17 '17 at 13:35
aside from that, the typescript side isn't working, can't pass complexForm.value to the function – Mustafa Oct 17 '17 at 13:43
Yes, I just simply made a stand alone button with function call, I was able to pass data through the component. Thank you for the help though – Mustafa Oct 18 '17 at 10:05

Two Submit Buttons for One Form

1 Answers1

Linked