We Keep Coding

How to get input text on focused using javascript & tagName (no jQuery) without calling onfocus() method

I would like to get input field value on focused using pure javascript(no jquery). Also it should be automatic hence we should not call onfocus() function on input element.
I used this below syntax to get the input field. But how to make this automatic on focused.
var el = document.getElementsByTagName("input");
for(i=0; i<el.length; i++){
console.log(el[i].value);
}

This is how you can get the value of your input field without the onfocus() method, but with the native javaScript one.
input.addEventListener("focus", function(e){
console.log(e.target.value)
})
or using your array of input fields:
for(i=0; i<el.length; i++){
el[i].addEventListener("focus", function(e){console.log(e.target.value)})
}
And heres a fiddle of a working example.. https://jsfiddle.net/wdur4yvb/
** edit **
you could also add the event of "click" instead of focus since once you click the input it will be focused as well... no idea what sort of solution you are looking for and why, but I hope this helps.

Try the autofocus attribute
<input type="text" autofocus>

Why select retain the value previously selected after reload [duplicate]

I have a big problem with the functionality in Firefox that keeps data that the user have filled in on reload F5. If i use Ctrl+F5 the forms are cleared and this is great. My problem is that not all my users know that this is what they have to do to force the input cleanup. Is there a way in the html or response headers to tell Firefox to not keep the data in the forms?

Just add autocomplete="off" to your inputs and you will solve the problem.
<input type="text" autocomplete="off">
jQuery to solve this on all inputs and textareas
$('input,textarea').attr('autocomplete', 'off');

Instead of going through all inputs you may also just add the attribute to your form-element like so:
<form method="post" autocomplete="off">...</form>
However the above mentioned methods on domReady did not work for me...

In case you want to keep the autocomplete feature of the browser (see other valid answers), try adding the name attribute to the form and give it a random value. It has worked for me:
<form id="my-form" name="<random-hash>">
...
</form>

/*reset form elements (firefox saves it)*/
function resetElements()
{
var inputs = document.querySelectorAll('input[type=text]');
//you get the idea.....you can retrieve all inputs by tag name input
for(var i = 0; i < inputs.length; i++) {
document.getElementsByTagName('input')[i].value = "";
}
var textareas = document.getElementsByTagName('textarea');
for(var i = 0; i < textareas.length; i++) {
document.getElementsByTagName('textarea')[i].value = "";
}
}
Call this function onload.

I think easier and quicker way to do that is
$('input,textarea').attr('autocomplete', 'off');

I tried the shortened solution above, but it didn't clear the value of the select boxes on my page.
I ended up modifying it slightly and now all input types on the page are cleared regardless of type:
var allInputs = $(":input");
$(allInputs).attr('autocomplete', 'off');
So to make this run onload I just put it in the ready() method:
$(document).ready(function () {
var allInputs = $(":input");
$(allInputs).attr('autocomplete', 'off');
});

I found the only fix for me was to do
document.forms[0].reset();
before doc ready early in the page, as suggested in the comment by #Marek above - not great but worked for me (the autocomplete attribute method via either jQuery, JS or HTML didn't in the end fix it for me)

just to piggyback on #jonnybradley's solution (couldn't comment on his answer because I don't have enough rep yet):
This also worked perfectly form me:
document.getElementById('theFormId').reset();
called after the HTML code.

one of my colleagues recommended that we should use a random string as the name of the form. It works very well if you don't use the name attribute of the form.
it is an example from the sf1 form builder:
public function renderFormTag($url, array $attributes = [])
{
..
$attributes['name'] = isset($attributes['name']) ? $attributes['name'] : bin2hex(random_bytes(16));
..
}

autocomplete="off" is also needed for hidden input fields in order to have them refreshed on simple page reload (F5)

Radio button REQUIRED if input field has content

I have a a reasonably quick problem to solve (I think). I have a form online and it validates the required content for the user's data, but has no validation on the first part of the form.
I've been asked however if I can make a radio button REQUIRED depending on whether an input field has been filled in.
The form can be found here:
http://www.elcorteingles.pt/reservas/livros_escolares/form.asp
So if the person start's filling in the input fields on the first line, that the radio buttons in the group become REQUIRED (for either the CDROM ou CADERNO but not both)

You can handle the focusout and blur events for the input:
$(function () {
// Handle every input type text.
// To select specific inputs, give them a common class and change the
// selector accordingly.
$("input[type=text]").on("focusout blur", function () {
// Check for inputs with class radio_btns which are in
// the parent element (li).
// Set their required property.
$(this).parent().find("input.radio_btns")
.prop("required", $(this).val().trim().length > 0);
});
});
Demo
jQuery reference (Tree Traversal)
jQuery reference (.prop())
jQuery reference (.focusout())
jQuery reference (.blur())

