Based on the similar question found at
Input Box That Changes Page Title:
<!DOCTYPE html>
<html>
<title>Old title</title>
<body>
<h1 id="h1"></h1>
<input type="text" name="name" id="iText" value="start typeing" />
<form onsubmit="myFunction()">
Enter name: <input id ="iText" type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
document.getElementById('iText').onkeyup = myFunction;
function myFunction() {
window.parent.document.title = document.getElementById("iText").value;
document.getElementById("h1").innerHTML = document.title;
}
</script>
</body>
</html>
This is working perfectly with the onkeyup event. However, I don't want the flicking but only change page title once when people click the submit. But my code is not working as expected.
Basically what i wanna do is when user writes something to input and submits it, the page title will be changed to the input.
Related
I have this code
<!DOCTYPE html>
<html>
<body>
<p>This example demonstrates how to assign an "onsubmit" event to a form element.</p>
<p>When you submit the form, a function is triggered which alerts some text.</p>
<form action="/action_page.php" onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function myFunction() {
alert("the message has been send");
}
</script>
</body>
</html>
I want not to do this alert message.I want to replace the form giving it this message the message has been send
Put the form in a div, and assign the innerHTML of the DIV to replace the form.
Also, you need to return false; in the onsubmit code to prevent the form from submitting to the server.
function myFunction() {
document.getElementById("formdiv").innerHTML = "This form has been submitted";
}
<!DOCTYPE html>
<html>
<body>
<p>This example demonstrates how to assign an "onsubmit" event to a form element.</p>
<p>When you submit the form, a function is triggered which displays some text.</p>
<div id="formdiv">
<form action="/action_page.php" onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
Hey everyone i am trying to solve the following question
Using form, make a page in HTML where the user can enter a keyword and click on the “Search” button and then that keyword is searched on google.
But till now have no luck in figuring out how to redirect with the i/p from my textbox in form
here is the code
<html>
<head>
<title>What is PHP</title>
</head>
<body>
<script type="text/javascript">
function showDetails()
{
var a = document.getElementById('sea');
window.location = 'https://www.google.com/search?q='+ a;
}
</script>
<img src="https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwjN2I-drPLfAhVBrY8KHUBlCwMQjRx6BAgBEAQ&url=https%3A%2F%2Fwww.froala.com%2Fwysiwyg-editor%2Fdocs%2Fserver%2Fphp%2Fimage-upload&psig=AOvVaw2Rv-5CgPx3gJo5_dzi6XFo&ust=1547729604931087" width="25%" height="25%">
</img>
<p>Php is amazing<br>Php is not cool</p>
<button onmouseover="alert('I Love HTML too!')">I Love HTML</button>
<br>
<br>
<form method="POST">
Search: <input type="text" name="fname" id="sea">
<input type="button" name="btn" onclick="showDetails()">
</form>
</body>
</html>
By selecting getElementById() method you select the element as a whole. You can get the value of an input-element with the value attribute.
var a = document.getElementById('sea').value;
If i had a button and an input field. How would i alert whatever is in the input field to the user, when the button is clicked.
Explain your code please.
Make it as simple as possible.
<input type="text" id="input" />
<button onclick="displayEnteredText()">Display</button>
<script>
function displayEnteredText() {
var inputText = document.getElementById("input"); // get the element with id "input" which is the textField
alert(inputText.value); // show the value of the input in alert message
}
</script>
One possible approach:
<!DOCTYPE html>
<html>
<head></head>
<body>
<input id="name" value="">
<input type="button" value="show me the name" onclick="alert(document.getElementById('name').value)">
</body>
</html>
Another possible approach:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var buttonElement = document.getElementById('button');
buttonElement.addEventListener('click', function() {
alert(document.getElementById('name').value);
});
}
</script>
</head>
<body>
<input id="name" value="">
<input id="button" type="button" value="show me the name">
</body>
</html>
With the second approach you can separate responsabilities, one person can create de html, and another person can focus in create javascript code.
Exists several ways to do this, but with two examples i think is enough in the current context
<body>
<input type="text" name="basicText" id="alertInput">
<button class="alertButton">Click me!</button>
</body>
<script type="text/javascript">
$(".alertButton").click(function(){
var value = $("#alertInput").val();
alert(value + " was entered");
});
</script>
In order to show what you typed in your alert, you need to reference the value inside the textbox. Since jquery is tagged in the post, I used it to get what's in the text box.
You can also try this one
HTML
<input type="button" id="btnclick" style="width:100px" value="Click Me" />
<input type="text" id="txtbox">
JS
$("#btnclick").click(function(){
var txtvalue = $("#txtbox").val();
alert("User enter " + txtvalue);
})
FIDDLE
Hi I'm new in javascript so I'm sorry if I my question is silly
I am suppodsed to make a dive where there would be two input fields and a button. When you press the button the text that is written in first field must move to the second one. This is what I have done:
<script>
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].innerHTML=fp.element[0].value;
fp.elements[0].value="";
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Project 2 </title>
</head>
<body>
<div>
<form id=fora>
First phrase:<br>
<input type="text" name="first phrase" >
<br>
Second phase:<br>
<input type="text" name="second phrase">
</form>
<button type="button" onclick="myfunction()">push me
</button>
<buttom>
</button>
</div>
<p id="intro"></p>
</body>
</html>
Has anyone any idea what i am doing wrong??
You need to change innerHTML to value. And there is a typo fp.element (missing s , should be fp.elements)
var fp= document.forms["fora"];
fp.elements[1].value=fp.elements[0].value;
fp.elements[0].value="";
Change your javascript to read and set the values of the inputs based on the names:
function myfunction(){
document.getElementsByName("second phrase")[0].value = document.getElementsByName("first phrase")[0].value;
document.getElementsByName("first phrase")[0].value = "";
}
Change
fp.elements[1].innerHTML=fp.element[0].value;
to
fp.elements[1].value = fp.elements[0].value;
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].value = fp.elements[0].value;
fp.elements[0].value = "";
}
<form name="fora">
First phrase:<br>
<input type="text" name="firstPhrase" ><br>
Second phase:<br>
<input type="text" name="secondPhrase">
</form>
<button type="button" onclick="myfunction()">push me</button>
Trying to change text color and background color of the text according to what I write in the textbox. Seems to work briefly; it shows me the color for a split second, like a quick snap and that's it.
<!DOCTYPE html>
<html>
<head>
<title>Prelab5 Ex1</title>
<style>
</style>
</head>
<body>
<h2>Prelab5 Ex1</h2>
<form method="post">
<input type="text" name="background" id="background"/><input type="submit" value="Background" onclick="changeBack();"/>
<br/>
<input type="text" name="text" id="text"/><input type="submit" onclick="changeText();" value="Text"/>
<br/>
<div id="content">Some text</div>
</form>
<script>
var DivText = document.getElementById("content");
function changeBack(){
var backColor = (document.getElementById("background").value);
DivText.style.backgroundColor= backColor;
}
function changeText(){
var textColor = (document.getElementById("text").value);
DivText.style.color = textColor;
}
</script>
</body>
</html>
Your onclick handlers for your submit buttons don't return false so your form is submitted resetting the page. You could add return false like
var DivText = document.getElementById("content");
function changeBack() {
var backColor = (document.getElementById("background").value);
DivText.style.backgroundColor = backColor;
}
function changeText() {
var textColor = (document.getElementById("text").value);
DivText.style.color = textColor;
}
<!DOCTYPE html>
<html>
<head>
<title>Prelab5 Ex1</title>
</head>
<body>
<h2>Prelab5 Ex1</h2>
<form method="post">
<input type="text" name="background" id="background" />
<input type="submit" value="Background" onclick="changeBack(); return false" />
<br/>
<input type="text" name="text" id="text" />
<input type="submit" onclick="changeText(); return false" value="Text" />
<br/>
<div id="content">Some text</div>
</form>
</body>
</html>
Your "submit" input performs the action on the form, which is currently set to "post". This will post the form to the same page (and cause a refresh).
You can override the default functionality by adding return false; to the ONCLICK attribute on all input type= "submit" elements.
In other words, this:
needs to become this:
<input type="submit" onclick="changeText();" value="Text"/>
but why use input type = submit at all?
You can just as easily use a link or button without the form:
<a href="#" onclick="changeText();"/>Test</a>
or
Click me!
which will do the same thing without needing to override the a forum action :)