How to empty the name attribute in form in jquery using source object on change

Question

I am trying to change the name to null/empty of all checkboxes which is unchecked on onchange event and on ondocumentready event using jquery.

this is my code

<div id="tab_4">
 <div class="col-xs-12">
  <input type="text" name="txtbox1" value="1">
  <input type="checkbox" name="chkbox1" value="1">
  <input checked type="checkbox" name="chkbox2" value="2">
  <input type="checkbox" name="chkbox3" value="3">
 </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
      $('#tab_4 input[type=checkbox]').each(function(i){
       if($(i).not(':checked'))
        {
         $(this).attr('name', '');
        }
       });
    });
    $('#tab_4 input[type=checkbox]').change(function(){
    $('#tab_4 input[type=checkbox]').each(function(i){
        if($(i).not(':checked'))
        {
         $(this).attr('name', '');
        }
       });
    });
</script>

But it makes all name attribute to null even checked ones.

I used this answer Changing input name using JQUERY

1) Why exactly do you want this to happen?

ZorgoZ
– ZorgoZ

2019-12-01 09:20:02 +00:00
Commented Dec 1, 2019 at 9:20 — ZorgoZ
– ZorgoZ, Commented Dec 1, 2019 at 9:20
to send only checked input values into database

Danial212k
– Danial212k

2019-12-01 09:23:30 +00:00
Commented Dec 1, 2019 at 9:23 — Danial212k
– Danial212k, Commented Dec 1, 2019 at 9:23

ZorgoZ · Accepted Answer · 2019-12-01 18:44:00Z

1

You don't need to remove uncheckbox checkbox elements name to exclude it from form data. It is excluded by default. Check the following demonstration:

const tell = () => console.log([... new FormData($('form').get(0)).entries()])

$(() => {
  tell()
  $('input').on('change', tell)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
<div id="tab_4">
 <div class="col-xs-12">
  <input type="text" name="txtbox1" value="1">
  <input type="checkbox" name="chkbox1" value="1">
  <input checked type="checkbox" name="chkbox2" value="2">
  <input type="checkbox" name="chkbox3" value="3">
 </div>
</div>
</form>

edited Dec 1, 2019 at 18:44

answered Dec 1, 2019 at 9:39

ZorgoZ

3,7582 gold badges21 silver badges51 bronze badges

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

Collectives™ on Stack Overflow

How to empty the name attribute in form in jquery using source object on change

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related