0

I'm trying to implement the DRY principle in my programming style.

To prevent misunderstanding about my question above, I will explain it one more time below. I did searching for this solution all the time, but it seems I can't find the right solution.

I want to get each input value in the form dynamically (not a dynamic inputs, add new input dynamically, etc.) without going to type this over and over:

var foo = $('input[name="foo"]').val();
var bar = $('input[name="bar"]').val();

For one or two pieces, it will be all right. But the problem is when I have more than 10 inputs, it's going to be unacceptable.

How can I do this?

Improve this question
4
  • Do you mean you'd like to replace it with a function you can call instead? Or loop through all the fields? If it's the former, you could do something along the lines of const getInputByName = (name) => $(`input[name=${name}]`), and call it by doing var $foo = getInputByName("foo");. I'd submit this as an answer if your desired result was a bit more clear to me. Commented Dec 14, 2018 at 3:19
  • Basically if I do create a function, that's means I should type it's value over and over again. So, I think loop is better.. but I don't know how to do that. Would you please submit the answer? Commented Dec 14, 2018 at 3:30
  • Even if you have all of the inputs together, how will you refer to one single input without ever using an identifier? Or hardcoding it? Eventually, if you want the value of the foo input, eventually you're gonna have to specify foo. If you're just trying to get all inputs, or all empty inputs, or all filled inputs, or all text inputs, etc, then this is easier. But your question doesn't make sense. We need to know what you plan on doing with the inputs. Commented Dec 14, 2018 at 3:32
  • You are right, I'm having problem when I tried to submit the request. The identifier didn't set. And I forgot to say that I want it to be submitted as an ajax data. Commented Dec 14, 2018 at 4:00

3 Answers 3

Reset to default
2

You can loop on input which has a name attribute using the each function and get that value.

var arr = [];
$(":input[name]").each(function(index, element) {
  arr.push($(this).val());
});
console.log(arr);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' name='foo' value='1' />
<input type='text' name='bar' value='2' />
<input type='text' name='foo' value='3' />
<input type='text' name='bar' value='4' />
<input type='text' name='foo' value='5' />
<input type='text' name='bar' value='6' />
<input type='text' value='7' />

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

5 Comments

nice dude~! but how if I have a form that has textarea or radio or checkbox element on it?
well, I just read the jQuery documentation [link] (api.jquery.com/input-selector) almost forgot about it. Thank you very much!
Your solution is great. But I'm facing new issue since I want to use it as ajax data, I only get its value without its name attribute/identifier. I'm sorry.. :( - question updated
No that's not how SO work. If you have a new problem ask new question. Don't change the previous question for new problem.
Okay, I understand. It's my fault, rolling back~
0

This should accomplish roughly what you want I think. Assuming you only want text values.

    var Inputs = [];

    $(":input:text").each(function () {
        Inputs.push({
            Name: $(this).attr("name"),
            Value: $(this).val()
        });
    });
Improve this answer

Comments

0 
var inputs = {};
// This will fire no matter when the control has been added
$(document).on('keyup','input[name]'), function () {
    inputs[$(this).attr('name')] = $(this).val();
});

// The results will be in at inputs.<name of control>, so a control with
// name="name1" will be found at inputs.name1.
//
// Also all the controls that have a name will be in the object when changed.
// This will only contain changed values and if you want to
// prime it initially, you will need to do this once the controls are all
// loaded.

$('input[name]').each(function() {
   inputs[$(this).attr('name')] = $(this).val();
});
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.