Submit button works fine in safari but not on iphone
359 views
Skip to first unread message
kenny
Feb 25, 2011, 7:55:09 PM2/25/11
to jQTouch
Hi I am building a simple todo application using html5 and jqtouch,
where a user will input text into the text field and click submit and
the text will be stored. (im sure you can imagine a todo app)
However in safari the submit button works fine however on the iphone
it does nothing.
I have tried many things now and nothing seems to work.
This is the code for the form, I hope some one can help.
<form type="post" onsubmit="addTodo(); return false;">
<input type="text" id="todoapp" name="todoapp"
placeholder="enter text here" />
<input type="submit" name="action" />
</form>
Thank you
where a user will input text into the text field and click submit and
the text will be stored. (im sure you can imagine a todo app)
However in safari the submit button works fine however on the iphone
it does nothing.
I have tried many things now and nothing seems to work.
This is the code for the form, I hope some one can help.
<form type="post" onsubmit="addTodo(); return false;">
<input type="text" id="todoapp" name="todoapp"
placeholder="enter text here" />
<input type="submit" name="action" />
</form>
Thank you
Tarique
Feb 25, 2011, 9:01:19 PM2/25/11
to jqt...@googlegroups.com
Try adding class 'form'
Thank you.
Tarique
kenny
Feb 25, 2011, 9:06:31 PM2/25/11
to jQTouch
hey thank you yeah I tried that but nothing seems to be working
Tarique
Feb 25, 2011, 9:34:00 PM2/25/11
to jqt...@googlegroups.com
If you add following function inside the JQTouch init it should work ...
$('form.form').submit(function(evt) {
var $form = $(this);
var okToSubmit = true;
if (okToSubmit) {
$form.get(0).submit();
}
return false;
});
Here is the submit button and form ...
<form class="form" name="findByAddrForm" action="findByAddr" method="post">
.. input ... etc
<a class="submit whiteButton" name="search">Search</a>
</form
kenny
Feb 26, 2011, 10:47:22 AM2/26/11
to jQTouch
Hi I have tried so many combinations of different things anf I just
cant get the submit button in JQTouch to work but it works fine when
displayed in safari.
The code I am using is displayed below, I would be very grateful if
some once could have a look at it and tell me where I am going wrong.
Thank you
<!DOCTYPE html>
<html>
<head>
<title>to do app</title>
<link rel="stylesheet" type="text/css" href="jqtouch/jqtouch.css">
<link rel="stylesheet" type="text/css" href="themes/apple/theme.css">
<link rel="stylesheet" type="text/css" href="CSS/fyp.css">
<script type="text/javascript" src="jqtouch/jquery.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript" src="fyp.js"></script>
<script type="text/javascript">
var jQT = $.jQTouch({
statusBar: 'black'
});
</script>
<script>
var html5rocks = {};
html5rocks.webdb = {};
html5rocks.webdb.db = null;
html5rocks.webdb.open = function() {
var dbSize = 5 * 1024 * 1024; // 5MB
html5rocks.webdb.db = openDatabase("Todo", "1.0", "Todo app",
dbSize);
}
html5rocks.webdb.createTable = function() {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS todo(ID INTEGER
PRIMARY KEY ASC, todo TEXT, added_on DATETIME)", []);
});
}
html5rocks.webdb.addTodo = function(todoText) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
var addedOn = new Date();
tx.executeSql("INSERT INTO todo(todo, added_on) VALUES
(?,?)",
[todoText, addedOn],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
html5rocks.webdb.onError = function(tx, e) {
alert("There has been an error: " + e.message);
}
html5rocks.webdb.onSuccess = function(tx, r) {
// re-render the data.
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
html5rocks.webdb.getAllTodoItems = function(renderFunc) {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM todo", [], renderFunc,
html5rocks.webdb.onError);
});
}
html5rocks.webdb.deleteTodo = function(id) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
tx.executeSql("DELETE FROM todo WHERE ID=?", [id],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
function loadTodoItems(tx, rs) {
var rowOutput = "";
var todoItems = document.getElementById("todoItems");
for (var i=0; i < rs.rows.length; i++) {
rowOutput += renderTodo(rs.rows.item(i));
}
todoItems.innerHTML = rowOutput;
}
function renderTodo(row) {
return row.todo + '<p><small>' + row.added_on + '</small></p>'
+ " <ul><a href='javascript:void(0);'
onclick='html5rocks.webdb.deleteTodo(" + row.ID +");'>Delete</a></
ul>";
}
function init() {
html5rocks.webdb.open();
html5rocks.webdb.createTable();
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
function addTodo() {
var todo = document.getElementById("todo");
html5rocks.webdb.addTodo(todo.value);
todo.value = "";
}
</script>
</head>
<body onload="init();">
<div id="page1">
<div class="toolbar">
<h4> page1test </h4>
</div>
<ul class="rounded">
<li class="arrow"><a href="#page2">gotopage2</a></li>
</ul>
<form type="post" onsubmit="addTodo(); return false;">
<input type="text" id="todo" name="todo" placeholder="What do
you need to do?" style="width: 200px;">
<input type="submit" value="Add Todo Item">
</form>
</div><!-- /page1 -->
<div id="page2">
<div class="toolbar">
<h4> page2test </h4>
</div>
<div id="todoItems">
<ul class="todoItems">
</ul>
</div>
</div>
</body>
</html>
cant get the submit button in JQTouch to work but it works fine when
displayed in safari.
The code I am using is displayed below, I would be very grateful if
some once could have a look at it and tell me where I am going wrong.
Thank you
<!DOCTYPE html>
<html>
<head>
<title>to do app</title>
<link rel="stylesheet" type="text/css" href="jqtouch/jqtouch.css">
<link rel="stylesheet" type="text/css" href="themes/apple/theme.css">
<link rel="stylesheet" type="text/css" href="CSS/fyp.css">
<script type="text/javascript" src="jqtouch/jquery.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript" src="fyp.js"></script>
<script type="text/javascript">
var jQT = $.jQTouch({
statusBar: 'black'
});
</script>
<script>
var html5rocks = {};
html5rocks.webdb = {};
html5rocks.webdb.db = null;
html5rocks.webdb.open = function() {
var dbSize = 5 * 1024 * 1024; // 5MB
html5rocks.webdb.db = openDatabase("Todo", "1.0", "Todo app",
dbSize);
}
html5rocks.webdb.createTable = function() {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS todo(ID INTEGER
PRIMARY KEY ASC, todo TEXT, added_on DATETIME)", []);
});
}
html5rocks.webdb.addTodo = function(todoText) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
var addedOn = new Date();
tx.executeSql("INSERT INTO todo(todo, added_on) VALUES
(?,?)",
[todoText, addedOn],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
html5rocks.webdb.onError = function(tx, e) {
alert("There has been an error: " + e.message);
}
html5rocks.webdb.onSuccess = function(tx, r) {
// re-render the data.
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
html5rocks.webdb.getAllTodoItems = function(renderFunc) {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM todo", [], renderFunc,
html5rocks.webdb.onError);
});
}
html5rocks.webdb.deleteTodo = function(id) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
tx.executeSql("DELETE FROM todo WHERE ID=?", [id],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
function loadTodoItems(tx, rs) {
var rowOutput = "";
var todoItems = document.getElementById("todoItems");
for (var i=0; i < rs.rows.length; i++) {
rowOutput += renderTodo(rs.rows.item(i));
}
todoItems.innerHTML = rowOutput;
}
function renderTodo(row) {
return row.todo + '<p><small>' + row.added_on + '</small></p>'
+ " <ul><a href='javascript:void(0);'
onclick='html5rocks.webdb.deleteTodo(" + row.ID +");'>Delete</a></
ul>";
}
function init() {
html5rocks.webdb.open();
html5rocks.webdb.createTable();
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
function addTodo() {
var todo = document.getElementById("todo");
html5rocks.webdb.addTodo(todo.value);
todo.value = "";
}
</script>
</head>
<body onload="init();">
<div id="page1">
<div class="toolbar">
<h4> page1test </h4>
</div>
<ul class="rounded">
<li class="arrow"><a href="#page2">gotopage2</a></li>
</ul>
<form type="post" onsubmit="addTodo(); return false;">
you need to do?" style="width: 200px;">
<input type="submit" value="Add Todo Item">
</form>
</div><!-- /page1 -->
<div id="page2">
<div class="toolbar">
<h4> page2test </h4>
</div>
<div id="todoItems">
<ul class="todoItems">
</ul>
</div>
</div>
</body>
</html>
Tan K C
Nov 11, 2016, 10:59:11 AM11/11/16
to jQTouch
Hi Kenny,
Do you have any solution for the form submission at iphone apps? I am facing now but i cant find any solution in Google. So hope u got the solutions already.
Reply all
Reply to author
Forward
0 new messages