I have the following jQuery where I attempt to use .click() to count the symbols in a text input. Clicking on the button does not do anything.
Please help, thanks.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input type="text"id="id1"></input></div><br/><br/>
<button onclick="#"id="id2"> Count Symbols</button>
<p id="id1"></p>
<script>
$( document.#id1 )
.click(function() {
$( document.#id1 ).append( $( "#id2" ) );
var n = $( "#id2" ).length;
$( ).text( "There are " + n + " symbols.");
})
</script>
</body>
</html>
You can do it like this:
$(document).ready(function(){
$('#id2' ).click(function() {
var len = $('#id1').val().length;
$('#id3').text('There are ' +len+ ' symbols');
});
}); //END document.ready
jsFiddle Demo
Revised HTML:
<input type="text" id="id1" />
<br/><br/>
<button id="id2"> Count Symbols</button>
<p id="id3"></p>
Related
In angular 7 i have created a dummy page , http://localhost:4200/auth/register.
Here i need to display that page http://localhost:4200/auth/register in different domain using jquery,either using load() or other possible methods.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery load() Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$( "#box" ).load( "http://localhost:4200/auth/register", function( response, status, xhr ) {
if ( status == "error" ) {
var msg = "Sorry but there was an error: ";
$( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
}
});
});
});
</script>
</head>
<body>
<div id="box">
<h2>Click button to load new content inside DIV box</h2>
</div>
<button type="button">Load Content</button>
</body>
</html>
you can use HTML Tag with
DomSanitizer
I want to trigger click on an icon(image) with specific class/id using onclick (or using any other way) of another button. Please see image for reference. Clicking "1" should trigger "2". Currently I am calling a javascript function "launchTopWM" which use following code to trigger click:
$(".custom_toggle_menu_default").trigger("click");
But i am wondering if i can call this code or perform this fucntionality using its click etc, something like href='javascript:$(".custom_toggle_menu_default").trigger("click");'
Following is the Code:
HTML 1:
<img class="custom_toggle_menu_default" src="cc/tt/uu/images/launchTopWM.png">
HTML 2:
<a id="tsp" class="sp" href="launchTopWM()">CNw</a>
Give an id to the element and show the second anchor through pure javascript.
<!DOCTPE html>
<html>
<head>
<title> Button style </title>
<style>
</style>
</head>
<body>
<a href="javascript:void(0)" onclick="getElementById('button').click()" > click me </a>
<button id="button"> Buton </button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$('#button').click(function(){
alert('Buttons has been clicked');
});
</script>
</body>
</html>
Trigger example, Hope it will give you the idea
<html lang="en">
<head>
<meta charset="utf-8">
<title>Triggger</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="tiggerCall">Trigger Focus</button>
<input type="text" placeholder="Onclick Call Focus" value=''>
<script>
$( "#tiggerCall" ).click(function() {
$( "input" ).trigger( "focus" );
});
$( "input" ).focus(function() {
$( "<span>Text box clicked</span>" ).appendTo( "body" ).fadeOut( 1000 );
});
</script>
</body>
</html>
I've tried adding multiple buttons, when i click on one button, the rest get clicked too.
How can i have each button toggles individually?
Also, how can i have them all hidden by default on page load?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideToggle demo</title>
<style>
p {
width: 400px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Toggle 1</button>
<p>
Text 1
</p>
<button>Toggle 2</button>
<p>
Text 2
</p>
<script>
$( "button" ).click(function() {
$( "p" ).slideToggle( "slow" );
});
</script>
</body>
</html>
EDIT:
Thanks everyone, every code worked!
There's only one last thing, how can i have multiple buttons with its unique paragraph within a main button?
example:
[MainButton.A] <--(Shows additional buttons when clicked)
[ButtonA.1] <--(Shows it's own paragraph when clicked, same as the rest)
[ButtonA.2]
[MainButton.B]
[ButtonB.1]
[ButtonB.2]
The problem is not that all of the buttons are being clicked; it's that all of the paragraph elements are being manipulated every time a button is clicked.
#ArunPJohny's comment has the solution:
$("button").click(function() {
$(this).next("p").slideToggle( "slow" );
});
What this does is select the next <p> element rather than all of them. Note the .next() selector here.
Try like this...
<script>
$(document).ready(function(){
$("p").hide();//hides all <p> initially shows only button clicked..
$( "button" ).click(function() {
$(this).next( "p" ).slideToggle( "slow" );
});
});
</script>
Fiddle https://jsfiddle.net/ohes689y/
Here is your Answer
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideToggle demo</title>
<style>
p {
width: 400px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button class="btncls">Toggle 1</button>
<p>
Text 1
</p>
<button class="btncls">Toggle 2</button>
<p>
Text 2
</p>
<script>
$(".btncls").click(function() {
$(this).next().slideToggle( "slow" );
});
</script>
</body>
</html>
I am trying to get a single form value from a posted form using HTML and Jquery could anyone tell me what I am doing wrong with the following script.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<form id="target" action="1.html">
<input type="text" value="Hello world">
<input type="submit" value="Go">
</form>
<script>
$( "#target" ).submit(function( event ) {
var input = $("#target :input[text]");
alert( input);
console.log(input)
event.preventDefault();
});
</script>";
</body>
</html>
I can only seem to return an object but I cant display this using alert or the console.log feature.
var input = $("#target :input[text]");
should be:
var input = $("#target input[type='text']").val();
Wrap your submit event in ready function
$(document).ready(function(){
$( "#target" ).submit(function( event ) {
var input = $("#target input[text]").val();
alert( input);
console.log(input)
event.preventDefault();
});
});
Instead of PHP, I want to use jQuery to get user input and pass in a function and update a "div".
My HTML(includes scripts) code is:
<head>
<title>Mobile Locale test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="Mobile Locale this is!" />
<script>
var x;
$(document).ready(function()
{
x = $("#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
});
console.log(x);
</script>
</head>
<body>
<form>
<input type="text" id="q" placeholder="Your name please...">
<button id="submit">Submit!</button>
<div id="test">This should change...</div>
</form>
</body>
What I want:
I want to get input from user and assign that input to x.
Then I want to complete a string and pass x in that string.
Then I want to write that complete sentence in div id="test".
I am stumbling this for more than 6 hours but got no success. Tried numerous codes but failed.
Referred w3schools jQuery form example but they are using form method="abcd.asp".
Thanks in advance...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var x;
$(document).ready(function()
{
var x = $("input#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
});
function CallSubmit()
{
var x = $("input#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
return false;
}
</script>
</head>
<body>
<form>
<input type="text" id="q" placeholder="Your name please...">
<button id="submit" onclick="return CallSubmit();">Submit!</button>
<div id="test">This should change...</div>
</form>
</body>
</html>
Your script is executed on page load, when the input is empty - call the code on an event, like keyup
$(document).ready(function(){
$("#q").keyup(function() {
var name = "Hello " + this.value + ". Welcome to this site";
$("#test").text(name);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="q" placeholder="Your name please...">
<button id="submit">Submit!</button>
<div id="test">This should change...</div>
You could get the name in the click event of the button.
Working example : http://jsfiddle.net/jjjoeupp/
$('#submit').on('click', function()
{
x = $("#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
});
Hope it helps!!!
You can bind the focusoutevent with the input to dynamically change the div. Another approach would be to update on each keypress.
$(document).ready(function () {
$('#q').keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
if ($(this).val() != '') {
var x = $(this).val();
var name = "Your string " + x;
}
$('#test').text(name);
}
});
});
fiddle : http://jsfiddle.net/86evwkbx/