JQuery Mobile Submit Form - javascript

I am trying to submit a form via JQuery Mobile.
I have:
<form action="#pagetwo" method="post" name="myform">
<input type="text" name="myname">
<input type="submit" value="submit" />
... then I have....
<div data-role="page" id="pagetwo">
...
<?php echo $_GET["myname"]; ?>
The first problem is that it's not doing anything when I hit the submit button. It should go to #pagetwo
What I'm I doing wrong please?
UPDATE:
Here is more code as requested:
<div data-role="page" id="home">
<div data-role="header">
<h1>Page 1</h1>
</div><!-- /header -->
<div data-role="content">
<form action="#page2" method="post" name="myform">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Check Property Elements:</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" /><label for="checkbox-1">Yes or No</label>
</fieldset>
</div>
</form>
...
<div data-role="page" data-theme="a" id="page2">
<div data-role="header">
<h1>This is page 2</h1>
</div><!-- /header -->
<div data-role="navbar">
<ul>
<li>Home</li>
</ul>
</div><!-- /navbar -->
<div data-role="content" data-theme="d">
<?php if (isset($_POST['checkbox-1'])) {
// do something with $_POST['value']
echo 'yessss';
var_dump($_POST);
} ?>

First, It is possible that is visible when You hit submit and browser do not scrolls You here (because it is visible).
Try to put some big chunk of something before #pagetwo and see how it goes.
<!doctype html>
<html>
<head>
</head>
<body>
<form action="#foo" method="get" accept-charset="utf-8">
<p><input type="submit" value="Continue →"></p>
</form>
<div style="height: 3000px; background-color: #000;">
</div>
<div id="foo">Foo</div>
</body>
</html>
Second, I think You should post you data to different page (or url) not just different anchor.
Third, I see another problem with Your code. Your form says <form method="post" but afterwards You are outputting from get <?php echo $_GET["myname"]; ?>. It should be <?php echo $_POST["myname"]; ?>

Related

Add multiple images with php and save it in mysql

Someone can help me please with this code? I would add multiple images but I can't figure it out.
I tried the multiple command but it doesn't worked, I have no clue honestly.
HTML code:
<form action="<?= $_SERVER['PHP_SELF']; ?>" method="POST" enctype="multipart/form-data" data-abide>
<div class="photo-field">
<input type="file" name="file_img" pattern="^.+?\.(jpg|JPG|png|PNG|jpeg|JPEG)$" required>
<small class="error">Upload JPG or PNG only.</small>
</div>
<div class="title-field">
<input type="text" name="img_title" placeholder="Image title" required>
<small class="error">Image title is required.</small>
</div>
<input type="submit" value="Upload Image" name="btn_upload" class="button">
</form>
PHP code:
<li>Add Photo</li>
<li class="divider"></li>
</ul>
</section>
</nav>
<br/>
<!--Content goes here-->
<div class="row">
<div class="large-12 columns">
<?php
if(isset($_GET['success'])) {
if($_GET['success']=="yes"){?>
<div class="row">
<div class="small-6 large-6 columns">
<div data-alert class="alert-box success radius ">
Image "<?= $_GET['title']; ?>" uploaded successfully.
×
</div>
</div>
</div>
<?php } else {?>
<div class="row">
<div class="small-6 large-6 columns">
<div data-alert class="alert-box alert radius ">
There was a problem uploading the image.
×
</div>
</div>
</div>
<?php } }?>
The problem is, that there is no loop in the processing php script.
So only one file gets uploaded.
For more info and solutions see:
Multiple file upload in php

Selected radio don't change the jquery color button

i have a form ho check a list of task, my idea is when a task is marked the button change the color, but instead the background is changed what is my problem?
part of the code:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(function() {
$('#popupDialog').click(function() {
if($(this).select()) {
$('#ba700')
.buttonMarkup({ theme:"b" })
}
})});
</script>
</head>
<body>
<div data-role="page" data-theme="a" >
<div data-role="header" data-position="inline">
<div class="logo"><img src="http://10.0.210.26/control/logo_utryt.png" width="40%"alt=""/></div>
</div>
<div data-role="content" data-theme="a">
<div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-btn-check">
        Vagón 1
        Vagón 2
        Vagón 3
Enviar
     </div>
