Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Input fields in one form required for one submit button, but not for other?

How can I differentiate two separate actions for my submit buttons in one form, whereas one SAVES data into database (as is), and other submits form as a valid request, >>but<< according to HTML5 native validation (I use "required" attributes in HTML form)?

My form has 66 fields and I don't want to validate them all in PHP AFTER submission (as it's too cumbersome and time consuming), or validate them all in JS BEFORE submission (as I am not that agile in JS, as in PHP), so I use "required" and "type" attributes in HTML5, which is very convenient and quite versatile way of validation (besides older browsers). However I cannot find a easy way to bypass the "required" attribute, when using save button, but not using "Send for submission" button. Can you help suggest a solution? I guess the prefered way is some JS/jQuery way, as I cannot determine which button would be used before hitting the button (so that I can make a field required or not).

Sample code:

<form>
A: <input type="text" name="A" required />
B: <input type="text" name="B" required />
C: <input type="text" name="C" />
<input type="submit" name="save" value="Save"> <!--do not require anything-->
<input type="submit" name="send" value="Send  for submission"> <!-- require everything-->
</form>

Of course my form is huge, as it has 66 fields, so best solutions here are possibly general and versatile.

like image 761
Jan Desta Avatar asked Mar 11 '23 21:03

Jan Desta


2 Answers

Something like this might get you started:

$('#sub1').click(function() {
  $('[name=A]').removeAttr('required');
  $('[name=B]').removeAttr('required');
  $('form').append('<input type="hidden" name="save" />');
  $('form').submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  A: <input type="text" name="A" required /><br>
  B: <input type="text" name="B" required /><br>
  C: <input type="text" name="C" /><br>
  <input id="sub1" type="button" name="save" value="Save">
  <!--do not require anything-->
  <input type="submit" name="send" value="Send  for submission">
  <!-- require everything-->
</form>
like image 118
cssyphus Avatar answered Mar 30 '23 01:03

cssyphus


I've eventually come up with something like this. HTML:

<input type="submit" name="save" value="Save" onClick="removeRequired(this.form)">

JS (using jQuery):

function removeRequired(form){
    $.each(form, function(key, value) {
        if ( value.hasAttribute("required")){
            value.removeAttribute("required");
        }
    });
}

This is tested and working. It has this nice property, that I can keep the function elsewhere in files, to not clutch the php/html that is executing it. Only improvement I'd like (and probably other would be interested in) would be to eliminate jQuery as it's only used for browsing each input element in form, which seems easy enough for pure JS. However I could not find an easy way, and run out of time and used above with jQuery. Thanks

like image 28
Jan Desta Avatar answered Mar 29 '23 23:03

Jan Desta