Develop Reference

jQuery targeting selector by input type and form name

I want to target any input of text type belonging to a form of a specific name. Because the form will have numerous input fields, I don't want to target a particular input name, but rather, capture the blur (or focusout) event for any input[type="text"] occurring within the form wrap.
My present code, which doesn't work:
$( document ).ready(function() {
$('form[name="tax_form"] input[type="text"]').on("blur",function() {
alert($(this).val());
});
});
I answered my own question. Because the code sample is essentially correct, there is no need for multiple people to try to solve the unsolvable. The problem had something to do with where I placed the javascript code, and nothing to do with structure or syntax of the code, itself.

The way the event "change" works is what it sounds like you want. An event handler doesn't actually fire when the input is clicked or if text is keyed in, it fires when text is entered and then the input loses focus.
In the following Snippet the same selector you are using is delegated to the "change" event. You'll notice that the ['tax_form'] has 4 text inputs yet the last one is the only one working. The reason is because if an input isn't assigned a type attribute, then by default type is 'text". So when using a selector based on an input's type="text", you must keep that in mind. So if you are in full control of your HTML, make sure that each input has a type attribute with an explicit value, or use classes which is better IMO.
SNIPPET
$(document).ready(function() {
$('form[name="tax_form"] input[type="text"]').on("change", function() {
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='notIt'>
<fieldset>
<legend>Not a Tax Form</legend>
<input>
<input type="text">
<input>
<input type="text">
</fieldset>
</form>
<br/>
<br/>
<form name='stillNotIt'>
<fieldset>
<legend>Still not a Tax Form</legend>
<input type="text">
<input>
<input type="text">
<input>
</fieldset>
</form>
<br/>
<br/>
<form name='tax_form'>
<fieldset>
<legend>Tax Form</legend>
<input class='klass' value='TEXT INPUT BY DEFAULT'>
<input value='TEXT INPUT BY DEFAULT'>
<input name='text' value='TEXT INPUT BY DEFAULT'>
<input type='number'>
<input type='text' value='THIS ONE COUNTS'>
</fieldset>
</form>

Previous commentators were right, that my code was fine as-is. I took my selector code out of a header script file, and placed it at the bottom of my footer script, and it worked as expected.
In the end, it wasn't my code that was the problem, but rather something to do with where I placed it. Possibly other javascript or jQuery code stepping on it.

Your code should work fine. Here's a working example of it to prove it's working. The tax_form fields should console.log() on blur. The another_form should not.
$(function() {
$('form[name="tax_form"] input[type="text"]').on("blur",function() {
console.log($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Tax Form</h1>
<form name="tax_form">
<input type="text" name="first" value="first">
<input type="text" name="second" value="second">
<input type="text" name="third" value="third">
</form>
<h1>Another Form</h1>
<form name="another_form">
<input type="text" name="first2" value="first2">
<input type="text" name="second2" value="second2">
<input type="text" name="third2" value="third2">
</form>

Copy Text from Input form into DIV

I want to create 1 input field and one Div.
When u write text in the Input and hit the button i want the text to be displayed in the DIV. Its so simple but it just won't work.. i hope someone can do this easy task for me.
I tried last:
<form>
Bearbeitungstext: <input id="textInput" type="text"><br>
<input type="button" value="text einbinden" onclick="$('texxxt').val($('#textInput').val())">
</form>
<div id="texxxt">
</div>

Try to use id selector properly,
$('#texxxt').text($('#textInput').val());
Also you have to use .text() instead of .val(), .val() is not a function for div elements. It is for form elements which are having value property.
And the best approach for your case would be binding an explicit event handler,
var div = $("#texxxt"),inp = $("#textInput");
$("form button").click(function(e){
e.preventDefault();
div.text(inp.val());
});

This can be done with php $_GET($whatever); also, to do this you will need the name="whatever" on the input field.

Bearbeitungstext:
<input id="textInput" type="text"/><br>
<input type="button" value="text einbinden" onclick="$('#texxxt').html($('#textInput').val())"/>
<div id="texxxt">
to change DIV content we use html() not val()

Best approach to add and remove elements from an html form

I want to create a simple html form with different inputs element. The questions and the possible choices for each question are stored in a database. The idea is to render form and child input elements with PHP, so a simple PHP function will take care of typesetting according to whether is type="text" or type="radio":
<form>
First name: <input id="1" type="text" name="firstname">
Last name: <input id="2" type="text" name="lastname">
<input id="3" type="radio" name="sex" value="male">Male
<input id="4" type="radio" name="sex" value="female">Female
<div id="div_5_optional">
Maiden name: <input id="5" type="text" name="maidenname" disabled="disabled">
</div>
</form>
Now, by default input id="5" will be disabled. But I also want to remove it. I am able to get it with JavaScript by loading in my header (although I can't guarantee the move to be smart)
<script>
$(document).ready(function(){
$("[disabled=disabled]").parent().remove();
});
</script>
So far so good, the div element is removed. Yet, I want to put the element back and in the original position when the radio button corresponding to Female is clicked. I added in the header, just below the previous js script this
<script type='text/javascript' src='scripts/enable_elements.js'></script>
which loads this function
// enable_elements.js
$(document).ready(function(){
$('#4').click(function(){
$( '#5' ).prop( "disabled", false );
});
});
Yet the all thing doesn't work. I guess the problem could be the my ready(function)s are only loaded once at the beginning and then put to sleep? Should I structure my form differently?

You do not want to remove(), instead you want to hide().
$(document).ready(function(){
$("#5").hide();
});
Also you want to handle the click on #3:
$('#3').click(function(){
$( '#5' ).attr("disabled", "disabled").hide();
});
$('#4').click(function(){
$( '#5' ).attr("disabled", "").show();
});
Note: I kept the "disabled" attribute, but really you don't need it since it will be hidden when unselectable...
If you remove the #5, then it's lost and you cannot show it again. So clicking on Male, then Female, back on Male, and on Female again... would not work.

you need to create a eventhandlers for the female and male checkbox that call your function and displays or hides the field

Auto select radio button and then submit button on page load - Javascript

I'm trying to select a radio button with an id (lets say the ID is "radio") and then automatically click a button with a type of submit inside of a form with an id of "multifee". I want these two things to automatically happen upon page load. Any suggestions on how to do this with javascript?
<form method="post" action="#" id="multifees" onsubmit="feeForm.submit(this); return false;">
<input type="radio" name="fee[1][options][]" id="radio" value="1" class="validate-one-required-by-name">
<button type="submit" class="button">Add</button>
</form>
So far I have no javascript started because I'm not even sure where to begin.

When declaring your radio button, you can add the attribute checked so that it is autoselected even when the page loads.
<input type="radio" name="fee[1][options][]" id="radio" value="1" class="validate-one-required-by-name" checked>
If you want to auto-submit, you can just make Javascript click for you.
<script type="text/javascript">
document.getElementById('sumbit').click();
</script>
If you want the script to work, you have to place the script after <body> so that the element can been loaded onto the page or else it won't know what button to look for since it may not have been loaded yet. Make sure to give your submit button an id as well.

$('#radio').check();
$('#submit').click();
EDITS: with javascript
document.getElementById('radio').checked=true;
document.getElementById("multifees").submit();

In pure Javascript try this in a window.onload handler:
document.getElementById('radio').check();
document.getElementById('submit').click();

Based on what you're asking for, there are really only a couple things you need.
A radio list which one is preselected:
<form name="thisForm" id="thisForm" method="post" action="[your destination]">
<input type="radio" name="choice1" value="choice1" checked /> choice<br />
<input type="radio" name="choice1" value="choice2"/> choice2<br />
<input type="radio" name="choice1" value="choice3"/> choice3<br />
</form>
And a Javascript function to submit the form:
<script type="text/JavaScript" language="JavaScript">
function submitForm() {
document.getElementById("thisForm").submit();
}
// submitForm();
</script>
I have the call to the function commented out on purpose, or you would throw you page into an infinite loop.

You can check the radio button (#radio) like so:
document.getElementByID("radio").checked = true;
Or actually within the html using the checked property:
<input type="radio" checked>
To auto-submit:
document.getElementsByClassName("button").click();
Or:
document.getElementByID("multifees").submit();

Select dom elements by attributes having array like attributes

I have many elements that are structured to get them in array like mapping on server side.
<input type="CHECKBOX" id="478" value="1" name="data[GroupInfo][student][478]" onclick="return updateValues('478')">
<input type="CHECKBOX" id="490" value="1" name="data[GroupInfo][student][490]" onclick="return updateValues('490')">
<input type="CHECKBOX" id="478" value="1" name="data[ClassInfo][student][478]" onclick="return updateValues('478')">
<input type="CHECKBOX" id="490" value="1" name="data[ClassInfo][student][490]" onclick="return updateValues('490')">
so on...
Now, I want to select them using their name attribute like
$("[name^=data[ClassInfo][student]]");
but this won't work
I tried to escape barckets to.
$("[name^=data\[ClassInfo\]\[student\]]");
but no luck;
I want to select them using name attribute.

Just wrap the attribute value in ""
$('input[name^="data[ClassInfo][student]"]')
Demo: Fiddle

Try this:
$("[name^='data[ClassInfo][student]']");//Wrap in the single quotes

Try:
// For exact element
$('input[name=data[GroupInfo][student][478]]');
Or
// For list of elements
$('input[name^=data[GroupInfo][student]]');
You can see more here

$('input[name*="data[ClassInfo][student]"]') // matches those that contain 'data[ClassInfo][student]'