Develop Reference

jQuery toggle text change and hide elements

Trying to create a simple function where a user clicks a button, it shows a form and changes the text on the button. When they click it again, the form hides and button text changes back to what it was.
Here is what I have so far:
$('a.subscribe').click(function() {
var link = $(this);
$('.intro_cta form').toggle(function(){
if ($(this).is(':visible')) {
$('a.enter').css('display','none');
link.text('CLOSE');
} else {
link.text('SUBSCRIBE');
$('a.enter').css('display','block');
}
});
});
And the HTML markup:
SUBSCRIBE
<form class="subscribe_form">
<input type="text" placeholder="EMAIL"/>
<input type="submit" value="JOIN" />
</form>
ENTER
When the user clicks the SUBSCRIBE button, it should show the form and hide the ENTER BUTTON and change the text on the subscribe button to "CLOSE". The opposite should happen when the button is pressed again.
This does kind of work, however the toggle makes the form slide in - I just want it to show or hide.

you could use
.fadeToggle()
for show/hide without that slide effect.
See here for documentation

Check this simple code without toggle.
var check=false;
$("form").hide();
$("a.enter").hide();
$('a.subscribe').click(function() {
if(check==false){
check=true;
$(this).text('CLOSE');
$("form").show();
$("a.enter").show();
}else{
check=false;
$(this).text('SUBSCRIBE');
$("form").hide();
$("a.enter").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
SUBSCRIBE
<form class="subscribe_form">
<input type="text" placeholder="EMAIL"/>
<input type="submit" value="JOIN" />
</form>
ENTER

Popup box doesn't return a value when click ok

Im working with Asp .net MVC3.I'm using text box in viewpage when focusing on a text box popup window will open which contains a textarea and ok button.when click ok populated in viewpage textbox and popup page has to be hided.im using following code,
<input type="text" id ="Comments" class="Comments" value= "value"/>
<div id="popup">
<input type="text" id="content" style="width:243px;height:150px" maxlength="250" cols="70" rows="50"></input>
<input id="popupok" type="Button" value="Ok" />
<input id="popupclose" type="Button" value="Close"/>
</div>
and following is the Jquery,
$(function () {
$('.Comments').focus(function(){
$('#popup').show("slow");
});
$('#popupclose').click(function () {
$('#popup').hide("slow");
});
$('#popupok').click(function () {
var thought = $("#content").val();
$(".Comments").Val()=thought;
$('#popup').hide("slow");
});
});
Im not getting the Content value on the thought variable when click ok.what is wrong in thie above code.some one please help on this

Try this,
$('#popupok').click(function () {
var thought = $("#content").val();
$(".Comments").val(thought); // val function need an argument to set value
$('#popup').hide("slow");
});
Live Demo

Using Jquery to hide/unhide the textbox if button is clicked

I have input button , what I want is if a user clicks on the button then textbox should appear.
Below is the code which is not working :
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" />
$("#driver").click(function() {
$('#text').show();
}
});
Also the textbox should not be visible initially

You can use toggle instead;
$('#text').toggle();
With no parameters, the .toggle() method simply toggles the visibility of elements

try this:
$(document).ready(function(){
$("#driver").click(function(){
$("#text").slideToggle("slow");
});
});

Here's an example using toggle:
http://jsfiddle.net/x5qYz/

<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" style="display:none;" />
$("#driver").click(function() {
$('#text').css('display', 'block');
});

$(function()
{
// Initially hide the text box
$("#text").hide();
$("#driver").click(function()
{
$("#text").toggle();
return false; // We don't want to submit anything here!
});
});

Try this:
<script type="text/javascript">
jQuery(function ($) {
$('#driver').click(function (event) {
event.preventDefault(); // prevent the form from submitting
$('#text').show();
});
});
</script>
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" />

Make the textbox hidden when the page loads initially like this
Code:
$(document).ready(function () {
$('#text').hidden();
});
Then your should work the way you want.

Javascript Logic Problem

I know only what I need but I do not know how to get that done.
This is the logic of the code, I really hope some of you has the solution.
How can I create in javascript or jQuery a function that will do the following?
If that checkbox is selected, when the button is clicked redirect the user to another page by passing the value of the textarea in the URL.
So that is the logic.
We have three elements.
1)The checkbox
2)The input type button
3) The textarea.
The checkbox is selected, the user clicks on the button and the user goes to another page , and the URL will include the value found in the textarea.
i.e.
http://mydomainname/page.php?ValueThatWasinTextArea=Hello World
Can you help me.
I think it is something simple for a javascript coder.
Thank you so much

