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">
Related
I was asked to develop a web page without a mouse.
The keyboard cursor must be in the input area(example: <input id="input-label" type="text">) immediately when the page is changed.
I tried,
document.querySelector("#input-area").focus();
and
document.querySelector("#input-area").select();
It works with buttons, but does not work in DOMContentLoaded.
document.addEventListener("DOMContentLoaded", function(){
document.querySelector("#input-area").select();
});
How can I solve it?
try this, call it when dom is ready
$(document).ready(function () {
$("#input-area").focus();
});
OR
<input id="input-area" autofocus="autofocus" />
OR
$(function() {
$("#input-area").focus();
});
Try this code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$('#myAnchor').click(function() {
$('#mustfocus').focus();
});
});
</script>
</head>
<body>
<input type="button" id="myAnchor" value="Get focus">
<input type="text" id="mustfocus"/>
</body>
</html>
How about this one which triggers only during DOM is ready:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$('#mustfocus').focus();
});
</script>
</head>
<body>
<input type="button" id="myAnchor" value="Get focus">
<input type="text" id="mustfocus"/>
</body>
</html>
I have 2 php pages
home.php
about.php
I have 1 Javascript page, which I called javascript from home.php.
I want to access the value of the p tag in about.php.
home.php
<!DOCTYPE html>
<html>
<body>
<input type="submit" onclick='myfunction()'>
</body>
</html>
javascript
<script>
function myfunction()
{
}
</script>
about.php
<!DOCTYPE html>
<html>
<head lang="en">
</head>
<body>
<p id='demo'>i want to access this value in javascript function</p>.
</body>
</html>
You probably want something in pure javascript like:
<script>
document.getElementById('demo').innerHTML='change the p tag value';
</script>
function myfunction(){
var val= document.getElementById('demo').textContent;
alert(val);
}
FIDDLE
var pTag = document.getElementById('demo').innerHTML;
The variable pTag will now hold the value(text) of your "demo" tag,
ready for you to do what you wish with it.
EDIT:
Using Javascript, set the value of a hidden form field when you change the contents of your tag.
Then pass the values using php, like below...
home.php:
<form action="about.php">
<input type="hidden" name="demo" id="demo" />
<p id="pDemo"> </p>
<button type="submit"></button>
</form>
Then in about.php:
<p id='demo'>
<?php
$demo= $_GET['demo'];
//use your variable "demo'
?>
</p>
This link should help, here.
You can use ajax or you can use load of jquery.
<script>
$(document).ready(function() {
$("#bAdd").load("about.php",function(response,status,xhr){// use if less data to load
var pTag = document.getElementById('demo').innerHTML;
alert(pTag);
});
});
</script>
<input type="hidden" id="bAdd" value="">
i have problem on sending textbox value from one html page to another html page.
In first page i am sending first name and last name values.and i want to catch this value in textbox on the second page( i.e home.html).but some erroe occurs.
error is :Uncaught TypeError: Cannot set property 'value' of null
how to solve? please tell me.
i know this stupid question.but please tell me guys.i don't know javascript.
this is my html code:
<!DOCTYPE html">
<html>
<head>
<script src="ttt.js"></script>
</head>
<body>
<form method="get" action="home.html" name="ff">
Firstname: <input id="f" type="text" name="firstname1">
Lastname: <input type="text" name="lastname">
<input type="submit">
</form>
</body>
</html>
this is my home.html code:
<!DOCTYPE html">
<html>
<head>
<script src="ttt.js"></script>
<script Language="JavaScript">
var tttt=val();
document.getElementById('text').value=tttt;
</script>
</head>
<body>
<form name="ff">
<input id="text" class="text" type="text" name="MyValue" value="helloS"/>
</form>
</div>
</body>
</html>
this is my javascript code(ttt.js)
function val(){
var link=location.href;
var str=link.split('?');
var str1=str[1].split('&');
var str11=str1[0].split('=');
var str12=str1[1].split('=');
var temp=str11[1]+" "+str12[1];
return(temp);
}
Put your javascript at the end of your html and change document.getElementById('tr') to document.getElementById('text'). You have no element with id tr.
please look at this question and its answers, it is demonstating how to pass value from one html page to another
link
You have to do getElementById('tr') when the dom is ready and ensuring that an element with the ID exists.
So in HTML 5, you can set buttons outside of a form to point to that form by using the form attribute. Is there a way to do this in Javascript? I need all references to this.form to point to a form somewhere else on the page. I've already tried:
<input type="button" onclick="this.form = document.forms['MyForm']; this.form.name.value = 'Blah' />
But with no success. Is there a way to do this?
Each of your form elements should have a unique ID, so you can change the value of the element without referencing the form, like this:
document.getElementById('your_field_id').value = 'Blah';
To submit the form, use document.forms:
document.forms['MyForm'].submit();
<input type="button" onclick="submitForm()" />
function submitForm() {
document.forms["myform"].submit();
}
What about something like this using jquery?
<html>
<head>
<title>Test Form</title>
</head>
<body>
<form>
<input type="text" id="test" />
<input type="submit" value="Submit" />
</form>
<input type="button" id="button" value="button" />
<script type="text/javascript">
$("#button").click(function(){
$("#test").val("Hello World!");
});
</script>
</body>
</html>
i want to write the value in textbox under it,how can i do it?thanks in advance
i wrote this codes:
<html>
<head>
<script language="javascript">
function show (text){
document.write("text");
}
</script>
</head>
<body>
<input type=textbox name=textbox value="Insert Name"/>
<input type=button name=button value="OK" onclick=show(textbox.value)/>
</body>
</html>
first of all: document.write replaces document content, use window.alert or such
next, consider enclosing fields in the <form> and then use show(this.form.textbox.value)
thats besides other scripting errors :)
Modify your html like this:
<input type=textbox name=textbox value="Insert Name" id="txt" />
<span id="spn"></span>
<input type=button name=button value="OK" onclick="show();" />
And JavaScript like this:
function show(){
document.getElementById('spn').innerHTML = document.getElementById('txt').value;
}
Something like this should work: Working example
<html>
<head>
<script language="javascript">
function show (text){
document.getElementById("text").innerHTML = text;
}
</script>
</head>
<body>
<input type=textbox name=textbox id=textbox value="Insert Name"/>
<input type=button name=button value="OK" onclick="show(document.getElementById('textbox').value)"/>
<div id="text"></div>
</body>
</html>