I am trying to make an HTML page, that when users access, it will take them to a 3rd party external site (I have no control over), and fill in the username and password fields, and log them in.
This is the source of the external site, which I got from my browser.
<!DOCTYPE html>
<html><head>
<title>Omitted | Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
var areActiveModsSelected = false;
var areInactiveModsSelected = false;
function SetActiveSelection()
{
var checkboxes = document.ActiveMods.getElementsByClassName("ModSelection");
areActiveModsSelected = !areActiveModsSelected;
SetSelection(checkboxes, areActiveModsSelected);
}
function SetInactiveSelection()
{
var checkboxes = document.InactiveMods.getElementsByClassName("ModSelection");
areInactiveModsSelected = !areInactiveModsSelected;
SetSelection(checkboxes, areInactiveModsSelected);
}
function SetSelection(checkboxes, isSelected)
{
for(var i=0, n=checkboxes.length;i<n;i++)
{
checkboxes[i].checked = isSelected;
}
}
function checkSavegame()
{
var e = document.getElementById("savegame");
if (e != null) {
var savegame = e.options[e.selectedIndex].text;
var isEmpty = isEmptySavegame(savegame);
document.getElementById("mapSelector").disabled = !isEmpty;
document.getElementById("difficultySelector").disabled = !isEmpty;
}
}
function isEmptySavegame(value)
{
var ret = value.match(/SAVEGAME \d\d* - Empty/g) || value.match(/SPIELSTAND \d\d* - Leer/g) || value.match(/SAUVEGARDE \d\d* - Vide/g);
return ret != null;
}
window.onload = function()
{
checkSavegame();
}
</script>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/monitor.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="js/all.js"></script>
</head>
<body>
<div class="white-bg clearfix">
<header class="main-header" role="banner" data-module="sticky">
<div class="header-bar clearfix"> <div class = "row column"> <div class = "top-bar-right"> <ul class = "menu float-left"><li><a target="_newTwitter" href="https://twitter.com/url"><span class="icon icon-twitter"></span></a></li><li><a target="_newFacebook" href="https://www.facebook.com/giants.farming.simulator"><span class="icon icon-facebook"></span></a></li><li><a target="_newYoutube" href="http://www.youtube.com/user/giantssoftware"><span class="icon icon-youtube"></span></a></li><li><a target="_newGoogleolus" href="https://plus.google.com/109211762279175256996"><span class="icon icon-google"></span></a></li> </ul>
<ul class="dropdown menu float-right"><li class="is-dropdown-submenu-parent is-down-arrow menu-flags"><img src="img/icons/flag-en.png" alt="lang"><ul class="menu submenu is-dropdown-submenu first-sub vertical"><li><img style="border:1px solid #000;" src="img/icons/flag-en.png" alt="English"><span class="country">English</span> <span>(en)</span></li><li><img style="border:1px solid #000;" src="img/icons/flag-de.png" alt="Deutsch"><span class="country">Deutsch</span> <span>(de)</span></li><li><img style="border:1px solid #000;" src="img/icons/flag-fr.png" alt="Francais"><span class="country">Francais</span> <span>(fr)</span></li></ul></li></ul> </div>
</div>
</div>
<div class="top-bar"> <div class="row column"> <div class="top-bar-left"> <img src="img/logo.png"> </div> <div class="top-bar-right"> <ul class="menu float-left"> <li><span>HOME</span></li>
<li><span>SAVEGAMES</span></li>
<li><span>MODS</span></li>
<li><span>JOURNAL</span></li>
<li><div class="status-indicator online"><span>ONLINE</span></div></li></ul></div></div></div></header><section class="content-wrap"><div class="row"> <div class="medium-8 columns">
<img src="template/gsfs.png"><br/><br/><h2>Login to server</h2>
<p>Please enter your login credentials</p>
<div class="row column">
<form name="input" action="index.html?lang=en" method="POST"><div class="table2"><div class="row column table-even"><div class="medium-3 columns column-label">Username</div><div class="medium-9 columns"><input type="text" name="username" value=""></div></div><div class="row column table-odd"><div class="medium-3 columns column-label">Password</div><div class="medium-9 columns"><input type="password" name="password" value=""></div></div><div class="row column table-even text-right">
<input class="button button-form-submit" name="login" type="submit" value="Login"></div></div></form><br />
<h2>Dedicated Server Mobile App (Free)</h2><div><a class="itunesbadge" href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1135922781&mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/images/badges/en-us/badge_appstore-lrg.svg) no-repeat;width:135px;height:40px;background-position: center;"></a><a class="googleplaybadge" href="https://play.google.com/store/apps/details?id=com.giantssoftware.fs17_dedi_app" style="margin-left: 5px; display:inline-block;overflow:hidden;background:url(https://play.google.com/intl/en_us/badges/images/apps/en-play-badge-border.png) no-repeat;width:141px;height:40px;background-size: cover;background-position-x: -4px;background-position-y: -3px;"></a></div></div>
</div>
<div class="medium-4 columns">
<div class="social-wrapper">
<div class="social-header clearfix">
<div class="title-wrap clearfix" style="line-height: 62px;">
<i class="icon icon-twitter"></i><span>Twitter</span>
</div>
Follow
</div>
<!-- Load from cache: ../cached/fs17_dedi_twitter_cache_farmingsim_4.json-->
<div class="social-news-block">
<p>RT hi: Come and meet us at E3 at booth West Hall #4512 to learn more about Farming Simulator 19, the next game in the successf…</p>
<span class="post-date">about 1 hour ago</span>
</div>
<div class="social-news-block">
<p>Are you are bale stacking champion? Are you at #blank ? Then show us your skills. The… <a target="_blank" href="blank">nothing</a></p>
<span class="post-date">4 days ago</span>
</div>
<div class="social-news-block">
<span class="post-date">11 days ago</span>
</div>
<div class="social-news-block">
<p>RT #url: We are glad to announce our plans for further expansion by moving to bigger office spaces for our two existing studios…</p>
<span class="post-date">12 days ago</span>
</div>
</div>
</div>
</div>
</section>
<div class="partners clearfix text-center"> <div class="row"> <div class="columns">
<img style="vertical-align:text-top;" src="template/image_11.gif" /> </div> </div> </div> <footer class="main-footer clearfix">
<div class="row">
<div class="medium-8 columns">
<div class="copyright"><img class="copyright__logo" src="img/logos/footer-logo.png"><div>© 2016 GIANTS Software GmbH Alle Rechte vorbehalten.<br>Alle anderen Warenzeichen sind das Eigentum ihrer jeweiligen Besitzer.</div></div> </div>
<div class="medium-4 small-12 columns">
<ul class="menu menu-footer float-right">
<li>7.0.5.0</li>
</ul>
</div>
</div>
</footer>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/frontend.js"></script>
<script>$(document).foundation();</script>
</div>
</body>
</html>
I tried this, but it simply redirects to the page without filling any of the fields.
<DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script>
window.onload = function() {
document.getElementById('loginForm').submit();
};
</script>
</head>
<body>
<form id="loginForm" action="URL of site" method="POST">
<input type=hidden name="username" value="moo"/>
<input type=hidden name="password" value="boo"/>
</form>
</body>
</html>
What is wrong with my code, and how can I achieve my goal?
Thank you.
So i've created a form that sends an email to me when you click the "skicka"(send on swedish) button. It works 100% and ive tested it, or rather it worked. Since i have a dropdown menu to change email address/form action it dosent work. I tried using javascript chgAction(), I've also tried different methods but this looked easiest. Somethings wrong but i dont know what since i dont receive any emails anymore. Is this a legitimate way of doing this?
Heres my index.php
NOTE: both kontakt.php and kontakt2.php works since i tried both without beforehand at the form action="".
<?php session_start() ?>
<!DOCTYPE HTML>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HS Konsult</title>
<meta name="description" content="" /><meta name="keywords" content="" /><!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]--><script src="js/jquery.min.js"></script><script src="js/jquery.scrollex.min.js"></script><script src="js/jquery.scrolly.min.js"></script><script src="js/skel.min.js"></script><script src="js/init.js"></script><noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-xlarge.css" />
</noscript><!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]--><!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
</head>
<body><!-- Header -->
<section id="header">
<header class="major">
<h1>HS Konsult</h1>
<p>En Hemsida om oss och vilka tjänster vi erbjuder.</p>
</header>
<div class="container">
<ul class="actions">
<li><a class="button special scrolly" href="#one">Gå Vidare</a></li>
</ul>
</div>
</section>
<!-- Two -->
<section class="main special" id="two">
<div class="container"><span class="image fit primary"><img alt="" src="" /></span>
<div class="content">
<header class="major">
<h2>Vad Gör Vi?</h2>
</header>
<p>Consequat sed ultricies rutrum. Sed adipiscing eu amet interdum lorem blandit vis ac commodo aliquet vulputate.</p>
<ul class="icons-grid">
<li><!--<span class="icon major fa-camera-retro"></span> -->
<h3><img alt="Peo" src="/img.jpg" style="width: 150px; height: 150px;" /></h3>
</li>
<li><!--<span class="icon major fa-pencil"></span> -->
<h3><img alt="Camilla" src="/2.jpg" style="width: 150px; height: 150px;" /></h3>
</li>
<li>
<h3>Camilla</h3>
</li>
<li>
<h3>Peo</h3>
</li>
</ul>
</div>
<a class="goto-next scrolly" href="#three">Next</a></div>
</section>
<!-- Footer -->
<section id="footer">
<div class="container">
<header class="major">
<h2>Kontakta Oss</h2>
</header>
<?php
//tillagd1
//init variables
$cf = array();
$sr = false;
if(isset($_SESSION['cf_returndata'])){
$cf = $_SESSION['cf_returndata'];
$sr = true;
}
?>
<ul id="errors" class="<?php echo ($sr && !$cf['form_ok']) ? 'visible' : ''; ?>">
<?php
if(isset($cf['errors']) && count($cf['errors']) > 0) :
foreach($cf['errors'] as $error) :
?>
<li><?php echo $error ?></li>
<?php
endforeach;
endif;
?>
</ul>
<!--function to run phpfile depending on person selected-->
<script type="application/javascript">
function chgAction() {
console.log('chgAction()');
console.log(form.selectperson.selectedIndex);
if(form.selectperson.selectedIndex=="option1" )
{document.maillista.action = "/kontakt.php";}
else if(form.selectperson.selectedIndex=="option2")
{document.maillista.action = "/kontakt2.php";}
}
</script>
<form id="maillista" name="maillista" action="/" method="post">
<fieldset>
<p>
<label>Välj Person Att Kontakta</label>
<Select class="target"id=selectperson name="selectperson" onChange="javascript:chgAction()">
<option value ="option1">Peo</option>
<option value ="option2">Camilla</option>
</Select>
</p>
<div class="row uniform">
<div class="6u 12u$(xsmall)"><input id="name" name="name" placeholder="Namn" type="text" /></div>
<div class="6u$ 12u$(xsmall)"><input id="email" name="email" placeholder="john.doe#email.com" type="email" /></div>
<div class="12u$"><textarea id="message" name="message" placeholder="Meddelandet måste vara längre än 20 karaktärer." data-minlength="20" rows="4"></textarea></div>
<div class="12u$">
<ul class="actions">
<li><input class="special" type="submit" name="submit" value="Skicka" id="button1"/></li>
</ul>
</div>
</div>
</fieldset>
</form>
<?php unset($_SESSION['cf_returndata']); ?>
</div>
<
<footer>
<ul class="icons"><!-- <li><span class="label">Twitter</span></li>
<li><span class="label">Facebook</span></li>
<li><span class="label">Instagram</span></li>
<li><span class="label">Dribbble</span></li>
<li><span class="label">Email</span></li> -->
</ul>
<ul class="copyright">
<li>© HS</li>
<li>Design:</li>
</ul>
</footer>
</section>
</body>
</html>
I have a form that after submission it displays the result in a box, but when I enter too much information (text) in the text box (textarea) it runs out of the box in the output. The solution that I thought it would work, would be to modify the style of the id="output" at the bottom of page to width:450px, but that didn't work.... are there any other suggestions? Here's the link to the form
here's the code
<!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">
<meta content="computer repair, laptop repair, wireless installation, printer installation, printer repair, system administration, website design, web administration, logo design, web application development, computer repair miami fl, web design miami fl, system administration miami fl" name="keywords">
<meta name="Computer Soloution for Small Business and Home Users, Miami, Florida" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Contact Us</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- font awesome -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<!-- font mfizz -->
<link rel="stylesheet" href="path/to/font-mfizz/font-mfizz.css">
<link rel="stylesheet" href="icons/flaticon.css">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- custome css style sheet -->
<link href="carosel_style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Custom styles for this template -->
<link href="carousel.css" rel="stylesheet">
<!-- google analytics code -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-61593038-1', 'auto');
ga('send', 'pageview');
//form validation and submition
function validateForm()
{
var fullName = document.forms['myForm']['name'].value;
var emailAdd = document.forms['myForm']['email'].value;
var subject = document.forms['myForm']['subject'].value;
var message = document.forms['myForm']['message'].value;
var outputMsg = "";
var emailReg = /^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
//validating form fields
if(fullName == null || fullName == "") {
outputMsg += "Name field can not be empty!\n";
}
if(emailAdd == null || emailAdd == "") {
outputMsg += "Email field can not be empty!\n";
}
//if email field not empty check for valid email add
if(emailAdd != "" && !emailReg.test(emailAdd)) {
outputMsg += "Enter a valid email address!\n";
}
if(message == null || message == "") {
outputMsg += "Text field can not be empty!\n";
}
if(outputMsg != "") {
alert(outputMsg);
return false;
}
//sending data fields to php form
var params = "name="+fullName+"&email="+emailAdd+"&subject="+subject+"&message="+message;
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST", "contact.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("output").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.send(params);
//change the style of "ouput" id
document.getElementById("output").style.border = "solid 1px #5A5A5A";
document.getElementById("output").style.padding = "10px";
document.getElementById("output").style.width = "450px";
}
</script>
</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img id="main-logo" src="img/title_logo1.png">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="#">Home</li>
<li>About</li>
<li>Contact</li>
<li><a target="_blank" href="http://pctechtips.org">Blog</a></li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Comuter Repair</li>
<li>System Administration</li>
<li>Website Design</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/computer-keyboard-closeup-header.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>COMPUTER SOLUTIONS FOR HOME AND SMALL BUSINESS.</h1>
<p>Professional IT Support for Home Office, and Small Bussiness. Computer Repair, Printer Repair, Network Suport, System Administration, and Web Design</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Get a Quote</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- /.carousel -->
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<div class="hero-unit" style="padding:20px 100px">
<h1>Contact Us</h1>
<p>Please send us a description of your computer problems and a we will be in touch as soon as possible with a quote:</p>
</div>
<div class="row">
<div class="col-sm-6">
<div class="my-form">
<form class="form-horizontal" name="myForm" >
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-8">
<input type="name" name="name" class="form-control" id="inputEmail3" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Email:</label>
<div class="col-sm-8">
<input type="email" name="email" class="form-control" id="inputPassword3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Subject:</label>
<div class="col-sm-8">
<input type="text" name="subject" class="form-control" placeholder="Subject">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Text:</label>
<div class="col-sm-8">
<textarea name="message" class="form-control" rows="7" placeholder="Text"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" onclick="validateForm()">Send</button>
</div>
</div>
</div>
</form>
</div>
<div class="col-sm-6">
<img id="google-img" src="https://maps.googleapis.com/maps/api/staticmap?center=Miami+Downtown,Miami,FL&zoom=13&size=500x350&maptype=roadmap&markers=color:red%7CMiami+Downtown,Miami,FL">
</div>
</div><!-- /.row -->
<div class="row"> <!-- output message rown -->
<div class="col-sm-6" >
<!-- display form result message here! -->
<p id="output" >
</p>
</div>
<div class="col-sm-6">
<!--nothing goes here!-->
</div>
</div>
<!-- FOOTER -->
<footer>
<p class="pull-right">Back to top</p>
<p>© 2015 Jorge L. Vazquez ·Privacy · Terms</p>
</footer>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
The p element 'output' that has the content needs
#output{
word-wrap:break-word;
}
break-word allows words to break and wrap to the next line
https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap
You have a few options here. On the box, you can try this for CSS:
overflow-x: scroll;
This will allow you to scroll right/left in the box rather than have it bleed out.
If you want to force it to wrap without scroll:
word-wrap: break-word;
try;
<p id="output" style="overflow: scroll; word-wrap:break-word;"></p>
Dears I've got a very strange problem with jQuery Mobile and PHP, I need do something very simple, I've a form with two inputs values (name and pass), and the form is submitted to "questions.php" but when I print the post (print_r($_POST)) this is empty, but if I erase some script of jQuery mobile, the post come with the information that I need and I don't know why it Doesn't work with the 3 scripts.
inicio.php
<?php include("header.php");?>
<?php include("conexion.php");?>
<?php
$query = "select * from usuario, categoria where usuario.id_categoria = categoria.categoria_id";
$result = $conn->query($query);
?>
<body>
<!-- Pagina Inicio (login) -->
<div data-role="page" id="home">
<div data-role="main" class="ui-content">
<div id="inicio">
<div id="logo"><img src="images/logo.png" alt="logo" width="100%" height="" /></div>
<form method="post" action="preguntas.php" data-ajax="false">
<label for="user">Selecciona tu usuario Pop Up Info</label>
<!-- Pop Up Usuario-->
<div data-role="popup" id="usuario">
Close
<p>Seleciona tu nombre e ingresa tu </p>
<p>contraseña para registrar tu puntaje</p>
</div>
<!-- FIN Pop Up Usuario-->
<select name="user" id="user">
<?php while($row = $result->fetch_assoc()){ ?>
<optgroup label="<?=$row['categoria']?>">
<option value="<?=$row['id']?>"><?=$row['nombre']?> <?=$row['apellido']?></option>
</optgroup>
<?php }?>
</select>
<br><br>
<label for="pswd">Ingresa tu contraseña</label>
<input type="password" name="passw" id="pswd" data-clear-btn="true">
<button type="submit" class="ui-btn ui-icon-home ui-btn-icon-left" id="home" data-transition="slide" value="Ingresar">Ingresar</button>
</form>
</div>
</div>
<div data-role="footer" style="text-align:center; background: transparent; border: 0;" data-position="fixed">
<div data-role="controlgroup" data-type="horizontal" style="margin:0">
Juego
Ranking
Videos
</div>
</div>
</div>
questions.php
<?php
include "conexion.php";
$id = $_POST['user'];
$query = "SELECT * FROM categoria, preguntas,usuario where usuario.id_categoria = categoria.categoria_id and categoria.categoria_id = preguntas.id_categoria and usuario.id = '$id' order by rand()";
$result = $conn->query($query);
?>
<!DOCTYPE html>
<html lang="es">
<head>
<title>Sky Icargo - El Juego</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="mobile/addtohomescreen.css">
<script src="//use.typekit.net/eev7vgf.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<script src="mobile/addtohomescreen.js"></script>
<script>
addToHomescreen();
</script>
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href="images/custom_icon.png">
<meta name="apple-mobile-web-app-title" content="Sky iCargo">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body>
<div data-role="page" id="pagetwo">
<div data-role="header">
<div data-role="header">
Home
<h1 id="loguito"><img src="images/loguito.png" alt="logo" width="100%" height="" /></h1>
</div>
</div>
<div data-role="main" class="ui-content">
<?php while($row = $result->fetch_assoc()){ ?>
<form method="post" action="puntaje">
<div>
<?php echo $row['pregunta'];?>
<?php }?>
</div>
</form>
</div>
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup" data-type="horizontal">
Juego
Ranking
Videos
</div>
</div>
</div>
if I erase <script src="mobile/jquery.mobile-1.4.5.min.js"></script> in questions.php or another of the three works, but if I leave the three doesn't work, If someone can help me please.
Given:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone-no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
<title>Our Application</title>
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.2.css">
<link rel="stylesheet" href="css/main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/jquery.js"></script> <!-- added -->
<script src="js/jquery.mobile-1.3.2.js"></script> <!-- added -->
<script>
function getSearchVars() {
var src_priceMin = 500;
$('#form1').submit(function () {
src_priceMin = $("#form_priceMin").val();
});
var searchQuery =
'{' +
',"priceMin":' + src_priceMin +
'}';
// encode variable
var encVar = encodeURIComponent(searchQuery);
return encVar;
}
var goUrl = encodeURIComponent("http://mysite.net/api/properties?json=" + getSearchVars()) + "&callback=?";
var searchUrl = 'http://anotherSite.com/get/?url=' + goUrl;
$(document).on("pageinit", function(){
$("#search").live("pageshow", function(){
$('#form1').submit(function() {
searching = true;
var prcMin = $("#form_priceMin").val();
getResults();
$.mobile.changePage( "#src_page", { transition: "slide", changeHash: false });
return false;
});
return false;
});
});
function init() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
// move navigator.geolocation to here later for device test
}
function getResults() {
$.getJSON(searchUrl, function (data) {
console.log("Starting Results Fetch");
console.log(searchUrl);
});
return false;
}
</script>
</head>
<body onload="init()">
<div id="home" data-role="page" data-theme="c" data-title="Go: Home">
<div class="myLogo"><img src="img/go_my_logo.jpg" alt="Go my" /></div>
<div data-role="controlgroup" id="searchField" >
<label for="searchTitle">Find Prices:</label>
<input type="text" name="name" id="searchPrc" value="" placeholder="enter price" data-mini="true" />
<img src="img/srch_btn.png" alt="search button" />
</div> <!-- search -->
<div data-role="footer" data-position="fixed" data-id="vs_footer" data-theme="c">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Search</li>
</ul>
</div> <!-- navbar -->
</div> <!-- footer nav-->
</div> <!-- home page -->
<!-- search page -->
<div data-role="page" id="search" data-theme="c">
<div data-role="header" class="logo">
<h1>Search</h1>
Home
</div>
<div data-role="content" >
<form id="form1">
<div id="fnameDiv" data-role="fieldcontain">
<label for="form_priceMin">Min. Price:</label>
<input type="text" name="form_priceMin" id="form_priceMin" placeholder="Enter min price" />
</div>
<div id="submitDiv" data-role="fieldcontain">
<input type="submit" value="Submit" data-inline="true"/>
</div>
</form>
</div>
<div class="modal"></div>
<div data-role="footer" data-position="fixed" data-id="vs_footer">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Search</li>
</ul>
</div> <!-- navbar -->
</div> <!-- footer nav-->
</div> <!-- search page -->
<!-- Search Results--->
<div data-role="page" id="src_page">
<div data-role="header">
<h3>Search Results</h3>
</div>
<div data-role="content" id="src_content">
</div>
<div data-role="footer" data-position="fixed" data-id="vs_footer">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Search</li>
</ul>
</div> <!-- navbar -->
</div> <!-- footer nav-->
</div> <!-- Search Results -->
</body>
</html>
The issue I'm running into is that when I submit, the value of "priceMin" in my search URL is "undefined".
Is this a scoping issue? Am I referencing the variable/form field incorrectly? The basic idea is that one would type in the Price in the Search page, click Submit, be taken to a results page displaying all things of at least that price. The purpose in the use of the URL is that I'm using an api to display "things" of a certain price. I can do it with the static value, but my call to get the value from the form field yields no data.