We Keep Coding

how to make html input required using JavaScript?

Could you tell me how to achieve html input:
<input id="blablabla" required> using javascript
all web answers i have found suggest to write something like:
input.setAttribute('required','true');
input.setAttribute('required','');
input.required='true'
but them all give me something like:
<input id="blablabla" required=''>
or
<input id="blablabla" required='true >
and they doesn't work
Only html that works is <input id="blablabla" required>
Could you help me ?
Thanks

I found your example as well as the other answers working perfectly.
Are you sure you did the right thing?
Also you can put like this, it will work too!
myInput.setAttribute('required', 'required');
Example code:
Please click Add required and then click Submit
function addRequired() {
const myInput = document.getElementById('inputText');
myInput.setAttribute('required', 'required');
alert('Input has been added required!');
}
function removeRequired() {
const myInput = document.getElementById('inputText');
myInput.removeAttribute('required');
alert('Input has been removed required!');
}
<form>
<input id="inputText" type="text">
<button type="button" onclick="addRequired()">Add required</button>
<button type="button" onclick="removeRequired()">Remove required</button>
<button>Submit</button>
</form>

You can do this in any of the following ways:
const myInput = document.getElementById('blablabla');
myInput.required = true // Method 1
myInput.setAttribute('required', true); // Method 2
To get something like <input id="blablabla" required> you have to use the first method
If you're looking for the typical asterisk to appear, that's something you have to add manually, with JS or CSS. But if you check the attributes of the element (by inspecting the HTML of the page) you can see that the required attribute has been added.

Reset for form not working after search has been done

I am trying to reset the form to blank values in the input textboxes after the data filled in the textbox have been searched.
<form id="myForm" class="mt-5" asp-controller="Leave" asp-action="GetAllLeaves">
<div class="form group col-md-6">
<label>Employee </label>
<div class="col">
<input type="hidden" id="employeeId" name="employeeId" />
<input type="text" name="employeeName" id="employeeName" value="#ViewData["CurrentFilterE"]" />
</div>
</div>
<button type="submit" class="btn btn-outline-success">Search</button>
<button type="reset" id="reset" class="btn btn-outline-primary">Reset</button>
</form>
I have tried bunch of different javascripts but none of them work after the search has been completed. They work fine before the search button is clicked. I am aware that there are questions already asked about this here and I have tried those codes but they don't work for me.
These are the different codes that I have tried. They don't work after the search button has been hit. Even refreshing the page does not delete the data in the input boxes.
function myFunction() {
document.getElementById("myForm")[0].reset();
};
$("#reset").click(function () {
$(this).closest('form').find("input[type=text], textarea").val("");
});
document.getElementById("reset").onclick = () => {
document.getElementById("myForm").reset()
};
let inputs = document.querySelectorAll('input');
document.getElementById("reset").onclick = () => {
inputs.forEach(input => input.value ='');
}

in your post method you need to have an IactionResult return type method and then you need to pass property name to ModelState.Remove method, not the value.
Either pass the property name in string, eg. ModelState.Remove("PropertyName"); or in the newer .NET framework, you can use nameof() keyword, eg. ModelState.Remove(nameof(model.Property));

The HTMLFormElement.reset() method restores a form element's default values. This method does the same thing as clicking the form's reset button. If a form control (such as a reset button) has a name or id of reset it will mask the form's reset method. It does not reset other attributes in the input, such as disabled.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset.
Your default input value = "#ViewData["CurrentFilterE"]". Reset method restores a form element's default values.
This will help to reset the input:
html:
<form id="myForm">
<input type="text" name="employeeName" id="employeeName" value="test" />
<button id="reset" class="btn btn-outline-primary">Reset</button>
</form>
js:
document.getElementById("reset").onclick = function(e) {
document.getElementById("employeeName").value = "";
}

I ended up using the following
$("#reset").click(function () {
// this for normal <input> text box
$('#employeeName').attr("value", "");
//this for checkbox
document.getElementById('searchAprroved').removeAttribute('checked');
});

How to keep an element state unchanged forcefully

I have a form which behaves normally, with the inputs validated by simple validation. We installed a plugin, which provides some in-depth validation.
The issue arises when the plugin disables the submit button if it's validation fails on the elements it's watching.
How can I keep the submit on active state at all time without making any modification to the plugin files. However, I will have control on the page itself, so I can alter anything.
A simple JSFiddle I created to illustrate the situation:
JSFiddle
HTML
<form action="#" id="form">
Name: <input type="text" id="name" class="form-field">
<span class='error-message'>Name is required</span><br>
Age: <input type="text" id="age" class="form-field">
<span class='error-message'>Age is required</span><br>
Password: <input type="password" id="pass" class="adv-form-field">
<span class='error-message'>Advanced messages</span>
<button id="submit">Submit</button>
</form>
CSS
.error-message{
display: none;
}
JavaScript (jQuery)
// Simple validation to check if the fields have values
$(".form-field").on("blur", function(){
if(this.value == ""){
$(this).next(".error-message").css("display", "block");
} else {
$(this).next(".error-message").css("display", "none");
}
});
// Suppose this is the advanced function | we will have no control over this
$("#submit").prop("disabled", true);
$(".adv-form-field").on("blur", function(){
if(this.value == ""){
$(this).next(".error-message").css("display", "block");
$("#submit").prop("disabled", true);
} else {
$(this).next(".error-message").css("display", "none");
$("#submit").prop("disabled", false);
}
});

You can add your own event handlers after the plugin has initialised, and these will effectively override (not actually override) the plugin event handlers...
If you add this it will run on document.ready...
$(function() {
// set submit button enabled after input field blur
$(".adv-form-field").on("blur", function() {
$("#submit").prop("disabled", false);
});
// set initial state of submit button
$("#submit").prop("disabled", false);
});

