jquery populates attribute input form multiple value

Question

is that possible to populate attributes name, value, type from :input or something like jQuery serialize for all kinds of input, and combine the value if there is have multiple name like checkbox and radio choices

the concept like this :

$(this).attr('name');
$(this).attr('type');
$(this).attr('value'); // <--- combine this value when the type is checkbox or radio

i try to populate the attributes using each function : it work but i still don't know how to combine type

$('.submit').click(function(){
var tipe = {}
        var form = {}
        $('input[type=text], textarea', '.register').each(function(){
            const name = $(this).attr('name');
            const value = $(this).val();
            const type = $(this).attr('type');
            form[name] = value;
            tipe[name] = type;
        });
        
        $('input[type=checkbox], input[type=radio]', '.register').each(function(){
            const name = $(this).attr('name');
            const value = $(this).val();
            const type = $(this).attr('type');
            
            if(form[name] === undefined) {
                form[name] = [value];
                tipe[name] = [type];
            } else {
                form[name].push(value);
            }
        }); 
    console.log(form);
    //console.log(tipe);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register">
    <input type="text" name="full_name">
    <textarea name="address"></textarea>
    <input type="radio" name="sex" value="male">
    <input type="radio" name="sex" value="female">
    <input type="checkbox" name="hobies" value="foodball">
    <input type="checkbox" name="hobies" value="basketball">
</div>
<input type="button" class="submit" value="Submit">

Bhushan Kawadkar · Accepted Answer · 2020-10-13 15:26:19Z

1

you can use below logic where you can create one map to store value of each input and append values if input type is of type radio or checkbox

$('.submit').click(function(e){
  var formValues = {};
  $('.register :input').each(function(){
      var name = $(this).attr('name');
      var type = $(this).attr('type');
      var value = $(this).val();
      var inputElement = {};
      var valid = true;
      if(type == 'radio' || type == 'checkbox') {
          valid = $(this).is(':checked');
          if(valid) {
             if(formValues[name]) {
                inputElement = formValues[name];
                var preVal = inputElement['value'];
                value = preVal + ',' + value;
              }
          }
      }
      if(valid) {
        inputElement['name'] = name;
        inputElement['type'] = type;
        inputElement['value'] = value;
        formValues[name] = inputElement;
      }
  });
  console.log(formValues);
       
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register">
    <input type="text" name="full_name">
    <textarea name="address"></textarea>
    <input type="radio" name="sex" value="male">
    <input type="radio" name="sex" value="female">
    <input type="checkbox" name="hobies" value="foodball">
    <input type="checkbox" name="hobies" value="basketball">
</div>
<input type="button" class="submit" value="Submit">

edited Oct 13, 2020 at 15:26

answered Oct 13, 2020 at 14:50

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

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

5 Comments

Denis Over a year ago

yes sir.. but i can't custom it if i want to add some condition like if(type=='text'){do somethings} so i made like that

Denis Over a year ago

I try to manage attributes to do something, not just analyze variable names and values for input processing

Denis Over a year ago

i almost made it i just don't know how to merger the objects between form and tipe.. please help

Denis Over a year ago

ok, wait i try to test your code and remove $(this).is(':checked'); because i want it still send the name and value without checkbox or radio is checked

Bhushan Kawadkar Over a year ago

happy to help you :)

Collectives™ on Stack Overflow

jquery populates attribute input form multiple value

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related