Phonegap app with jquery mobile contact form not working - javascript

I was building hybrid app using jQuery mobile and Phonegap, but I am stuck with the contact form here. The code is located here:
http://jsfiddle.net/8cpdcfow/
At the jsfiddle the only difference is that send.php is given as send.php without url because it is located in the root folder. I was using code earlier like a webapp and it worked very well but I don't know why now it displays Message sent message but the message is not sent.
Here is the code hosted: http://radio-pendimi.com/mobile/v2/#dergomesazh
UPDATE 2:
Now online on the web the contact form works very well,but after I builded webapp for android using phonegap and installed on android device when I press the submit button to send the message it returns me the whole php code of the form instead of Message sent or Message failed message.
Below is screenshot:
http://i60.tinypic.com/abqya0.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width,
height=device-height, target-densitydpi=device-dpi" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<title>Radio Pendimi - online streaming</title>
<link rel="apple-touch-icon" href="images/AppIcon.png" />
<!-- CSS LIDHJET -->
<link rel="stylesheet" href="css/new_template.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.0-rc.1.min.css" />
<link rel="stylesheet" href="css/stili.css"/>
<!-- JS LIDHJET -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.4.0-rc.1.min.js"></script>
<script src="js/myscript.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
</head>
<body>
<!-- Kanali 1 - homepage -->
<div data-role="page" id="home" data-theme="b" style="background:#242426" >
<!-- Header -->
<div data-role="header" data-id="ap_header" style="background-color:#fafafc;border-top:6px solid #2f4c73">
<h1 style="color:#444;text-shadow: none;font-family: Dosis;"> Radio Pendimi 24h Live </h1>
</div>
<!-- content -->
<div data-role="none">
<img src="images/pendimi-logo-white.png" style="width: 210px; margin-right:auto; margin-left:auto;display: block;padding-top: 30px;"/>
<p style="text-align:center;text-shadow:none; color:#fff; margin:0px; padding-top:16px; padding-left: 5px; padding-right: 5px;">Jeni duke ndëgjuar: <script type="text/javascript" src="http://www.digital-webstream.de/status.php?mode=title&id=3204"></script> <br><br>
<audio src="http://server2.digital-webstream.de:35505/;$type=mp3" id="player" autoplay></audio>
<div style="text-align:center">
<span onclick="document.getElementById('player').play()" class="btn_control"> PLAY</span>
<span onclick="document.getElementById('player').pause()" class="btn_control"> STOP</span>
<span onclick="document.getElementById('player').muted=!document.getElementById('player').muted" class="btn_control"> MUTE/UNMUTE</span>
</div>
</div>
<!-- footer -->
<div data-role="footer" data-position="fixed" data-id="ap_footer">
<!-- footer navbar -->
<div data-role="navbar" style="border-bottom:6px solid #2f4c73">
<ul>
<li>Kanali 1</li>
<li>Kanali 2</li>
<li>Donacion</li>
<li>Info</li>
</ul>
</div>
</div>
</div>
<!-- End Page -->
<!-- Informacione -->
<div data-role="page" id="info" data-theme="b" style="background:#242426" >
<!-- Header -->
<div data-role="header" data-id="ap_header" style="background-color:#fafafc;border-top:6px solid #2f4c73">
<h1 style="color:#444;text-shadow: none;font-family: Dosis;"> Info </h1>
</div>
<!-- content -->
<div data-role="none">
<img src="images/pendimi-logo-white.png" style="width: 210px; margin-right:auto; margin-left:auto;display: block;padding-top: 30px;">
<p align="center">
info#radio-pendimi.com <br>
http://radio-pendimi.com <br>
<span style="text-decoration: none; text-shadow:none; color: #fff; font-weight: 500; font-size: 15px; font-family: Dosis;">Programuar & Dizajnuar nga Afrim Azizi</span> <br>
<img src="images/find-us-on-facebook.png" style="width: 170px; padding: 5px;"/>
</p>
</div>
<!-- footer -->
<div data-role="footer" data-position="fixed" data-id="ap_footer">
<!-- footer navbar -->
<div data-role="navbar" style="border-bottom:6px solid #2f4c73">
<ul>
<li>Kanali 1</li>
<li>Kanali 2</li>
<li>Donacion</li>
<li>Info</li>
</ul>
</div>
</div>
</div>
<!-- End Page -->
<!-- Kanali 2 -->
<div data-role="page" id="kanali-2" data-theme="b" style="background:#242426" >
<!-- Header -->
<div data-role="header" data-id="ap_header" style="background-color:#fafafc;border-top:6px solid #2f4c73">
<h1 style="color:#444;text-shadow: none;font-family: Dosis;"> Kanali - 2 </h1>
</div>
<!-- content -->
<div data-role="none">
<img src="images/pendimi-logo-white.png" style="width: 210px; margin-right:auto; margin-left:auto;display: block;padding-top: 30px;"/>
<p style="text-align:center;text-shadow:none; color:#fff; margin:0px; padding-top:16px; padding-left: 5px;padding-right: 5px;">Jeni duke ndëgjuar: <script type="text/javascript" src="http://www.digital-webstream.de/status.php?mode=title&id=7399"></script> <br><br>
<audio src="http://server6.digital-webstream.de:8400/;$type=mp3" id="player-2"></audio>
<div style="text-align:center">
<span onclick="document.getElementById('player-2').play()" class="btn_control"> PLAY</span>
<span onclick="document.getElementById('player-2').pause()" class="btn_control"> STOP</span>
<span onclick="document.getElementById('player-2').muted=!document.getElementById('player-2').muted" class="btn_control"> MUTE/UNMUTE</span>
</div>
</div>
<!-- footer -->
<div data-role="footer" data-position="fixed" data-id="ap_footer">
<!-- footer navbar -->
<div data-role="navbar" style="border-bottom:6px solid #2f4c73">
<ul>
<li>Kanali 1</li>
<li>Kanali 2</li>
<li>Donacion</li>
<li>Info</li>
</ul>
</div>
</div>
</div>
<!-- End Page -->
<!-- Donacione - Kontribo edhe ti -->
<div data-role="page" id="donacion" data-theme="b" style="background:#242426" >
<!-- Header -->
<div data-role="header" data-id="ap_header" style="background-color:#fafafc;border-top:6px solid #2f4c73">
<h1 style="color:#444;text-shadow: none;font-family: Dosis;"> Info </h1>
</div>
<!-- content -->
<div data-role="none">
<p style="text-align:center; text-shadow:none; color:#fff;">
Vëllezër dhe motra,
Kjo Radio çdo ditë bëhet shkak për udhëzimin e dikujt dhe kthimin e tij në rrugën e xhenetit, mirëpo ajo nuk mund ta çojë mesazhin e saj në vend pa përkrahje financiare. Nëse ju jepni kontributin tuaj do të keni hise në sevapet që fitohen nga kjo punë. Pejgamberi, alejhi salatu ue selam, ka thënë: “Sadakaja e shuan zemërimin e Allahut ashtu sikur uji e shuan zjarrin” (Sahihu Tergib nr. 983).
Ju bëjmë thirrje që ta përkrahni këtë projekt madhështor, për mirësinë e të cilit jemi dëshmitarë të gjithë ne.
Keto jan pikat kryesore :<br>
– Mirëmbajtjen dhe rritjen e kapacitetit të serverëve.<br>
– Mirëmbajtjen materiale të studiove që kemi në disa vende, sidomos studion numër 2 – Prizren, e cila ka një orar më të zgjeruar dhe më të pasur,<br>
– Mirëmbajtjen e ueb-faqes dhe serverit të veçantë që ka ajo,<br>
– Marketingun e Radio Pendimit në përgjithësi (fllajera, pllakata, reklama nëpër medie, etj.).<br>
Allahu ju shpërbleftë!
<p style="text-align:center; text-shadow:none; color:#fff;">Mund të kontribuoni nëpërmjet llogarisë bankare:<br>
Emri: Radio Pendimi<br>
Emri i bankës: Volksbank Linz <br>
IBAN: AT744480042614830000<br>
Bic Swift Code: VBWEAT2WXXX
</p>
<br>
<!-- PayPal Form start -->
<div style="text-align:center">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input name="cmd" type="hidden" value="_s-xclick"> <input name="hosted_button_id" type="hidden" value="GRGWN8J9JDM6U"> <input alt="Jetzt einfach, schnell und sicher online bezahlen – mit PayPal." name="submit" src="https://www.paypalobjects.com/de_DE/AT/i/btn/btn_donateCC_LG.gif" type="image"> <img src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" alt="" width="1" height="1" border="0"></form>
</div> <!-- PayPal form end -->
</p>
</div>
<!-- footer -->
<div data-role="footer" data-position="fixed" data-id="ap_footer">
<!-- footer navbar -->
<div data-role="navbar" style="border-bottom:6px solid #2f4c73">
<ul>
<li>Kanali 1</li>
<li>Kanali 2</li>
<li>Donacion</li>
<li>Info</li>
</ul>
</div>
</div>
</div>
<!-- End Page -->
<!-- Dergo Mesazh -->
<div data-role="page" id="dergomesazh" data-theme="b">
<!-- Header -->
<div data-role="header" data-position="fixed" style="background-color:#fafafc;border-top:6px solid #2f4c73">
<h1 style="color:#444;text-shadow:none">Dërgo Mesazh</h1>
</div>
<!-- content -->
<div data-role="content">
<form class="form" id="callAjaxForm">
<p class="name">
<input name="emri" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Emri" id="name" data-role="none" />
</p>
<p class="text">
<textarea name="comment" class="validate[required,length[6,30]] feedback-input" id="comment" placeholder="Mesazhi" data-role="none" ></textarea>
</p>
<div class="submit">
<button id="submit" type="submit" >DËRGO</button>
<button id="reset" type="reset" >PASTRO FUSHAT</button>
</div>
<h3 id="notification" align="center" style="font-color:green;"></h3>
</form>
</div>
<!-- footer -->
</div>
<!-- End Page -->
</body>
</html>
myscript.js
//DergoMesazh
function onSuccess(data, status)
{
data = $.trim(data);
$("#notification").text(data);
}
function onError(data, status)
{
// handle an error
}
$(document).ready(function() {
$("#submit").click(function(){
var formData = $("#callAjaxForm").serialize();
$.ajax({
type: "POST",
url: "send.php",
cache: false,
data: formData,
success: onSuccess,
error: onError
});
return false;
});
$("#reset").click(function() {
$('#callAjaxForm').trigger("reset");
$('#notification').text("");
});
});
Send.php code:
<?php
header('Access-Control-Allow-Origin: *');
$emri=$_POST['emri'];
$mesazhi=$_POST['comment'];
$IPAdresa = $_SERVER["REMOTE_ADDR"];
$browser="";
if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("MSIE"))){$browser="ie";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("Presto"))){$browser="opera";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("CHROME"))){$browser="chrome";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("SAFARI"))){$browser="safari";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("FIREFOX"))){$browser="firefox";}
else {$browser="other";}
$to = "afrim.a#msn.com";
$subject = "Rubrika DergoMesazh (mobile app)";
$message = " Emri: " . $emri . "\r\n Mesazhi: " . $mesazhi. "\r\n IP Adresa: " . $IPAdresa. "\r\n Browser: " . $browser;
$from = "radio-v2#test.com";
$headers = "From:" . $from . "\r\n";
$headers .= "Content-type: text/plain; charset=UTF-8" . "\r\n";
if(#mail($to,$subject,$message,$headers))
{
echo "Mesazhi juaj u dërgua me sukses";
}else{
echo "Gabim! Ju lutemi provoni përsëri.";
}
?>

Try using the above code in Phonegap using input type=button instead of input type=submit.
Also, double check if the required assets for Phonegap [Cordova.js,jquery and other JS] are loaded properly.
Also it would help, if you can post the entire code as it is bundled in Phonegap

Ok now I fixed the problem and I wanted to share the solution for others who have this issue.
The myscript.js from where is made ajax call to the PHP file (send.php),instead of declaring local php file you need to declare the url of the php file because while building the app with phonegap/cordova it doesn't execute the php file. Also you need to enable crossDomain:true,
Below is the fully functional code in jsfiddle:
http://jsfiddle.net/8cpdcfow/1/
Here is the send.php code:
<?php
header('Access-Control-Allow-Origin: *');
$emri=$_POST['emri'];
$mesazhi=$_POST['comment'];
$IPAdresa = $_SERVER["REMOTE_ADDR"];
$browser="";
if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("MSIE"))){$browser="ie";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("Presto"))){$browser="opera";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("CHROME"))){$browser="chrome";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("SAFARI"))){$browser="safari";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("FIREFOX"))){$browser="firefox";}
else {$browser="other";}
$to = "your-email#hotmail.com";
$subject = "Rubrika DergoMesazh (mobile app)";
$message = " Name: " . $emri . "\r\n Message: " . $mesazhi. "\r\n IP Adresa: " . $IPAdresa. "\r\n Browser: " . $browser;
//Maybe you need to add $from email into whitelist at your inbox because the messages may be classified to the junk/spam folder
$from = "no-reply#domain.com";
$headers = "From:" . $from . "\r\n";
$headers .= "Content-type: text/plain; charset=UTF-8" . "\r\n";
if ($emri == "" || $mesazhi == ""){
echo "Empty strings,the form is not filled";
} else {
if(#mail($to,$subject,$message,$headers))
{
echo "Message Sent successfully";
}else{
echo "Message Failed to sent.Try again";
}
}
?>

Related

How do have my page fill the username and password on an external site?

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.

chgAction in dropdown menu dosent send email. Worked before

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>

text ouptut in form validation running out of the output message box

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>

jQuery mobile + php post problems

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.

mobile app jquery variable results in "undefined"

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.

Categories