We Keep Coding

I cant pick the value of input using jquery

$('.submit__form').on('click', function(e) {
e.preventDefault();
var id = '.' + $(this).data('id');
var person__name = $('#person__name').val();
var person__email = $('#person__email').val();
var booking__participants = $('#booking__participants').val();
alert(person__email || 'none');
// if (person__email === '' || person__name === '' || booking__participants === '') {
// alert('Preencha os campos obrigatórios.');
// } else {
// $(id).submit();
// }
});
I don't know why, but i can't pick the value of the person__name and person__email, the most strange part is that i can pick the value in the console on the browser... someone knows what could be causing this?
This is not a problem of html the 2 inputs fields have the id person__name and person__email.
The code is in a external file, and i am calling that in the bottom of my html.
HTML:
<form>
<input id="person__name" name="person.name" type="text" />
<input id="person__email" name="person.email" type="email" />
<a class="submit__form">Submit</a>
</form>
I cant use the submit input.
UPDATE:
The scripts in the bottom of the page:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.mask/0.9.0/jquery.mask.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/headroom/0.6.0/headroom.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.1.0/velocity.ui.min.js"></script>
<script src="/client/scripts/main.js"></script>
Inside the main script:
(function() {
//code
})();

If you want to alert the name, make sure you use the name in the jQuery
alert(person__name || 'none');
// Not:
alert(person__email || 'none');
http://jsfiddle.net/376fLujs/3/
Also, make sure your script is included properly. Include the jQuery before your script:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="local.js" type="text/javascript"></script>
add: console.log("working"); as the very first line of your script
open the chrome console / Firebug and refresh your page.
if you don't see "working" in the console, your javascript is not included properly.
Edit: based on your comments again. If you have multiple forms, re-using the same ID, it will not work. Always keep IDs unique. Since your link is inside of the form like your input, you could do this:
var person__email = $(this).parent().find("input[name='person.email']").val();
// DRX points out that escaping may be necessary:
var person__name = $(this).parent().find("input[name='person\\.name']").val();
http://jsfiddle.net/376fLujs/4/

I would say try using this for your event handling:
$(document).on('click', '.submit__form', function(e) {
//code here
});
The reason it might not be working is because the element might not yet be created when the script loads. This should take care of that issue.

Need help preventing form submission if element is not checked

I wrote a small script the prevents the form from being submitted if an input field (checkbox or radio) has not been selected. The script only targets the input field with the attribute "required". However since my form varies from page to page (depending on what link the user selects) not all options required.
The form that I am including the jquery script is on one form since it is dynamic.
I have wrote the script below which does the job
$('#item_form').submit(function() {
var ok = $('input[id*=\"required\"]').is(':checked');
$('#error').toggle(!ok);
$('html, body').animate({scrollTop: 0,scrollLeft: 300}, 500);
return ok;
});
});
But the challenge that I am facing having it work only if there is a required attribute. I have wrote the following code below but it doesn't seem to be working for me. Here is what I wrote
$.fn.exists = function () {
return this.length !== 0;
}
$('#item_form').submit(function() {
var req = $('input[id*=\"required\"]');
if(req.exists()){
var ok = req.is(':checked');
$('#error').toggle(!ok);
$('html, body').animate({scrollTop: 0,scrollLeft: 300}, 500);
return ok;
}
});
});
Can anyone please help me figure this one out? Thanks!

You can try to check if the selector input[id*="required"]:not(:checked) returns with length "0", that will be true either if all required are checked, and also if there's no required on the page:
$('#item_form').submit(function() {
var ok = $('input[id*=\"required\"]:not(:checked)').length == 0;
$('#error').toggle(!ok);
$('html, body').animate({scrollTop: 0,scrollLeft: 300}, 500);
return ok;
});

It isn't entirely clear what your validation requirements are but if you are trying to target required attribute you can use an attribute selector'
For example on a single checkbox:
<input type="checkbox" required/>
var ok = $(':checkbox[required]').is(':checked');
Would need to see more html and have better explanation of your needs to improve this
See API Docs for has-attribute selector