<div data-role="controlgroup">
<div class="grid grid-pad">
<div class="col-1-3">
<div class="module">
<a href="#popupMenu" id="popupm" data-role="button" data-rel="popup" data-position-to="window" data-transition="pop" >
<h1>Dispositivos de Recaudo</h1></a>
<div data-role="popup" id="popupMenu" data-theme="a" data-dismissible="false" >
Close
<div data-role="collapsibleset" id="popupDialog" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" >
<div data-inset="false" id="ba700" data-role="collapsible" data-theme="a">
<h2>BA700</h2>
<ul data-role="listview" >
<form id="form"><fieldset data-role="controlgroup"><input type="radio" name="radio-v-m" id="radio-v-m" >
<label for="radio-v-m">Si</label><input type="radio" name="radio-v-m" id="radio-v-1m">
<label for="radio-v-1m">No</label>
 <textarea data-mini="true" cols="40" rows="8" name="textarea-4" id="textarea-4" placeholder="Observación"></textarea>
</fieldset>
</form>
</ul>
</div>
this code change the theme of the back but i want to change the theme of the button when i select a radio mark
any help please
Assuming you want the theme of the collapsible to change when clicking the radio buttons. Add a value to the the radio buttons so we know which one is selected:
<input type="radio" name="radio-v-m" id="radio-v-m" value="0" />
<label for="radio-v-m">Si</label>
<input type="radio" name="radio-v-m" id="radio-v-1m" value="1" />
<label for="radio-v-1m">No</label>
Then in script handle the change event of the radio buttons, figure out which one is selected and then change the collapsible theme as needed
$('input[name="radio-v-m"]').on("change", function(){
var val = $('input[name="radio-v-m"]:checked').val();
if (val == '0'){
$(this).closest(".ui-collapsible").collapsible( "option", "theme", "b" );
} else {
$(this).closest(".ui-collapsible").collapsible( "option", "theme", "a" );
}
});
Working DEMO

Validation of form using jquery mobile or javascript

I am using the following code which displays a form. The form elements should be validated . Please find the attached code with what i have tried.
<!doctype html>
<html>
<head>
<title> App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>site Details</h1>
</div>
<div data-role="content">
Enter the details of site
Modify site details
</div>
</div>
<div data-role="page" id="Site entry1">
<div data-role="header">
Home
<h1>Welcome To enter the details of site</h1>
</div>
<div data-role="content">
<div class="content-primary">
<form id= "1">
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="sitename">Site name:</label>
<input type="text" sitename="name" id="sitename" value="" />
</li>
<li data-role="fieldcontain">
<label for="siteno">Site name:</label>
<input type="text" siteno="siteno" id="siteno" value="" />
</li>
Next
</ul>
</form>
</div>
</div>
</div>
<div data-role="page" id="Site entry2">
<div data-role="header">
previous
<h1>Welcome To enter the module details of site</h1>
</div>
<div data-role="content">
<div class="content-primary">
<form>
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="moduleno">name:</label>
<input type="text" modulename="moduleno" id="moduleno" value="" />
</li>
<li class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</fieldset>
</li>
</ul>
</form>
</div>
</div>
<div data-role="footer">
Next
</div>
</div>
<div data-role="page" id="Site entry3">
<div data-role="header">
previous
<h1>Welcome To enter the exe details of site</h1>
</div>
<div data-role="content">
<div class="content-primary">
<form>
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="modulename">name:</label>
<input type="text" name="name" id="name" value="" />
</li>
<li class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</fieldset>
</li>
</ul>
</form>
</div>
</div>
<div data-role="footer">
Home
</div>
</div>
<div data-role="page" id="Modify site">
<div data-role="header">
Home
<h1>List of sites </h1>
</div>
<div data-role="content">
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
find the following scripting
function validate()
{
var siteName = document.getElementById("siteName").value;
var siteNo = document.getElementById("siteNo").value;
if (siteName.length == 0)
{
alert("Please, enter your name");
return false;
}
if (siteNo.length == 0)
{
alert("Please, enter your no");
return false;
var numbers = /^[0-9]+$/;
if(siteNo.value.match(numbers))
{
return true;
}
}
}
How to validate that site no will be only numbers and site name only text.
The code i have tried above is not serving for the purpose.
Your html has an error too .. there two body tags .. remove one
<body>
<body>
Alse check this fiddle for validation. Make use of jQuery
Statements after a return usually are not executed. Change:
function validate()
{
var siteName = document.getElementById("siteName").value;
var siteNo = document.getElementById("siteNo").value;
if (siteName.length == 0)
{
alert("Please, enter your name");
return false;
}
if (siteNo.length == 0)
{
alert("Please, enter your no");
return false;
} // !!
var numbers = /^[0-9]+$/;
if(siteNo.value.match(numbers))
{
return true;
}
else
return false; // !!!
}
Recommendation: if the code would have been properly indented, this error would have been quite more obvious.

How to make a simple text field validation and button to go to next page with jQuery Mobile?

