Triggering click on form submit button in Angular 2/4 forms causing issues in edge browser

Question

I have a scenario where I need my form submit to be called via code, since my submit button is hidden from view. I have a logic to invoke button click (one common button for all forms) using the below logic.

const element = 
  this._elementRef.nativeElement.getElementsByClassName('personal-btn');
if (element && element[0]) {
  element[0].click();
}

My Form :

<json-schema-form [widgets]="customWidgets" 
  [framework]="selectedFrameWork" 
  [form]="jsonFormObject" 
  [options]="jsonFormOptions" 
  (onChanges)="onChanges($event)" (valueChanges)="changeInputValue($event)"
  (onSubmit)="saveInfo($event)" 
  (valueChanges)="changeInputValue($event)">
</json-schema-form>

My Form submit :

<div class="d-none">
  <input aria-describedby="control52Status" class="personal-btn btn btn- 
    primary float-right" id="control52"
    name="undefined" type="submit" value="undefined">
</div>

The issue that I am facing is that, when I click on the next button (form submit logic is called via code), form submission takes place and the form input values get appended to the current URL rather than internal logic taking place and page refreshes.

Example :

[site url]?name=test123

But when I remove hide property on my submit button and eventually click on that submit button, the form gets submitted properly without URL appending and page refresh.

I am not facing this issue in any browsers other than edge.

My issue is just the same as this: Stop "?" from being added to URL

But none of the preventDefault or return false solutions helped me.

Answer 1

Can you try to change the type of next button as button

Like;

<button type="button"></button>

Answer 2

As a workaround, you could try to use the "button" type button, then in the button click event, you could use the $http Post method to submit the form data.