Button calling javascript function error

Question

In my view, I want two buttons to populate three hidden fields of a form and submit it. It's not working, and I can't know why. Any ideas?

I have the following code:

<script language="javascript" type="text/javascript">
    function FillAndSubmit(thisid) {
        $('input[name=First]').val(thisid);
        $('input[name=Second]').val(@Model.ID);
        $('input[name=Third]').val(@ViewBag.Something);
        document.form.submit();
    }
</script>

A have a form with invisible fields:

@using (Html.BeginForm(null, null, FormMethod.Post, 
                       new { name = "form", id = "form" }))
{
    @Html.Hidden("First")
    @Html.Hidden("Second")
    @Html.Hidden("Third")
}

And two buttons:

<button class="Button" id="ButtonA" onclick="javascript:FillAndSubmit(this.id);">
    CaptionA
</button>
<button class="Button" id="ButtonB" onclick="javascript:FillAndSubmit(this.id);">
    CaptionB
</button>

If I put the buttons inside the scope of the form, it submits but without populating the hidden fields. So, it is just not calling the function. Javascript is working in other pages of the same application.

ADDED:

Generated source:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
</head>

<body>
    <script language="javascript" type="text/javascript">
        function Botao(thisid) {
            $('input[name=First]').val(thisid);
            $('input[name=Second]').val(41); 
            $('input[name=Third]').val(10/5/2012 1:58:02 PM);
            document.form.submit();
        }
</script>

...
Some div's with some text
...


<form action="/Controller/Action/" id="form" method="post" name="form"><input id="First" name="First" type="hidden" value="" /><input data-val="true" data-val-required="The DateTime field is required." id="Second" name="Second" type="hidden" value="10/5/2012 1:58:02 PM" /><input id="Third" name="Third" type="hidden" value="" /></form>        
    <button class="Button" id="ButtonA" onclick="javascript:Botao(this.id);">
        CaptionA
    </button>

    <button class="myButton" id="ButtonB" onclick="javascript:Botao(this.id);">
        CaptionB
    </button>

    </body>
</html>

Does the browser's JS console show any error?. Have you tried to remove the javascript: part of your onclick attributes since is not needed?. Have you tried to debug with a console.log to see if the function is called?. Have you tried to call the function directly from the Browser's JS console? — fguillen
– fguillen, Commented May 10, 2012 at 17:22
Removing the javascript: didn't do anything. I will check the JS console now. — Lucas Reis
– Lucas Reis, Commented May 10, 2012 at 17:26
Unless @mokdel.ID is a number you will get an unknow identifier at val(@Model.ID) same for the line below — Rune FS
– Rune FS, Commented May 10, 2012 at 17:28
Model.ID is a number, and ViewBag.Something is a DateTime. — Lucas Reis
– Lucas Reis, Commented May 10, 2012 at 17:31

Corkscreewe · Accepted Answer · 2012-05-10 17:36:44Z

3

This needs quotes:

$('input[name=momentoDaConsulta]').val("10/5/2012 1:58:02 PM");

answered May 10, 2012 at 17:36

Corkscreewe

2,9812 gold badges24 silver badges23 bronze badges

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

3 Comments

Lucas Reis Over a year ago

But this date is generated by Razor engine. The code has a .val(@ViewBag.Something).

Corkscreewe Over a year ago

I don't care what generates it, the generated code is wrong. It tries to divide, then fails on those other numbers ("SyntaxError: Unexpected number") and the last command never gets called - which is, by coincidence, the "document.form.submit();"

Lucas Reis Over a year ago

It worked! I put double quote in "@Model.ID" and "@ViewBag.Something"!

Software Engineer · Accepted Answer · 2012-05-10 17:45:29Z

2

JQuery's .val(value) accepts either string or array of strings, place quotes around @Model.ID and @ViewBag.Something:

    $('input[name=Second]').val("@Model.ID");
    $('input[name=Third]').val("@ViewBag.Something");

answered May 10, 2012 at 17:45

Software Engineer

3,9861 gold badge28 silver badges35 bronze badges

1 Comment

Lucas Reis Over a year ago

It worked, and I just typed "@Model.ID" and "@ViewBag.Something"!

Collectives™ on Stack Overflow

Button calling javascript function error

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related