App Database

MobiOne Archive

Getting Help – General

This topic has 14 replies, 5 voices, and was last updated 10 years, 9 months ago by support-octavio.

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
January 10, 2014 at 2:48 pm #345925 Reply

stealthtrooper
Member

I want to create a page where the app user would complete a form with information and this information would then be stored in the form and be retrieved next time they excess the page. Also I’d like the facility for them to upload a photo either direct from the camera or from the photo gallery. The third feature I’d like is the form to complete a basic mathematical calculation based on one of their inputs. Please could someone give me a pointer how to achieve this?

January 10, 2014 at 3:14 pm #345927 Reply

Brandon
Member

Local storage should do what you want.
To set an item:
localStorage.setItem(‘name’,’my name’);
To get an item
localStorage.getItem(‘name’); //returns my name from the above set

Here is an example of how to save a camera image into local storage:
http://cincyplanet.com/mobius/saving-camera-image-to-local-storage/

January 10, 2014 at 7:24 pm #345933 Reply
Code_A
Member
To perform the math calculation, select the “run JavaScript” option for the “on change” property for the text box(es). Then just add code to the JS window (or to the “<project_name>_custom.js” file) to do the math based on the user inputs.

Assume you have 3 text boxes and you want to add the values from 1 & 2 and display the result in 3:
```
var sum = parseFloat($('#m1-<project_name>-text1').val()) + parseFloat($('#m1-<project_name>-text2').val());
$('#m1-<project_name>-text3').val(sum);
```
January 13, 2014 at 4:17 pm #345977 Reply

stealthtrooper
Member

Thanks Guys, I’ll look at this ASAP and see how I get on:-)

January 20, 2014 at 2:49 pm #346239 Reply

stealthtrooper
Member

I’ve managed to set up my form to gather information and keep it in local storage but I’m really struggling with the percentage calculation i need to do.
I’ve got an input id of “weight” being entered in Kg and want to automatically work out and display 5 and 6 percent of that figure to be displayed in grams but I just can’t figure out the code.
Any help would be be gratefully received 🙂

January 20, 2014 at 4:18 pm #346243 Reply

Brandon
Member

Take your weight in kilograms at times that by 1000 to get grams:

x * 1000 = xgrams
times that by .05 to get 5-percent

xgrams * .05 = 5-percent-xgrams

So, if your variable for the weight is myKG:

//I am doing them separately in case you need to access the different ones
myGrams = myKG*1000;
my5percent = myGrams*.05;//or .06 for 6 percent

Hope this helps.

January 22, 2014 at 5:42 pm #346298 Reply

stealthtrooper
Member

Thanks CincyPlanet

Sorry for the silly questions but its how to integrate those formulas into my html code that I’m stuck with. Also if I wanted to it to automatically calculate either 5 percent or 6 percent based on an age entry how would I achieve that please?

e.g. If age<12months calculate 5 percent of weight
If age>12months calculate 3 percent of weight

Thanks Again

January 23, 2014 at 9:14 am #346307 Reply

Code_A
Member

There are two methods of applying JavaScript code to your app:

1) Click on any of your input widgets (eg text box, button, etc.) and set the On Change property to Run JavaScript. Then enter your code in to the JavaScript window.

2) Open the “<project_name>_custom.js” file in your project’s www folder and add JS code there. To call that code from your app just add the function call to the widget via method one above. For example, if you created a function called “myFunction()” in the the custom file then in the JS window for the widget you could call the function by entering “myFunction()”.

To answer your other question, yes you can just use if statements to change the multiplier based on the user input.

January 23, 2014 at 9:17 am #346308 Reply

Brandon
Member

Here you go. All the code is in the button properties.

Attachments:
You must be logged in to view attached files.

January 23, 2014 at 3:47 pm #346324 Reply

stealthtrooper
Member

Thank you guys – Ill have a go with this and see how I get on. Thank you again for the help:-)

February 13, 2014 at 9:28 am #347125 Reply

stealthtrooper
Member

I’ve got this code now which works fine in a normal internet browser but doesn’t seem to work in Mobi. Please can anyone help – this is driving me mad

<html>
<body>
To Calculate how much to feed please enter your animals weight below (in Kg) and click Submit
<form action=”javascript:calc()”>
<table width=”200″ border=”0″ align=”left” cellpadding=”0″ cellspacing=”0″>
<tr>
<td colspan=”5″> </td>
<td> </td>
</tr>
<tr>
<td>Weight:</td>
<td width=”168″><input type=”text” id=”input” size=”5″/></td>
<td width=”144″>Kg</td>
<td width=”30″> <div align=”center”></div></td>
<td width=”144″><input type=”Submit” /></td>
<td width=”109″> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#99FF66″>
<td colspan=”2″><strong>ADULT DOG </strong></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#99FF66″>
<td colspan=”5″>Quantity to feed per day: </td>
</tr>
<tr bgcolor=”#99FF66″>
<td><p></p>
Between</td>
<td><input type=”text” size=”5″ id=”output”/></td>
<td><div align=”center”>and</div></td>
<td><input type=”text” size=”5″ id=”output2″/></td>
<td><div align=”center”>grams </div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#99CCCC”>
<td><strong>PUPPY</strong></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#99CCCC”>
<td colspan=”5″>Quantity to feed per day:</td>
</tr>
<tr bgcolor=”#99CCCC”>
<td><p></p>
Between</td>
<td><input type=”text” size=”5″ id=”output3″/></td>
<td><div align=”center”>and</div></td>
<td><input type=”text” size=”5″ id=”output4″/></td>
<td><div align=”center”>grams </div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#CC99FF”>
<td><strong>CAT</strong></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#CC99FF”>
<td colspan=”5″>Quantity to feed per day: </td>
</tr>
<tr bgcolor=”#CC99FF”>
<td> Between </td>
<td><input type=”text” size=”5″ id=”output5″/></td>
<td><div align=”center”>and</div></td>
<td><input type=”text” size=”5″ id=”output6″/></td>
<td><div align=”center”>grams </div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>

