What i want to do is that when i click on the button "1" it should display the number "1" in the textbox above it.
what is wrong with my jquery code?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JQuery Tutorial</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<input id="textbox" type="text" />
<div>
<input id="1" type="button" value="1" />
<input id="2" type="button" value="2" />
<input id="3" type="button" value="3" />
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<script type="text/javascript" src="js/ext.js"></script>
</body>
My jquery
$('#1').click(function)({
var txt = $('#textbox');
$('#1').html('txt');
});
Try this code
$('input[type="button"]').click(function() {
var txt = $(this).val();
$('#textbox').val(txt);
});
Will explain your problem with your jQuery code:
Line 1:
You registered with #1 button so this will be triggered on when button 1 is click, I made it generalised
Line 2:
You are getting value from textbox, whereas you are supposed to take value from button text.
Line 3:
You are assigning value in button, whereas you are supposed to assign to textbox and always use val() for input type of control and html() for other html container controls
The above were your errors explained.
Queries welcomed!
Fiddle demo
$(function(){
$('input[type="button"]').click(function(){
$('#textbox').val($(this).val());
});
});
You have to get the value using val() method. Also, you are passing variable txt as string to the html() function which is wrong. Try the below...
var txt = $('#textbox').val();
$('#input1').html(txt);
Try this
$('input[type="button"]').click(function() {
$('#textbox').val($(this).val());
});
You can try this one
$('div').on('click', 'input', function () {
$('#textbox').val(this.value);
});
Related
I wanted to modify something in my code and don't really know how to make this work... my code is kinda huge so I am going to explain what I want with an exemple :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/application.css">
</head>
<body>
<label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
<div id="button">OK</div>
<div id="nfa"></div>
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>
</body>
</html>
So this is my HTML code, so what I want to do is NOT execute these 3 scripts until the user enters a value in the text input and clicks on OK. That value will be used in the js files, so i have to get the value after I click OK.
Can someone explain how this has to work ?
EDIT : problem was with jQuery that was not executing on Electron, solution : http://ourcodeworld.com/articles/read/202/how-to-include-and-use-jquery-in-electron-framework
For starters I would suggest changing; <div id="button">OK</div> to <button id="button">OK</button>.
I would then suggest to put each of those scripts into functions instead, then you can use the 'onClick' event from the button attribute as follows;
<button id="button" onClick="s1Func();s2Func();s3Func();">OK</button>
A better way would be to have one function call 'init' or something appropriate that then calls the 3 scripts/functions and have your buttons onClick even call that one initialization function.
JSFiddle Example:
https://jsfiddle.net/JokerDan/h7htk9Lp/
I would recommend you to load the scripts dynamically after you click on the button. This can be done via jQuery: https://api.jquery.com/jquery.getscript/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/application.css">
<title>NFA2DFA</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
<div id="button" onclick="loadScripts();">OK</div>
<div id="nfa"></div>
<script>
function loadScripts() {
// Is the input empty?
var value = $("#reg_expr").val();
if (value.length != 0) {
// Loads and executes the scripts
console.log(value); // Displays the value of the input field
$.getScript("script1.js");
$.getScript("script2.js");
$.getScript("script3.js");
}
}
</script>
</body>
</html>
You can use a button tag instead of input tag. I suggest you to use onClick event like this:
<button type="button" onclick="yourFunction()">Click me</button>
When the users click the button yourFunction() is call.
The result is this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/application.css">
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>
</head>
<body>
<label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
<button type="button" onclick="yourFunction()">Click me</button>
</body>
</html>
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</head>
<body>
<input id="test" value="">
<input type="button" id="btn" value="Get">
</body>
</html>
And JS:
$('#btn').click(function(){
alert(document.documentElement.innerHTML);
});
http://jsbin.com/wuveresele/edit?html,js,output
I want to enter some value (for example, 123) into input field, click button and see "rendered" html code of the page in an alert popup.
What I see:
...
<input id="test" value="">
...
What I want to see:
...
<input id="test" value="123">
...
Is it possible using JS or JQuery?
Here's what I added to your JS
$('#btn').click(function(){
$("#test").attr("value",$("#test").val());
alert(document.documentElement.innerHTML);
});
What I'm essentially doing is using the Jquery attr() function.The first parameter refers to the attribute you want to manipulate and the second attribute is the value to be given.
Here is the working demo
Here is your solution:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var value = $("#test").val()
alert(value);
});
})
</script>
<input id="test" value="">
<input type="button" id="btn" value="Get">
How to display 2 digits the last phone number when I input phone number to first text field and display automatic to second text field with AJAX or JavaScript or jQuery ?.
I want to get script about that for my website like this video.
I've searched everywhere in Google Search about that, I only found this JavaScript.
But that is not solution. Please help me to resolve solution and what should I do.
Where I can get AJAX or JavaScript or jQuery like that or are there soluton in this forum ?
In the code you found, changing
$('#output').text($('#txt').val());
to
$('#output').text($('#txt').val().substr(-2));
would be what you need
or
$('#output').value($('#txt').val().substr(-2));
if the output is an <input type="text" > element
I've combined this script from http://jsbin.com/oleto5/5/edit?html,js,output and http://jsfiddle.net/AEMLoviji/tABDr/
But there is a little problem in code : $('#numbers').val($('#tt').val()+String.fromCharCode(event.keyCode));
If I remove +String.fromCharCode(event.keyCode)); and script be replaced to .substr(-2)); does not work.
If I use +String.fromCharCode(event.keyCode)); is not perfect when I remove digits.
Example :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>berkelilingkesemua.info</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" class="jsbin" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript" class="jsbin"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js" type="text/javascript" class="jsbin"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
$('#txt').keydown(function(){
setTimeout(function() {
$('#output').text($('#txt').val().substr(-2));
}, 50);
});
});
</script>
<input id="txt" type="text" />
<div id="output"></div>
<hr>
Second script is combined by me from first script becomes like below.
<hr />
<script type="text/javascript">
$(document).ready(function() {
$("#tt").keydown(function (event) {
setTimeout(function() {
}, 50);
{
$('#numbers').val($('#tt').val()+String.fromCharCode(event.keyCode));
}
});
});
</script>
<input type="text" id="tt" />
<input type="text" id="numbers" />
</body>
</html>
Are there solution about this script ?.
I have written the below mentioned javascript and have called on the button click event but somehow it doesn't work, please someone help.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
function f1()
{
var x=document.getElementById("txt1").innerHTML
if(x==1)
{
alert("hello");
}
}
</script>
<body>
<form id="form1">
<input type="text" id="txt1"/><br/>
<input type="button" id="btn1" value="submit" onclick="f1()"/>
</form>
</body>
</html>
You're trying to grab innerHTML from an input field when you should be grabbing the value otherwise it'll always be undefined:
Change:
var x = document.getElementById("txt1").innerHTML;
to:
var x = document.getElementById("txt1").value;
JSFiddle Example
http://jsfiddle.net/moogs/dNWNP/1/
It should not be .innerHTML, but .value.
You should use value instead of innerHTML:
var x=document.getElementById("txt1").value;
See the jsfiddle.
I want to create a TextField in which when I give any input it show on div and this script is showing inputs but not properly...
I don't know where I am making mistakes and I request that please give your answers only in JavaScript please don't use jquery. Thank you .
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form name="form">
<input name="t" value="" onkeypress="printvalues();">
</form>
<div id="divId"></div>
</body>
</html>
script
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML += form.t.value;
}
Here is my code with output
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML = document.form.t.value;
}
EDIT:The keypress event executes before the value of textbox is changed so use keyup() event which triggers when the key is released instead like
<input name="t" value="" onkeyup="printvalues();">
Your solution is here....
Just change onkeypress to onkeyup
Made below changes and enjoy..
function printvalues(a) {
var div = document.getElementById("divId");
div.innerHTML=a;
}
<input type="text" name="t" onkeyup="printvalues(this.value);">