We Keep Coding

JQuery Not Triggering On Button.click

I've written some code that should check a textbox (ID tfa_1) to see if its empty or contains text, this should trigger on a next page button (wfpagenextID6) being clicked.
I've tried replacing my script with an alert("test.") and it dosent appear, so im assuming I have my trigger wrong but I cannot work out what I have done wrong!
My HTML that defines the textbox is below:
<input type="text" id="tfa_2685" name="tfa_2685" value="" placeholder="" title="Previous Surname (if applicable) " class="">
and the button is
<input value="Next Page" type="button" class="wfPageNextButton" wfpageindex_activate="7" id="wfPageNextId6" style="visibility: visible;">
Both of these are generated and I cannot change them!
My Script is:
<script>
$(document).ready(function(){
$('#wfPageNextId6').click(function(){
var inp.Val= $("#tfa_2685").val();
if (inp.val().length > 0) {
alert("Test.");
}
});
})
</script>

An identifier ( variable ) must not contains dots. ( see more details ECMAScript specification in section 7.6 Identifier Names and Identifiers)
the next variable declaration is wrong
var inp.Val= $("#tfa_2685").val();
to fix this
var inp = $("#tfa_2685");

if you want to assign value to inp variable, you should just do: var inp = $("#tfa_2685").val();
And then call to inp.val() just replace with inp, for inp is not jQuery object so it doesn't have val() method

You have syntax, try this:
$(document).ready(function(){
$('#wfPageNextId6').click(function(){
var inpVal= $("#tfa_2685").val();
if (inpVal.length > 0) {
alert("Test.");
}
});
});
https://jsfiddle.net/cua40s80/

How to get value-data of a div using POST?

I have a div as followed:
<div id="progress_status" class="slider slider-blue" data-min="0" data-max="365" data-value="1"></div>
I would like to get the div value and process it by the post method. How do I do this using JavaScript?
Edit: I need to retrieve the value and insert it in the database: basically we work with the name attribute:
$row['delai']=$post['delai']

Well i solve the problem by adding a hidden element:
<input type="hidden" name="delaiDePrise" id="delai">
and then call a function on submitting the form:
$(document).ready(function(){
$("form").submit(function(){
var val2 = $('#progress_status span').text();
document.getElementById('delai').value = val2;
});});

jQuery method to add a TextBox

UPDATED
I am new to jQuery but have been programming for about two years in C#. I wanted to create a jQuery method that would be used several times to add Textboxes. I thought that I create a jQuery function with parameters which I would set from the buttons when they get clicked. Here is my jQuery code, this wont necessarily work as I am a newbie but will definitely give a workflow of what I intended to achieve
$(document).ready(function () {
function add(someClass) {
var count = $("."+someClass).length;
if (count <= 20) {
var newTextBox = $(document.createElement('text'));
newTextBox.appendTo("."+ someClass+":last");
//$('.approvers:last').append($("<input type='text' value='' />"));
}
}
});
This is how I intend to call the function from a buttons onclick.
<input type="button" value="+" id="someId" class="someCssClass" onclick="addText('approvers')" />
I am doing this to avoid writing the same code to insert textboxes having different classes. Is this how it can be done? All I want is to add a new TextBox at the same time specifying its class from jquery.

Your code is a little off, try this:
<input type="button" value="+" id="someId" class="addButton" data-target-class="someClass"/>
<div class="someClass">
</div>
And the javascript:
$(document).ready(function(){
// Define a click handler for any input with the class addButton
$('input.addButton').click(function(){
// Extract the class that this input button is targeting
var target_class = $(this).attr('data-target-class');
// Add a textarea to that target
$("."+target_class).append("<textarea></textarea>");
});
});
Here is an example:
http://jsfiddle.net/1sfz4sda/