I don't know which plugin you are using, but from my previous experience with form validation plugins instead of typing <button id="submit">Submit</button> use:
<input type="submit" id="submit">

AJAX function not being called with button onclick function

I have a simple form with 2 input fields and one button. When the button is clicked, the value of the 2 input fields should be sent to the AJAX function to be handled in a servlet. For some reason, the servlet is not being reached. Can anyone see why? I have an almost identical method working with a different form, and I can't see why this one isn't working.
Here is the HTML form code:
<div id="addCourses" class="hidden" align="center" >
<form id="addCourse" name="addCourse">
<input type="text" id="courseID" name="courseID" value="courseID" size="40" /><br />
<textarea rows="5" cols="33" id="courseDesc" name="courseDesc">Description</textarea><br />
<input type="button" value="Add Course" onclick="addCourse(this.courseID.value, this.courseDesc.value);"/>
</form>
</div>
Here is the Script function:
<script type ="text/javascript">
function addCourse(id, descr)
{
var fluffy;
fluffy=new XMLHttpRequest();
fluffy.onreadystatechange=function()
{
if (fluffy.readyState==4 && fluffy.status==200)
{
//do something here
}
};
fluffy.open("GET","ajaxServlet?courseID="+id+"&courseDescription="+descr,true);
fluffy.send();
}
</script>

Because this is the button and not the form
so
this.courseID.value
this.courseDesc.value
returns an error.
You should use
this.form.courseID.value
this.form.courseDesc.value
Second problem is you have a name clash. The form and function are named addCourse. It will lead to problems. Rename one of them to be different.
Running Example

When you use this, as in onclick="addCourse(this.courseID.value, this.courseDesc.value);", I think that would refer to the input element, and therefore the values aren't being passed correctly.

Bind your event handlers in javascript, where they should be, and you can avoid the issue entirely.
HTML:
<input type="text" id="courseID" name="courseID" value="courseID" size="40" /><br />
<textarea rows="5" cols="33" id="courseDesc" name="courseDesc">Description</textarea><br />
<input type="button" id="addCourse" value="Add Course"/>
JS:
document.getElementById('addCourse').onclick = function () {
var fluffy = new XMLHttpRequest();
var id = document.getElementById('courseID').value;
var descr = document.getElementById('courseDesc').value;
fluffy.onreadystatechange=function() {
if (fluffy.readyState==4 && fluffy.status==200) {
//do something here
}
};
fluffy.open("GET","ajaxServlet?courseID="+id+"&courseDescription="+descr,true);
fluffy.send();
};
As epascarello pointed out, you need to change the ID of your form as having two elements with the same ID is not allowed and will cause unpredictable javascript behavior.

Try a fluffy.close; after the if ready state expression.

How to simulate the action in a form when submit?

first: always is the same action.
two: the form has multiple "CSS SUBMITS" like
<form action="/myaction" method="POST">
<a id="foo1" name="foo1" href="#" role="form_button">submit1!</a>
<a id="foo2" name="foo2" href="#" role="form_button">submit2!</a>
<a id="foo3" name="foo3" href="#" role="form_button">submit3!</a>
<input type="submit" id="canfoo" name="canfoo" value="I can process this"/>
</form>
<script>
$('a[role=form_button], div[role=form_button], span[role=form_button]').bind( 'click', function(){ $('form').submit(); } );
</script>
how can I do in /myaction this:
if ($_POST['foo1']) { action; return; } // :(
if ($_POST['foo2']) { action; return; } // :(
if ($_POST['foo3']) { action; return; } // :(
if ($_POST['canfoo']) { action; return; } // THIS WORKKKKKSS!!
How can I do to foo1, foo2, foo3 to work?
(I use jQuery like:
$('a[role=form_button], div[role=form_button], span[role=form_button]').bind( 'click', function(){ $('#actiontodo').val(this.id); $('form').submit(); } );
), then, in the other side (action),
I do:
IF ($_POST['ACTIONTODO'] == "foo") { action; return; }
BUT, I DON'T LIKE THIS SOLUTION! I WANT THE <A behave as well as <input type="submit"
Thank you very much for your help!

You shouldn't give priority to visual over usability, that's a huge mistake. Anyway, you can stylize any button/input to suit your needs without any problem, just grab a good CSS tutorial.
Don't reinvent the wheel.

You can use any element you want to trigger a .submit() event.
http://api.jquery.com/submit/
For example, this form:
<form id="targetForm" action="/myaction">
<input type="text" value="Oh hai!"/>
</form>
Can be submitted by the following jQuery:
$('#targetForm').submit();
However, you can style buttons and input fields without too much trouble in CSS.
Update:
I'd agree with Ben that you should reconsider doing form submissions this way.
For multiple submission triggers..
So if you have multiple triggers you need a hidden field to record this information for POST.
Something like this will do the trick...
<form id="targetForm" action="/myaction">
<input type="text" name="myText" value="Oh hai!"/>
<input type="hidden" name="whichTrigger" value="default" />
</form>
And then each trigger would do ...
$('#whichTrigger').val("myTriggerName"); // A different value for each one of course.
$('#targetForm').submit();

I solved this problem as is:
<form action="/myaction" method="POST">
<div id="foo1" name="foo1" href="#" role="form_button"><button type="submit">submit1!</button></div>
<div id="foo2" name="foo2" href="#" role="form_button"><button type="submit">submit2!</button></div>
<div id="foo3" name="foo3" href="#" role="form_button"><button type="submit">submit3!</button></div>
<input type="submit" id="canfoo" name="canfoo" value="I can process this"/>
</form>
!!!!!!!!!!!!!!!!!!! THANKS!