Develop Reference

get value with data attribute and display on other div

I would like to show the value "1,000 below" found inside the button on this div using jquery
<div class="showvaluehere">here</div>
<button class="button" data-filter=".1000">1,000 below</button>
I got this so far but not working, it shows the class ".1000"
var syo = $this.attr('data-filter');
$(this).parent().find('.showvaluehere').html(syo);
for clarity, I want the value of the button to be on the
so that it shows like this;
<div class="showvaluehere">1,000 below</div>
Thanks

You are getting value of data-filter attribute, which is .1000
Try this
$('.button').click(function() {
var syo = $(this).text();
$('.showvaluehere').html(syo);
})

Your code is confusing as you're referencing a lot of elements and attributes which seem unrelated to the HTML you've shown and the problem you describe.
That said, you can do what you require by simply setting the text() of the .showvaluehere element to match that of it's neighbouring button, like this:
$('.showvaluehere').text(function() {
return $(this).next('button').text();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showvaluehere">here</div>
<button class="button" data-filter=".1000">1,000 below</button>

$('.button').click(function() {
$('.showvaluehere').text($(this).text())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showvaluehere">here</div>
<button class="button" data-filter=".1000">1,000 below</button>

Retrieve value from input next to a button using THIS selector

I ran into this problem, I have two siblings, an input and a button which calls a function to retrieve the value in the input, but it keeps telling me that Value is Undefined...
Here's the "form":
<li>
<input id="mem3" value="TestU4" disabled="">
<button id="del3" class="delmem" onclick="deleteBandMember();">remove</button>
</li>
Here's jQuery Code:
function deleteBandMember() {
var mmbr = $(this).prev("input").val(); //<-RETURNS UNDEFINED
}
I need to use This selector for there are too many dynamically-created inputs...
Thanks!

Pass this as parameter in deleteBandMember function as shown :-
HTML :-
<li>
<input id="mem3" value="TestU4" disabled="">
<button id="del3" class="delmem" onclick="deleteBandMember(this);">remove</button>
</li>
jQuery :-
function deleteBandMember(elem){
var mmbr = $(elem).prev("input").val();
}
Demo

Directly using jQuery, you can attach a click handler:
HTML:
<li>
<input id="mem3" value="TestU4" disabled="">
<button id="del3" class="delmem">remove</button>
</li>
JS:
$('#del3').click(function(){
var mmbr = $(this).prev("input").val();
})

While Kartikeya is correct. I would suggest not using "onClick" attributes, its no longer a good practise to do so. Plus you are using jQuery so you can take advantage of that. So your code would look like:
$('#del3').click( function() {
var mmbr = $(elem).prev("input").val();
// do more stuff.
})

Just as an aside since the question has a good answer, you might want to consider event delegation if you have a large number of inputs and buttons in your form. jQuery makes this very easy. Instead of attaching an event to each button, attach one event to an element that contains those elements (like <form>):
HTML
<form id="form">
...
<li>
<input id="mem3" value="TestU4" disabled=""></input>
<button id="del3" class="delmem">remove</button>
</li>
<li>
<input id="mem34" value="TestU44" disabled=""></input>
<button id="del34" class="delmem">remove</button>
</li>
...
</form>
JQUERY
$('#form').on('click', '.delmem', function() { deleteBandMember(this); });
DEMO

Change between menu/buttons

So I've got this menu where you can choose the class in my game.
<div class="text">
<div id="story">Choose a class.</div>
<input type="button" class="knight" value="Knight"/>
<input type="button" class="mage" value="Mage"/>
<input type="button" class="archer" value="Archer"/>
</div>
How do I use jquery so that when I press any of these buttons, I'll get a new set of buttons which you can press to choose your race?
I've tried .replaceWith() but jquery won't work on the new buttons.
It will take the css.
function classChange() {
var Class = $(this).val();
$('#statsImg').text("class: " + Class);
$('.knight').replaceWith('<input type="button" class="elf value="Elf"/>');
$('.mage').replaceWith('<input type="button" class="human" value="Human"/>');
$('.archer').replaceWith('<input type="button" class="Dwarf" value="Dwarf"/>');
$('.menu').show();
};
$('.knight').click(classChange);
$('.mage').click(classChange);
$('.archer').click(classChange);
Button elf won't do anything with the next part:
$('.elf').on('click', '.elf',function () {
$('#statsImg').text('test');
});
Works with button knight/mage/archer.
So what I'd like to know is how do I get rid of this menu and get a new menu once I press a button?
Sorry if I forgot to add something that you need to know. I'll add it if you need it.

You have to bind the events to the buttons after adding them. Try with -
$('.knight').replaceWith('<input type="button" class="elf value="Elf"/>').bind('click', function() {
$('#statsImg').text('test');
});

How to get the text "Submit" from below code

How to get the text "Submit" from below code. The div dosent have any id
<div class="modal-footer" style="display: block;">
<button class="psc-cancel btn-gray" data-target="#psc-service-form-modal" data- dismiss="modal">Cancel</button>
<button class="psc-submit btn" data-target="#psc-service-form-modal">Submit</button>
</div>

Try this:
var button = document.getElementsByClassName('psc-submit btn')[0];
if(button.innerHTML == "Submit") {
alert('button contains "Submit"');
}

if you want pure javascript, try this
var submittxt = document.getElementsByTagName('div')[0].getElementsByTagName('button')[1].textContent;
alert(submittxt);
http://jsfiddle.net/ZQVR8/

As the button doesn't have an id or name attribute, there is no "definite" way to get exactly that button. If it's the only one with that specific name attribute, or the only one with the psc-submit class, you could query it like this, for example:
var btn = document.querySelector('.modal-footer .psc-submit');

How to Input and Output Javascript?

Ok Guys I need help in this case and please help if you can :(
I have following div created with text-type input
<div class="footer">
<div id="footerInner">
<form>
<input type="text" name="enter" value="" id="input"/>
</form>
</div>
</div>
I have also created above .footer .mainBody
<div class="mainBody">
<script src="Scripts/main.js">
var h = document.getElementById('input').value;
document.write(h);
</script>
</div>
And I have included Javascript in it
I want to work it this way: when I input text in input tag to appear in .mainBody div.
And also do I need button to submit input or it can be done with key press for Ex. "Enter"?
Guys onkeyup="writeThis()" isn't working it just reloads page :(

To execute some events on keyevents, you need to write the onkeyup or onkeydown or any other key function in the element. And in that attribute you can add the function's name which would respond to the event. I will write my function's name as writethis() which will write the value to the div.
You then need to use this:
<input type="text" id="input" onkeyup="writethis()" />
And the function would be:
function writethis() { // the function
var h = document.getElementById('input').value; // the value
document.getElementsByClassName('mainBody').innerHTML = h; // the input
}
This way, you will get the input written on a keypress!
You can also try and use some keyevents such as:
if(event.keyCode == 13) { // enter key event
/* key code for enter is 13
* do what so ever you want */
}

Ok, try this as your JS script content in html head section:
function writeOnBody() {
var inputText = document.getElementById('input').value;
var mainBodyEl = document.getElementById('mainBody');
mainBodyEl.innerHTML = inputText;
}
your HTML code:
<div class="footer">
<div id="footerInner">
<form>
<input type="text" name="enter" value="" id="input" onkeyup="writeOnBody()" />
</form>
</div>
</div>
<div id='mainBody' class="mainBody"></div>
I hope it helps. JSFiddle sample: http://jsfiddle.net/amontellano/JAF89/

var h = document.getElementById('input').value; // the value
document.getElementsByClassName('mainBody').innerHTML = h;
avoid using getElementsByClassName instead give you div a id and use getElementById..
rest is in my opinion the best solution..
and yes you can also you a button also all you have to do is call you function on onclick event like this
<button onclick="functionZ()">click me</button>
and define that functionZ in your java script
What we are doing here is..
Adding a button and a click event upon it..such that when that button will be clicked it will call a function for us..
Make sure to add your scripts in lasts part of your page as page loads from top to bottom so its good practice to add scripts just near to end of body