<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br />
<p> <br />
</p>
<p> <br />
</p>
<p></p>
</form>
</body>
<script>
function calc() {
var i = document.getElementById(“input”).value;
var m = (i*1000/100) * 2;
var o = (i*1000/100) * 3;
var p = (i*1000/100) * 5;
var q = (i*1000/100) * 6;
var r = (i*1000/100) * 2;
var s = (i*1000/100) * 3;
document.getElementById(“output”).value = m;
document.getElementById(“output2”).value = o;
document.getElementById(“output3”).value = p;
document.getElementById(“output4”).value = q;
document.getElementById(“output5”).value = r;
document.getElementById(“output6”).value = s;
}
</script>
</html>

Attachments:
You must be logged in to view attached files.

February 13, 2014 at 2:15 pm #347144 Reply

support-michael
Keymaster

You copy/pasted a full html doc src into the html widget (i.e., <head></head><body>visible stuff here</body>). This widget merges whatever html you provide into the current document. Thus your code completely breaks the DOM. If you are going to copy/paste code it should only be the html content between <body>visible stuff</body> tags, i.e., exclude the <body> tags.

February 13, 2014 at 2:17 pm #347145 Reply

Brandon
Member

If it were me I would take the time to convert it to a mobione form using the widget controls over the html code. I believe this give you greater control over the design and interaction in mobione studio.

February 13, 2014 at 3:07 pm #347150 Reply

stealthtrooper
Member

Hi Michael,

I think this is what you mean by removing the tags etc. but it still doesn’t work:-(

<div style = “formholder” width=”200″>
To Calculate how much feed please enter your animals weight below (in Kg) and click Submit
<form action=”javascript:calc()”>
<table width=”150″ border=”0″ align=”left” cellpadding=”0″ cellspacing=”0″>
<tr>
<td width=”57″>Weight:</td>
<td width=”30″><div align=”center”>
<input type=”text” id=”input” size=”5″/>
</div></td>
<td width=”35″>Kg</td>
<td width=”30″><div align=”center”></div></td>
<td width=”56″><input type=”Submit” /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#99FF66″>
<td colspan=”2″><strong>ADULT DOG </strong></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#99FF66″>
<td colspan=”5″>Quantity to feed per day: </td>
</tr>
<tr bgcolor=”#99FF66″>
<td><p></p>
Between</td>
<td><div align=”center”>
<input type=”text” size=”5″ id=”output”/>
</div></td>
<td><div align=”center”>and</div></td>
<td><input type=”text” size=”5″ id=”output2″/></td>
<td><div align=”center”>grams </div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#99CCCC”>
<td><strong>PUPPY</strong></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#99CCCC”>
<td colspan=”5″>Quantity to feed per day:</td>
</tr>
<tr bgcolor=”#99CCCC”>
<td><p></p>
Between</td>
<td><div align=”center”>
<input type=”text” size=”5″ id=”output3″/>
</div></td>
<td><div align=”center”>and</div></td>
<td><input type=”text” size=”5″ id=”output4″/></td>
<td><div align=”center”>grams </div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#CC99FF”>
<td><strong>CAT</strong></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#CC99FF”>
<td colspan=”5″>Quantity to feed per day: </td>
</tr>
<tr bgcolor=”#CC99FF”>
<td> Between </td>
<td><div align=”center”>
<input type=”text” size=”5″ id=”output5″/>
</div></td>
<td><div align=”center”>and</div></td>
<td><input type=”text” size=”5″ id=”output6″/></td>
<td><div align=”center”>grams </div></td>
</tr>
</table>
<br />
<p> <br />
</p>
<p> <br />
</p>
<p></p>
</form>
</div>
<script>
function calc() {
var i = document.getElementById(“input”).value;
var m = (i*10) * 2;
var o = (i*1000/100) * 3;
var p = (i*1000/100) * 5;
var q = (i*1000/100) * 6;
var r = (i*1000/100) * 2;
var s = (i*1000/100) * 3;
document.getElementById(“output”).value = m;
document.getElementById(“output2”).value = o;
document.getElementById(“output3”).value = p;
document.getElementById(“output4”).value = q;
document.getElementById(“output5”).value = r;
document.getElementById(“output6”).value = s;
}
</script>

February 19, 2014 at 1:19 pm #347356 Reply
support-octavio
Member
Hi stealthtrooper,

I have consulted the dev team and learn that your form is not being submitted because phoneui catches “submit” event and calls e.preventDefault. A workaround is adding an onclick handler in your button that calls the function:
```
<input type="Submit" onclick="javascript:calc()" />
```
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

Attachments:

Attachments: