javascript get all inputs inside div including select and textarea

Question

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.

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.

The problem is that i have to make it dynamic. I will have many "shortcodes" and each will be in it's own div where 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 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>

Hope that will helps you http://stackoverflow.com/questions/1829519/jquery-to-serialize-only-elements-within-a-div — Vixed, Dec 08 '15 at 19:12
Also check this one http://stackoverflow.com/questions/190253/jquery-selector-regular-expressions/24740738#24740738 — dnxit, Dec 08 '15 at 19:15
It's a great question - there are just some people on SO who seem to downvote anything. I just voted you up - so that got rid of that. — Kong, Dec 08 '15 at 22:06

Kong · Accepted Answer · 2015-12-08T19:54:57.523

9

Use jQuery and the :input pseudo selector:

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

That simple.

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

Or wrap it in a <form>, then you can use:

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

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

edited Dec 08 '15 at 19:54

answered Dec 08 '15 at 19:27

Kong

8,792
15
68
98

score 8 · Answer 2 · edited Oct 07 '21 at 14:41

8

You can target your wrapper element and locate thru .find() all inputs within:

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

edited Oct 07 '21 at 14:41

Zuul

16,217
6
61
88

answered Dec 08 '15 at 19:20

WhiteHat

59,912
7
51
133

Gadget Blaster · Answer 3 · 2015-12-08T19:32:49.113

If you can use jQuery here is a fiddle: 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/

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);
        }
    }
}

score 0 · Answer 4 · answered Dec 08 '15 at 21:33

At the end i switched to jQuery code completely and using :input helped me to resolve the problem.

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 preventDefault to 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 content because 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.

Some of the terms may be unfamiliar but those who are familiar to WordPress will recognize terms like shortcode...

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.

javascript get all inputs inside div including select and textarea

4 Answers4

Linked