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 内的所有输入，但我仍然不确定如何抓取 textarea 或选择输入。

问题是我必须让它动态化。我将有许多“短代码”，每个都将在按钮所在的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单击短代码div中的一个按钮以防止页面滚动到顶部时，接下来我使用它作为短代码名称来获取该div的ID，最后我获取所有输入并检查是否其中一个输入的 id 为 content，因为这将决定短代码是封闭的还是自封闭的，并循环遍历所有输出其 id 和值的输入。最后将其返回给编辑器。

有些术语可能不熟悉，但熟悉 WordPress 的人会认出短代码之类的术语...

最后的输出是：

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

如果您对我的问题或答案投反对票，请解释原因，因为我总是尽可能详细地解释或询问。