how to pass a string to a javascript function in xhtml?

Question

function passString(str)
{
    alert(str);
}

function passText()
{
    str = document.getElementById('formId:hidden1').value;
    alert(str);
}

I am using both of the above javascript functions to get the string obtained from a jsf bean file but none is working. The string is successfully obtained from the "#{addRoute5.teamNames}"(jsf bean File - see below) and displayed in the inputText, but the javascript cant accept string for some reason from xthml. My code in xhtml file is as follows:

Thanks in advance

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <f:view>
        <h:head>
            <link href="css/myCss1.css" rel="stylesheet" type="text/css"/>
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
            <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
            <title>Paris-Dakar Rally</title>
            <link href="css/mapsStyle.css" rel="stylesheet" type="text/css"/>
            <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?    sensor=false"></script>

        </h:head>
        <h:body onload ="#{addRoute5.calculateLatMarker()}">
            <div id="container">
                <div id="header">
                    <div id="title">
                        <span>Paris - Dakar Rally</span>
                    </div>
                </div>

                <div id="map_canvas"></div>

                <h:form id="formId">


                    <div id="body">

                        <div class="transbox">
                            <h:inputText id="hidden1" value="#{addRoute5.teamNames}"/>                            
                            **<h:commandButton type ="button" value="Start Simulation"     onclick ="passText()" or onclick="passString(#{addRoute5.teamNames})"/>**


                        </div>
                    </div>
                    </h:form>
            </div>
        </h:body>
    </f:view>
</html>

try document.getElementById('hidden1')...since it has id as well — Moon
– Moon, Commented Mar 13, 2012 at 17:22
The passText() approach should work, but it is clumsy. The passString() approach has an obvious syntax error which you can already answer/solve yourself by just looking at the generated HTML output or at the browser's JS console. I can of course post it as an answer, but that wouldn't explain why passText() don't work and I'm also curious what exactly the functional requirement is which you're trying to solve, because there may be much better ways to achieve this than something clumsy like this. — BalusC
– BalusC, Commented Mar 13, 2012 at 17:22
Open this in a browser and try your JavaScript in the JavaScript console. Make sure inspect the element and make sure you're selecting the correct ID. JSF have a lot of non-standard tags that get transformed into different tags. — ming_codes
– ming_codes, Commented Mar 13, 2012 at 17:24

Quentin · Accepted Answer · 2012-03-13 17:22:01Z

1

Stop. Step back. Break the problem down.

The code you have provided is a template that will be processed on the server. Then passed to a browser. Then the browser will extract the JavaScript from the HTML and run it.

Look at the source code the browser processes. Then ask yourself "Does this JavaScript not do what I expect? Or does the template not output the JavaScript I want?"

It looks like you have this:

onclick="passString(#{addRoute5.teamNames})"

which will generate something like:

onclick="passString(foo)"

when you want something like:

onclick="passString('foo')"

answered Mar 13, 2012 at 17:22

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

1 Comment

Angelos Over a year ago

thanks Quentin. . I should include in my output string the single quotes at the begining and at the end in the java bean file where i calculate my string

Collectives™ on Stack Overflow

how to pass a string to a javascript function in xhtml?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related