CODEWITHSUNDEEP
javascriptasp.net
Mr. P
Mr. P

Reputation: 103

More then one command in onclick function

I have radiobuttons in a form where I added onclick functions, so that the form gets submited as soon I click on a radiobutton.

<td>@Html.RadioButtonFor(m => m.SelectedTeacher, Model.ListofTeacher[i].ID, new { @onclick = "javascript: this.form.submit();"})</td>

That works fine but now I want to add a second command in the onclick function.

It should change the action "Example" in the form.

using (Html.BeginForm("Example", "Home", new { id = "form" })){}

So I tried this

<td>@Html.RadioButtonFor(m => m.SelectedTeacher, Model.ListofTeacher[i].ID, new { @onclick = "document.getElementById('form').action = 'Delete';
    this.form.submit();" })</td>

but this does not work.

Can someone explain to me how I do it properly?

I don't really have skills in js, so if I lack information please ask!

Cheers.

Upvotes: 0

Views: 273

Answers (1)

Adnan Umer
Adnan Umer

Reputation: 3689

Using onclick you can only register one event with action.

If you want to register multiple events you need to use addEventListener and is the way to register an event listener as specified in W3C DOM.

var radios = document.getElementsByName('SelectedDevice');
for (i = 0; i < radios.length; i++) {
    radios[i].addEventListener('click', onRadioButtonClick);
    radios[i].addEventListener('click', onRadioButtonClick2);
}

function onRadioButtonClick() {
    document.getElementById('form').action = 'Delete';
    this.form.submit();
}

You can also use one event listener to perform all of operations instead of hooking multiple events.

In HTML:

<td>@Html.RadioButtonFor(m => m.SelectedDevice, Model.ListofDevice[i].ID, new { @onclick = "onRadioButtonClicked" })</td>

In JavaScript:

function onRadioButtonClick() {
    document.getElementById('form').action = 'Delete';
    this.form.submit();

    // Your other operations here
}

Upvotes: 1

Related Questions