I have this javascript code:
function othername() {
var input = document.getElementById("formName".value);
alert('Thanks for filling that out,' + ' ' + input + '!')
}
And this html code:
<form id="form" onsubmit="return false;">
<input type="text" id="formName"/>
<input type="submit" onclick="othername();" />
What did I do wrong?
<form id="form" onsubmit="return false;">
<input type="text" id="formName"/>
<input type="submit" onclick="othername();" />
</form>
<script>
function othername() {
var input = document.getElementById("formName").value;
alert('Thanks for filling that out, ' + input + '!')
}
</script>
Notice the closing parens.
Related
The code below is a form that generates html codes
I want each field to be on a separate line in the "Post text" field
Current output:
<div>texthere</div><script>texthere</script><style>texthere</style>
Expected output:
<div>texthere</div>
<script>texthere</script>
<style>texthere</style>`
function submitted() {
var formValue0 = '<div>' + document.getElementsByName("content")[0].value + '</div>';
var formValue1 = '<script>' + document.getElementsByName("content")[1].value + '<\/script>';
var formValue2 = '<style>' + document.getElementsByName("content")[2].value + '</style>';
document.getElementsByName("content")[3].value = formValue0 + formValue1 + formValue2;
return false;
}
<form onsubmit="return submitted()">
Field 1:<br><input type="text" name="content"><br>
Field 2:<br><input type="text" name="content"><br>
Field 3:<br><input type="text" name="content"><br>
<input type="submit" value="DONE"><br><br>
Post text:<br><textarea name="content" style="height:200px"></textarea>
</form>
You can use this code for several things and speed up your work with repeated codes like a custom post that would have to edit the html manually
You can use new line character \n like this -
function submitted() {
var formValue0 = '<div>'+ document.getElementsByName("content")[0].value +'</div>\n';
var formValue1 = '<script>'+ document.getElementsByName("content")[1].value +'<\/script>\n';
var formValue2 = '<style>'+ document.getElementsByName("content")[2].value +'</style>\n';
document.getElementsByName("content")[3].value = formValue0+formValue1+formValue2;
return false;
}
<form onsubmit="return submitted()">
Field 1:<br><input type="text" name="content"><br>
Field 2:<br><input type="text" name="content"><br>
Field 3:<br><input type="text" name="content"><br>
<input type="submit" value="DONE"><br><br>
Post text:<br><textarea name="content" style="height:200px"></textarea>
</form>
I want to have a form that asks the user their name, then welcomes them to the website with that name without redirecting to a different page or reloading. So basically replace a form with "Welcome NAME" after submit is clicked.
My code:
<div id="welcomeText">
<form onsubmit="changeText()" method="post">
Name: <input type="text" name="fname">
<input type="submit">
</form>
</div>
<script>
function changeText() {
var name = document.getElementById(welcomeForm).fname.value;
var welcome = "Welcome, " + name;
document.getElementById("welcomeText").innerHTML = welcome;
}
</script>
You need to give a name to the form before trying to access it, something like this:
//create the name attribute for the form
<form onsubmit="changeText()" method="post" name="myForm">
Name: <input type="text" name="fname">
<input type="submit">
</form>
<script>
function changeText() {
//access myForm using document object
var name = document.name.fname.value;
var welcome = "Welcome, " + name;
document.getElementById("welcomeText").innerHTML = welcome;
}
</script>
<div id="welcomeText">
<form onsubmit="changeText()" method="post" id="welcomeForm">
Name: <input type="text" name="fname">
<input type="submit">
</form>
</div>
<script>
function changeText() {
var name = document.getElementById("welcomeForm").fname.value;
var welcome = "Welcome, " + name;
document.getElementById("welcomeText").innerHTML = welcome;
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="welcomeText">
Name: <input type="text" name="fname" id="name">
<input id="submit" type="submit" onclick="changeText()" onsubmit="changeText()">
</div>
<script>
function changeText() {
var name = document.getElementById("name").value;
var welcome = "Welcome, " + name;
document.getElementById("welcomeText").innerHTML = welcome;
document.getElementById("name").style.display = "none";
document.getElementById("submit").style.display = "none";
}
</script>
</body>
</html>
Try this it will display "welcome user" and also make button and input disappear. In this case you don't even need a form. You can access the name directly from the input without ever submitting the form.
Here we are:
<div id="welcomeText">
<form id="myform" method="post">
Name: <input type="text" name="fname">
<input type="submit">
</form>
</div>
<script>
var form = document.getElementById("myform");
form.addEventListener('submit', function (e) {
e.preventDefault(); // This will prevent submitting the form
var name = form.fname.value;
var welcome = "Welcome, " + name;
document.getElementById("welcomeText").innerHTML = welcome;
});
</script>
I want to create form for my user with two inputs area, the form will generate encrypt text that i can use it in javascript like user inter them in input form fields.
For example i have this html code
<div class='code'>john123/52544888822</div>
i want to make this john123/52544888822 encrypted and receive orgin text in javascript function.
HTML code:
<form class='form' name='form' action="" method="">
<input class="user" type="text" name="user" value="">
<input class="password" type="text" name="password" value=""/>
<input class="button" type="button" value="get code"/>
</form>
<div class='code'></div>
Javascript code:
$('.form').change("input", function() {
var form_user = $('.user').val(),
form_password = $('.form .url').val(),
form_button = $('.form .password');
form_button.click(function() {
$('.code').html('<span>[' + form_user + '][' + form_password + ']</span>');
});
});
First of all get your code fixed:
<form class='form' name='envato-form' action="" method="">
<input class="user" type="text" name="user" value="">
<input class="code" type="text" name="code" value="">
<input class="password" type="text" name="password" value=""/>
<input class="button" type="button" value="get code"/>
</form>
<div class='code'></div>
then javascript:
$('.form').change("input", function() {
var form_user = $('.form .user').val();
var form_code = $('.form .code').val();
var form_password = $('.form .password').val();
var form_button = $('.form .button');
form_button.click(function() {
$('.code').html('<span>' + form_user + form_code + '/' + form_password + '</span>');
});
});
then crypto.js
var SHA256 = require("crypto-js/sha256");
$('.code').append('<br><span>'+SHA256($('.code .span').html())+'</span>');
All the best!
The "onsubmit" isn't working in this code. Can someone help me? It doesn't get to the function. I put there a alert but it didn't react. So it seems like the onsubmit just doesn't do it's work.
It's about the submit in the input
<form onSubmit="maakCookie('user',document.inlog.gebruiker.value,1); maakCookie('password',document.inlog.wachtwoord.value,1);"
name="inlog" action="inloggen.html" method="post"> email-adres:
<input type="text" size="20" id="gebruiker" />
wachtwoord: <input type="password" size="20"
id="wachtwoord" /> <hr /> <input type="
submit" onsubmit="checkEmail()" value="submit"/>
</form>
function maakCookie(naam, waarde, dagen)
{
if(dagen)
{
var datum = new Date();
datum.setTime(datum.getTime() + (dagen * 24 * 60 * 60 * 1000));
var verloopdatum = "; expires="+datum.toGMTString();
}
else
{
var verloopdatum = "";
}
document.cookie = naam+"="+waarde + verloopdatum + ";path=/";
}
function checkEmail()
{
alert("kijken of het werkt");
if(/^[A-Za-z0-9._%-]+#[A-Za-z0-9.-]+\.[A-Za- z]{2,4}$/.test(document.userform.email.value))
{
return (true)
}
else
{
alert("het e-mailadres is onjuist")
return (false)
}
}
onsubmit in not an attribute for an <input>. If you want to check if your onsubmit is firing, you can create a simple function first like below:
HTML:
<form onsubmit="tryalert();" action="" method="post">
<input type="submit" value="submit"/>
</form>
Javascript:
function tryalert()
{
alert("working");
}
If something like that works, there is something wrong with your maakCookie function.
I think you don't need the onsubmit event on your input at all.
Just try the following :
<form onsubmit="checkEmail(); maakCookie('user',document.inlog.gebruiker.value,1); maakCookie('password',document.inlog.wachtwoord.value,1);" name="inlog" action="inloggen.html" method="post">
email-adres: <input type="text" size="20" id="gebruiker" />
wachtwoord: <input type="password" size="20" id="wachtwoord" />
<hr />
<input type="submit" value="submit"/>
</form>
<script type="text/javascript">
function gr8r( form ) {
document.write( '"' + form.s1.value + '"' );
if ( form.s1.value > form.s2.value )
document.write( ' is gr8r than ' );
else
document.write( ' is not gr8r than ' );
document.write( '"' + form.s2.value + '"' );
}
</script>
<form action="" method="post">
<input type="text" name="s1" value="" />
<input type="text" name="s2" value="" />
<br />
<input type="button" value="click" onclick="gr8r(this.form)" />
</form>
The result I expect is javascript to execute after i click on the button and then display html form...but html form isn't displaying afterwards...
Any help very much appreciated, thanks!
The output i want is:
2 is gr8r than 1
<form action="" method="post">
<input type="text" name="s1" value="" />
<input type="text" name="s2" value="" />
<br />
<input type="button" value="click" onclick="gr8r(this.form)" />
</form>
You could try this:
<script type="text/javascript">
function gr8r( form ) {
document.getElementById("output").innerHTML = document.getElementById("s1").value;
if ( document.getElementById("s1").value > document.getElementById("s2").value )
document.getElementById("output").innerHTML += ' is gr8r than ';
else
document.getElementById("output").innerHTML += ' is not gr8r than ';
document.getElementById("output").innerHTML += document.getElementById("s2").value;
}
</script>
<div id="output"></div>
<form action="" method="post">
<input type="text" id="s1" value="" />
<input type="text" id="s2" value="" />
<br />
<input type="button" value="click" onclick="gr8r(this.form)" />
</form>
The div is used to display the ouput. The div and the fields of the form are both selected by their id.
If you want to be sure that the user does not enter a string, use this javascript:
function gr8r( form ) {
if (isFinite(document.getElementById("s1").value) && isFinite(document.getElementById("s2").value)) {
document.getElementById("output").innerHTML = document.getElementById("s1").value;
if (document.getElementById("s1").value > document.getElementById("s2").value)
document.getElementById("output").innerHTML += ' is gr8r than ';
else
document.getElementById("output").innerHTML += ' is not gr8r than ';
document.getElementById("output").innerHTML += document.getElementById("s2").value;
}
else {
document.getElementById("output").innerHTML = "Please enter only floats!";
}
}
What are you trying to accomplish? Display the text under or above the form? Document.Write will actually override the entire content of the document when it is not run inline during load. So to do what you want to do you need to create a container to put the text into and then place the text in there. So for example :
<div id="message"></div>
<form action="" method="post">
<input type="text" name="s1" value="" />
<input type="text" name="s2" value="" />
<br />
<input type="button" value="click" onclick="gr8r(this.form)" />
</form>
Then the javascript would be :
<script type="text/javascript">
function gr8r( form ) {
message = document.getElementById("message");
msgStr = '"' + form.s1.value + '"';
if ( form.s1.value > form.s2.value )
msgStr += ' is gr8r than ';
else
msgStr += ' is not gr8r than ';
msgStr += '"' + form.s2.value + '"';
message.innerHTML = msgStr;
}
</script>
A better way to do this would be to use a JavaScript framework called JQuery(http://jquery.com). It provides easy ways to attach event handlers and manipulate contents. Removing inline javascript is good for maintenance.