Динамическая форма javascript/php с радиоприемниками, создающими второе поле
У меня небольшая проблема с прорезыванием зубов, вот мой код
<form name="job_app">
Source?<br/>
<input type="radio" name="source" value="GAZ" id="GAZ" /> Stonoway Gazette <br/>
<input type="radio" name="source" value="JCP" id="JCP" /> Job Center <br/>
<input type="radio" name="source" value="WOM" id="WOM" /> Word of Mouth <br/><br/>
<script language="text/JavaScript">
if (document.job_app.source.GAZ.checked){
document.write='Issue <br/><input type="text" name="issue" /><br/><br/>';
}
else if (document.job_app.source.JCP.checked){
document.write='Ref <br/><input type="text" name="ref" /><br/><br/>';
}
//word of mouth has no additional input so there is no if statement for it
</script>
</form>
то, что я хочу сделать, это создать (или показать) текстовое поле вопроса или ссылки в зависимости от того, какой переключатель выбран, без создания нескольких текстовых полей.
извините за неудобства, если это ошибка новичка, я никогда раньше не работал ни с Java, ни с подобным языком.
Это рабочий код по состоянию на 07:15 26/05/2012 благодаря Эми МакКроби. После версии Эми он претерпел некоторые изменения (см. Ниже). Я переместил все скрипты над формой, чтобы упростить добавление следующих нескольких полей, добавил оператор для слова из уст в уста, опущен <head>
так как это является частью index.php и meta.php, в то время как это для form.php, добавил пробел и сделал имя функции более конкретным.
index.php
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<?php
include './meta.php';
?>
</head>
<?php
/*if(isset($_POST['submit'])){
include './submit.php';
}
else{*/
include './form.php';
//}
?>
</html>
meta.php
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta http-Equiv="Cache-Control" Content="no-cache" />
<meta http-Equiv="Pragma" Content="no-cache" />
<meta http-Equiv="Expires" Content="0" />
<title>job_app</title>
<link rel="StyleSheet" type="text/css" href="./style.css"/>
form.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#issueEl").hide();
$("#refEl").hide();
});
function showHide_source(){
if (document.getElementById('GAZ').checked)
{
document.getElementById('issueEl').style.display = 'block';
document.getElementById('refEl').style.display = 'none';
document.getElementById('src_spEl').style.display = 'none';
}
if (document.getElementById('JCP').checked)
{
document.getElementById('issueEl').style.display = 'none';
document.getElementById('refEl').style.display = 'block';
document.getElementById('src_spEl').style.display = 'none';
}
if (document.getElementById('WOM').checked)
{
document.getElementById('issueEl').style.display = 'none';
document.getElementById('refEl').style.display = 'none';
document.getElementById('src_spEl').style.display = 'block';
}
}
</script>
<form name="job_app" action="" method="post">
Source?<br/>
<input type="radio" name="source" value="GAZ" id="GAZ" onChange="showHide_source()" /> Stonoway Gazette <br/>
<input type="radio" name="source" value="JCP" id="JCP" onChange="showHide_source()" /> Job Center <br/>
<input type="radio" name="source" value="WOM" id="WOM" onChange="showHide_source()" /> Word of Mouth <br/><br/>
<div class="hideable" id="issueEl">Issue <br/><input type="text" name="issue" /><br/><br/></div>
<div class="hideable" id="refEl">Ref <br/><input type="text" name="ref" /><br/><br/></div>
<div class="hideable" id="src_spEl"></div>
rest of form
<input...
.../>
</form>
style.css
div.hideable{
height: 62px;
}
2 ответа
Попробуй это:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-Equiv="Cache-Control" Content="no-cache">
<meta http-Equiv="Pragma" Content="no-cache">
<meta http-Equiv="Expires" Content="0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#issueEl").hide();
$("#refEl").hide();
});
</script>
<title>Test</title>
</head>
<body>
<form name="job_app" action="" method="post">
Source?<br/>
<input type="radio" name="source" value="GAZ" id="GAZ" onChange="showHide()" /> Stonoway Gazette <br/>
<input type="radio" name="source" value="JCP" id="JCP" onChange="showHide()" /> Job Center <br/>
<input type="radio" name="source" value="WOM" id="WOM" onChange="showHide()" /> Word of Mouth <br/><br/>
<div id="issueEl">Issue <br/><input type="text" name="issue" /><br/><br/></div>
<div id="refEl">Issue <br/><input type="text" name="ref" /><br/><br/></div>
</form>
<script type="text/javascript">
function showHide(){
if (document.getElementById('GAZ').checked)
{
document.getElementById('issueEl').style.display = 'block';
document.getElementById('refEl').style.display = 'none';
}
if (document.getElementById('JCP').checked)
{
document.getElementById('issueEl').style.display = 'none';
document.getElementById('refEl').style.display = 'block';
}
}
</script>
</body>
</html>
Я хотел бы предложить jQuery, это не трудно изучить, на самом деле я нахожу это намного проще, чем базовый javascript, а также я бы пошел по пути двух скрытых текстовых полей, а затем показал бы их через jQuery
в нынешнем виде я думаю, что если пользователь отметит один переключатель, а затем появятся два других текстовых поля
и с добавлением jQuery (что так же просто, как включение сценария в верхней части вашей страницы, ваш код будет выглядеть примерно так...
<form name="job_app">
Source?<br/>
<input id="GAZ" type="radio" name="source" value="GAZ" id="GAZ" /> Stonoway Gazette <br/>
<input id="JCP" type="radio" name="source" value="JCP" id="JCP" /> Job Center <br/>
<input id="WOM" type="radio" name="source" value="WOM" id="WOM" /> Word of Mouth <br/><br/>
Issue <br/><input id="issue" type="text" name="issue" /><br/><br/>
Issue <br/><input id="ref" type="text" name="ref" /><br/><br/>
<script language="text/JavaScript">
$("#issue").css("display","none");
$("#ref").css("display","none");
if ($("#GAZ").checked){
$("#issue").css("display","inline");
$("#ref").css("display","none");
}
if ($("#JCP").checked){
$("#issue").css("display","none");
$("#ref").css("display","inline");
}
//word of mouth has no additional input so there is no if statement for it
</script>
</form>