This will work. You can include the following JQuery code in the script tag, and also the JQuery cdn link in the head tag.
$(document).ready(function(){
$('#01titulo').focusout(function(){
if ($(this).val() !== "") {
$('[name="01caderno"]').prop('required', true);
} else {
$('[name="01caderno"]').prop('required', false);
}
alert($('[name="01caderno"]').attr('required'));
});
});

Try using the following js code its working:
$(document).ready(function(){
$(".titulo_books").each(function(){
$(this).focus(function(){
var radioChecked=0;
var currElemId = parseInt($(this).attr('id'));
var radioSelecterId = (currElemId>9) ? currElemId : "0"+currElemId;
$("input:radio[name="+radioSelecterId+"caderno]").each(function(){
if(radioChecked==0)
{
radioChecked==1;
$(this).attr("checked","checked");
}
});
});
});
});
I have checked it by executing this from console on your site and it seems to work fine. You can alter this in the way you want. I have checked one of the four available radio button. User can change the input value if required. Or you can also change the default radio button selected through my code.

How do I use jQuery to disable a form's submit button until every required field has been filled?

I have a form with multiple inputs, select boxes, and a textarea. I would like to have the submit button be disabled until all of the fields that I designate as required are filled with a value. And after they are all filled, should a field that WAS field get erased by the user, I would like the submit button to turn back to disabled again.
How can I accomplish this with jQuery?

Guess my first instinct would be to run a function whenever the user starts modifying any of the inputs. Something like this:
$('#submitBtn').prop('disabled', true);
$('.requiredInput').change(function() {
inspectAllInputFields();
});
We then would have a function that checks every input and if they're validated then enable the submit button...
function inspectAllInputFields(){
var count = 0;
$('.requiredInput').each(function(i){
if( $(this).val() === '') {
//show a warning?
count++;
}
if(count == 0){
$('#submitBtn').prop('disabled', false);
}else {
$('#submitBtn').prop('disabled', true);
}
});
}
You may also want to add a call to the inspect function on page-load that way if the input values are stored or your other code is populating the data it will still work correctly.
inspectAllInputFields();
Hope this helps,
~Matt

Here's something comprehensive, just because:
$(document).ready(function() {
$form = $('#formid'); // cache
$form.find(':input[type="submit"]').prop('disabled', true); // disable submit btn
$form.find(':input').change(function() { // monitor all inputs for changes
var disable = false;
$form.find(':input').not('[type="submit"]').each(function(i, el) { // test all inputs for values
if ($.trim(el.value) === '') {
disable = true; // disable submit if any of them are still blank
}
});
$form.find(':input[type="submit"]').prop('disabled', disable);
});
});
http://jsfiddle.net/mblase75/xtPhk/1/

Set the disabled attribute on the submit button. Like:
$('input:submit').attr('disabled', 'disabled');
And use the .change() event on your form fields.

Start with the button disabled (obviously). Bind an onkeyup event to each required text input, and an onchange or onclick to the select boxes (and any radio buttons/checkboxes), and when it fires, check whether all required inputs are filled. If so, enable the button. If not, disable it.
There is one loophole here, though. Users can delete the value of a text field without triggering the onkeyup event by using the mouse to "cut" the text out, or by holding down the delete/backspace key once they have deleted it all, and clicking the button before deleting it.
You can get around the second by either
disabling the button with onkeydown and checking if it is ok on onkeyup
checking for validity when the button is clicked

An idea from me:
Define a variable -with global scope- and add the value true- Write a submit function within your check the value above varibale. Evalue the the submit event only, if the value is true.
Write a function which ckecks all value from input fields and select fields. Checking the length of value to zero. if the value length of one field zero then change the value of the global variable to false.
After that, add to all input fields the event 'onKeydown' or 'onKeyUp' and to all select boxes the event 'onChange'.

I recommend taking a slightly different approach and using jquery's validation http://docs.jquery.com/Plugins/validation. The tactic you are suggesting is prone to security holes. The user could easily using firebug enable that button and then submit the form.
Using jquery validation is clean and it allows you to show error messages under the required fields if so desired on submit.

changing disabled property of a button

I have an html button, and I have dynamically disabled it using the following property values
disabled="disabled"
How can i make it work again? i dont want to make it disabled now

You can just set the disabled property to false in JavaScript, like this:
document.getElementById("myId").disabled = false;

var e = document.getElementById("someElement");
e.removeAttribute("disabled");
and disable again,
e.setAttribute('disabled','disabled');