Javascript javascript获取div内的所有输入，包括select和textarea
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34164035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript get all inputs inside div including select and textarea
提问by Aleksandar ?or?evi?
I have been trying to figure out how to get all the input elements inside a div including select and textarea and pass them to editor, so far i figured out with input but i am just stuck with the rest.
我一直在试图弄清楚如何在 div 中获取所有输入元素，包括 select 和 textarea 并将它们传递给编辑器，到目前为止我想出了输入，但我只是坚持其余的。
Here is the code so far
这是到目前为止的代码
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);
}
By this i am able to grab all the inputs inside a div where submit button is but still i am not sure how to grab textarea or select inputs.
通过这个，我能够抓取提交按钮所在的 div 中的所有输入，但我仍然不确定如何抓取 textarea 或选择输入。
The problem is that i have to make it dynamic. I will have many "shortcodes" and each will be in it's own divwhere the button is. But each will have it's own inputs which i can't control so i need to grab them all and send values to editor. Here's example of the code.
问题是我必须让它动态。我将有许多“短代码”，每个都在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>
回答by WhiteHat
Something like this?
像这样的东西？
var inputs = $("#" + shortcodeName).find("select, textarea, input");
var inputs = $("#" + shortcodeName).find("select, textarea, input");
回答by Kong
Use jQuery and the :inputpseudo selector:
使用 jQuery 和:input伪选择器：
$('.output-shortcodes').find(':input');
That simple.
就那么简单。
https://api.jquery.com/input-selector/
https://api.jquery.com/input-selector/
Or wrap it in a <form>, then you can use:
或将其包裹在 a 中<form>，然后您可以使用：
document.getElementById("outputForm").elements...
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements
回答by Gadget Blaster
If you can use jQuery here is a fiddle: https://jsfiddle.net/q33hg0ar/
如果你可以使用 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>
And here it is w/o jQuery: https://jsfiddle.net/67pp3ggu/
这里没有 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);
}
}
}
回答by Aleksandar ?or?evi?
At the end i switched to jQuery code completely and using :inputhelped me to resolve the problem.
最后我完全切换到 jQuery 代码并使用:input帮助我解决了这个问题。
Here is the complete code that i use now.
这是我现在使用的完整代码。
$('.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);
});
What does it do? So now when i click on a button within shortcode div first using preventDefaultto prevent page to scroll to top, next i grab the id of that div using it as shortcode name, and lastly i grab all the inputs and check if one of the inputs have id contentbecause that will decide if shortcode is enclosed or selfclosed and loop through all inputs outputting their id's and values. and at the end return that to the editor.
它有什么作用？因此，现在当我首先单击短代码 div 中的按钮preventDefault以防止页面滚动到顶部时，接下来我使用它作为短代码名称获取该 div 的 id，最后我获取所有输入并检查其中一个输入是否具有idcontent因为这将决定短代码是封闭的还是自封闭的，并循环遍历所有输出其 id 和值的输入。最后将其返回给编辑器。
Some of the terms may be unfamiliar but those who are familiar to WordPress will recognize terms like shortcode...
有些术语可能不熟悉，但熟悉 WordPress 的人会认出诸如短代码之类的术语......
At the end final output is:
最后的最终输出是：
[bartag foo="value" bar="value"]content from textarea[/bartag]
If you downvote my questions or answers please explain why because i always tend to explain or ask as detailed as i can.
如果您对我的问题或答案投反对票，请解释原因，因为我总是倾向于尽可能详细地解释或询问。
