通过按钮调用的脚本调用窗体

Question

>我有一个按钮，可以调用带有一些选项的下拉列表，如果选择一个选项，我正在尝试调用表单。我已经这样做了，但该选项不在脚本中。然后我做了这段代码，但不起作用。

这是我的 html 代码：

<form class="formcriacao" action="inqueritos.php" method="post">
<input autocomplete="off" type="submit" class="btn" id="btvoltar" value="Voltar"><br><br>
<p class="txt1">Clique no botão a baixo para adicionar as perguntas pretendidas para o novo inquerito.</p>
<input type="button" method="post"class="btnadd" id="addperguntas"value="Adicionar Perguntas">
</form>    

我的JavaScript代码：

<script>
$(document).ready(function() {
var max_fields      = 30;
var wrapper         = $(".formcriacao");
var add_button      = $(".btnadd");
var x = 0;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
$(wrapper).append('<div>
<br><input class="txtpergunta" maxlength="100" type="text" name="mytext[]"/>&nbsp&nbsp<input type="submit" class="removepergunta" value="Remover"><br><br>
<div class="dropdown">
<p class="txttipopergunta">Tipo de Resposta: <select name="dropdown" size=1></p>
<option value="1">Resposta de Texto</option>
<option value="2">Resposta Multipla</option>
</select>
</div>');
}
});
$(wrapper).on("click",".removepergunta", function(e){
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
<script>
$('select[name="dropdown"]').change(function(){
if ($(this).val() == "2"){
$(dropdown).append('<div>
<form>
<input type="radio" name="gender" value="male"> <br>
<input type="radio" name="gender" value="female"> <br>
<input type="radio" name="gender" value="other"> 
</form>')
}
});​
</script>

请帮忙。

谢谢。

Answer 1

检查代码段，$(dropdown(.append((，这是一个错误的举动，检查代码，我希望它能做到你的意思。 :D

jQuery(document).ready(function() {
var max_fields      = 30;
var wrapper         = jQuery(".formcriacao");
var add_button      = jQuery(".btnadd");
var x = 0;
jQuery(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
jQuery(wrapper).append('<div>
<br><input class="txtpergunta" maxlength="100" type="text" name="mytext[]"/>&nbsp&nbsp<input type="submit" class="removepergunta" value="Remover"><br><br>
<div class="dropdown">
<p class="txttipopergunta">Tipo de Resposta: <select name="dropdown" size=1></p>
<option value="1">Resposta de Texto</option>
<option value="2">Resposta Multipla</option>
</select>
</div>');
}
});
jQuery(wrapper).on("click",".removepergunta", function(e){
e.preventDefault(); jQuery(this).parent('div').remove(); x--;
})
});
jQuery('body').on('change', 'select[name=dropdown]',function(){
if (jQuery(this).val() == "2"){
jQuery(jQuery('.dropdown')).append('<div>
<form>
<input type="radio" name="gender" value="male"> Male <br>
<input type="radio" name="gender" value="female"> Female <br>
<input type="radio" name="gender" value="other"> Other 
</form>')
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<form class="formcriacao" action="inqueritos.php" method="post">
<input autocomplete="off" type="submit" class="btn" id="btvoltar" value="Voltar"><br><br>
<p class="txt1">Clique no botão a baixo para adicionar as perguntas pretendidas para o novo inquerito.</p>
<input type="button" method="post"class="btnadd" id="addperguntas"value="Adicionar Perguntas">
</form>

Answer 2

试试这个

$('#show').on('click', function () {
$('.center').show();
$(this).hide();
})
$('#close').on('click', function () {
$('.center').hide();
$('#show').show();
})

.center {
margin: auto;
width: 60%;
padding: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
}
.hideform {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center hideform">
<button id="close" style="float: right;">X</button>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="" placeholder="firstname">
<br>
Last name:<br>
<input type="text" name="lastname" value="" placeholder="lastname">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
<button id="show">Call the form</button>