Simple problem with <form> tag

[Orlando]

Hi,

I'm porting a simple Energy cost calculator made in Javascript.
When i use the <form> tag Kendo UI isn't correcly displayed. This simple tag ins't supported or im wrong?

How can i fix this code to work with kendo ui? how can i access to my fields watts, hours and how to call the javascript function?



<div data-role="view" id="forms" data-title="Calculadora de Consumo" data-layout="layout" data-transition="slide" data-init="initForm" >

    <ul data-role="listview" data-style="inset" data-type="group">

         

         

        <li>

         

            Sepa cuánto consumen sus artefactos.

            <ul>

                <li>

                    <input type="tel" name="watts" size="5" value="0" />Watts del artefacto

                </li>

                 

                <li>

                    <input type="tel" name="hours" size="5" value="0" />Horas de funcionamiento

                </li>

                 

                <li>

                <input type="tel" name="unitcost" size="9"  value="105" />Costo KWh

                </li>

                <li>

                    <input type="button" value="Calculate" onclick="workitout(this.form)" />

                </li>

                 

                <li>

                <input type="text" name="daycost" size="7" />Costo diario

                </li>

                <li>

                <input type="text" name="qtrcost" size="7" />Costo mensual

                </li>

                 

                <li>

                <input type="text" name="yrcost" size="7" />Costo anual

                </li>

                 

            </ul>

             

        </li>

         

    </ul>

</div>

<script language="JavaScript" type="text/JavaScript">

<!--

function workitout(form)

{

var kw = form.watts.value / 1000;

var hrs = parseInt(form.hours.value);

 

var cost = (form.unitcost.value * kw * hrs) / 100;

var annual = cost * 365;

var quarter = annual / 12;

  

cost = round(cost);

annual = round(annual);

annual = round(annual);

 

form.daycost.value = cost;

form.qtrcost.value = quarter;

form.yrcost.value = annual;

}

function round (num) {

num = Math.round(num * 100) / 100;

num = (num + 0.001) + '';

return num.substring(0, num.indexOf('.') + 3);

}   

//  End -->

</script>

[Petyo]

Hi,

I am not sure that I understand your issue (tried reproducing it). There is no FORM element in the code provided by you. 

As Kendo UI Mobile aims at supporting native look and feel, input elements are styled to match the way forms look in native mobile application. You can see this example for a list of elements and the way they are set up as markup.

All the best,
Petyo
the Telerik team

[Orlando]

Thanks. I've fixed and my form works. I put the <form> tag outside <div> section because inside <div> does not work

<form>

<div data-role="view" id="forms" data-title="Calculadora de Consumo" data-layout="layout" data-transition="slide" data-init="initForm" >

    <ul data-role="listview" data-style="inset" data-type="group">

          

          

        <li>

          

            Sepa cuánto consumen sus artefactos.

            <ul>

                <li>

                    <input type="tel" name="watts" size="5" value="0" />Watts del artefacto

                </li>

                  

                <li>

                    <input type="tel" name="hours" size="5" value="0" />Horas de funcionamiento

                </li>

                  

                <li>

                <input type="tel" name="unitcost" size="9"  value="105" />Costo KWh

                </li>

                <li>

                    <input type="button" value="Calculate" onclick="workitout(this.form)" />

                </li>

                  

                <li>

                <input type="text" name="daycost" size="7" />Costo diario

                </li>

                <li>

                <input type="text" name="qtrcost" size="7" />Costo mensual

                </li>

                  

                <li>

                <input type="text" name="yrcost" size="7" />Costo anual

                </li>

                  

            </ul>

              

        </li>

          

    </ul>

</div>

</form>

[Petyo]

Hello,

I think that this visual difference may be due to custom styles. Putting a form element inside the view in the fiddle did not have any effect on the look of the form elements. 

As the mobile application hides and re-arranges view elements, I think that the form element outside the view at some point will be detached from the elements you try targeting. I recommend that you troubleshoot what causes the visual glitches in your case. 

Regards,
Petyo
the Telerik team