How to disable require in multiple inputs and enable the other input in javascript

Question

How to disable require in inputs with name = "item_name" , name="description" and name="quantity" when i click purpose and enable the require in purpose textarea by using javascript.

Edit: What I really mean is when i submit the form by clicking ADD, only the input with name item_name description quantity are required and When I submit the form by clicking Purpose, the textarea will be the one who is required

Here is my code:

<form action="../function/add_item.php" method="post">

<input id="autocomplete" name="item_name" placeholder="Item Name" required>
<input type="text" name="description"  placeholder="Description placeholder="Quantity"" required>
<input type="number" name="quantity" required>

<button name="submit" type="submit" class="btn btn-default">ADD</button>

<textarea placeholder="Purpose (e.g. Office Use)" name="purpose" required></textarea>

<button name="purpose" type="submit" class="btn btn-info">Purpose</button>
</form>

Answer 1

Add an id to your button

<button id="purpose" type="submit" class="btn btn-info">Purpose</button>

Then

$(function() {
    $('#purpose').click(function() {
        $('#item_name').removeAttr('required');​​​​​
        $('#description').removeAttr('required');​​​​​
        $('#quantity').removeAttr('required');​​​​​
        $('textarea').attr('required','1');
    });
});

Answer 2

I assume this is the code you might be looking for:

$(function() {
    $('[type=submit]').on('click', function() {
        if($(this).attr('name') == 'submit') {
            $('[name=item_name], [name=description], [name=quantity]').attr('required', 'required');
            $('[name=purpose]').removeAttr('required');
        } else if($(this).attr('name') == 'purpose') {
            $('[name=purpose]').attr('required', 'required');
            $('[name=item_name], [name=description], [name=quantity]').removeAttr('required');
        }
    });
});

Answer 3

Try this one. I just added up some javascript and add id's

 document.getElementById('purpose').onclick = function() { document.getElementById("name").required=false; document.getElementById("des").required=false; document.getElementById("qnt").required=false; } 

 <form action="../function/add_item.php" method="post"> <input id="name" name="item_name" placeholder="Item Name" required> <input id="des" type="text" name="description" placeholder="Description placeholder="Quantity"" required> <input id="qnt" type="number" name="quantity" required> <button name="submit" type="submit" class="btn btn-default">ADD</button> <textarea placeholder="Purpose (eg Office Use)" name="purpose" required></textarea> <button id="purpose" name="purpose" type="submit" class="btn btn-info">Purpose</button> </form>