javascript获取div中的所有输入，包括select和textarea

Question

我一直在试图弄清楚如何将div中的所有输入元素（包括select和textarea）都放到编辑器中，到目前为止，我已经解决了输入问题，但剩下的问题我还没解决。

这是迄今为止的代码

function InsertShortcode(elem) {
        var shortcodeName = elem.parentElement.id;
        var inputs = document.getElementById(shortcodeName).getElementsByTagName('input'), i=0, e;
        var inputs_val = '[' + shortcodeName;
        while(e=inputs[i++]){
            if(e.id){
                inputs_val += ' ' + e.id + '="' + e.value + '"';
            }
        }
        inputs_val += ']';
        window.send_to_editor(inputs_val);
    }

通过这种方式，我可以在提交按钮所在的div中获取所有输入，但我仍然不确定如何获取文本区域或选择输入。

问题是我必须让它充满活力。我会有很多"快捷代码"，每个都在按钮所在的div中。但每个都有自己的输入，我无法控制，所以我需要把它们全部抓取并把值发送到编辑器。下面是代码示例。

    <div class="output-shortcodes">
        <?php foreach( $theme_shortcodes as $key => $name ) { ?>
            <div id="<?php echo $key ?>">
                <p>
                    <h2><?php echo $name ?></h2>
                </p>
                <?php $form = $key . '_form';
                    if(function_exists($form)) {
                        $form(); // this is where the input fields are dynamically created on each shortcode.
                    }
                ?>
                <button class="button-primary" onclick="InsertShortcode(this)">Insert shortcode</button>
            </div>
        <?php } ?>
    </div>

Answer 1

使用jQuery和:input伪选择器：

$('.output-shortcodes').find(':input');

就这么简单。

https://api.jquery.com/input-selector/

或者将其包装在<form>中，然后可以使用：

document.getElementById("outputForm").elements...

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements

Answer 2

您可以将包装器元素作为目标，并通过.find()定位中的所有输入

var inputs = $("#" + shortcodeName).find("select, textarea, input");

Answer 3

如果你可以使用jQuery，这里有一个小提琴：https://jsfiddle.net/q33hg0ar/

<div id="form">
    <input type="text" name="input1" />
    <select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
    <textarea name="notes"></textarea>
    <button class="button-primary" onclick="InsertShortcode(this)">Insert shortcode</button>
</div>
<script>
$(document).ready(function() {
    $('#form').find('input, select, textarea').each(function() {
        console.log($(this).attr('name'));
    });
});
</script>

这里有jQuery：https://jsfiddle.net/67pp3ggu/

window.onload = runIt();
function runIt() {
    var elements = document.getElementById('form').childNodes;
    var inputTypes = ['text', 'select-one', 'textarea'];
    for (var i = 0; i < elements.length; i++) {
        var elm = elements[i];
        if (typeof elm.type !== 'undefined' && inputTypes.indexOf(elm.type)) {
            console.log(elm);
            console.log(elm.type);
        }
    }
}

Answer 4

最后，我完全切换到jQuery代码，使用:input帮助我解决了这个问题。

这是我现在使用的完整代码。

    $('.vivid-framework-submit-shortcode').click(function(event) {
            event.preventDefault();
            var shortcodeName = $(this).closest('div').attr('id');
            var inputs = $('#' + shortcodeName).find(':input');
            var inputsVal = '[' + shortcodeName;
            inputs.each(function() {
                if($(this).attr('id') != 'content') {
                    inputsVal += ' ' + $(this).attr('id') + '="' + $(this).val() + '"';
                console.log(inputsVal);
                }
            });
            inputs.each(function() {
                if($(this).attr('id') == 'content' ) {
                    inputsVal += ']' + $(this).val() + '[/' + shortcodeName;
                }
            });
            inputsVal += ']';
            window.send_to_editor(inputsVal);
        });

它做什么？因此，现在，当我首先使用preventDefault点击shortcodediv中的一个按钮以防止页面滚动到顶部时，接下来我用它作为shortcode名称获取该div的id，最后我获取所有输入并检查其中一个输入是否具有id content，因为这将决定shortcode是封闭的还是自封闭的，并在所有输出其id和值的输入中循环。并在最后将其返回给编辑器。

有些术语可能不熟悉，但熟悉WordPress的人会认出像shortcode这样的术语。。。

最终输出为：

[bartag foo="value" bar="value"]content from textarea[/bartag]

如果你否决了我的问题或答案，请解释原因，因为我总是尽可能详细地解释或提问。