I would like to add some text before the onchange="input()" function.
anyone knows the trick? cheers
<head>
<script type="text/javascript">
function input(){
var input_taker = document.getElementById('email').value;
document.getElementById('display').innerHTML = input_taker;
}
</script>
</head>
<form method="post" action="#">
<input type="text" name="email" placeholder="email#example.com" id="email" onchange="input()">
<input type="submit" name="save" value="save">
Related
<script>
function myFunction(val) {
const ele = document.querySelectorAll('input');
let sum = 0;
ele.forEach(input => {
sum += input.value ? parseFloat(input.value) : 0;
});
document.getElementById('result').textContent = sum.toFixed(2);
}
</script>
<form action="test.php" method="POST" enctype="multipart/form-data">
<input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
<input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
<p id="result"></p>
<br>
<p><input type="submit" name= "submit" id="submit" value="Submit"/></p>
</form>
Why the result is NaN? But if I remove the value="Submit" in the last 5th line, then everything working fine. Why? and what should I do to solve this problem?
Your
const ele = document.querySelectorAll('input');
will iterate over all inputs, including the <input type="submit" name= "submit" id="submit" value="Submit"/>.
When you don't use value="Submit", that element doesn't have a real .value, so it defaults to the empty string:
console.log(submit.value);
console.log(submit.value.length);
<input type="submit" name="submit" id="submit">
In contrast, <input value="Submit"/> will have a .value of Submit, which can't be turned into a number.
Select only your inputs with input classes instead:
function myFunction() {
const ele = document.querySelectorAll('input.input');
let sum = 0;
ele.forEach(input => {
sum += input.value ? parseFloat(input.value) : 0;
});
document.getElementById('result').textContent = sum.toFixed(2);
}
<form action="test.php" method="POST" enctype="multipart/form-data">
<input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
<input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
<p id="result"></p>
<br>
<p><input type="submit" name="submit" id="submit" value="Submit" /></p>
Also note that duplicate IDs are invalid HTML, and event handlers should be attached properly using Javascript instead of using inline handlers:
const inputs = document.querySelectorAll('input.input');
inputs.forEach((input) => {
input.addEventListener('keydown', () => {
const sum = [...inputs].reduce((a, input) => a + Number(input.value), 0);
document.getElementById('result').textContent = sum.toFixed(2);
});
});
<form action="test.php" method="POST" enctype="multipart/form-data">
<input type="text" class="input">
<input type="text" class="input">
<p id="result"></p>
<br>
<p><input type="submit" value="Submit"></p>
</form>
Because you are selecting all the input tag, you should be specific on selecting like querySelectorAll('input[type="text"]'). so it will select only text input tags. Try this one
<!DOCTYPE html>
<html>
<body>
<script>
function myFunction(val) {
const ele = document.querySelectorAll('input[type="text"]');
let sum = 0;
ele.forEach(input => {
sum += input.value ? parseFloat(input.value) : 0;
});
document.getElementById('result').textContent = sum.toFixed(2);
}
</script>
<form action="test.php" method="POST" enctype="multipart/form-data">
<input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
<input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
<p id="result"></p>
<br>
<p><input type="submit" name= "submit" id="submit" value="Submit"/></p>
</form>
</body>
</html>
Because document.querySelectorAll('input'); selecting all inputs including submit button as well which has value='submit' and value submit is not a number (NAN). When you remove value attribute from the submit button it returns nothing.
When I try adding the first contact and submit it, it shows in the div id=contact.
The function hide/show is working then.
But as soon as I add a second contact it's not working anymore.
Seems, jQuery doesn't enter display...
function css(){
$('.contacts').css('background-color', 'lightblue');
}
function visibility() {
$("#vis").click(function(){
$(".description").toggle();
return false;
});
};
$( document ).ready(function() {
$("form").submit(function (event) {
var fname = $('#fname').val();
var lname = $('#lname').val();
var desc = $('#desc').val();
$('.contacts').append( "<div id='contact'>"+fname+"<br>"+lname+"<br><button id='vis'>Show/Hide</button><div class='description' style='display:;'>"+desc+"</div></div>");
// alert(fname);
event.preventDefault();
css();
visibility();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="get">
<fieldset>
<legend>Personal information:</legend>
First name: <input type="text" name="fname" id="fname"><br>
Last name: <input type="text" name="lname" id="lname"><br>
</fieldset>
<fieldset>
<legend>Description:</legend>
<textarea id="desc" value="desc"> </textarea><br>
<input type="submit" value="Submit">
</fieldset>
</form>
<div class="contacts"> </div>
Any help would be appreciated, thanks.
As I wrote in comment - You can't have multiple elements with the same ID in html. You also don't have to add listeners for each button. You can add listener for body and selector as second parameter (see attached code).
function css(){
$('.contacts').css('background-color', 'lightblue');
}
$( document ).ready(function() {
//this way you don't need to add listener for each button
$('body').on('click', '.vis', function() {
$(this).closest('.contact').find('.description').toggle();
});
$("form").submit(function (event) {
var fname = $('#fname').val();
var lname = $('#lname').val();
var desc = $('#desc').val();
$('.contacts').append( "<div class='contact'>"+fname+"<br>"+lname+"<br><button class='vis'>Show/Hide</button><div class='description'>"+desc+"</div></div>");
event.preventDefault();
css();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="get">
<fieldset>
<legend>Personal information:</legend>
First name: <input type="text" name="fname" id="fname"><br>
Last name: <input type="text" name="lname" id="lname"><br>
</fieldset>
<fieldset>
<legend>Description:</legend>
<textarea id="desc" value="desc"> </textarea><br>
<input type="submit" value="Submit">
</fieldset>
</form>
<div class="contacts"> </div>
I want to save this data in JSON format without using PHP ,when user give the value and press send ,its data add in JSON so that ,I can use this JSON as Database.
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Thank you so much for your help :) in advance
You can iterate through your form and collect it's values in an array, which you can encode in JSON format.
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit" onclick="logJsonInputs()">
</form>
<script type="text/javascript">
function logJsonInputs() {
var nameFormElements = document.getElementById("name_form").elements;
var inputs = [];
for(var i = 0; i < nameFormElements.length; i++) {
var element = nameFormElements[i];
inputs[element.name] = element.value;
}
var jsonInputs = JSON.stringify(inputs);
console.log(jsonInputs);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
function stringifyForm(formObject)
{
var jsonObject = {};
var inputElements = formObject.getElementsByTagName("input");
inputElements = Array.prototype.slice.apply(inputElements); //Because I want to use forEach and getElementsByTagName returns an object.
inputElements.forEach(function(e,i,a)
{
if (e.type != "submit")
{
jsonObject[e.name] = e.value;
}
}
);
$.post("https://www.apiaas.com/consume.php",
{
"data":jsonObject
},
function(data)
{
console.log(data);
}
);
}
function jquerySolution(formObject)
{
var jsonObject = JSON.stringify( $(formObject).serializeArray() );
$.post("https://www.apiaas.com/consume.php",
{
"data":jsonObject
},
function(data)
{
console.log(data);
}
);
}
</script>
</head>
<body>
<form onsubmit="jquerySolution(this);return false;">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>
This is the script:
<HTML>
<HEAD>
<SCRIPT type="javascript">
function goToPage(var url = '')
{
var initial = "http://www.blossompromotions.com/-p-";
var extension = "html";
window.location(initial+url+extension);
}
</SCRIPT>
<TITLE>Redirect 1</TITLE>
<BASE HREF="http://www.blossompromotions.com/">
</HEAD>
<BODY>
<P></P>
<FORM name="something" action="#">Label
<INPUT type="text" name="url" value="" onSubmit="goToPage(this.value)" />
<INPUT type="submit" value="GO" />
</FORM>
</BODY>
</HTML>
This redirects to the url but I want the user to be able to see and copy the url. Please tell a command instead of goToPage which will display the url on screen for the user to copy.
function goToPage(url){
var initial = "http://www.blossompromotions.com/-p-";
var extension = ".html";
var link = document.getElementById('gotoURL');
link.innerHTML = url ? initial+url+extension : '' ;
link.href = initial+url+extension;
}
<FORM name="something" action="#">
Label
<INPUT type="text" name="url" value="" onkeyup="goToPage(this.value)">
<INPUT type="submit" value="GO">
</FORM>
You can do it with JavaScript, and add an ID to your input text
function goToPage(var url = '')
{
var initial = "http://www.blossompromotions.com/-p-";
var extension = "html";
document.getElementById('url').value=initial+url+extension ;
}
<FORM name="something" action="#">
Label
<INPUT id="url" type="text" name="url" value="" onSubmit="goToPage(this.value)">
<INPUT type="submit" value="GO">
</FORM>
<!DOCTYPE html>
<html>
<head>
<script>
function validateAlphaNumeric()
{
alert("function start");
var alphabets="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var numbers="0123456789";
var flag=true;
var prod_id=document.getElementByID("productid").value;
alert(prod_id);
for(var i=0;i<prod_id.length;i++)
{
if(alphabets.indexOf(prod_id.charAt(i))==-1 || numbers.indexOf(prod_id.charAt(i)==-1)
{
alert("value must be alphanumeric");
break;
}
}
var prod_type=document.myform.producttype.value;
for(var i=0;i<prod_type.length;i++)
{
if(alphabets.indexOf(prod_type.charAt(i))==-1 || numbers.indexOf(prod_type.charAt(i)==-1)
{
alert("value must be alphanumeric");
break;
}
}
}
</script>
</head>
<body>
<form name="myform" action="http://localhost:8080/examples/Submit.HTML" method="POST">
<br><br>
Prodcut ID:<input type="text" name="productid" id="productid" size="25" ">
<br><br>
Product Type:<input type="text" name="producttype" id="producttype" size="25" ">
<br><br>
</div>
<input type="submit" onclick="validateAlphaNumeric()" value="Submit">
</form>
</body>
</html>
This is a test page being written to only learn basics.When I am pressing Submit there is no checking happening and it goes to Submit.html page.why? What modification is needed here?
<input type="submit" onclick="validateAlphaNumeric()" value="Submit">
What exactly happens when I am pressing this button?
var prod_id=document.getElementByID("productid").value;
var prod_type=document.myform.producttype.value;
both mechanisms are same ?
This is the Modified one.But still not working. Please help
<!DOCTYPE html>
<html>
<head>
<script>
function validateAlphaNumeric()
{
var alphabets="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var numbers="0123456789";
var flag=true;
var prod_id=document.getElementByID("productid").value;
for(var i=0;i<prod_id.length;i++)
{
if(alphabets.indexOf(prod_id.charAt(i))==-1 && numbers.indexOf(prod_id.charAt(i)==-1))
{
alert("value must be alphanumeric");
return false;
}
}
var prod_type=document.myform.producttype.value;
for(var i=0;i<prod_type.length;i++)
{
if(alphabets.indexOf(prod_type.charAt(i))==-1 && numbers.indexOf(prod_type.charAt(i)==-1))
{
alert("value must be alphanumeric");
return false;
}
}
}
</script>
</head>
<body>
<form name="myform" action="http://localhost:8080/examples/Submit.HTML" method="POST">
<br><br>
Prodcut ID:<input type="text" name="productid" id="productid" size="25" ">
<br><br>
Product Type:<input type="text" name="producttype" id="producttype" size="25" ">
<br><br>
</div>
<input type="submit" onclick="validateAlphaNumeric(); " value="Submit">
</form>
</body>
</html>
there you go you forgot closing parenthesis for if statements:
<!DOCTYPE html>
<html>
<head>
<script>
function validateAlphaNumeric()
{
alert("function start");
var alphabets="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var numbers="0123456789";
var flag=true;
var prod_id=document.getElementByID("productid").value;
alert(prod_id);
for(var i=0;i<prod_id.length;i++)
{
if(alphabets.indexOf(prod_id.charAt(i))==-1 && numbers.indexOf(prod_id.charAt(i)==-1))
{
alert("value must be alphanumeric");
break;
}
}
var prod_type=document.myform.producttype.value;
for(var i=0;i<prod_type.length;i++)
{
if(alphabets.indexOf(prod_type.charAt(i))==-1 && numbers.indexOf(prod_type.charAt(i)==-1))
{
alert("value must be alphanumeric");
break;
}
}
}
</script>
</head>
<body>
<form name="myform" action="" method="POST">
<br><br>
Prodcut ID:<input type="text" name="productid" id="productid" size="25" ">
<br><br>
Product Type:<input type="text" name="producttype" id="producttype" size="25" ">
<br><br>
</div>
<input type="submit" onclick="validateAlphaNumeric()" value="Submit">
</form>
</body>
</html>
if You want didn't go to Action page You must put return false; at end of onclick like this
onclick="validateAlphaNumeric();return false;"
or put return false; at end of function that you Call with return false; you say browser don't submit
Try returning false when validation fails