I tested below code and it works, do not put your function inside document.ready
DEMO : http://liveweave.com/RkHq5o
Here is the javascript
function addText(cssClass) {
var count = $("."+cssClass).length;
if (count <= 20) {
var newTextBox = $(document.createElement('textarea'));
newTextBox.appendTo("."+cssClass);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" value="+" id="someId" class="someCssClass" onclick="addText('approvers')" />
<div class="approvers"></div>

how to access value hidden elements using loop

what i need
i need to fetch hidden element data according to particular element id.
a.html
<input type="hidden" id="evt_date" value="feb 10">
<input type="hidden" id="evt_date" value="Mar 21">
<input type="hidden" id="evt_date" value="april 05">
js
<script>
$.each($('input'), function(i, val) {
if ($(this).attr("type") == "hidden") {
var event_date = document.getElementById('evt_date');
console.log(event_date);
}
});
</script>
problem
on doing console.log im getting
<input type="hidden" id="evt_date" value="feb 10">
i want to fetch all hidden element in loop using js.
updated js code
$.each($('input.event_date'),function(i,val)
{
if($(this).attr("type")=="hidden")
{
console.log(val);
var evt_date=$('.event_date').val();
console.log(evt_date);
$('.date_event').html(evt_date);
}
});

It's not a good practice to use same id for multiple element. You can instead use class attribute. So first you should change those repeated id attributes into 'class' attributes.
HTML : Updated
<input type="hidden" class="event_date" value="feb 10">
<input type="hidden" class="event_date" value="Mar 21">
<input type="hidden" class="event_date" value="april 05">
<div class="date_event"></div>
<div class="date_event"></div>
<div class="date_event"></div>
Next about your answer, loop through the each element and log the value or use it anyway. Try this,
jQuery :
You question seemed little confusing to me when in one part you asked for the data of the element and in another part you asked for the element itself.
$.each($("input[type='hidden'][class='evt_date']"), function(){
console.log($(this).val()); // value of the element
console.log($(this)); // the element itself
});
jsFiddle
Modification of your code :
jQuery :
var counter = 0;
$.each($('input.event_date'),function(i,val)
{
if($(this).attr("type")=="hidden")
{
console.log(val);
var evt_date=$(this).val();
console.log(evt_date);
$('.date_event:eq('+ counter +')').append(evt_date);
counter++;
}
});
jsFiddle

Dont know why you used same Id but this will be the short way:
$("input [id='evt_date'][type='hidden']").each(function(){
console.log($( this ))
});

$.each($('input'),function(i,val){
if($(this).attr("type")=="hidden"){
console.log($(this).val());
}
});
Demo

Try this
$('input[type="hidden"]').each(function(index,item){
console.log($(item));
});
Working demo

You are using the same id for all the inputs. The id should be unique. Use a class instead
$.each($('input.evt_date'),function(i, field) {
if($(this).attr("type")=="hidden") {
console.log(field);
}
});

How to send multiple values from a checkbox input

I am trying to collect multiple pieces of data from a checkbox, but I am unsure of how to do this. Right now I have:
<input tabindex="1" type="checkbox" name="friend[]" id="{{$friend}}" value="{{$friend}}" style="display:inline-block;">
Which allows me to collect an id (contained in {{$friend}}) that I need. But I also need the name associated with this id. Is there a way to collect multiple values from a single checkbox? I would need this because I am collecting the data and moving to another form without changing the view. This would be used for javascript which would print out stuff in the view as it is checked (i.e. the id and name).
Here is the javascript:
<script>
$(document).ready(function(){
var callbacks_list = $('.callbacks ul');
$('.facebook-friends-larger input').on('ifChecked', function(event){
callbacks_list.prepend('<li><img src="https://graph.facebook.com/'+this.id+'/picture" alt="" height="50" width="50"><span id="#'+this.id+'">#' + this.id + '</span> is ' + event.type.replace('if', '').toLowerCase() + '</li>');
});
$('.facebook-friends-larger input').on('ifUnchecked', function(event) {
callbacks_list.find('span#'+ this.id).closest('li').remove();
console.log(this.id);
});
});
</script>
Any ideas? Thank you for your help.

Try this this will be helpyou..
$("input[type=checkbox]").change(function(){
alert($(this).val()); //get a val
alert($(this).attr('name')); //get a value of name attribute
});
Fiddle here

If you have the access to the username before the page is loaded (and is therefore able to inject it into the DOM without making ajax queries after pageload or user action), you can store them in HTML5 data- attributes, for example, data-name in the following format:
<input tabindex="1" type="checkbox" name="friend[]" id="{{$friend}}" value="{{$friend}}" data-name="{{name}}" style="display:inline-block;">
You can access the name by simply calling the .data() method in jQuery, i.e. $('input').data('name').

Use:
var name = $("#checkbox-id").attr("name"); // Use whatever method you have to target the checkbox
and so on to get the other values

Try this
HTML
<input tabindex="1" type="checkbox" name="friend[]" id="123" value="{{$friend}}" style="display:inline-block;">test
JS
$(document).ready(function(){
$("#123").change(function(){
$(this).val(); //get a val
console.log($(this).attr('name')); //get a value of name attribute
});
});
FIDDLE