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

检查代码段，$（下拉列表）.append（），这是一个错误的举动，检查代码，我希望它符合你的意思。：d

＆＃13;

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>')
   }
});

＆＃13;

<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>

＆＃13;

Answer 2

试试这个

.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>

export default class CheckIfHasCurrentTasksComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            questionId: this.props.match.params.id
        };
    }

    async componentDidMount() {
        var uid = firebase.auth().currentUser.uid;
        var AssignedWordRef = await firebase.database().ref('Users').child(uid).child('assignedWork');
        await AssignedWordRef.on('value', snapshot => {
            var question = snapshot.val();
            console.log('question', question);
            if (question.length > 0) {
                this.setState({
                    questionId: question,
                });
                console.log('redirect', this.state.questionId);
            }
            else {
                this.setState({
                    questionId: this.props.match.params.id,
                });
                console.log('No redirect', this.state.questionId);
            }
        })
    }

    render() {
        console.log('questionId', this.state.questionId);
        return <QuestionComponent questionId={this.state.questionId}/>
    }
}

通过按钮调用的脚本调用表单

2 个答案: