Develop Reference

How to get the value of an html attribute

I have the following jquery code :
$j = jQuery.noConflict();
function displaySelected(elem){
var value = $j(elem).find(".columnToHide").html();
console.log(value);
}
The out put of this is : <div class="hiddenId" data="a05o000000V88VFAAZ"></div>.
However, I would like to only get the value in the data tag i.e. the id. I know you can do something like this..
.html("<div class='hiddenId' data='a05o000000V88VAAAZ'></div>")
but this doesn't strip the tags. Any help please

Use jquery's .attr() method. So: $j(elem).find(".columnToHide").attr("data")

Use jQuery's data method to retrieve the value. (Your data attribute should probably take the form of data-name if you have control over that.)

This line will drill down to the content you want:
$(value).attr('data')
To put in context of the rest of your script:
$j = jQuery.noConflict();
function displaySelected(elem){
var value = $j(elem).find(".columnToHide").html();
console.log($(value).attr('data')); // a05o000000V88VAAAZ
}

$j = jQuery.noConflict();
function displaySelected(elem) {
var value = $j(elem).find(".columnToHide").attr("data");
console.log(value);
}

How to set what user types in textarea as a javascript variable?

Hi so I have a HTML textarea. I want what the user types in it to be displayed on the screen and also stored in a variable. I have the displaying part but I can't figure out how to store it as a a variable.
The html
<textarea id="input" maxlength="50" name="Text" placeholder="Max. 50 characters"></textarea>
The javascript
$('#input').keyup(function() {
$('#text').html($(this).val());
var yourText = this.val();
});

Firstly, you should use change or input instead of keyup. Not everyone uses a keyboard!
Second, only jQuery objects have a val() method. Using this you are referring to the <textarea> element which does not:
$('#input').on("input", function() {
var yourText = $(this).val(); // Only jQuery objects have a .val()
$('#text').html(yourText); // Pass your variable in here
});
jsFiddle Demo

$('#input').keyup(function() {
$('#text').html($(this).val());
var yourText = this.val();
});
Should be
$('#input').keyup(function() {
$('#input').html($(this).val());
var yourText = $(this).val();
});
You gave #text as an id, but the id name of the input is #input

You forget the javascript closure $ on this. Use the code below
<textarea id="input" maxlength="50" name="Text" placeholder="Max. 50 characters"></textarea>
<div id="text1"></div>
<script>
$('#input').keyup(function() {
$('#text').html($(this).val());
var yourText = $(this).val();
$("#text1").html(yourText);
});
</script>
JSFIDDLE:http://jsfiddle.net/7tfs93o2/
Hope this helps you

You are doing var yourText = this.val(); but since you are using JQuery there, .val() is a JQuery method, this should also be wrapped with the JQuery layer like this:
var yourText = $(this).val();

jquery post and redirect onclick

I have this html code
<div>
<div><input id="wpsl-search-input1"/></div>
<div><a id="wpsl-search-button1" href="#" target="_self">submit</a></div>
</div>
And this jquery
<script>
$('#wpsl-search-button1').click(function() {
var url = '/pages/location-search/?';
$('#wpsl-search-input1').each(function() {
url += 'zip=' + $(this).val() + "&";
});
window.location.replace(url);
});
</script>
But for some reason it doesn't work. Any help ?

Let me try to explain to you what you did and what you need to do to make your code work in the way you intended.
<script>
$('#wpsl-search-button1') // jQuery method to retrieve an element with the ID "wpsl-search-button1"
.click(function() { // Attach a "click" listener to the element
var url = '/pages/location-search/?'; // Declare a variable with the name "url" containing a string "/pages/location-search/?"
$('#wpsl-search-input1') // retrieving the element with the id "wpsl-search-input1"
.each(function() { // looping over all elements found by the id selector (ID's are unique, so the query above should always return one jQuery element. No need for a loop here)
url += 'zip=' + $(this).val() + "&"; // append a "zip" parameter with the value of the found element (this is refering to the current element of the iteration -> the input)
});
window.location.replace(url); // replace the current resource with the one in the "url" variable
});
</script>
If you just want to redirect to a url based by the input value use this code:
<script>
$('#wpsl-search-button1').click(function() { // you dont need the .each, because you are selecting by id
var inputURL = $('#wpsl-search-input1').val();
window.location.href = `/pages/location-search/?zip=${inputURL}`; // Redirecting to the passed url (also working relative to the current URL)
return false; // Cheap way to call the "event.preventDefault()" method
});
</script>

Try executing it after the DOM has loaded, like this:
<script>
$(function() {
$('#wpsl-search-button1').click(function() {
var url = '/pages/location-search/?';
$('wpsl-search-input1').each(function() {
url += 'zip=' + $(this).val() + "&";
});
window.location.replace(url);
});
});
</script>

When selecting an element by id, you need a pound sign:
$('#wpsl-search-input1')

getting id of a input using id from another element using jquery

I'm trying to get the id of an input using jquery. What I do is I get the id of a button I click, then I concatenate the string to get the id of the element I want to have. But when I get the var picloc to show, it says undefined. How do I get the id of the hidden input?
$('.photo-frame').click(function (){
var id = this.id;
var picloc = $('#'+id+'_location').val();
$('#picture-selected').html(id);
});
<span class="photo-frame" id="<?php echo $filetitle2;?>">
</span>
<input id="<?php echo $filetitle2;?>_location" type="hidden">

If the hidden element is just the next of span in DOM then You can use following script.
$('.photo-frame').click(function (){
var hidden_element = $(this).next('input:hidden').val();
});

Try this:
$('.photo-frame').click(function (){
var id = $(this).attr('id');
var picloc = $('#'+id+'_location').val();
$('#picture-selected').html(id);
});

var id = this.id;
has some problems.
this refers to the document's itself. You should surround it with a $() in order to point the clicked element. And I do not know if [object].id is usable.
Change the line as the following.
var id = $(this).attr('id');

Are you sure to use the above block of codes inside the $(document).ready(function(){ ... }); or the page itself.

You can try this:
var currentId = $('#element').attr('id');
This will only work provided that you have a valid jQuery object $(this), eg:
var currentId = $(this).attr('id');

Select element from Jquery post return

I am trying to select an element from jquery post returning data. String is returning but when I try to select an element from returning html string, selection is always null. This is a userscript which is being loaded with greasemonkey.
refresh();
function refresh(___id,___action,___page){
$.post("http://www.example.com", {auction_id:___id,action:___action,page:___page}, function(bidpage){
var auction_id = $("#auction_id", bidpage).val();
console.log(auction_id);
});
This post returns this data
<html><head></head><body><input type="hidden" name="auction_id" id="auction_id" value="8583949"></body></html>
But auction_id is always null. Cant find any solution to that. Thank you for your helps.

This is because you get bidpage as string. You need to convert it to HTML first:
var auction_id = $("#auction_id", $( bidpage ) ).val();
As by jQuery API [context] should be DOM Element, Document, or jQuery.
COMMENT:
Seems like jQuery strips <html> and <body> elements so you need to use:
var auction_id = $( bidpage ).val();

you could try adding your post data to a div:
<div id="appendpostdatahere"></div>
function refresh(___id,___action,___page){
$.post("http://www.example.com", {auction_id:___id,action:___action,page:___page},
function(bidpage){
$('#appendpostdatahere').html(bidpage);
var auction_id = $('#auction_id).val();
console.log(auction_id);
});
}