How to pass a variable from JavaScript to HTML?

Question

I have a JavaScript defined in my file as follows:

<script language="javascript">
    var transports = "<%=api.transports%>";
    var httpsTransport;
    var httpTransport;
    var splittedTransports= transports.split(',');
    for(i = 0; i < splittedTransports.length; i++)
    {
        if(splittedTransports[i]=="https") {
            httpsTransport="https";
        } else if (splittedTransports[i]=="http") {
            httpTransport="http";
        }
    }
</script>

And I would like to read it in my HTML page like:

<div class="checkbox">
    <label class="checkbox inline">
        <input type="checkbox"  id="transport_http" name="transport_http"  value="http" <%if(httpTransport=="http"){%>checked<%}%> />
    </label>
    <label class="checkbox inline">
        <input type="checkbox" id="transport_https" name="transport_https"  value="https" <%if(httpsTransport=="https"){%>checked<%}%>/>
    </label>
</div>

But now I get an error that states:

org.mozilla.javascript.EcmaError: ReferenceError: "httpTransport" is not defined.

What am I doing wrong here?

I want to allow user to select an checkbox and save the form, and when he tries to edit the form, I want to show what he has saved in his previous operation. So, when he tries to edit I try to read the values form backend and would like to show that particular option as checked.

make sure the <script> is above the HTML. It seems it simply is not defined, i.e. while trying to establish un/checked the JS value is not yet existing (for example, because the HTML is above JS in the source) — Unamata Sanatarai
– Unamata Sanatarai, Commented Sep 19, 2014 at 5:18
@MohitArora yes that is waht im doing, i can do first operation that waht user selects, now when he tries to edit form, i need to show what he did earlier, That is place im stuck here. — Ratha
– Ratha, Commented Sep 19, 2014 at 5:18
@Ratha do not overcomplicate the task. Take a look at fiddle to see how it can be done. — Regent
– Regent, Commented Sep 19, 2014 at 5:36

R D · Accepted Answer · 2014-09-19 05:21:24Z

<script language="javascript">
var transports = "<%=api.transports%>";
var splittedTransports= transports.split(',');
for(i = 0; i < splittedTransports.length; i++)
{
if(splittedTransports[i]=="https"){
   document.getElementById("transport_https").checked = true;
}else if (splittedTransports[i]=="http"){
   document.getElementById("transport_http").checked = true;
}
}

</script>

HTML :

<div class="checkbox">
       <label  class="checkbox inline " >
           <input type="checkbox"  id="transport_http" name="transport_http"  value="http" />
       </label>
       <label  class="checkbox inline" >
           <input type="checkbox" id="transport_https" name="transport_https"  value="https"/>
       </label>
</div>

if-else-if can be simplified into if (splittedTransports[i] == "https" || splittedTransports[i] == "http") { document.getElementById("transport_" + splittedTransports[i]).checked = true; }

Unamata Sanatarai · Accepted Answer · 2014-09-19 05:22:57Z

The variables in your code are declared, but not defined. Give them a random value first, and then update it with the if

<script language="javascript">
 var transports = "<%=api.transports%>";
    var httpsTransport = 'no';
    var httpTransport = 'no';
    var splittedTransports= transports.split(',');
    for(i = 0; i < splittedTransports.length; i++)
    {
    if(splittedTransports[i]=="https"){
        httpsTransport="https";
    }else if (splittedTransports[i]=="http"){
        httpTransport="http";
    }
    }

</script>

Collectives™ on Stack Overflow

How to pass a variable from JavaScript to HTML?

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related