$(function(){
$(':button').click(function(){
if($('input[type="checkbox"]').is(":checked")){
window.location.href = "http://mydomainname/page.php?ValueThatWasinTextArea="+ $('textarea').val();
}
});
});
**Of course if there's more than these three elements on the page, you're going to want some more specific selectors

You could subscribe to the submit event of the form and inside test if the checkbox was checked and if yes use window.location.href to redirect to the desired url:
$('#id_of_the_form').submit(function() {
var value = encodeURIComponent($('#id_of_textarea').val());
if ($('#id_of_checkbox').is(':checked')) {
window.location.href = '/page.php?ValueThatWasinTextArea=' + value;
return false;
}
});
If the button is not a submit button you can subscribe for the click event of this button and perform the same logic.

Might be some syntax problem because I code this on top of my head
<input id="myCheckbox" type="checkbox" />
<button id="myButton" onClick="buttonClick" />
<input id="myTextArea" type="textarea" />
<script>
function buttonClick()
{
var checkBox = document.getElementById('myCheckbox');
var textArea = document.getElementById('myTextArea');
if(checkBox.checked)
{
window.location = 'http://mydomainname/page.php?ValueThatWasinTextArea=' + textArea.value;
}
}
</script>

$(document).ready(function() {
$('#btnSubmit').click(function() {
if($('#chkBox').is(':checked')) {
window.location = '/page.php?passedValue=' + $('#txtField').val();
}
});
};
...
<form>
<p>
<input type="checkbox" id="chkBox"> Checkbox</input>
</p>
<p>
<input type="text" id="txtField" value="" />
</p>
<p>
<input type="submit" id="btnSubmit" value="Submit" />
</p>
</form>

input text change onclick button value

Actually i want to create a page switcher, all i need for this is an input with type text where will be entered the number of the page, and i have the second input with type button and onclick value:
<input type="text" value="#number of the page#" />
<input type="button" onclick="_go_page_('cf_pages_form_name1','#number of the page#');" />
I cant figure it out how to take this #number of the page# and put it in onclick dynamically using javascript... please smb help!

<input type="text" id="txtPageNumber" value="2" />
<input type="button" id="btn" value="click" onclick="_go_page_('cf_pages_form_name1','#number of the page#');" />
$(document).ready(function(){
$("#btn").click(function(){
var $val = $("#txtPageNumber").val();
alert($val);
_go_page_('cf_pages_form_name1',$val);
});
});
});

Assuming number is the id of the text field.
You can get the value of the text field like this:
$('#number').val();
And pass that is the onclick event

You can use an ID on the page selector input to get the value.
function goToPage(pageNumber) {
// go to pageNumber
}
<input type="text" id="pageSelector" value="#number of the page#" />
<input type="button" onclick="goToPage($('#pageSelector').val())" />
You've tagged this with jQuery so I'm assuming you're using jQuery.

lets your input type is like this
then in jquery try something like this...
$('#pageNo').keyup(function(){
pageNo = $(this).val()
}
then pass this to your button onclick function

i will answer in "very easy to understand" without jquery:
you have to get the value of the first inputfield. this should your function do. but first the inputfield needs an id(f.g. 'number').
code in function:
var pagenumber = document.getElementById('number').value;
then you have to put the number into the url (document.href).