Hey So I have a project for school where I have to create a website and in the website there has to be a quiz. The questions are asking for numbers as answers, so I cannot use radio buttons. I know how to make textboxes and submit buttons but I dont think the box is getting the information, so I was wondering if someone could help me fix my code
Here is the end of what I have
*This is not the question I am asking this is just so I can get the code working
<P><INPUT TYPE=SUBMIT VALUE="Submit"> </FORM>
<SCRIPT type=text/javascript>
</FORM>function getAnswer(input) { if (input == "3.14") {alert ("Congradulations")} else {alert ("No that's incorrect, please try again...")}
}
</SCRIPT>
You surely haven't given us the complete code we need to answer your question, but here's all the wrong things I can see in your code snippet fixed.
The most obvious wrong thing was the text </FORM> placed inside your <script> tag.
I also fixed your misspelling Congradulations, because I imagine that wouldn't go down too well :)
<p><input type="submit" value="Submit" /></p>
</form>
<script type="text/javascript">
function getAnswer(input) {
if (input == "3.14") { //What is the value of Pi to 2 decimal places?
alert("Congratulations");
} else {
alert("No that's incorrect, please try again...");
}
}
</script>
If this isn't helpful, please show us more of your file.
#Olivia try this code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<form id="form1" name="form1" method="post" action="" onsubmit="getAnswer();"
<p>
<label for="textfield"></label>
Q. What is the value of Pi to 2 decimal places?</p>
<p>Answer
<input type="text" name="textfield1" id="textfield1" />
</p>
<p>
<input type="submit" name="button" id="button" value="Submit" />
</p>
</form>
<script type="text/javascript">
function getAnswer(input) {
if (document.form1.textfield1.value == "3.14") { //What is the value of Pi to 2 decimal places?
alert("Congratulations");
} else {
alert("No that's incorrect, please try again...");
}
}
</script>
</body>
</html>
In form submit I give an action to call the function.
onsubmit="getAnswer();"
Inside the function I am getting the value as
document.form1.textfield1.value
Then simple steps.
Cheers
Related
I have this code:
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="https://api.pagar.me/1/zipcodes/">
<input type="text" placeholder="cep" name="cep">
<input type="submit">
</form>
</body>
</html>
When I type a number, for example 05423110, I get on the adress bar is "https://api.pagar.me/1/zipcodes/?cep=05423110", but I would like to have "https://api.pagar.me/1/zipcodes/05423110".
What do I need to change on my code?
Thanks!
I would do it like this. The other answer will have the problem where it could potentially append something twice.
I also set it so the button disables for user friendliness (in case the server takes awhile to respond).
This solution does use jQuery, but chances are you will need to do other simple DOM manipulation and this will be very helpful.
Because you don't want the query string in there, but you must have it be GET, then its impossible not to have it append the query string to the URL (because that's what a GET request does).
Instead, I use javascript to simply redirect to the proper URL and ignore the form GET/POST entirely.
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="https://api.pagar.me/1/zipcodes/">
<input type="text" placeholder="cep" name="cep">
<input type="submit">
</form>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
(function() {
var form = $('form');
var baseUrl = form.attr('action');
$('form').submit(function(e) {
e.preventDefault();
form.find('[type="submit"]').prop('disabled', true);
window.location.href = baseUrl + form.find('[name="cep"]').val();
});
})();
</script>
Add method="post" to the form tag, then add an event listener to the form's submit event which append the input value to the action attribute value on the form:
const form = document.forms[0]
form.addEventListener('submit',()=>{form.action+=cep.value})
<form action="https://api.pagar.me/1/zipcodes/" method="post">
<input type="text" placeholder="cep" name="cep" id="cep">
<input type="submit">
</form>
Ofc StackOverflow snippets prevents POST.
I try to develop and test XPages locally as much as possible because of speed. One thing that have been bugging me for years now is that richtext fields does not work when using "Preview in webbrowser".
This is the XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:inputRichText id="inputRichText1"></xp:inputRichText>
</xp:view>
The result in webbrowser is an empty screen
In developer tools it looks like this
I get the same result on two computers, I am using english version of designer, 9.0.1 FP8. It does not make a difference if lang="sv" or lang="en"
The HTML looks like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="sv">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.mini/css/#Da&#Ib&2Tfxsp.css&2TfxspLTR.css&2TfxspSF.css.css">
<script type="text/javascript">var dojoConfig = {locale: 'sv-se', parseOnLoad: true};</script>
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.8.3/dojo/dojo.js"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.mini/dojo/.sv-se/#In.js"></script>
<script type="text/javascript">dojo.require("ibm.xsp.widget.layout.xspClientDojo")</script>
<script type="text/javascript">dojo.require("dojo.parser")</script>
<script type="text/javascript">dojo.require("ibm.xsp.widget.layout.xspCKEditor")</script>
</head>
<body class="xspView tundra">
<form id="view:_id1" method="post" action="/nn.nsf/Test.xsp" class="xspForm" enctype="multipart/form-data">
<input id="view:_id1:inputRichText1_h" name="view:_id1:inputRichText1_h" type="hidden" value=""><input id="view:_id1:inputRichText1_mod" name="view:_id1:inputRichText1_mod" type="hidden" value=""><div class="domino-richtext xspInputFieldRichText"><textarea rows="1" cols="1" id="view:_id1:inputRichText1" name="view:_id1:inputRichText1" dojoType="ibm.xsp.widget.layout.xspCKEditor"></textarea></div>
<input type="hidden" name="$$viewid" id="view:_id1__VUID" value="!eudik9rn2f!">
<input type="hidden" name="$$xspsubmitid">
<input type="hidden" name="$$xspexecid">
<input type="hidden" name="$$xspsubmitvalue">
<input type="hidden" name="$$xspsubmitscroll">
<input type="hidden" name="view:_id1" value="view:_id1"></form>
<script type="text/javascript">
XSP.addOnLoad(function() {
dijit.byId("view:_id1:inputRichText1").initForEdit();
function view__id1_inputRichText1_rteSubmit(thisEvent) {
var rte=dijit.byId("view:_id1:inputRichText1");
var txta=XSP.getElementById("view:_id1:inputRichText1_h");
if(!rte || !txta) return;
txta.value = rte.getValue();
return true;
}
XSP.addQuerySubmitListener("view:_id1", view__id1_inputRichText1_rteSubmit, null, "view__id1_inputRichText1_rteSubmit");
});
</script>
</body>
</html>
How can I fix this so that the Richtext fields load correctly when preview in webbrowser
Thanks
Thomas
Almost certainly, there are some plugins not available for Designer Local Preview that are expected. ".ibmxspres" in the URL points to XPages-provided resources. Many of those since 8.5.2 were delivered via OSGi plugins. This is one of the reasons that over the last 18 months I've been working with IBM to get a developer license for the Domino server. That's available now from developerWorks and it's the easiest, quickest and best practice solution.
I have a simple html page generated by a servlet on websphere .
<!DOCTYPE html>
<html>
<head>
<title>Server Management</title>
<meta http-equiv='refresh' content='3;URL="console"' />
<script>
function setVal(command, i){
var elmnt = document.getElementById('myvalue')
elmnt.value = command + '-' + i;
}
</script>
</head>
<body>
<form action='console'>
<button type='submit' onclick='setVal("stop", this.value)' name='stop' value='0'>Stop</button>
<button type='submit' onclick='setVal("start", this.value)' name='start' value='0'>Start</button>
<button type='submit' onclick='setVal("status", this.value)' name='status' value='0'>Status</button>
<div style='display:inline'>Server 3 is <div style='display:inline;color:green'>UP</div> </div>
<br/>
<input type='hidden' name='myvalue' id='myvalue' value='bla'/>
</form>
</body>
</html>
The thing is, when I call localhost(or 127.0.0.1) to upload the page everithing works as expected, and the right values are sent
http://localhost:9081/MyApp/MyAction?status=0&myvalue=status-0
BUT when I use the hostname (or IP) instead of localhost the element's innerHTML is sent rather then it's value, which of course cause errors.
http://myhostname:9081/MyApp/MyAction?status=Status&myvalue=status-Status
What should I do?
It's all about the IE version... Turning on competability mode fixed the issue.
A better solution is adding
<meta http-equiv="X-UA-Compatible" content="IE=8" />
to the HTML.
Thank you Microsoft for the great apps you give us
I am trying to do, form1 is hidden right now, if that username and password correct as in my code, than show form1 in same tab/window, so if username and password correct than next page says Hello! logged in, Is there any way that, i can do that?? I know i can create another html, if username and password correct than show that html, I can do that, I want to send html by email to if i send two html it won't work so, is there any way that i can do everything in one html, if username and password correct than show that hidden form.. Please help me!! Thanks!!
<!DOCTYPE html>
<!-- saved from url=(0042)http://jsfiddle.net/DrydenLong/RHwLW/show/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by DrydenLong</title>
<script type="text/javascript" src="./- jsFiddle demo by DrydenLong_files/jquery-1.9.1.js"></script>
<script type="text/javascript" src="./- jsFiddle demo by DrydenLong_files/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="./- jsFiddle demo by DrydenLong_files/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="./- jsFiddle demo by DrydenLong_files/result-light.css">
<style type="text/css">
#hello, #sorry {
display: none;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$(document).ready(function(){
$("#my_button").click(function(){
var userid = $("#user").val();
var pass = $("#pass").val();
if (userid == 'username' && pass == 'password') {
$("#login").fadeOut('slow', function () {
$("#hello").fadeIn();
});
} else {
$("#login").fadeOut('slow', function () {
$("#sorry").fadeIn();
});
}});});
});//]]>
</script>
</head>
<body>
<div id="login">
<form name="login">Username
<input type="text" name="userid" id="user">Password
<input type="password" name="pswrd" id="pass">
<input type="button" value="Login" id="my_button">
<input type="reset" value="Cancel">
</form>
</div>
<div id="hello">Hello! You are logged in.</div>
<div id="sorry">Sorry you have entered the wrong username or password</div>
</body></html>
Please help me!! Thanks!!
Ok, so this uses Jquery/JqueryUI to hide/show content based off of the values of your form fields. Depending on the values, the appropriate div is faded into view:
HTML
<div id="login">
<form name="login">Username
<input type="text" name="userid" id="user" />Password
<input type="password" name="pswrd" id="pass" />
<input type="button" value="Login" id="my_button"/>
<input type="reset" value="Cancel" />
</form>
</div>
<div id="hello">Hello! You are logged in.</div>
<div id="sorry">Sorry you have entered the wrong username or password</div>
CSS
#hello, #sorry {
display: none;
}
Jquery
$(document).ready(function () {
$("#my_button").click(function () {
var userid = $("#user").val();
var pass = $("#pass").val();
if (userid == 'username' && pass == 'password') {
$("#login").fadeOut('slow', function () {
$("#hello").fadeIn();
});
} else {
$("#login").fadeOut('slow', function () {
$("#sorry").fadeIn();
});
}
});
});
Now, there is a major problem with this code if you want your site to have secure content. Anybody can view the source code of your page and see the content that is being hidden, defeating the purpose of using a password to gain access. You will have to figure out a way to improve upon that if you want better security. If that's the case, you may want to look into a server-side scripting language such as PHP to address the security issue.
If security isn't a huge deal and the username/password is more for displaying the experience of what's in the div rather than the content, then this should do just fine.
Here is a fiddle with a working example: http://jsfiddle.net/DrydenLong/RHwLW/
A very peculiar bug in a simple html form. After changing an option, button has to be clicked twice to submit the form. Button is focused after clicking once, but form is not submitted. It's only this way in IE8 and works fine in Chrome and FF.
PAY ATTENTION TO 'g^' right before <select>. It has to be a letter or number followed by a symbol to generate this bug. For example, 'a#','f$','3(' all create the same bug. Otherwise it works fine. BTW, if you don't change option and click button right away,there won't be any bug.
Very strange, huh?
<form method="post" action="match.php">
g^
<select>
<option>Select</option>
<option>English</option>
<option>French</option>
</select>
<input type="submit" value="Go" />
</form>
I am providing the code here, which is working fine. Check this code whether this code also is giving you the problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> Sample page for language selection </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p{display: none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// language as an array
var language = ['Arabic', 'Cantonese', 'Chinese', 'English', 'French', 'German', 'Greek', 'Hebrew', 'Hindi', 'Italian', 'Japanese', 'Korean', 'Malay', 'Polish', 'Portuguese', 'Russian', 'Spanish', 'Thai', 'Turkish', 'Urdu', 'Vietnamese'];
$('#muyu').append('<option value=0>Select</option>');
//loop through array
for (i in language) //js unique statement for iterate array
{
$('#muyu').append($('<option>', { id: 'muyu' + i, val: language[i], html: language[i] })) }
$('form').submit(function() {
// alert('I am being called!'); // check if submit event is triggered
if ($('#muyu').val() == 0) { $('#muyu_error').show(); } else { $('#muyu_error').hide(); return true; }
return false;
});
})
</script>
</head>
<body>
<form method="post" action="PostProb">
I am fluent in <select name='muyu' id='muyu'></select>
<p id='muyu_error'>Tell us your native language</p>
<input type="submit" value="Go"/>
</form>
</body>
</html>