Why my button doesn't trigger my javascript function?

Question

I have one form-validation sample. If I press submit button, it is has to show alert message but it is not showing.

This is my sample: sample link

Please help me to get this done.

I have tried like this:

//button declaration

<button id="validateSubmit" [disabled]="reactForm.invalid" onclick="myFunction()" class="samplebtn e-control e-btn e-primary"
                            type="submit" style="height:40px;width: 150px;" data-ripple="true">Submit</button>
                            
//function for showing alert message
<script>
    function myFunction() {
        alert('your form is submitted');
    }
</script>

Jonathan Gagne · Accepted Answer · 2018-12-11 16:52:59Z

-1

Really important to respect the code convention. In computer programming, an indentation style is a convention governing the indentation of blocks of code to convey program structure. However, some languages (such as Python and occam) use indenting to determine the structure instead of using braces or keywords; this is termed the off-side rule.

If you make some multi-space like you did, it will create an error as it will consider your class attribute value would be samplebtn e-control e-btn e-primary" type="submit" style="height:40px;width: 150px;" data-ripple="true">.

Then after it, it thinks the Submit is another attribute of your button. That is why it created the error where it didn't know how to handle your < after.

So again, in order to avoid that error, please respect the convention as below and it will work great.

Same line convention

function myFunction() {
  alert('your form is submitted');
}

<button id="validateSubmit" [disabled]="reactForm.invalid" onclick="myFunction()" class="samplebtn e-control e-btn e-primary" type="submit" style="height:40px; width: 150px;" data-ripple="true">Submit</button>

Indentation convention

One other way to write it is to indented every attributes.

function myFunction() {
  alert('your form is submitted');
}

<button
  id="validateSubmit"
  [disabled]="reactForm.invalid"
  onclick="myFunction()"
  class="samplebtn e-control e-btn e-primary"
  type="submit"
  style="height:40px;width: 150px;"
  data-ripple="true">Submit</button>

edited Dec 11, 2018 at 16:52

answered Sep 27, 2018 at 6:08

Jonathan Gagne

4,4095 gold badges20 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Oram Over a year ago

No doubt it's working, but you should at least tell what you changed to make it work.

Kumaresan Sd Over a year ago

can you please tell me what did you change?... stackblitz.com/edit/…

Jonathan Gagne Over a year ago

Hahaha np, anytime my friend!

Eldho · Accepted Answer · 2018-09-27 06:50:46Z

-1

Ideally its best to use typescript itself to your action. if so move your function to typescript file itself rather than in script.Sample

If you want to use javascript from angular see here

You could find errors from the console window which helps to debug.

export class ReactiveFormReactiveComponent implements OnInit {

reactForm: FormGroup;

constructor() {
  this.reactForm = new FormGroup({
    'check': new FormControl('required', [FormValidators.required]),
    'email_check': new FormControl('[email protected]', [FormValidators.email]),
    'url_check': new FormControl('www.anything.com', [FormValidators.url]),

  });
}

ngOnInit(): void {

}

get check() { return this.reactForm.get('check'); }


  myFunction() {
     alert('your form is submitted');
 }

}

edited Sep 27, 2018 at 6:50

answered Sep 27, 2018 at 6:42

Eldho

8,3717 gold badges44 silver badges78 bronze badges

Collectives™ on Stack Overflow

Why my button doesn't trigger my javascript function?

2 Answers 2

Same line convention

Indentation convention

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Same line convention

Indentation convention

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related