On submit my form variables are written to the database and the page changes to the next page BUT the address bar doesn't change. ie it still says mobile2.asp even though the view is mobile3.asp. What am I missing?
<head>
<title>mysite</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="include/js/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/themes/mycss.css" />
<script src="include/js/jquery.js"></script>
<script src="include/js/jquery.mobile-1.2.0.js"></script>
<%
dim EN
EN = xss_Clean(Request.Form("EN"))
If Request.ServerVariables("REQUEST_METHOD")= "POST" Then
write_element "EN", EN
response.redirect "mobile3.asp"
End if
%>
</head>
<div data-role="content">
<form action="mobile2.asp" method="post">
<div id="entries" class="list" data-theme="a">
<label for="EN" class="select"><h1 class="header">Number required</h1></label>
<select name="EN">
<option value="1">1</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option></select>
</div>
<button type="submit" data-theme="b" name="submit" value="submit-value" class="ui-btn-hidden" aria-disabled="false" data-ajax="false">Proceed</button>
</form>
</div>
Maybe the closing quote on the redirect?
response.redirect "mobile3.asp"
Related
i have added both cnd link for bootstrap in boilerplate but form still get submited instead of showing error idk what is going wrong even after copying demo form from bootstrap that form also stop working for some reasong idk why. can someone please explain why ?
boilerPlate -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="/style.css">
</head>
<body >
<%- include('navbar/navbar.ejs') %>
<main class="container">
<%- body -%>
</main>
<%- include('navbar/footer.ejs') %>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</body>
</html>
form.ejs
<% layout('BaseTemplate') %>
<h1 class="mb-5 offset-5">New product</h1>
<form action="/product" method="post" class="w-50 offset-3 needs-validation" novalidate>
<label for="name" class="form-lable mb-1">Name</label>
<input type="text" id="name" name="name"class="form-control mb-3" required>
<label for="price" class="form-lable mb-1">Price</label>
<input type="number" id="price" name="price"class="form-control mb-3" required>
<label for="description" class="form-lable mb-1">Description</label>
<input type="text" id="description" name="description"class="form-control mb-3" required>
<label for="image" class="form-lable mb-1">Image</label>
<input type="text" id="image" name="image" class="form-control mb-3" required>
<button type="submit" class="btn btn-outline-info">Submit</button>
</form>
i want to know why is bootstrap form validation not working
You have the form attribute novalidate on your <form> tag. When present, it specifies that the form-data should not be validated when submitted.
Not related to your issue, you also have a typo on your <label>s: class="form-lable" which sets a margin-bottom of 0.5rem, probably why you added the margin class mb-1 so I removed it in the fixed form:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<form action="/product" method="post" class="w-50 offset-3 needs-validation">
<label for="name" class="form-label">Name</label>
<input type="text" id="name" name="name" class="form-control mb-3" required>
<label for="price" class="form-label">Price</label>
<input type="number" id="price" name="price" class="form-control mb-3" required>
<label for="description" class="form-label">Description</label>
<input type="text" id="description" name="description" class="form-control mb-3" required>
<label for="image" class="form-label">Image</label>
<input type="text" id="image" name="image" class="form-control mb-3" required>
<button type="submit" class="btn btn-outline-info">Submit</button>
</form>
I am Unable to hide the following slider using jquery mobile, here is my code
can anyone help
javascript code:
$(document).ready(function($) {
$("#d_c").hide();
}
html code:
<label for="d_c" class="containing-element5">Design & Construct Type Project:</label>
<select name="d_c" id="d_c" data-role="slider" class="containing-element3" data-mini="true">
<option value="off">No</option>
<option value="on">Yes</option>
</select>
To hide the native select element behind that nice label which looks like a Flipswitch, JQM is using absolute positioning, so you are out of luck here just because you are hiding the wrong element.
Please, let say it is somewhat unusual to hide just the Flipswitch and keep the corresponding caption visible but anyway, up to you. The solution here is to set a wrapper container and use the standard JQM class ui-screen-hidden to get the job done. You may use for that a trivial standard naming convention and attach to all your wrappers the suffix -container. Here is an example:
function toggleFlipswitch() {
$("#d_c-container").toggleClass("ui-screen-hidden");
}
$(document).on("pagecreate", "#page-one", function() {
$("#d_c-container").addClass("ui-screen-hidden");
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-theme="a" data-role="header" data-position="fixed">
Show/Hide Flipswitch
<span class="ui-title"></span>
</div>
<div data-role="content">
<div id="d_c-container">
<label for="d_c" class="containing-element5">Design & Construct Type Project:</label>
<select name="d_c" id="d_c" data-role="slider" class="containing-element3" data-mini="true">
<option value="off">No</option>
<option value="on">Yes</option>
</select>
</div>
</div>
</div>
</body>
</html>
I have a basic mobile login page in ColdFusion that allows the user to enter a username and password and log in. On successful login, the page redirects to the home page using a cflocation. However, while the page redirects successfully to the home page, it still displays the login page URL in the location bar. We have used cflocation many times throughout our web application and I have never come across this behavior before and can't figure out what could be causing it.
The gist of the page code:
<cfparam name="invalidLogin" default="false">
<cfif cgi.REQUEST_METHOD EQ "POST" AND isDefined("form.email") AND isDefined("form.password") and len(trim(form.email)) and len(trim(form.password))>
<!--- call the login method --->
<cfinvoke component="login" method="userlogin" returnvariable="userData">
<cfinvokeargument name="userName" value="#form.email#">
<cfinvokeargument name="password" value="#form.password#">
</cfinvoke>
<cfif userData.isLoggedIn>
<cflocation url="index.cfm" addtoken="no">
</cfif>
<cfset invalidLogin = true />
</cfif>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Log In</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/jquery.mobile.structure-1.3.2.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</head>
<body>
<div data-role="page" class="bg-color">
<div class="container">
<div data-role="content">
<div class="article">
<div class="logoDiv">
<img src="img/companyLogo.png" />
</div>
</div>
<form action="" method="post" name="frmLogin" id="frmLogin" class="margin-top" data-transition="slide">
<div>
<input type="text" name="email" id="email" placeholder="Username">
<input type="password" name="password" id="password" placeholder="Password">
</div>
<cfif invalidLogin><div>Invalid Login</div></cfif>
<div>
<input type="submit" value="Log In" data-theme="b" />
</div>
</form>
</div>
</div>
</div>
</body>
</html>
To prevent jQuery Mobile from handling forms with redirect via Ajax, you need to turn Ajax Navigation off and handle the request through HTTP.
To do so, add data-ajax="false" attribute to form tag. This will stop Ajax Navigation on the form only.
Note that you will lose transition when moving for current form page to new page as Ajax is turned off, so data-transition="slide" will have no effect.
<form action="" data-ajax="false" method="post" name="frmLogin" id="frmLogin">
Please help me on this. I am new to CSS and jQuery Mobile and I got this issue.
The checkboxes in my page do not display the box; only the label. When I click the label, a square appears on the left.
Now, the issue only happens if I download the CSS file to my local file and refer that. If I refer the CSS file from the server directly, the box appears before the text and works normally. Below are the sample source:
Source which has error:
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile App Login</title>
<meta name=viewport content="user-scalable=no,width=device-width">
<link rel="stylesheet" href="../jQuery/jquery.mobile.css">
<script src="../jQuery/jquery.js"></script>
<script src="../jQuery/jquery.mobile.js"></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Login Screen</h1>
</div>
<div data-role=content>
<label>
<input type="checkbox" name="checkbox-0" />
I agree
</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</div>
</div>
</body>
</html>
Source which does not have error:
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile App Login</title>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
<script src="../jQuery/jquery.js"></script>
<script src="../jQuery/jquery.mobile.js"></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Login Screen</h1>
</div>
<div data-role=content>
<label>
<input type="checkbox" name="checkbox-0" />
I agree
</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</div>
</div>
</body>
</html>
Everything else works fine; it is just the display of the box that causes me the problem. I took the latest files for the CSS and JS files and checked.
Without the box, the user may think it is just a label
Since I am new, I am unable to give an image, I'm sorry...
Thanks all.
Adding checkbox inside fieldset for me solved the same problem.
<fieldset data-role="controlgroup">
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
<label for="checkbox-2">I agree</label>
</fieldset>
When the proper value is selected I want to open the div with id="new_firm" in a modal dialog. I can't get the dialog to open. I know that the script get's executed since the alert pops up. Can anyone please tell me what's wrong here?
<!DOCTYPE html>
<html>
<head>
<title>FileReader Example</title>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.0.css" />
<script type="text/javascript" charset="utf-8" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.3.0.js"></script>
<script type="text/javascript" charset="utf-8">
function openNewFirmDialog() {
var selected = $("#select_firm option:selected");
var ddValue = selected.text();
if(ddValue === "Add a new company") {
//alert(ddValue);
$('#new_firm').dialog({modal:true});
}
}
</script>
</head>
<body>
<div data-role="page" id="add_details">
<div data-role="content">
<h2>Register hours</h2>
hei
<div data-role="fieldcontain">
<select id="select_firm" data-native-menu="false" onchange="openNewFirmDialog()">
<label for="select_firm" class="select">Select firm:</label>
<option data-placeholder="firm">Firm</option>
<option value="internal">Internal</option>
<option value="new_firm_option">Add a new company</option>
</select>
</div>
<input type="text" id="descritptionTxt" value="Description"/>
<div data-role="controllgroup" data-type="horizontal">
<input type="range" id="number_of_hours" min="0" max="24" step="0.25" value="0" />
<input type="range" id="number_of_minutes" min="0" max="24" step="0.25" value="0" />
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Overview</li>
<li>Add hours </li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="new_firm">
<h2>Add a new firm</h2>
<textarea id="the_new_firm" value="New firm"/>
</div>
</body>
I think you need to add reference to jQuery UI if you want to use dialogs. Available for download here: http://jqueryui.com/demos/dialog/