We Keep Coding

How to toggle the HTML5 input "required" function depending on which button is pressed

I have in my form a textarea input field and I am using the HTML5 required attribute:
<textarea class="form-control text-secondary mb-3" rows="4" name="audit_req_comment_decision" type="text" value="<?php echo htmlentities($audits['audit_req_comment_decision']); ?>" required></textarea>
<button type="submit" class="btn btn-danger" name="accepted">Accepted</button>
<button type="submit" class="btn btn-danger ml-auto" name="rejected">Rejected</button>
My form also has two buttons. One will send "accepted" and the other one is to send "rejected". I would like to change my form so that when the user clicks on the "Accepted" button it will check the required input is not empty. But if the "Rejected" button is clicked, the text area should not be required and the form will submit even if it is empty.
Is there any workaround available?

Method 1: Handle the requirement validation yourself
You need to remove the "required" attribute from the element - the browser implements that requirement but you want to handle it yourself.
When that is removed, you need you use javascript to handle the submission. You can add code to your "Accepted" button that checks if the text area has a value, and if not then prevent the form from being submitted.
To do this:
Remove the required attribute from the textarea
Add a class to all required elements, e.g. <textarea class="required-on-accept">
Add a javascript function to check all the elements with your class, and check if they have a value. If they are empty, return false to prevent the form from being submitted
Call this function when your button is clicked by adding the onclick to the button as follows: <button type="submit" onclick="return check_required();">
See a working example:
function check_required() {
/* check all elements with the class required-on-accept */
var elements = document.getElementsByClassName("required-on-accept");
for (var i = 0; i < elements.length; i++) {
/*if any element is empty, return false to prevent the form being submitted */
if (elements[i].value==""){
console.log(" required value not entered!");
return false;
}
}
return true;
}
<form id="my-form">
<textarea class="form-control text-secondary mb-3 required-on-accept" rows="4" name="audit_req_comment_decision" type="text" value="123"></textarea>
<button type="submit" onclick="return check_required();" class="btn btn-danger" name="accepted">Accepted</button>
<button type="submit" class="btn btn-danger ml-auto" name="rejected">Rejected</button>
</form>
Method 2: remove the required attribute on clicking the "Rejected" button
If you still want the browser to handle the validation except for when the "Rejected" buton is pressed, you still need javascript, but you can do it like this instead:
Add a class to all required elements, e.g. <textarea class="required-on-accept">
Add a javascript function to check all the elements with your class, and remove the required attribute
Call this function when your "Reject" button is clicked by adding the onclick to the button as follows: <button type="submit" onclick="return check_not_required();">
The required attribute will remain if the "Accepted" button is clicked, so the browser will still prevent the form from being submitted if that button is clicked.
See this working below -
function check_not_required() {
/* check all elements with the class required-on-accept */
var elements = document.getElementsByClassName("required-on-accept");
for (var i = 0; i < elements.length; i++) {
/* remove the "required" attribute from the element */
elements[i].removeAttribute("required");
}
/* Tell the browser to submit the form -
the required elements are no longer required,
so the browser will not stop the submission if they're empty */
return true;
}
<form id="my-form">
<textarea class="form-control text-secondary mb-3 required-on-accept" rows="4" name="audit_req_comment_decision" type="text" value="123" required></textarea>
<button type="submit" class="btn btn-danger" name="accepted">Accepted</button>
<button type="submit" onclick="return check_not_required();" class="btn btn-danger ml-auto" name="rejected">Rejected</button>
</form>

How to stop next page to be loading

In my project, while a particular button is clicked I want to stop the next page appearing. Here is my JavaScript code:
function checkcond() {
check_value=document.getElementById("chkvalue");
if(check_value==null){
alert(check_value);
document.firstform.textview.focus();
return false;
}
}
and button code is:
<form id="payment_form" name="payment_form" action="<?php echo site_url("cont/accept");?>" method="post">
<input id="chkvalue" name="chkvalue" type="hidden">
<button type="submit" id="submit_button" class="btn btn-primary" onclick="checkcond()">
<b>Make a Payment</b>
<span class="fa fa-hand-o-right" aria-hidden="true"></span>
</button>
Here after checking the check_value I want to keep my current page while it is null. How should it be done? Is there any function for that?

My suggestion would be to remove inline javascript
and use like this
document.getElementById('payment_form').onsubmit = function() {
return checkcond();
};
or if you want to use inline method, change onclick method like this
<button type="submit" id="submit_button" class="btn btn-primary" onclick="return checkcond()"><b>Make a Payment</b>