This is what I got, but I cannot get the correct way to go load another page if the correct text is added in the textbox. Can someone help me getting the right syntax?
<script type='text/javascript'>//<![CDATA[
$(document).delegate('[data-role="page"]', 'pageinit', function () {
var $submit = $(this).find('input[type="submit"]'),
$text = $(this).find('input[type="text"]');
$text.bind('keyup', function () {
if (this.value == 'llab') {
$submit.button('enable');
} else {
$submit.button('disable');
}
}).trigger('keyup');
});
//]]>
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>
Uppgift 1
</h3>
</div>
<div data-role="content">
<p>
Uppgift nummer ett blir att ...
</p>
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Centralstationen, Göteborg&zoom=14&size=288x200&markers=Centralstationen, Göteborg&sensor=false" width="288" height="200" />
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="pwtext">
</label>
<input name="passwordtext" id="pwtext" placeholder="" value="" type="text" />
</fieldset>
</div>
<input type="submit" data-theme="b" data-icon="check" data-iconpos="left" value="Ta dig vidare" id="sendbtn" name="sendbtn"/>
<a data-role="button" data-theme="a" href="start.html" data-icon="home" data-iconpos="left">
Tillbaka till startsidan
</a>
</div>
</div>
</body>
</html>
Updated answer:
Here is a complete solution for your question/problem.
Markup:
Consists of two pages, login page (page1) and (page2) upon successful login.
<!-- Start of first page -->
<div data-role="page" id="page1">
<div data-role="header">
<h1>page1 header</h1>
</div><!-- /header -->
<div data-role="content">
<p>enter password</p>
<form id="login" action="" method="">
<input name="pwtext" id="pwtext" placeholder="" value="" type="text" class="required" />
<input type="submit" data-theme="b" data-icon="check" data-iconpos="left" value="Ta dig vidare" id="sendbtn" name="sendbtn" />
</form>
</div><!-- /content -->
<div data-role="footer">
<h4>Page1 Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div data-role="content">
<p>password accepted</p>
<p>Back to page1</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page2 Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
Password validation and redirect to next page if the password is correct.
$("#login").submit(function() {
var emptyFields = $(":input.required").filter(function() {
return !$.trim(this.value).length;
});
if(emptyFields.length) {
$("#pwtext").css("background-color", "#ffff76");
$("#pwtext").attr("placeholder", "Passeword required!");
return false;
}
if ($('#pwtext').val() != 'omar') {
$("#pwtext").css("background-color", "#ffff76");
$("#pwtext").attr("placeholder", "Passeword required!");
return false;
}
if ($('#pwtext').val() == 'omar') {
$.mobile.changePage("#page2", "slideup");
return false;
}
});
JSFiddle: test

In multipage $.mobile.changePage("#test") not working

Hi all I have html file in that there are various different pages in div. Now I want to navigate from one page to another I am using $.mobile.changePage("#test") for this but navigation to test.html is not take place. If I use different html file for test.html and call it as $.mobile.changePage(("test.html")); then navigation takes place.
I also tried with loadPage, but it also does not solve my issue. Any suggestion will be appreciated, Thanks in advance.
Here is my code:
<body>
<div data-role="page" id="firstPage" onclick=callSecondPage() class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="firstPage" id="firstPage">
</div>
<script type="text/javascript">
function callSecondPage()
{
alert ("Inside callPage");
$.mobile.changePage('#secondPage');
}
</script>
</div>
<div data-role="page" id="secondPage" onclick=callThirdPage() class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="secondPage" id="secondPage">
</div>
<script type="text/javascript">
function callThirdPage()
{
alert ("Inside callPage");
$.mobile.changePage('#thirdPage');
}
</script>
</div>
<div data-role="page" id="thirdPage" onclick=callFourthPage() class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="thirdPage" id="thirdPage">
</div>
<script type="text/javascript">
function callFourthPage()
{
alert ("Inside callPage");
$.mobile.changePage('#fourthPage');
}
</script>
</div>
<div data-role="page" id="fourthPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="fourthPage" id="fourthPage">
</div>
</div>
<div data-role="page" id="fifthPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="fifthPage" id="fifthPage">
</div>
</div>
<div data-role="page" id="sixthPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="sixthPage" id="sixthPage">
</div>
</div>
before comes to above html file navigate to other pages, And now $.mobile.changePage('#secondPage'); secondPage is not navigated from firstPage. But if same code I placed in index.html (i.e entry point of application then proper navigation takes place.
You should write
$.mobile.changePage($("#test"))
Is the call to $.mobile.changePage waiting for page load? You need to let us see some code here...

Categories