Develop Reference

JQuery.val( ) not working

I am trying to simply get the value of an input, and attach it to a 'zipcode' variable. However whenever I try to console the value, it just comes up as blank.
$(document).ready(function(){
var zipcode = $('.zipcode-search').val()
$('#button').on('click', function(){
console.log(zipcode)
})
HTML
<div class="col-sm-12">
<div class="text-center">
<input class="text-center zipcode-search" type="text" name="zipcode-search" placeholder="Enter your city"/>
<button id="button" class="btn btn-success">
Submit
</button>
I am doing this on codepen.io. I'm not sure if that would have anything to do with it but I thought I might add that. Is there any other way besides .val() to get the value of an element ?

.zipcode-search, doesn't have a value when the page loads, and your variable's value is only assigned once, when the page loads.
If you want to update your variable whenever your button is clicked, you'll need to move your call to $.val, into your click event handler.
Here's an example:
$(document).ready(function() {
var zipcode = null;
$('#button').on('click', function() {
zipcode = $(".zipcode-search").val();
console.log(zipcode);
});
});
Note how I assign zipcode a value of null when the page loads, I did this because the chances of .zipcode-search having a value when the page loads, are slim-to-none without more advanced logic.
Edit: Examples provided in other answers, have been redeclaring the zipcode variable every time your button's click event is fired. This is not needed.
Declaring/redeclaring the variable every time the click event is fired, makes that variable exclusive to the scope of your callback function for the click event, which will prevent you from being able to reuse the variable outside of that callback.

I'm assuming you want to update zipcode everytime the button is clicked. You should move that logic to be inside of your event handler.
$(document).ready(function(){
$('#button').on('click', function(){
var zipcode = $('.zipcode-search').val()
console.log(zipcode)
})

You should get the value inside the onClick function:
$(document).ready(function(){
$('#button').on('click', function(){
var zipcode = $('.zipcode-search').val()
console.log(zipcode)
});
});

form action call button

In a form, i have a button and an image... when i click on image, form action is called, that work... but when i click on the button action is not called.
Is there a specific thing to do for a button?
js
$('#formUser').submit(function() {
$(this).attr("action", "/secure/downloaduserinfo/" + reportName);
});
$('#formUser').submit(function() {
$(this).attr("action", "/secure/deleteuser/" + reportName);
});
web part
<button type="button" id="deleteUserButton${statusReport.count}"></button>
<input id="downloadUserButton${statusReport.count}" type="image"/>

type="button" elements are not submit buttons, they exist solely to run client side code.
If you want to submit the form, use type="submit" (or don't specify a type attribute at all, submit is the default).
That said, I'd avoid the dependancy on JavaScript. Give the buttons and name and a value and use that on the server to determine if you want to download or delete.

The input of type "image" is similar to "submit", it does submit your form, that's why your submit handler is working. While the input of type "button" does not submit the form, it just looks like a button.

You have 2 submit listeners for the same element so every time the #formUser is submitted it uses the first submit listener it finds.
You can use the onclick listener and tie it to the specific element being clicked.
I'm not sure how the templating system it looks like you're using is tied in but I'd use a class instead of the id.
<button type="button" class="delete-user-button" id="deleteUserButton99">Delete</button>
<img src="http://placehold.it/200x200" class="download-user-button" id="downloadUserButton99"/>
<script>
$('.delete-user-button').click(function() {
// store object that was clicked
var obj = $(this);
// set that objects action attribute
obj.attr("action", "/secure/deleteuser/" + obj.attr('id'));
// show the action attribute's value
alert(obj.attr('action'));
});
$('.download-user-button').click(function() {
// store object that was clicked
var obj = $(this);
// set that objects action attribute
obj.attr("action", "/secure/downloaduserinfo/" + obj.attr('id'));
// show the action attribute's value
alert(obj.attr('action'));
});
</script>
Here's a fiddle that demonstrates manipulating the object by the click listener: http://jsfiddle.net/chapmanc/HHfQT/2/

Getting the name of a hyperlink when it's clicked using jQuery

Is there a way to get the hyperlink name when you click on it using jQuery? I have the following code, I need some jQuery direction:
<a href="#" id="imageClick" name='<%# Eval("fileName1") %>'><asp:Image ID="myImage" name='<%# Eval("fileName1") %>' runat="server" ImageUrl='<%#"~/Image/" + Eval("fileName") %>' /></a>
Basically I would like to return the value of whatever <%# Eval("fileName1") %> is.
Thanks.
EDIT: To be more clear, I have a popup page which contains a listView which that has images and radio buttons. The requirement is if you click on the radio button, it should get the value of that specific choice and close the popup. I'm also passing a value back to the parent window. So this is what I have:
$(document).ready(function () {
$("#form1").change(function () {
var val = "";
if ($('input:radio[name=myRadio]:checked').val()) {
val = $('input:radio[name=myRadio]:checked').val();
}
if (val != "") {
$(window.opener.document).find('#txtLogos').val(val);
// Close the window
window.close();
}
});
});
This works fine when I click on one of the radio buttons. But now they added another requirement that if they click on the images they want the same result (Obviously without disrupting the functionality that the radio button has).

You can just access it using this.name inside your click handler. this here is the Dom element (Don't need jquery to retrieve the element attribute value), so just directly access the name attribute of the element.
$('#imageClick').click(function(){
alert(this.name);
});
Edit
Form change will not be triggered if you click on an image; unlike input, select, textarea etc. So you need to trigger form change manually on image click event (to simulate a radio button click triggering the form change event).
Bind a click handler to your images to add class:
$('yourimageselector').click(function(){
$(this).toggleClass('checkedImage'); // Add a class on first click and again clicked on it remove the class to say it is turned off. If you dont want a turn off functionality simply say :
//$(this).addClass('checkedImage'); //or if this is the only class then this.className = 'checkedImage' classList is not yet supported in all browsers.
$('yourform').change(); //as this is image it wont trigger form change event so you need to manually trigger form's change event (only for input, select, textarea etc form change will be triggered).
});
And in your form event:
$("#form1").change(function () {
var imgNames= $('.checkedImage')
.map(function(){return this.name; })
.get(); // Will get you all the image names in an array.
//if it is just one image then simply do if($('.checkedImage').length > 0) $('.checkedImage')[0].name,
//Code follows
});
Fiddle

this can also work in the event handler of your click :
document.getElementById("new-answer-activity").name

Change element by click like PHPAdmin

I am beginner of js. I want to make a editor like PHPAdmin. When click its table, the field will change to text-area. When click some where else outside of the text-area, it will change back to the filed and execute the sql.
Following is what I suppose to write with jQuery, I am totally not understand how should I code it further, please advice.
$('#editor #gird_edit').bind({
click: function() { //When Click
var content = $(this).text(); // read what is in the filed
$("#gird_edit").text('<textarea>'+a+'</textarea>'); // This is not work, will only add html code,not change to text-area
},
/* ??? */: function() { //Outside click of the text-area
var content = $(this).text(); // read what is in the text-area
$("#gird_edit").text(????); // change back to the filed
}
})
Html
<div id='editor'>
<div id='gird_edit'>hallo world</div>
<div id='gird_edit'>hallo world 2</div>
<div id='gird_edit'>hallo world 3</div>
</div>
I only have 3 reputations, just joined yesterday...I am sorry for that I cannot vote you since it requires 15 reputations. However, I will very appreciate you help!!

If you want to detect clicks outside of an element, just detect them on the whole page, and throw out any that come from inside the element. In other words:
$('body').on('click', : function(e) { //Outside click of the text-area
if ($(this).parents().is('#gird_edit')) return false;
var content = $('textarea').text(); // read what is in the text-area
$("#gird_edit").text(????); // change back to the filed
});
However, it sounds like what you're really looking for is a "blur" handler, which will trigger whenever someone was inside a textarea and just left it; you can make one of those the same basic way you made your click handler:
$('#gird_edit textarea').bind({
blur: function() {
// do the reverse of the click handler
}

jQuery Tools Overlay - Two buttons with different close conditions

I have the following jQuery Tools overlay:
<div id='editDescriptiontOverlay' class='overlay'>
<input type='text' class='description'/>
<button class='save'>Save</button>
<button class='close'>Cancel</button>
</div>
Background info: The HTML for this overlay is static. I have a list of items each having their own Edit link. When a given Edit link is clicked, the overlay is generated by calling: $('a[rel=#editDescriptionOverlay]').overlay( { ... } ); and the input is populated with the respective text.
The Save button needs to validate the text in the input element and close the overlay if and only if the validation is successful. Otherwise, the overlay must remain open. The Cancel button simply closes the overlay without validation.
The validation logic has been independently verified to work.
I've tried setting the onBeforeClose event during overlay generation as a means of validation. Taking this approach, both the Save and Cancel buttons needed the same class .close. Unfortunately, the condition applies to all .close elements in the overlay so even the Cancel button was validating.
I've also tried binding a click event to the Save button immediately after generating the overlay, like so:
$('.save', $('#editDescriptionOverlay'))
.unbind('click')
.bind('click', function() {
if (validateText) {
console.log("Validation passed.");
$('a[rel=#editDescriptionOverlay]').overlay().close();
}
else {
console.log("Validation failed.");
}
});
The console.log's confirm that the validation is working, but the overlay doesn't close.
Any insight is appreciated, thanks.

For jquery widgets, public methods should be called as follows:
$('a[rel=#editDescriptionOverlay]').overlay("close");
wherein close is the method name that you wish to call.
If a method accepts parameters, then, these should be added as parameters right after the method name.
Updated:
I am sorry. I just had time to check what jQuery Overlay Tools is and I am mistaken. This is not similar to any jQuery widget, hence, my comment above will also not work for this case. I tried your code above and it worked. The overlay was closed. But, when I tried it with multiple <a rel="#editDescriptionOverlay">, which I think is what you did. It did not work. My suggestion would be to use just one <a rel="#editDescriptionOverlay"> and use a dummy anchor element for the Edit link, which when clicked would trigger a click to <a rel="#editDescriptionOverlay">. You can do something like this:
<script type="text/javascript">
$(document).bind("ready", function(e){
$("a[rel]").overlay();
$('.save', $('#editDescriptionOverlay')).unbind("click").bind("click", function(){
if (validationValue){
$("a[rel=#editDescriptionOverlay]").overlay().close();
}
});
});
function clickThis(){
$("a[rel=#editDescriptionOverlay]").trigger('click');
return false;
}
</script>
Edit1
Edit2
<a rel="#editDescriptionOverlay">Dummy</a>
<div id='editDescriptionOverlay' class='overlay'>
<input type='text' class='description'/>
<button class='save'>Save</button>
<button class='close'>Cancel</button>
</div>

I'd prefer binding an event to the save button (the second one you mentioned). Actually your code looks fine, except that you probably don't need to bind the event to $('#editDescriptionOverlay') and you have typo in your html markup above (<div id='editDescriptiontOverlay' should be <div id='editDescriptionOverlay').
See here for an example.