I've gotten the code to a workable level in JS Fiddle, but I am still having issues with getting the code together so I can put it in an actual site.
I'm embedding the form in a sharepoint site, I know I read the JS might need to be linked in externally as a file.
Form Function: HTML Inputs are strung together by the javascript and then displayed via an alert.
<HTML>
<body>
<head>
<script language=“javascript”>
var button = document.getElementById('test');
var date = document.getElementById('1');
var contact = document.getElementById('2');
var contacttype = document.getElementById('3');
var os = document.getElementById('4');
var devicetype = document.getElementById('5');
var device = document.getElementById('6');
var reason = document.getElementById('7');
var comments = document.getElementById('8');
button.onclick = function () {
var str = "Date: " + date.value + " " + "Contact: " + contact.value + " " + "Insured or Agent: " + contacttype.value + " " + "Operating System: " + os.value + " " + "Tablet or Phone: " + devicetype.value + " " + "Device Name: " + device.value + " " + "Reason fo Call: " + reason.value + " " + "Additional Comments: " + comments.value;
alert(str);
};
</script>
</head>
<h1> SR Template
</h1>
<label>Date:
<input id="1" />
</label>
<br />
<label>Contact:
<input id="2" />
</label>
<br>
<label>Insured or Agent:
<input id="3" />
</label>
<br>
<label>Operating System:
<input id="4" />
</label>
<br>
<label>Tablet or Phone:
<input id="5" />
</label>
<br>
<label>Device Name:
<input id="6" />
</label>
<br>
<label>Reason for call:
<input id="7" />
</label>
<br>
<label>Additional Comments:
<input id="8" />
</label>
<br />
<button id="test">Test</button>
</body>
</HTML>
language=“javascript”
You can't delimit attribute values with angled quotes, so that is an unrecognised language so the browser will ignore the script entirely.
It's also HTML 3.2, which was obsoleted in 1998. This is 2015. Write HTML 5. Don't include a language attribute at all.
var button = document.getElementById('test');
There is no element with that id before the script element.
Your code is not in a function that gets called later.
The element doesn't exist when you try to run that code.
Move the script to after the elements you are trying to get out of the DOM or wrap it in an onload function as you have configured JSFiddle to do.
In your <script> you have language=“javascript” those quotes are fancy quotes from probably Microsoft Word.
Your issue might be that it's not standard quotes... like this: "
Related
The title pretty much says everything.
I'm making a form that will return your first name and surname with city in a quote using div class = "well". I'm now stuck for some hours now trying to figure out what I'm doing wrong.
<script> /* get info from inputs and add it to a quote. */
function FillInfo(){
var fname = document.forms ["SIgnUpForm"] ["fname"].value;
var sname = document.forms ["SIgnUpForm"] ["sname"].value;
var city = document.forms ["SIgnUpForm"] ["city"].value;
document.getElementById("info").innerHTML = "Thank you" + " " + fname + " " + sname + "from" + " " + city + "." + " " + "You are now being considered as our next adventurer. Good luck!";
}
</script>
and in body is:
<div class="heading2">
<div class="container2">
<p>Do you want to travel troughout space? Then fill out our form!</p><br>
<form name="SignUpForm" onsubmit="return validateForm()" method="get">
<input type="text" name="fname" placeholder="First name" required><br>
<input type="text" name="sname" placeholder="Last name" required><br>
<input type="text" name="city" placeholder="City" required><br><br>
<div id="info" class="well"></div>
<button class="otherpage" onclick="FillInfo();">Submit</button><br><br>
Return
</form>
</div>
</div>
I expect it to write down the quote when i click the submit button, yet in return i get this :
Uncaught TypeError: Cannot read property 'fname' of undefined
at FillInfo (things i put into inputs name, city)
at HTMLButtonElement.onclick (things i put into inputs name, city)
I think you just mistyped the form name
Your Html code: SignUpForm
Your Javascript code :SIgnUpForm
I fixed it and it worked for me.
I used formData to get a form object, then form.get(name) to get the content.
It's a more elegant way to get your content.
I also replaced your button with a input type="button", because it caused a refresh of the page.
note: it doesn't work on IE & safari for iOS
function FillInfo(){
let f = new FormData(document.querySelector('form'));
var fname = f.get("fname");
var sname = f.get("sname");
var city = f.get("city");
document.getElementById("info").innerHTML = "Thank you" + " " + fname + " " + sname + " from " + " " + city + "." + " " + "You are now being considered as our next adventurer. Good luck!";
}
<div class="heading2">
<div class="container2">
<p>Do you want to travel troughout space? Then fill out our form!</p><br>
<form name="SignUpForm" method="get">
<input type="text" name="fname" placeholder="First name" required><br>
<input type="text" name="sname" placeholder="Last name" required><br>
<input type="text" name="city" placeholder="City" required><br><br>
<div id="info" class="well"></div>
<input type="button" class="otherpage" onclick="FillInfo();" value="Submit" /><br><br>
Return
</form>
</div>
</div>
Why? These questions keep coming up about undefined errors in JavaScript when accessing the DOM. Please, ensure the DOM is ready before accessing it. Just putting your scripts after your html won't assure you of that.
Though the "SIgnUpForm" name will give you errors and is corrected here, it doesn't solve the entire problem. Different processor and network speeds and browser mechanisms may result in you having an undefined property error if you don't ensure the Document Object Model (DOM) is ready before you access elements in the html document.
<script> /* get info from inputs and add it to a quote. */
window.onload = function () {
function FillInfo(){
var fname = document.forms ["SignUpForm"] ["fname"].value;
var sname = document.forms ["SignUpForm"] ["sname"].value;
var city = document.forms ["SignUpForm"] ["city"].value;
document.getElementById("info").innerHTML = "Thank you" + " " + fname + " " + sname + "from" + " " + city + "." + " " + "You are now being considered as our next adventurer. Good luck!";
}
});
</script>
Also, consider using jQuery's $(document).ready() method for cross browser compatibility.
I just modify code, it's working in all browsers:
<script> /* get info from inputs and add it to a quote. */
function FillInfo(){
let form = document.querySelector('form');
var fname = form.elements["fname"];
var sname = form.elements["sname"];
var city = form.elements["city"];
document.getElementById("info").innerHTML = "Thank you" + " " + fname.value + " " + sname.value + " from " + " " + city.value + "." + " " + "You are now being considered as our next adventurer. Good luck!";
return false;
}
</script>
<div class="heading2">
<div class="container2">
<p>Do you want to travel troughout space? Then fill out our form!</p><br>
<form name="SignUpForm" onsubmit="return validateForm()" method="get">
<input type="text" name="fname" placeholder="First name" required><br>
<input type="text" name="sname" placeholder="Last name" required><br>
<input type="text" name="city" placeholder="City" required><br><br>
<div id="info" class="well"></div>
<button class="otherpage" type="button" onclick="FillInfo();">Submit</button><br><br>
Return
</form>
</div>
</div>
JavaScript:
function validateForm(){
var getNoun = document.formPG.fNoun.value;
var getVerb = document.formPG.fVerb.value;
var getPronoun = document.formPG.fPronoun.value;
var getAdverb = document.formPG.fAdverb.value;
var getAdjective = document.formPG.fAdjective.value;
var getSillyWord = document.formPG.fSillyWord.value;
var getMagic = document.formPG.fMagic.value;
if((getNoun) === ""){
alert("You entered a number value, please enter a Noun.");
document.formPG.fNoun.focus();
document.getElementById('iNoun').style.borderColor = "red";
return false;
}
//write story to [document].html
paragraph = "There was once a " + getAdjective + " magician who roamed the wild terrains of " + getAdverb + ".<br>";
paragraph += "The magician " + getNoun + " cast the mighty spell " + getMagic + " around the " + getSillyWord + ".<br>" + getPronoun + " knew there was only one way to win the war - " + getVerb + ".";
document.write(paragraph);
}
HTML:
<body>
<div class="container">
<h1>Mad Lib</h1>
<form name="formPG" onsubmit="validateForm()" method="post">
Noun: <input type="text" name="fNoun" id="iNoun"><br>
Pronoun: <input type="text" name="fPronoun" id="iPronoun"><br>
Verb: <input type="text" name="fVerb" id="iVerb"><br>
Adverb: <input type="text" name="fAdverb" id="iAdverb"><br>
Adjective: <input type="text" name="fAdjective" id="iAdjective"><br>
Silly Word: <input type="text" name="fSillyWord" id=""iSillyWord"><br>
Magic Spell: <input type="text" name="fMagic" id="iMagic"><br>
<input type="submit" value="submit">
</form>
<br>
<script src="madLib_v2.js"></script>
</div>
</body>
The problem is whenever I hit the "submit" button the page hits the document.getElementById('iNoun').style.borderColor = "red"; and goes away. The page refreshes instantly and the box is only highlighted for a fraction of a second. I want it to stay there until the page is refreshed basically or until they get it correct.
Do with return validateForm() .Then only its prevent page refresh .
Remove the unwanted space and quotes in elements attributes.like id=""iSillyWord"-extra quotes and type="submit "-unwanted space
function validateForm() {
var getNoun = document.formPG.fNoun.value;
var getVerb = document.formPG.fVerb.value;
var getPronoun = document.formPG.fPronoun.value;
var getAdverb = document.formPG.fAdverb.value;
var getAdjective = document.formPG.fAdjective.value;
var getSillyWord = document.formPG.fSillyWord.value;
var getMagic = document.formPG.fMagic.value;
if ((getNoun) === "") {
alert("You entered a number value, please enter a Noun.");
document.formPG.fNoun.focus();
document.getElementById('iNoun').style.borderColor = "red";
return false;
}
//write story to [document].html
paragraph = "There was once a " + getAdjective + " magician who roamed the wild terrains of " + getAdverb + ".<br>";
paragraph += "The magician " + getNoun + " cast the mighty spell " + getMagic + " around the " + getSillyWord + ".<br>" + getPronoun + " knew there was only one way to win the war - " + getVerb + ".";
document.write(paragraph);
}
<body>
<div class="container">
<h1>Mad Lib</h1>
<form name="formPG" onsubmit="return validateForm()" method="post">
Noun: <input type="text" name="fNoun" id="iNoun"><br> Pronoun: <input type="text" name="fPronoun" id="iPronoun"><br> Verb: <input type="text" name="fVerb" id="iVerb"><br> Adverb: <input type="text" name="fAdverb" id="iAdverb"><br> Adjective:
<input type="text" name="fAdjective" id="iAdjective"><br> Silly Word: <input type="text" name="fSillyWord" id="iSillyWord">
<br> Magic Spell: <input type="text " name="fMagic" id="iMagic"><br>
<input type="submit" value="submit">
</form>
<br>
</div>
</body>
prevent the default behavior as the form is getting submitted. Once it is valid use ajax to submit the form
JS
function validateForm(e){
e.preventDefault();
// rest of the code
}
HTML
pass the event object to the function
onsubmit="validateForm(event)"
DEMO
PROBLEM SOLVED
I just started learning JavaScript, and I came across a problem while coding a quick tool for a game that I play. I want users to be able to input a couple of things via an HTML Form and I want the JS Script to take that input and turn it into an SQL.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HabSQL - Online SQL Generator</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="css/styles.css" rel='stylesheet' type='text/css'>
</head>
<body>
<header>Welcome to HabSQL v1.0! The Online Habbo SQL Generator!</header>
<p>HabSQL is strictly for use with Habbo Furniture SQLs and Data. Please enter all necessary information accordingly.</p>
<script src="scripts/habSQL.js"></script>
<form action="javascript:void(habSQL())">
<fieldset>
Furniture Name: <input id="furniName" type="text">
Furniture ID: <input id="furniID" type="number"><br>
SWF File Name: <input id="fileName" type="text"> (Exclude .SWF)<br>
Sprite ID: <input id="spriteID" type="number"> (We recommend that you use the same ID as Furniture ID).
</fieldset>
<fieldset>
Furniture Type: <input id="furniType" type="radio" value="s" name="furniType">Floor <input id="furniType" type="radio" value="i" name="furniType">Wall <input id="furniType" type="radio" value="e" name="furniType">Effect<br>
</fieldset>
<fieldset>
Furniture Width: <input id="furniWidth" type="number" class="dimensions"> Furniture Length: <input id="furniLength" type="number" class="dimensions"> Furniture Height: <input id="furniHeight" type="number" class="dimensions"><br>
Can you stack furniture on it? <input id="canStack" type="radio" value="1" name="canStack">Yes <input id="canStack" type="radio" value="0" name="canStack">No<br>
Can you sit on it? <input id="canSit" type="radio" value="1" name="canSit">Yes <input id="canSit" type="radio" value="0" name="canSit">No<br>
Can you walk on/through it? <input id="canWalk" type="radio" value="1" name="canWalk">Yes <input id="canWalk" type="radio" value="0" name="canWalk">No<br>
Can you recycle it? <input id="canRecycle" type="radio" value="1" name="canRecycle">Yes <input id="canRecycle" type="radio" value="0" name="canRecycle">No<br>
Can you trade it? <input id="canTrade" type="radio" value="1" name="canTrade">Yes <input id="canTrade" type="radio" value="0" name="canTrade">No<br>
Can you sell it on the Marketplace? <input id="canSell" type="radio" value="1" name="canSell">Yes <input id="canSell" type="radio" value="0" name="canSell">No<br>
Can you give it to someone as a gift? <input id="canGive" type="radio" value="1" name="canGive">Yes <input id="canGive" type="radio" value="0" name="canGive">No<br>
Can you stack it in the inventory? <input id="invStack" type="radio" value="1" name="invStack">Yes <input id="invStack" type="radio" value="0" name="invStack">No<br>
</fieldset>
<fieldset>
Interaction Type:<br>
<input id="intType" type="radio" value="default" name="intType">None<br>
<input id="intType" type="radio" value="bed" name="intType">Bed<br>
<input id="intType" type="radio" value="vendingmachine" name="intType">Vending Machine<br>
<input id="intType" type="radio" value="trophy" name="intType">Trophy<br>
<input id="intType" type="radio" value="gate" name="intType">Gate<br>
<input id="intType" type="radio" value="onewaygate" name="intType">One Way Gate<br>
<input id="intType" type="radio" value="dice" name="intType">Dice<br>
<input id="intType" type="radio" value="teleport" name="intType">Teleporter<br>
(More Interaction Types Coming in v2.0)<br>
</fieldset>
<fieldset>
How many interactions does the furniture have? (i.e. a dice has 6 sides and a closed side, therefore 7 interactions.)<br>
<input id="intCount" type="number"><br>
If your furniture gives out an item, what is the item's ID? 0, if none. (View external_flash_texts.txt or external_flash_texts.xml for ID #'s.)<br>
<input id="vendingID" type="number"><br>
</fieldset>
<input type="Submit" value="Generate!">
</form>
Furniture SQL:<br>
<textarea id="furniSQL" readonly="true" rows="10" cols="50"></textarea>
</body>
</html>
And here is my JS:
// HabSQL - Online Habbo SQL Generator
// Developed by Thomas Yamakaitis - March 3, 2015
function habSQL() {
var furniID = document.getElementById('furniID').value;
var furniName = document.getElementById('furniName').value;
var fileName = document.getElementById('fileName').value;
var furniType = document.getElementById('furniType').value;
var furniWidth = document.getElementById('furniWidth').value;
var furniLength = document.getElementById('furniLength').value;
var furniHeight = document.getElementById('furniHeight').value;
var canStack = document.getElementById('canStack').value;
var canSit = document.getElementById('canSit').value;
var canWalk = document.getElementById('canWalk').value;
var spriteID = document.getElementById('spriteID').value;
var canRecycle = document.getElementById('canRecycle').value;
var canTrade = document.getElementById('canTrade').value;
var canSell = document.getElementById('canSell').value;
var canGive = document.getElementById('canGive').value;
var invStack = document.getElementById('invStack').value;
var intType = document.getElementById('intType').value;
var intCount = document.getElementById('intCount').value;
var vendingID = document.getElementById('vendingID').value;
var comma = ", ";
var commaQuotes = "', '";
var quoteComma = "', ";
var commaQuote = ", '";
document.getElementById('furniSQL').innerHTML = "INSERT INTO `furniture` (`id`, `public_name`, `item_name`, `type`, `width`, `length`, `stack_height`, `can_stack`, `can_sit`, `is_walkable`, `sprite_id`, `allow_recycle`, `allow_trade`, `allow_marketplace_sell`, `allow_gift`, `allow_inventory_stack`, `interaction_type`, `interaction_modes_count`, `vending_ids`, `is_arrow`, `foot_figure`, `height_adjustable`, `effectM`, `effectF`, `HeightOverride`) VALUES (" + furniId + commaQuote + furniName + commaQuotes + fileName + commaQuotes + furniType + quoteComma + furniWidth + comma + furniLength + comma + furniHeight + commaQuote + canStack + commaQuotes + canSit + commaQuotes + canWalk + quoteComma + spriteID + commaQuote + canRecycle + commaQuotes + canTrade + commaQuotes + canSell + commaQuotes + canGive + commaQuotes + invStack + commaQuotes + intType + quoteComma + intCount + comma + vendingID + ");";
}
I can't seem to pinpoint exactly what it is that I am doing wrong. If somebody could please assist me, that would be greatly appreciated.
Thanks!
Thanks to a few users here! The solution was a typo and I believe it was also value instead of innerHTML too.
A simple typo: furniId instead of furniID on the last line
JavaScript is case-sensitive so if you capitalize a variable name differently it's a completely different variable, and so it does not know what you mean.
You got a typo: furniID in your last element which is document.getElementById('furniSQL').value= is spelled as furniId
Textareas are modified by value, not innerHTML
so set it up to
document.getElementById('furniSQL').value = "INSERT INTO `furniture` (`id`, `public_name`, `item_name`, `type`, `width`, `length`, `stack_height`, `can_stack`, `can_sit`, `is_walkable`, `sprite_id`, `allow_recycle`, `allow_trade`, `allow_marketplace_sell`, `allow_gift`, `allow_inventory_stack`, `interaction_type`, `interaction_modes_count`, `vending_ids`, `is_arrow`, `foot_figure`, `height_adjustable`, `effectM`, `effectF`, `HeightOverride`) VALUES (" + furniId + commaQuote + furniName + commaQuotes + fileName + commaQuotes + furniType + quoteComma + furniWidth + comma + furniLength + comma + furniHeight + commaQuote + canStack + commaQuotes + canSit + commaQuotes + canWalk + quoteComma + spriteID + commaQuote + canRecycle + commaQuotes + canTrade + commaQuotes + canSell + commaQuotes + canGive + commaQuotes + invStack + commaQuotes + intType + quoteComma + intCount + comma + vendingID + ");";
and you should be good to go.
I have a problem with the TextBox. When I was entering duplicate data, it is not allowing. That is what exactly I need but after saving data again it is allowing the duplicate data. How can I handle the scenario?
Here is my code.
var Controls = {
saveObjectives: function (actionurl) {
var frm = $('form[name=frmObjectives]')
frm.attr('action', actionurl);
frm.submit();
},
addObjectiveCheckbox: function () {
var text = $('#txtObjective').val();
$('#txtObjective').val('');
if ($.trim(text) == '')
return;
if ($('input[type=checkbox][value="' + text + '"]').length == 0)
$('#dvObjectives').prepend('<input type="checkbox" name="chkNewobjectives" value="' + text + '" Checked /> ' + text + '<br />');
},
And my HTML code is:
<input id="btnAddObj" class="btn" type="button" onclick="Controls.addObjectiveCheckbox();" value="Add Objective"/>
</div>
<div id="dvObjectives" name="ObjectivesList">
#foreach (Andromeda.Core.Entities.Objectives objective in Model)
{
<label class="checkbox">
<input type="checkbox" name="chkobjectives" Checked value="#objective.ObjectiveID" />#objective.ObjectiveText
</label>
}
</div>
You are using value='whatever text` in the jQuery, but value='ObjectiveID' in the view. This should fix it:
<input type="checkbox" name="chkobjectives" Checked value="#objective.ObjectiveText" />#objective.ObjectiveText
This is the javascript & html code i have.
function convertinput() {
document.getElementById('first').value
var string = document.getElementById('first').value
var newString = "##[0:1: " + string + "]]"
document.getElementById('output').value = newString
}
<input id="first"></input>
<br>
<input id="output"></input>
<br>
<input type='button' onclick='convertinput()' value='convert'>
the code editor in jsfiddle is http://jsfiddle.net/FEC7S/3/
I want this code to be displayed in my blog post as it is here
http://www.trickiezone.com/2012/10/facebook-blue-text-generator-by.html
If i embed it in my blog through jsfiddle or tinkerbin, the whole web page is getting displayed.
I need only the result to be displayed in my blog post.
How to do so ?
i have added the working demo in my blog:
signed by miliodiguine
TO DO:
1)Login to your blog.
2)Add New Post
3)paste this code
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<script language="javascript" type="text/javascript">
function convertinput() {
document.getElementById('first').value
var string = document.getElementById('first').value
var newString = "##[0:1: " + string + "]]"
document.getElementById('output').value = newString
}
</script>
<input id="first"></input>
<br>
<input id="output"></input>
<br>
<input type='button' onclick='convertinput()' value='convert'>
</div>
You could use your id to set the display property in css...
function convertinput() {
document.getElementById('output').value = "##[0:1: " + document.getElementById('first').value + "]]";
document.getElementById('output').style.display = 'block';
}
<input id="first"></input>
<br>
<input id="output" style="display:none;"></input>
<br>
<input type='button' onclick='convertinput()' value='convert'>
http://jsfiddle.net/FEC7S/7/