Retrieve key from form with JavaScript and JQuery

Question

I am using the following code to retrieve form results into an array. This displays a number of checkboxes to the user based off of input from the $result_columns_c array.

foreach($result_columns_c as $key=>$value){
echo "<td width='20%'><input type='checkbox' class='input_options_sqlUpdate_a' 
name='input_options_sqlUpdate_a[$value]' value='$value'> $key</td>";
}

<script>
function optionsSubmit(){
    var inputs = $('.input_options_sqlUpdate_a:checked');
    input_a  = [].map.call(inputs, function( input ) {
        return input.value;
    })
    $.get("../index.php", {input_sqlQuery_a:input_a, sqlQuery:'true', sqlUpdate:'true', serialize:'true'}, function(data){
        $("#test").html(data);
    });
}       
</script>

However, this only creates an array with the values. How can I create an array with the key($value1) as well, or preferably, just retrieve the results from the form as an associative array?

@ guest271314 Is there an easy way to just get the value([$value1]), instead of getting the entire name (input_options_sqlUpdate_a[$value1])? — Arthur Walker
– Arthur Walker, Commented Apr 22, 2017 at 4:32
@charlietfl serializearray() could work, but how do I get it to work with $('.input_options_sqlUpdate_a:checked')? That does not return an array? Is there an easy way to get input, from checked values, as an array? — Arthur Walker
– Arthur Walker, Commented Apr 22, 2017 at 4:41

guest271314 · Accepted Answer · 2017-04-22 05:44:18Z

1

You can object destructuring at Array.from() or .map() call, computed property to return an object reflecting .name and .value of input as key, value pairs. You can use .replace() with RegExp /^.+\[|\]/g to match beginning of .name property to and including [ character or ] character, with replacement set to empty string "".

var inputs = $("input");

var input_a  = Array.from(inputs, function({name, value}) {
                 return Array(name.replace(/^.+\[|\]/g, ""), value);
               });
               
console.log(input_a);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' class='input_options_sqlUpdate_a' 
name='input_options_sqlUpdate_a[$value1]' value='$value2'>
<input type='checkbox' class='input_options_sqlUpdate_a' 
name='input_options_sqlUpdate_a[$value3]' value='$value4'>

edited Apr 22, 2017 at 5:44

answered Apr 22, 2017 at 4:12

guest271314

1

Sign up to request clarification or add additional context in comments.

12 Comments

guest271314 Over a year ago

What do you mean by "concatenate the different arrays automatically"?

guest271314 Over a year ago

@ArthurWalker Can you include html that you are describing at Question? See stackoverflow.com/help/mcve

guest271314 Over a year ago

The edited Question does not contain the rendered html the you described. What is resulting html, and what is expected resulting array or array of objects?

guest271314 Over a year ago

@ArthurWalker An array of arrays [[0, "$value1"], [1, "$value2"]] from two <input> elements? Or an array of objects where key is index of array [{0:"$value1"}, {1:"$value2"}]? Original Question does not appear to mention index, but rather get value surrounded by [, ] within .name attribute, yes?

guest271314 Over a year ago

$.map() concatenates returned array elements to existing array. You can use Array.from() or your orignal approach of [].map.call() See updated post

|

Collectives™ on Stack Overflow

Retrieve key from form with JavaScript and JQuery

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related