Simple problem with <form> tag

4 posts, 0 answers
  1. Orlando
    Orlando avatar
    9 posts
    Member since:
    Feb 2012

    Posted 25 Apr 2012 Link to this post

    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>
  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 27 Apr 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Orlando
    Orlando avatar
    9 posts
    Member since:
    Feb 2012

    Posted 27 Apr 2012 Link to this post

    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>
  4. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 27 Apr 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top