Я создаю страницу, которая выбирает другую форму для запуска разных функций, когда пользователь выбирает разные параметры выбора. У меня возникают проблемы с сохранением формы, отображаемой при отправке формы для моей второй функции, хотя форма для первой функции работает отлично. Так что это наводит меня на мысль, что проблема в моих условиях в моей функции document.ready.
$(document).ready(function() {
<?php
$function = $_POST['function'];
if($function === 'nameFunc'){
echo "$('.funcDisplay').show();";
echo "$('.output').html('$output');";
}
else if($function === 'hamFunc'){
echo "$('#hFunc').show();";
echo "$('.output').html('$output');";
}
?>
});
Вот в этом мне кажется проблема.
<!DOCTYPE html>
<?php
if(isset($_POST['submit']))
{
if($_POST['function']== 'nameFunc')
{
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$output = "Hi $fname $lname, welcome to my PHP challenge";
}
if($_POST['function']== 'hamFunc') {
$output = 3;
}
}
?>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="bebk9hPHP.css">
<script src="jquery-2.1.4.min.js"></script>
</head>
<body>
<div class="contentWrapper">
<h1 id="header">PHP Sample Project</h1>
<h3 id = "sText">Form Selection</h3>
<div class="custom-select">
<select id="dropdown">
<option selected disabled hidden>Select a function</option>
<option value="1">Function 1</option>
<option value="2">Function 2</option>
<option value="3">Function 3</option>
<option value="4">Function 4</option>
</select>
</div>
<div class="funcDisplay" id="funcDisp">
<h3>Name Function:</h3>
<form action="bebk9hPHP.php" method="post">
<input type="text" name="fname" class="name" id="fieldOne" placeholder="First name...">
<input type="text" name="lname" class="name" id="fieldTwo" placeholder="Last name...">
<input type="text" name="function" value="nameFunc" class="hidField">
<div class="submits">
<input type="submit" value="Submit" class="clear nsubmit" name="submit">
<input type="button" value="Clear" class="clear nclear">
</div>
</form>
<h2 class = "output"></h2>
</div>
<div class="hfuncDisplay" id="hFunc">
<h3>Hamming Number Function:</h3>
<form action="bebk9hPHP.php" method="get">
<input type="text" name="hnum" class="hnum" placeholder="Enter Possible Hamming Number">
<input type="text" name="function" value="hamFunc" class="hidField">
<div class="submits">
<input type="submit" value="Submit" class="clear nsubmit" name="submit">
<input type="button" value="Clear" class="clear nclear">
</div>
</form>
<h2 class="output"></h2>
</div>
</div>
<script>
$("#hidField").hide();
$(".funcDisplay").hide();
$(".hfuncDisplay").hide();
$("#dropdown").change(function(){
if($("#dropdown :selected").val() == 1) {
$(".funcDisplay").show();
$(".hfuncDisplay").hide();
$('.output').html("");
}
else if($("#dropdown :selected").val() == 2) {
$("#hFunc").show();
$(".funcDisplay").hide();
$('.output').html("");
}
})
$(document).ready(function() {
<?php
$function = $_POST['function'];
if($function === 'nameFunc'){
echo "$('.funcDisplay').show();";
echo "$('.output').html('$output');";
}
else if($function === 'hamFunc'){
echo "$('#hFunc').show();";
echo "$('.output').html('$output');";
}
?>
});
</script>
</body>
</html>
А вот и весь мой html. Спасибо за любую помощь!
1 ответ
Переместите все это в функцию готовности документа до того, как в ней запустится что-либо еще:
$("#hidField").hide();
$(".funcDisplay").hide();
$(".hfuncDisplay").hide();
$("#dropdown").change(function(){
if($("#dropdown :selected").val() == 1) {
$(".funcDisplay").show();
$(".hfuncDisplay").hide();
$('.output').html("");
}
else if($("#dropdown :selected").val() == 2) {
$("#hFunc").show();
$(".funcDisplay").hide();
$('.output').html("");
}
})
Вы объявляете hidField как класс CSS, но ссылаетесь в селекторе jQuery на идентификатор CSS. Исправьте это:
$("#hidField").hide();
К
$(".hidField").hide();
Внимательно просмотрите свой код, чтобы отсеять любые другие ошибки. Попробуйте переименовать свои идентификаторы во что-то, что более четко указывает на то, к какому типу элементов DOM они относятся. Это поможет вам лучше отлаживать.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Обратите внимание, что JavaScript — это НЕ Java. Включите все теги, относящиеся к вашему вопросу: например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [стройный] и т. д.
.ready(function(){ /* in here */). PHP выполняется на сервере перед отправкой веб-страницы в браузер. Он не выполняется внутри JavaScript динамически, если вы об этом думаете. Используйте АЯКС.