We Keep Coding

jQuery: How to extract data from a clicked HTML form?

I have multiple dynamically generated forms. When a form is submitted I need jQuery to pick out certain pieces of information from the form that was clicked.
Right now, I am trying to use the this object which is generated after a click event. I am trying to extract the information from the this object because it appears to have the HTML values that I want. Is there a better way to go about this?

It's pretty simple. Just get the field value like so:
var fieldValue = $('#field_id').val();
var email = $('#email').val();
var name = $('#name').val();
Do it inside your event handler.

After a click event, this should hold the DOM-element that was clicked. Assuming that element was inside a form, you can do this:
$(this).closest("form").serializeArray()
Fiddle:
http://jsfiddle.net/mqe3u3oe/

Please use the code below
function get_value() {
var fieldValue = $('#field_id').val();
}

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 to lock the first word of a textarea?

Basically I need to create a textarea that is character limited, but will have a single word at the beginning, that they can't change.
It needs to be a part of the textarea, but I don't want users to be able to remove it or edit it.
I was thinking I could create a JQuery function using blur() to prevent the user from backspacing, but I also need to prevent them from selecting that word and deleting it.
UPDATE
I wrote this JQuery which seems to work great! However I like the solution below as it requires no Javascript.
<script type="text/javascript">
var $el = $("textarea#message_create_body");
$el.data('oldVal', $el.val());
$el.bind('keydown keyup keypress', function () {
var header = "Header: ";
var $this = $(this);
$this.data('newVal', $this.val());
var newValue = $this.data("newVal");
var oldValue = $this.data("oldVal");
// Check to make sure header not removed
if (!(newValue.substr(0, header.length) === header)) {
$(this).val(oldValue);
} else {
$(this).data('oldVal', $(this).val());
}
});
</script>

If you just want the textarea to show a prefix, you can use a label, change the position, and indent the textarea content. User will not notice the difference.
You can see how it works here: http://jsfiddle.net/FLEA3/.

How about just putting this word as a label next to the textbox? It may be confusing for the users not to be able to edit part of the text in the textbox.

Wouldn't it be better if you just alert the user that whatever he inputs in the textarea will be submitted with a "prefix" and then
show the prefix as a label before the textarea
add the prefix to the inputted text before submitting

Using data attributes to filter a select box (using third party JS filtering code)

I am using this relatively simple JS program:
http://www.barelyfitz.com/webdesign/articles/filterlist/
The program just filters a select box using a text box.
However, I want to jquery and HTML5 data attribute which is different how it was originally used. I give my text box filterer a data attribute:
<input id="filter_text" name="filter_text" data-filterable="myselect"
type="text" />
I use the following jquery to get the name of the select box that is to be filtered and then filter the select box:
$(function() {
$('input[data-filterable]').keyup(function() {
select_box_name = $($(this).data('filterable'))[0];
filter = new filterlist(select_box_name);
filter.set(this.value);
});
});
which NEARLY works. You can filter but if you press backspace to de-filter then nothing happens i.e. it doesn't 'unfilter'.
It must be something really small!!
Thank you :).

You need to initialize the filter outside the event handler:
$(function() {
$("input['data-filterable']").each(function() {
var filter = new filterlist($($(this).data('filterable'))[0]);
$(this).keyup(function() {
filter.set(this.value);
);
});
});

On every keyup you're reinitializing filter. So you can only filter on the select as it is right when you press a key. Move the initialization of the filter out of the keyup event and it's working.
Here's a fiddle.

Jquery Not able to fetch changed value of input field

I am trying to fetch the changed input filed value using jquery which is getting changed javascript event of drop down select.
I simply am not getting where exactly the things are getting wrong. It is something related to dom tree refresh (.live)? Any help/suggestions would be great. Thanks.
/* adding the value to user_val input field id in javascript onload function based on drop down select event*/
document.getElementById('user_val').Value = "abcd";
/* then trying to get value which changed */
$(document).ready(function() {
$("#submits").click(function() {
alert($("#user_val").val());
});

You haven't closed your click event handler function. Change it to this:
$(document).ready(function() {
$("#submits").click(function() {
alert($("#user_val").val());
});
});
And change Value to value (note the lowercase "v"), and then it should work fine.

Two errors you got there:
You should use document.getElementById('user_val').value = "abcd"; and not document.getElementById('user_val').Value = "abcd"; (lower case value, not Value).
You should also close the ready event after your click event.
Here is the complete working solution:
/* adding the value to user_val input field id in javascript onload function based on drop down select event*/
document.getElementById('user_val').value = "abcd";
/* then trying to get value which changed */
$(document).ready(function() {
$("#submits").click(function() {
alert($("#user_val").val());
});
});