Question

我有以下代码，如果用户从下拉列表中选择“其他”，则应该向表单添加字段。但是，使用此代码似乎会覆盖下拉列表的值，以便在发布表单时$_POST['enquiry_source']为空。

我已经把它缩小到这条线，导致我出现问题，在下拉列表的任何更改中添加字段，而不仅仅是选择“其他” -

$(field_to_append).insertAfter('#form-field-enquiry_source');

我也试过$('#form-field-enquiry_source').after(field_to_append);，但结果是一样的。

$(function(){

    /** Looks for changes to the enquiry source dropdown */ 
    $('#form-field-select-enquiry_source').live('change', function(){

        /** Check the enquiry source */
        var enquiry_source = $('select[name="enquiry_source"]').val();      

        /**
         * Adds another field to the enquires form when the user selects 'Other' form the enquiry source dropdown
         */
        if(enquiry_source === 'other'){ // The user has selected other as the enquiry source, so lock the form

            var field_to_append = '<div id="form-field-enquiry_source_other" class="form-field float-left">'+
                '<label>Other<span class="required"></span></label>'+
                '<input name="enquiry_source" id="form-field-input-enquiry_source_other" />'+
                '</div>';

            $(field_to_append).insertAfter('#form-field-enquiry_source');

        } else {

            $('#form-field-enquiry_source_other').remove();

        }

    });

});

任何想法是什么导致了这个问题？

Answer 1

你插入里面？听起来你正在生成像

这样的HTML代码

<form>something</form><input name=enquiry_source>

也许你想要的是$（'＃form-field-enquiry_source'）。append（$（field_to_append））;

我不知道什么是“＃form-field-enquiry_source”。是表格吗？

Answer 2

如果您选择name = enquiry_source，然后您使用相同的名称输入一个元素，则只有一个元素发布到服务器，在您的情况下输入字段（仅发布后一个元素）所以您应该给该字段一个不同的名称

        var field_to_append = '<div id="form-field-enquiry_source_other" class="form-field float-left">'+
            '<label>Other<span class="required"></span></label>'+
            '<input name="enquiry_source_other" id="form-field-input-enquiry_source_other" />'+
            '</div>';

Answer 3

我知道这可能看起来有点偏离主题（但有点不是）。您可以通过隐藏div来更改您的方法，其中包含已包含的内容，然后问题归结为根据字段显示/隐藏下拉菜单。

关于这一点很好的部分是在javascript缩小时不能缩小长字符串，你可以通过这种方式节省更多空间。

if(enquiry_source === 'other'){ // The user has selected other as the enquiry source, so lock the form
        $("#enquiry_source_other").show();
    } else {
        $("#enquiry_source_other").hide();
    }

我觉得这种方法有点简单

使用JS .insertAfter（）时PHP $ _POST值丢失

3 个答案: