Multiple form/submit but all inputs get cleared when one button is clicked

Question

I started Angular few days ago so sorry if I lack clarity.

I have a table with 2 columns. One has URLs of videos and the second one has an input on which the user select a label between 1 and 5 and a button to submit his choice

My issue is that in the situation where the users selects labels for different videos (let's say row n°3, 5, 8), if he presses one submit buttons (let's say row n°5), it will clear out the inputs in all the other rows (n°5 and 8). It's quite annoying and I'd like the inputs to stay and not be cleared.

My buttons onClick's function simply reads the input corresponding to the button (each pair input/button is identified by a unique ID from the URL), computes some stats and update some cloud database and that's all

Here is the html code of my table body :

    <tbody>
        <tr *ngFor= "let data of displayDataset">
            <td><a href="{{data.URL}}" target="_blank">video</a></td>
            <td>
                <form>
                    <div class="row mb-3">
                        <div class="col-sm">Select Label :</div>
                        <div class="col-sm">
                            <div class="form-group">
                                <select class="form-control" 
                                        id="label+{{data.URL}}"
                                        name="label+{{data.URL}}"
                                        style="width:auto;">
                                <option value="0"></option>
                                <option value="1">1 (not Hate Speech at all)</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5 (totally Hate Speech)</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <button type="submit" id="btn+{{data.URL}}" class="btn btn-primary" (click)="addLabel(data)">Submit</button>
                        </div>
                    </div>
                </form>
            </td>
        </tr>
    </tbody>

here is the addLabel() function I'm using :


  addLabel(data: Data) {

    const selection = <HTMLSelectElement> document.getElementById('label+'.concat(data.URL));
    const selected_label = parseInt(selection.value);

    // No label chosen
    if (selected_label == 0) {
      return
    }

    // Update data with new label
    const newData = this.utilsService.buildNewData(data, selected_label) // Updates stats on data
    this.hatespeechService.updateData(newData) // update firebase dataset

    // Add data to user's dataset for tracking
    this.hatespeechService.addDataToUserDatas(this.user!, newData, selected_label)

  }

I've no idea why it behaves like that, I don't see where the different "select" tags may be linked together, I've tried removing the form-control and form-group class but it didn't work.

My Angular is 13.1.3 and my bootstrap is 5.1.3

Thank you in advance for helping me on this

That's because your button is submitting the form. It's not clearing the fields: but the entire page is being reloaded. Add `type="button"` to your button element. — Terry, Jan 30 '22 at 00:30
Does this answer your question? [How to prevent buttons from submitting forms](https://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms) — Terry, Jan 30 '22 at 00:30
I've tried adding type="button" to my button and also adding onsubmit="return false;" on the form but it still didn't work unfortunately.. But the issue described in this question is the same I encounter indeed — Aydin Abiar, Jan 30 '22 at 11:10
Your're using Angular, so use `[(ngModel)]` or ReactiveForms. Try to avoid use document.getElementById. Angular works using "variables in .ts" that change the values in the .html". Before type code and code take a look to the [tutorial](https://angular.io/tutorial). Yes, take a time fullfilled but you should have "some idea" about Angular works — Eliseo, Jan 30 '22 at 13:45

Multiple form/submit but all inputs get cleared when one button is clicked

0 Answers0