Simple solution...
$('#item_form').submit(function () {
if ($(this).find('input.required').length > 0) {
alert('oops, a field is required'); // this is where you'd put your loop to make sure each required field is filled
} else {
alert('form is good to go');
}
});
Note though that you can only have one instance of an ID on a page, so use class="required" instead of id="required".

Jquery change color condition

Hi everyone I have an issue with Jquery :
I have a multiple selection and the user can select one thing and it will copy the text into an input above. I would like that the text in the multiple selection that will be copied become red if the button is clicked so did you understand? I don't know how to do condition in Jquery, here is what I have done :
$(document).ready(function(){
if ($choose = true)
{
$("ok").click(function(){
$("droite").css({"background-color":"yellow"});
}
});
});
droite is an id and no it's not working but I would like to know how it works
choose is a function here it is :
var choose = function(bouton){
var lesoptions = $('#droite').find(":selected");
//lesoptions.remove();
$('#numLot').val(lesoptions[0].text);
};
Can I have your opinion ?
thanks

$("ok") is wrong. it should be $("#ok") or $(".ok") or whatever.
compare operator is == instead =

Try to use like below,
var $Choose;
//Assign value to $Choose as like true or false
$(document).ready(function(){
if ($choose)
{
//If you have id like ok use "#" or if class use "." instead
$("#ok").click(function(){
$("#droite").css({"background-color":"yellow"});
});
}
});
Hope this helps...

You have to use . selector before class names and # before id names.
Read about selectors: jQuery Selectors
Since choose is a function so, you will have to return something and check if it returns true/false. So make your function like this:
function choose(bouton){
var something = /*your return value*/; //Put your return value here
var lesoptions = $('#droite').find(":selected");
$('#numLot').val(lesoptions[0].text);
return something; //something is what you want to be returned by function
};
If $choose is not defined while you are putting it in if condition then you will not get proper working.
If #ok is added dynamically then use delegation using .on.
You should put code like this:
$(document).ready(function(){
var $choose = choose(bouton);
if ($choose)
{
$("#ok").on("click",function(){ //Again not mentioned what is ok, still like you told I assume it id
$("#droite").css("background-color","yellow");
});
}
});

Get radio button by name in a loop using jQuery

I'm using jquery 1.4.1 and while I plan to upgrade soon, I need to resolve the below issue. I need to loop over all the radio buttons on my html page and then do some logic for a couple of radio button's based on their name. Below was my attempt but it's not working, any ideas?
jQuery('input:radio').each(function() {
if(jQuery(this).name('radioOneName')) {
alert("radioOneName")
} else {
alert("not radioOneName")
}
});

Try this jQuery(this).attr('name') === 'radioOneName'. Link to docs.

Try this :)
$(document).ready(function () {
$(':radio').each(function () {
var myval = $(this).val();
if (myval == "button1")
{
alert("first");
}
else
{
alert("second");
}
});
});

You should be using
$(this).attr("name");
Glad I could help.

You can try this:
<input type="radio" id="abc" name="myradioname"/>
and in javascript using this:
$('input[name="myradioname"]').each(function(){
// do something...
})
Basically, this syntax queries the document for the <input> tag having the specified name.

Check validation with id's and assign custom errors

(I am not using Jquery Validation)
I'm trying to return custom errors if the field is incorrect or empty. For instance, if the #id_first_name field is null. Append the string, " first name" to p#error to result in :
Please fill in your first name
I've made a fiddle here to show what I mean. So in the list of required fields... How would I be able to grab / check each individual required id and assign the corrosponding error?
Thank you for your help in advance!

You're fiddle should be as basic as possible, removing all other information, but you could try something like this,
$('form').on('submit',function(){
$('input').each(function(){
$this = $(this);
if($this.val() == 'null')
{
$('p#error').append('Please enter your ' + $this.attr('placeholder'));
}
}
});

You could do something like below
$('form input').on('blur', function() {
var id = $(this).attr('id');
var val = $(this).val();
if(id == 'myInput') {
if(!val.length) {
$('#error').append('Please enter a value into the input');
}
}
});
This is a simple way of doing form validation, just tailor the example to your needs.
EDIT
If you want it to work in your example it would be better to have a div with the id of error and append p tags with the corresponding error values.
Happy coding :)