Whenever i disable or hide submit button the form doesnt

Whenever i disable or hide submit button the form doesnt submit:
<form action="leads_add.php" method="post" name="leads_form" id="leads_form">
<input type="submit" name="saveforlaterbutton" value="Save for later" class=" btn btn-primary" id="saveforlaterbutton" >
<script>
$("#leads_form").submit(function(e) {
e.preventDefault();
$("#saveforlaterbutton").hide();
});
</script>
I also tried:
<input type="submit" name="saveforlaterbutton" value="Save for later" class=" btn btn-primary" id="saveforlaterbutton" onclick="this.disabled=true;return false;">
If i click the button, it disables/hides the button but then nothing happens;the form doesnt submit

You're canceling the submit action. Remove this line:
e.preventDefault();

If you want the form to submit you need to remove :
e.preventDefault();
This prevents the form from being submitted.
and also you need not put onclick="this.disabled=true;return false;".
The return false is not required.
If you really want you can do onclick="this.disabled=true;"

i removed but it didnt work
e.preventDefault();
This is what worked for me:
<script>
$(document).ready(function($) {
$('#leads_form').on('submit', function(evt) {
$('#saveforlaterbutton').hide();
});
});
</script>

Disable Cancel button before POST

On clicking Submit button my JavaScript code execute $.post("Submit.aspx",... that sometimes takes a few seconds so user is able to click Back button that is undesirable.
So I try to disable or hide Back button but it does not work and it is still clickable. Any clue?
<input type="submit" value="Submit" class="next" onclick="submitData()" />
<input type="submit" id="btnBack" value="Back" onclick="goBack()" />
function submitData()
{
// I try to disable or hide Back button but it does not work
$('#btnBack').hide();
$('#btnBack').attr("disabled",true);
var btnBack= document.getElementById("btnBack").disabled = true;
// Long request
$.post("Submit.aspx",..
}

You should use $(el).prop() for disabling the input. Also when you are using jQuery, you don't need to add onclick in html, you can do it like Eg below:
$('input[value="Submit"]').on('click', function(e) {
$('#btnBack').prop("disabled",true);
//your post request
//$.post("Submit.aspx",..
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" value="Submit" class="next" />
<input type="submit" id="btnBack" value="Back" onclick="goBack()" />
For your code it will be:
function submitData() {
$('#btnBack').prop("disabled",true);
$.post("Submit.aspx",..
}

Your code seems to be right. Did you add Jquery?
Check the this:
function submitData(){
// I try to disable or hide Back button but it does not work
$('#btnBack').hide();
$('#btnBack').attr("disabled",true);
var btnBack= document.getElementById("btnBack").disabled = true;
}
function goBack(){
console.log("I'm back");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" value="Submit" class="next" onclick="submitData()" />
<input type="submit" id="btnBack" value="Back" onclick="goBack()" />

Try this ;)
canSubmit = true;
function submitData(){
if(!canSubmit){
return false;
}
canSubmit = false;
// disabling button
$('#btnBack').attr("disabled", true);
// Long request
$.post("Submit.aspx", ...).always(function(){ canSubmit = true; });
}
Simply use a variable and check for this value before submitting form and after ajax request response reset it value. BTW you can disable button if you want to do so.

$("#btnBack").prop('disabled', true);
Instead of
$('#btnBack').attr("disabled",true);

Empty the text box if data's are entered

Data's entered in the popup text box gets cleared if cancel button is pressed.
I used the below code for performing this,
function clear()
{
document.getElementById("spacevalidate").setTextValue() = "";
}
html is for popup box is
<div id="overlay_form" style="display:none">
<h2> Create New Incident Type</h2>
<br />
Name
<input type="text" id="spacevalidate" style="height:30px;" name="title" maxlength="30" /><br />
<div style="width:180px;float:right;margin:20px 5px 0 10px">
<button id="bsave" type="submit" name="save" title="Save" class="forward">Save</button>
<button style="margin-right:10px;" type="button" id="close" name="cancel" class="forward backicon">Cancel</button>
</div>
update:
$(document).ready(function(){
//open popup
$("#addalist").click(function(){
$("#overlay_form").fadeIn(1000);
positionPopup();
});
1.Now i enter some data and press cancel button,again i open the same popup,data's are avail in the text box.I want to clear that on every open if some data's entered and cancel button is pressed.

Try this,
function clear()
{
document.getElementById("spacevalidate").value = "";
}

As Cam said, just call clear() in the function that opens the modal.