I am trying to show forms according to user input in the text box but it is showing it one time only...please help...
index.html:
<html>
<head>
<script type="text/javascript" src="demo1.js"></script>
</head>
<body>
<form name="su">
<input type="text" name="tt" onkeyup="javascript:toggleFormVisibility();" id="sub"/> </a>
</form>
<form id="subscribe_frm" style="display:none">
NAME:<input type="text" name="text">
EMAIL:<input type="text" name="text">
PASSWORD:<input type="text" name="text">
</form>
demo.js:
function toggleFormVisibility()
{
var txt = document.getElementById('sub').value;
for(var i=0;i<txt;i++)
{
var frm_element = document.getElementById('subscribe_frm');
var vis = frm_element.style;
vis.display = 'block';
}
}
A bit of a guess, but I think you are trying to create multiple copies of your form. Try this out:
http://jsfiddle.net/QnrM9/
JS
function toggleFormVisibility() {
var txt = document.getElementById('sub').value;
var neededChildren = txt.length - document.getElementById('form_container').children.length + 1;
for (var i = 0; i < neededChildren; i++) {
var frm_element = document.getElementById('subscribe_frm').cloneNode(true);
var vis = frm_element.style;
vis['display'] = 'block';
document.getElementById("form_container").appendChild(frm_element);
}
}
document.getElementById('sub').addEventListener('keyup', toggleFormVisibility);
HTML
<form name="su">
<input type="text" name="tt" id="sub" />
</form>
<div id="form_container">
<form id="subscribe_frm" style="display:none">NAME:
<input type="text" name="text" />EMAIL:
<input type="text" name="text" />PASSWORD:
<input type="text" name="text" />
</form>
</div>
Related
How to valid the text after the data is insert into the textbook with same class numb. If input with alphabet, it will pop out with alert or window at the same time. The data should be only insert with numbering form. The NaN will not be show out again.
HTML should be continue use by oninput or oncheck or other on function?
This is just for Javascript
Below down is my code for calculation :
function chicken()
{
var foodchicken=0;
var theForm = document.forms["energyform"];
var chicken = theForm.elements["chicken"];
var ttlchicken = document.getElementById("textbox1").value;
if(chicken.checked===true)
{
foodchicken = ttlchicken*10;
}
return foodchicken;
}
function pork()
{
var foodpork=0;
var theForm = document.forms["energyform"];
var pork = theForm.elements["pork"];
var ttlpork = document.getElementById("textbox2").value;
if(pork.checked===true)
{
foodpork = ttlpork*20;
}
return foodpork;
}
function calculateTotal()
{
var HMontotalco = chicken() + pork() ;
var hmco = document.getElementById('totalHMonthCst').innerHTML = +HMontotalco.toFixed(2)
}
<body onload='hideTotal()'>
<div id="all">
<form id="energyform" onsubmit="return false;">
<div>
<div class="cont_order">
<fieldset>
<br/>
<label for='chicken' class="chick">Chicken </label></hr>
<input type="checkbox" id="chicken" name='chicken' onchange="calculateTotal()">
<input type="text" oninput="calculateTotal();" id="textbox1" name="textbox1" placeholder="Enter total chicken" />
<br/>
<br/>
<label for='pork' class="pig">  Pork            </label></hr>
<input type="checkbox" id="pork" name='pork' onchange="calculateTotal();allvalidate();personvalidate()">
<input type="text" oninput="calculateTotal();" id="textbox2" name="textbox2" placeholder="Enter total pork in kg" />
<br/>
<div id="totalHMonthCst">0</div>
</div>
</form>
</div>
</body>
</html>
I am trying to insert a new product through a form with javascript into database in grapqhl server and also that product should be displayed in zonaB with javascript ,but i am getting the error 400 bad request. Could someone tell me where is the mistake
here is html code
'''
<form id="formular" action="#" method="POST">
<label>Numar produs:</label>
<input type="text" id="nr">
<label>Denumire produs:</label>
<input type="text" id="nume" ><br>
<label>Categorie produs: </label>
<input type="text" id="categorie"> <br>
<label>Descriere: </label>
<input type="text" id="descriere"><br>
<label>Imagine:</label>
<input type="text" id="imagine"><br>
<label> Pret:</label>
<input type="text" id="pret"><br>
<label> Disponibil:</label>
<input type="text" id="stoc"><br>
<button onmouseover="insereaza1()"> Insereaza</button>
</form>
<script>
var $id = $('#nr').val()
var $name = $('#nume').val()
var $id_categorie = $('#categorie').val()
var $descriere = $('#descriere').val()
var $imagine = $('#imagine').val()
var $pret = $('#pret').val()
var $stoc = $('#stoc').val()
function insereaza1() {
creareProdus={"query":"mutation{createProduct($id:ID!, $name:String, $id_categorie:ID,
$descriere:String, $imagine:String, $pret:Float, $stoc:Boolean){createProduct(id:$id,
name:$name, category_id:$id_categorie, description:$descriere, picture:$imagine,
price:$pret, available:$stoc){product{id }}}}"}
setari={url:"http://localhost:3000",
type:"POST",
data:creareProdus,
contentType:"application/json",
success:vizualizareProdus}
$.ajax(setari)
}
function vizualizareProdus(){
var x = document.getElementById("formular").method
document.getElementById("zonaB").innerHTML = x
}
</script>
</body>
</html>
'''
I'm trying to create a ‘customer’ object that will store all of this data and then display the information as a ‘Customer Order’ similar with listing all the new information.
I can't figure out what's the problem. (Pretty sure the whole code itself is messed up)
When I run it, it also shows 'ReferenceError: clicked is not defined' message.
I don't understand the concept of storing data and displaying new information as a 'Customer Order'.
This is my javascript.
/*index.js*/
var objectarray = [];
function addToArray() {
var customerobject = {
name: "",
address: "",
postalcode: "",
phone: "",
email: ""
}
customerobject.name = document.getElementById("name").value;
customerobject.address = document.getElementById("address").value;
customerobject.postalcode = document.getElementById("postalcode").value;
customerobject.phone = document.getElementById("phone").value;
customerobject.email = document.getElementById("email").value;
objectarray.push(customerobject);
console.log(objectarray);
}
document.getElementById("buttonandchecks").addEventListener("click", clicked);
function clicked() {
addToArray();
}
<input id="name" value="Jenna" />
<input id="address" value="840 9STREET" />
<input id="postalcode" value="T2P 2T4" />
<input id="phone" value="111-111-1111" />
<input id="email" value="Renee#gmail.com" />
<button id="clickMe">click me</button>
function buttonandchecks()
{
//javascripts to get an output based on customer information
}
> ------------------------Below is my html------------------------
<!DOCTYPE html>
<html>
<head>
<link href="this.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="this.js">
</script>
</head>
<body>
<br>
<form name="information">
<table>
<tr><td>; First and Last Name :;</td><td><input type="name" id="nameid" size="25" maxlength="25" autofocus="yes" pattern="[a-zA-Z -]+$"></td></tr>
<tr><td>; Address :;</td><td><input type="address" id="addressid" size="25" maxlength="25" pattern="[a-zA-Z0-9]| |/|,|.|\|#|#|$|%|&)+"></td></tr>
<tr><td>; Phone Number :;</td><td><input type="tel" size="25" id="phoneid" placeholder="XXX XXX XXXX" pattern="\d{3} \d{3} \d{4}"></td></tr>
</form>
<form name=order>
//javascript to get an customer information
<br>
<br>
<center><input type=button value="Price your Order" id="clickMe" onClick="clicked();"></center>
</form>
</body>
</html>
I fixed your code, but there is a lot more to this question. This isn't really a proper way to store the data. You should be posting the information from the form to a service.
<html>
<body>
<input id="name" value="Jenna" />
<input id="address" value="840 9STREET" />
<input id="postalcode" value="T2P 2T4" />
<input id="phone" value="111-111-1111" />
<input id="email" value="Renee#gmail.com" />
<button id="clickMe">click me</button>
</body>
<script>
var objectarray = [];
var button = document.getElementById("clickMe");
function addToArray() {
var customerobject = {};
customerobject.name = document.getElementById("name").value;
customerobject.address = document.getElementById("address").value;
customerobject.postalcode = document.getElementById("postalcode").value;
customerobject.phone = document.getElementById("phone").value;
customerobject.email = document.getElementById("email").value;
objectarray.push(customerobject);
console.log(objectarray);
}
button.addEventListener("click", addToArray);
</script>
</html>
I'm making an html question form. Based on the answers, it performs JavaScript algorithms. Then JavaScript takes the numbers it calculated and uses document.getElementById to put the answers in a hidden html form. PHP puts the form into variables, and updates the MYSQL row that was selected. I didn't show the actual calculations because it is over 300 lines of code. The values in the database are blank every time I click submit. Thanks to anyone who can help me out!!!
<html>
<form method="post" id="formformid">
//These are where the JavaScript values are entered.
<input class="hidden" name="processfnumaa" id="processfnum" type="number" value="0">
<input class="hidden" name="technologyfnumaa" id="technologyfnum" type="number" value="0">
<input class="hidden" name="staffingfnumaa" id="staffingfnum" type="number" value="0">
<input class="hidden" name="Question4aa" id="Question4aa" type="text">
<input class="hidden" name="Question5aa" id="Question5aa" type="text">
<input class="hidden" name="Question6aa" id="Question6aa" type="text">
<input class="hidden" name="Question7aa" id="Question7aa" type="text">
<input class="hidden" name="Question8aa" id="Question8aa" type="text">
<input class="hidden" name="Question9aa" id="Question9aa" type="text">
<input class="hidden" name="Question10aa" id="Question10aa" type="text">
<input class="hidden" name="Question11aa" id="Question11aa" type="text">
<input class="hidden" name="Question12aa" id="Question12aa" type="text">
<input class="hidden" name="Question13aa" id="Question13aa" type="text">
<input class="hidden" name="Question14aa" id="Question14aa" type="text">
<input class="hidden" name="Question15aa" id="Question15aa" type="text">
<input class="hidden" name="Question16aa" id="Question16aa" type="text">
<input class="hidden" name="Question17aa" id="Question17aa" type="text">
<input class="hidden" name="Question18aa" id="Question18aa" type="text">
<input class="hidden" name="Question19aa" id="Question19aa" type="text">
<input class="hidden" name="Question20aa" id="Question20aa" type="text">
<input class="hidden" name="Question21aa" id="Question21aa" type="text">
<input class="hidden" name="Question22aa" id="Question22aa" type="text">
<input class="hidden" name="Question23aa" id="Question23aa" type="text">
<input class="hidden" name="Question24aa" id="Question24aa" type="text">
<input class="hidden" name="Question25aa" id="Question25aa" type="text">
<input type="button" id="savebutton" onclick="submitthatform()" value="Save Changes" style="display: none;" />
</form>
//This function is called when the user is done editing the answers in a different form.
<script type="text/javascript">
function submitthatform() {}
document.getElementById("Question4aa").value = a;
document.getElementById("Question5aa").value = b;
document.getElementById("Question6aa").value = c;
document.getElementById("Question7aa").value = d;
document.getElementById("Question8aa").value = e;
document.getElementById("Question9aa").value = f;
document.getElementById("Question10aa").value = g;
document.getElementById("Question11aa").value = h;
document.getElementById("Question12aa").value = i;
document.getElementById("Question13aa").value = j;
document.getElementById("Question14aa").value = k;
document.getElementById("Question15aa").value = l;
document.getElementById("Question16aa").value = m;
document.getElementById("Question17aa").value = n;
document.getElementById("Question18aa").value = o;
document.getElementById("Question19aa").value = p;
document.getElementById("Question20aa").value = q;
document.getElementById("Question21aa").value = r;
document.getElementById("Question22aa").value = s;
document.getElementById("Question23aa").value = t;
document.getElementById("Question24aa").value = u;
document.getElementById("Question25aa").value = v;
var awsasdg = document.getElementById("Question4aa").value;
alert(awsasdg);
document.getElementById("processfnum").value = processfinalnumber;
document.getElementById("technologyfnum").value = technologyfinalnumber;
document.getElementById("staffingfnum").value = staffingfinalnumber;
document.getElementById("formformid").submit();
}
</script>
</html>
<?php
//Here, I'm trying to update a row in my database. This is just the part of the file that ends up blank in the database.
$Question4aa = mysql_real_escape_string($_POST['Question4aa']);
$Question5aa = mysql_real_escape_string($_POST['Question5aa']);
$Question6aa = mysql_real_escape_string($_POST['Question6aa']);
$Question7aa = mysql_real_escape_string($_POST['Question7aa']);
$Question8aa = mysql_real_escape_string($_POST['Question8aa']);
$Question9aa = mysql_real_escape_string($_POST['Question9aa']);
$Question10aa = mysql_real_escape_string($_POST['Question10aa']);
$Question11aa = mysql_real_escape_string($_POST['Question11aa']);
$Question12aa = mysql_real_escape_string($_POST['Question12aa']);
$Question13aa = mysql_real_escape_string($_POST['Question13aa']);
$Question14aa = mysql_real_escape_string($_POST['Question14aa']);
$Question15aa = mysql_real_escape_string($_POST['Question15aa']);
$Question16aa = mysql_real_escape_string($_POST['Question16aa']);
$Question17aa = mysql_real_escape_string($_POST['Question17aa']);
$Question18aa = mysql_real_escape_string($_POST['Question18aa']);
$Question19aa = mysql_real_escape_string($_POST['Question19aa']);
$Question20aa = mysql_real_escape_string($_POST['Question20aa']);
$Question21aa = mysql_real_escape_string($_POST['Question21aa']);
$Question22aa = mysql_real_escape_string($_POST['Question22aa']);
$Question23aa = mysql_real_escape_string($_POST['Question23aa']);
$Question24aa = mysql_real_escape_string($_POST['Question24aa']);
$Question25aa = mysql_real_escape_string($_POST['Question25aa']);
$processfnumaa = mysql_real_escape_string($_POST['processfnumaa']);
$technologyfnumaa = mysql_real_escape_string($_POST['technologyfnumaa']);
$staffingfnumaa = mysql_real_escape_string($_POST['staffingfnumaa']);
if($_SERVER['REQUEST_METHOD'] === 'POST'){
mysql_query("UPDATE HuronForm1 SET Question4aa='$question4aa',Question5aa='$question5aa',Question6aa='$question6aa',Question7aa='$question7aa',Question8aa='$question8aa',Question9aa='$question9aa',Question10aa='$question10aa',Question11aa='$question11aa',Question12aa='$question12aa',Question13aa='$question13aa',Question14aa='$question14aa',Question15aa='$question15aa',Question16aa='$question16aa',Question17aa='$question17aa',Question18aa='$question18aa',Question19aa='$question19aa',Question20aa='$question20aa',Question21aa='$question21aa',Question22aa='$question22aa',Question23aa='$question23aa',Question24aa='$question24aa', processfnum='$processfnumaa', technologyfnum='$technologyfnumaa',staffingfnum='$staffingfnumaa',Question25aa='$question25aa' WHERE Id='$idchosen'");
}
?>
Maybe you would use the same case for variables?
If you have var $Question4aa, it should be the same in mysql string, not $question4aa
So, first, I'm not done with my code.However, the following Javascript part is suppose to change the site language when an image is clicked. I read ( on other post here) that it could be because the whole html document has not finished loading? Anyway, here's my code: hope I can get some insight on what causes the error:
<DOCTYPE! html>
<html>
<head>
<title> Registration</title>
<link type="text/css" rel="stylesheet" href="stylesheetex3.css"/>
<script>
function changeLanguage()
{
document.getElementById("z").addEventListener("click");
var Username1= document.getElementById("User");
var Password1= document.getElementById("Pass");
var Retype1= document.getElementById("Pass2");
var Firstname1= document.getElementById("First");
var Middlename1= document.getElementById("Second");
var LastName1= document.getElementById("Third");
var email1 = document.getElementById("at");
var NomUtilisateur1 = document.createTextNode("Nom D'utilisateur");
var mdp1 = document.createTextNode("Mot de Passe");
var mdp21 = document.createTextNode("Verification du mot de passe");
var Prenom1 = document.createTextNode("Prenom");
var Prenom2 = document.createTextNode("Deuxieme prenom");
var NomdeFamilly1 = document.createTextNode("Nom de Famille");
var Email1 = document.createTextNode("Addresse courielle");
Username1.appendChild(NomUtilisateur1);
Password1.appendChild(mdp1);
Retype1.appendChild(mdp21);
Firstname1.appendChild(Prenom1);
Middlename1.appendChild(Prenom2);
LastName1.appendChild(NomdeFamilly1);
email1.appendChild(Email1);
}
</script>
</head>
<body>
<h1>Registration Form</h1>
<div>
<div>please fill out the form below</div>
<div class="Img">
<img id="z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRR2pntKihP8gow1vBejsXhgYmHDctgwjcXKWKk9y0PEXsXEbUxpELQ" onClick="changeLanguage()" />
</div>
<form>
<fieldset>
<legend id="login"> Login Details </legend>
<p>Username* <input type="text" name="Username" id="User"></p>
<p>Password* <input type="Password" name="Password" id="Pass"></input</p>
<p>Retype Password*<input type="Password" name="RetypePassword" onChange="checkPasswordMatch();" id="Pass2"></input></p>
</fieldset>
<fieldset>
<legend>User Data</legend>
<p>Firstname* <input type="text" name="firstName"></input id="First"></p>
<p>Middlename*<input type="text" name="middleName" id="Second"></input></p>
<p>LastName*<input type="text" name="lastName" id="Third"></input></p>
<p>Email*<input type="email" name="email" id="at"> </input></p>
</fieldset>
<input type="submit" value="Submit"></input>
</form>
</div>
</body>
You have syntax error in <input type="text" name="firstName"></input id="First">
Also, you can't append children to input element, instead you can insert them as its sibling
function changeLanguage() {
document.getElementById("z").addEventListener("click");
var Username1 = document.getElementById("User");
var Password1 = document.getElementById("Pass");
var Retype1 = document.getElementById("Pass2");
var Firstname1 = document.getElementById("First");
var Middlename1 = document.getElementById("Second");
var LastName1 = document.getElementById("Third");
var email1 = document.getElementById("at");
var NomUtilisateur1 = document.createTextNode("Nom D'utilisateur");
var mdp1 = document.createTextNode("Mot de Passe");
var mdp21 = document.createTextNode("Verification du mot de passe");
var Prenom1 = document.createTextNode("Prenom");
var Prenom2 = document.createTextNode("Deuxieme prenom");
var NomdeFamilly1 = document.createTextNode("Nom de Famille");
var Email1 = document.createTextNode("Addresse courielle");
insertAfter(NomUtilisateur1, Username1);
insertAfter(mdp1, Password1);
insertAfter(mdp21, Retype1);
insertAfter(Prenom1, Firstname1);
insertAfter(Prenom2, Middlename1);
insertAfter(NomdeFamilly1, LastName1);
insertAfter(Email1, email1);
}
function insertAfter(node, anchor){
if(anchor.nextSibling){
anchor.parentNode.insertBefore(node, anchor.nextSibling);
}else{
anchor.parentNode.appendChild(node);
}
}
<h1>Registration Form</h1>
<div>
<div>please fill out the form below</div>
<div class="Img">
<img id="z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRR2pntKihP8gow1vBejsXhgYmHDctgwjcXKWKk9y0PEXsXEbUxpELQ" onClick="changeLanguage()" />
</div>
<form>
<fieldset>
<legend id="login">Login Details</legend>
<p>Username*
<input type="text" name="Username" id="User" />
</p>
<p>Password*
<input type="Password" name="Password" id="Pass" />
</p>
<p>Retype Password*
<input type="Password" name="RetypePassword" onChange="checkPasswordMatch();" id="Pass2"/>
</p>
</fieldset>
<fieldset>
<legend>User Data</legend>
<p>Firstname*
<input type="text" name="firstName" id="First" />
</p>
<p>Middlename*
<input type="text" name="middleName" id="Second" />
</p>
<p>LastName*
<input type="text" name="lastName" id="Third" />
</p>
<p>Email*
<input type="email" name="email" id="at" />
</p>
</fieldset>
<input type="submit" value="Submit" />
</form>
</div>
Note: Input element's don't have closing tags