Есть страница index.php с создаваемой формой:
<?php
require_once("class.php");
echo "test";
echo "
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Test Alphabetics</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
<style>
body {
font-family: Arial, sans-serif;
}
.section {
margin: 20px;
}
button {
padding: 5px 16px;
border-radius: 4px;
}
button#changeQuota { background-color: yellow; }
button#transfer { }
button#buyTicket { background-color: #98fb98; }
button#refundTicket { background-color: pink; }
</style>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<link href='./app.css' rel='stylesheet' type='text/css'>
<script type='text/javascript' src='./app.js'></script>
</head>
<body>
";
$task = new Form("process.php", "Отправить данные");
$task->addFieldName("#f1");
$task->addFieldName("#opt");
$task->addFieldName("#f2");
$task->addFieldName("#exec");
$task->addFieldName("#res");
$task->displayForm();
echo "
</body>
</html>
";
?>
Форму создает нормально, все на месте, селекторы тоже на месте.
Результирующий html:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Test Alphabetics</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
<style>
body {
font-family: Arial, sans-serif;
}
.section {
margin: 20px;
}
button {
padding: 5px 16px;
border-radius: 4px;
}
button#changeQuota { background-color: yellow; }
button#transfer { }
button#buyTicket { background-color: #98fb98; }
button#refundTicket { background-color: pink; }
</style>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<link href='./app.css' rel='stylesheet' type='text/css'>
<script type='text/javascript' src='./app.js'></script>
</head>
<body>
<div class='section'><h2>Введите данные</h2></br>
<input type='text' id='#f1'/></br>
<select required id='#opt'><option value='1'>*</option>
<option value='2'>/</option>
<option value='3'>+</option>
<option value='4'>-</option></select></br>
<input type='text' id='#f2'></br>
<button id='#exec'>Отправить данные</button>
<span id='#res'></span></br>
</body>
</html>
К индексу подключается app.js с таким содержанием:
$(document).ready(function () {
console.log("test");
$("#f1").html("3");
$("#res").html("Whoa!");
//Warmig up UI
$("#exec").click(function() {
var f1 = $("#f1").val();
var f2 = $("#f2").val();
var opr = $("#opr");
Calc(f1,f2,opr);
console.log("test click");
});
function Calc()
{
console.log(f1);
console.log(f2);
console.log(opr);
$.post(
"/process.php",
{
f1 : f1,
f2 : f2,
opr : opr
},
onAjaxSuccess
);
function onAjaxSuccess (data) {
var r=data;
console.log(data);
result=r.result;
console.log(result);
}
}
});
И при этом не работает ни один селектор. Не задаются значения, не срабатывает функция и т.д. Вообще.
Буду очень благодарен, если кто-нибудь подскажет как можно решить возникшую проблему.
UPD - поменял, теперь .val() выводит код элемента, например А должен выводить значение..