Javascript 要在HTML中动态添加隐藏的输入字段吗

我有两个按钮，根据单击的按钮，我希望将数据传递到同一页面上的表单 因此，我试图添加一个具有该值的隐藏输入字段，但它似乎不起作用

我想用它在PHP中发布一个表单，所以也欢迎任何替代解决方案

我尝试过这个代码，但没有成功

(function () {

    $(".downloadBrochure").click(function () {
        if (this.id == "basicBrochure") {
            $("<input type='text' class='hidden' name='package' id='packagetype' value='Basic'>").appendTo("#brochure");
            // $('#packagetype').html("Basic");
        }
        else {

            // $('#packagetype').html("Plus");
        }
        $(".modal-content").show();
    });

})();

（函数（）{
$（“.download宣传册”）。单击（函数（）{
if（this.id==“basicBrochure”）{
$（“”）。附录（“#手册”）；
//$（'#packagetype'）.html（“基本”）；
}
否则{
//$（'#packagetype'）.html（“Plus”）；
}
$（“.modal content”）.show（）；
});
})();

我的HTML表单是

<div class="modal-content">
            <div class="modal-body">
                {!! Form::open(array('url' => '/saveRequestInfo', 'method' => 'POST', 'class' => 'form-horizontal', 'id' => 'brochure')) !!}
                {{ csrf_field() }}
                <div class="form-group">
                    <div class="col-xs-8 col-xs-offset-2">
                        <input type="text" placeholder="Name" name="txt_name" id="txt_name" class="form-control"
                               required>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-8 col-xs-offset-2">
                        <input type="text" placeholder="Phone" name="txt_phone" id="txt_phone" class="form-control"
                               required>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-8 col-xs-offset-2">
                        <input type="text" placeholder="Email" name="txt_email" id="txt_email" class="form-control"
                               required>
                    </div>
                </div>

                <input type="text" class="hidden" name="url" id="url"
                       value="<?= $_SERVER['QUERY_STRING'] ? $_SERVER['QUERY_STRING'] : ""; ?>">

                <div class="form-group">
                    <div class="col-xs-8 col-xs-offset-2 text-center">
                        <button class="btn btn-primary callback" name="btn_call">
                            Download Brochure
                        </button>
                    </div>
                </div>
                {!! Form::close() !!}
            </div>
        </div>

{！！Form:：open（数组（'url'=>'/saveRequestInfo'，'method'=>'POST'，'class'=>'Form horizontal'，'id'=>'宣传册'））
{{csrf_field（）}}
您不应使用IIFE（立即调用的函数表达式），因为它在DOM准备就绪之前运行，而应将其更改为
document.ready
block:

jQuery(function ($) { // <-----use the doc ready block this way

    $(".downloadBrochure").click(function () {
        if (this.id == "basicBrochure") {
            $("<input type='hidden' name='package' id='packagetype' value='Basic'>").appendTo("#brochure");
            // $('#packagetype').html("Basic");
        }
        else {

            // $('#packagetype').html("Plus");
        }
        $(".modal-content").show();
    });

}); // <-------remove it here

jQuery（function（$）{//您应该使用type=“hidden”而不是type=“text”什么东西不起作用？@Graveyard这不是隐藏输入，我想添加一个新的隐藏输入，该输入将具有我必须从单击的按钮重新选择的包类型。@Lain我想添加一个新的输入字段，其值将取决于按钮clicked@DhavalChheda你是怎么说的，我不知道e任何带有类名称
DownloadManual
和
id
的按钮，命名为
基本目录
。该按钮是将被单击的按钮，#Manual是form@DhavalChheda好的！我的意思是你发布的按钮是否是被点击的实际按钮。如果是，则事件不受限制o因为它没有类名
下载手册
。单击事件已绑定到。下载手册
下载手册
您是在谈论此按钮吗？