How to call a onClick javascript function using bootstrap buttons and inside a form?

Question

I am not able to change the css properties of a div when calling the onClick function.

<h1 id="hello">hello</h1>

<div id="notification" class="alert alert-dismissible alert-success">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Well done!</strong> You successfully posted to Facebook!
</div>

<div align="center" class="col-sm-4">
    @using (Html.BeginForm("distShare", null, new { area = "" }))
    {
        <button onclick="facebookButton2()" class="btn btn-primary" type="submit">Share this to Facebook</button>
    }
</div>

function facebookButton2() {
    document.getElementById("notification").style.visibility = visible;
    document.getElementById("notification").style.color = red;
    document.getElementById("hello").style.color = red;
}

The "hello" was simply for testing purposes. I have tried using JQuery and the onSubmit function as well. The notification div starts off as visibility: hidden.

what is going on between the @ symbol?

Paul Fitzgerald
– Paul Fitzgerald

2015-04-26 20:43:43 +00:00
Commented Apr 26, 2015 at 20:43 — Paul Fitzgerald
– Paul Fitzgerald, Commented Apr 26, 2015 at 20:43

Darin Dimitrov · Accepted Answer · 2015-04-26 20:44:37Z

1

I guess that the values you are passing should be strings, I honestly doubt that you have declared javascript variables called visible and red anywhere in your page:

function facebookButton2() {
    document.getElementById("notification").style.visibility = 'visible';
    document.getElementById("notification").style.color = 'red';
    document.getElementById("hello").style.color = 'red';
}

answered Apr 26, 2015 at 20:44

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

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

1 Comment

Nich Brockman Over a year ago

Thanks! This was part of the problem XD

FakirTrappedInCode · Accepted Answer · 2015-04-26 20:45:51Z

0

Change your function as:

function facebookButton2() {
    document.getElementById("notification").setAttribute('style','visibility:visible');
    document.getElementById("notification").setAttribute('style','color:red');
    document.getElementById("hello").setAttribute('style','color:red');
}

See that working here: http://jsbin.com/rosubazuna/1/

answered Apr 26, 2015 at 20:45

FakirTrappedInCode

6599 silver badges31 bronze badges

Comments

Nich Brockman · Accepted Answer · 2015-04-26 21:14:16Z

0

Found the problem.

The "distShare" was calling the distShare() method in my controller and that method returned me to a "new" view even though it was the same page. I was essentially refreshing the page. So it was technically working and I just didn't realize it. However, I also did have to change the values to strings as Darin Dimitrov suggested. Thanks for your help!

answered Apr 26, 2015 at 21:14

Nich Brockman

131 silver badge6 bronze badges

Collectives™ on Stack Overflow

How to call a onClick javascript function using bootstrap buttons and inside a form?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related