I'm trying to create a Captcha in JavaScript but I ran into issues. I want the CAPTCHA to display at random, one of the declared images and then validate users input against the text on the images. So far, I have the Code below and it doesn't show anything:
<script type="text/javascript">
var "<img src="images/ci0.jpg" />" = 56777;
var "<img src="images/ci1.jpg" />" = 67646;
var "<img src="images/ici2.jpg" />" = 77666;
var code = ci0, ci1, ci2;
document.getElementById("txtCaptcha").value = code;
document.getElementById("txtCaptchaDiv").innerHTML = code;
</script>
HTML
<div id="left">
<label for="code">Enter code next <span id="txtCaptchaDiv" style="color:#F00"></span><br />
<!-- this is where the script will place the generated code -->
<input type="hidden" id="txtCaptcha" /></label>
</div><!-- End Left -->
<div id="righty">
<span id="spryconfirm1">
<label>
<input type="text" name="checker" id="checker" />
</label>
<span class="confirmRequiredMsg">You must enter the Code.</span><span class="confirmInvalidMsg">The values don't match.</span></span>
</div><!-- End righty -->
</div>
By the way I see it you should use reCAPTCHA since you still have a long way to go before creating a CAPTCHA validator yourself. This is not only a matter of client-side but also server-side which you are already ignoring.
Get a reCAPTCHA embed code and use it in your HTML.
Related
I'm creating a resume builder where a person can enter information into input fields and my javascript code will take the field values and write it to a popup window, which will be their resume. I'm clearly doing something critically wrong here. I can get the pop up window to open, but no text that I'm appending from javascript is in the popup window.
I'm going to show snippets of the code so I'm not posting full-on documents, but everything follows the same suit.
The code for my input html:
<body>
<!-- Full name -->
<p><strong>Enter your full name:</strong></p>
<input type="text" name="fullName" cols='75'><br>
<!-- Address -->
<p><strong>Enter your address:</strong></p>
<input type="text" name="address">
.
.
.
</body>
Html for my popup window:
<body>
<div id="name"></div>
<div id="address/phone"></div>
<hr>
<div class="theLeft" id="objectives_pop"></div>
<div class="theRight" id="objectivesText"></div>
.
.
.
</body>
Javascript:
function myWindow() {
window.open("popupWindow.html", "_blank", "height=500", "width=500", "left=100", "top=100", "resizable=yes", "scrollbars=yes",
"toolbar=yes", "menubar=no", "location=no", "directories=no", "status=yes");
// Name
var name = document.getElementById('fullName').value;
document.getElementById('name').innerHTML = name;
// Address and phone number
var address = document.getElementById('address').value;
var phoneNum = document.getElementById('phoneNum').value;
document.getElementById('address/phone').innerHTML = address + '/' + phoneNum;
.
.
.
I want to append text from input fields in my main html file (project.html) to the popup window in popupWindow.html. How can I do this?
In your current code snippet you are calling document.getElementById on the main page, not the popup. You will first need to get the popup window as a variable, then modify it as needed.
To get you started, try doing something like the following:
let myPopup = window.open("popupWindow.html", "_blank", "height=500", "width=500", "left=100", "top=100", "resizable=yes", "scrollbars=yes",
"toolbar=yes", "menubar=no", "location=no", "directories=no", "status=yes");
myPopup.onload = function() {
var name = document.getElementById('fullName').value;
myPopup.document.getElementById('name').innerHTML = name
}
This will open up a new popup window, wait for it to load, then change the name innerHTML of that popup, rather than the parent page.
You are using document.getElementById() but on your html the inputs actually have no id, they have names, your html should be:
<p><strong>Enter your full name:</strong></p>
<input type="text" id="fullName" cols='75'><br>
<!-- Address -->
<p><strong>Enter your address:</strong></p>
<input type="text" id="address">
You can add something like <div id="dialog" title="Basic dialog" style="display: none;">Insert text</div> in your popup dialog!
I know this basic subject has been broached many times, and I have used code that has been posted from here in my own application. However, I have run into an error I just cannot resolve, and it is making me crazy. I have a form with two hidden controls (which have not been an issue in other forms), a file control, some standard input controls and a textarea ... (a sample of the form is below). When I use JavaScript (and Ajax) to try to submit it, I am getting an error that I cannot resolve:
TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.
Form:
<form class='form form-horizontal' method='post' action='' name='attachment_form' id='attachment_form'>
<input value=1 name='event_link3' id='event_link3' hidden />
<input value=9683 name='contributor_link3' id='contributor_link3' hidden />
<div class='row'>
<!-- file upload option -->
<div class='col-lg-5 col-11'>
<div class='form-group file-upload'>
<label>Select File to Upload:</label><br />
<input type='file' class='form-control' id='attachment_file'
name='attachment_file' accept='.pdf, .mp4, .mov, .avi, .f4v'
data-toggle='tooltip' data-placement='bottom'
title='File to be uploaded should be 'standard' video or pdf format'
/>
</div> <!-- / form-group -->
</div> <!-- // col-5 -->
<div class='col-1'> <a name='attachment_clear'
onclick='attachment_clear()'
class='btn btn-primary btn-md clearButton'
data-toggle='tooltip' data-placement='bottom' title='Clear Selection'
style='margin-left: -12px !important; margin-top: 40px !important;'>
<i class='fa fa-trash' aria-hidden='true'></i></a>
</div> <!-- // col-1 -->
<div class='col-lg-6 col-12'>
<label>Web Link/URL:</label><br />
<input type='url' class='form-control'
id='web_url' name='web_url'
data-toggle='tooltip' data-placement='bottom'
title='Web address must include http:// or https:// to be valid'
/>
</div> <!-- // col-6 -->
</div> <!-- // row -->
<div class='row'>
<div class='col-lg-6 col-12'>
<label>Short Description:</label>
<input class='form-control' name='short_description' id='short_description'
data-toggle='tooltip' data-placement='bottom'
title='A short description of the file (displayed for link)' required/>
<p class='help-block'><b>Short Description is Required</b> -- the text will be used
to display as text for the file link.</p>
</div> <!-- // col-6-->
<div class='col-lg-6 col-12'>
<label>File Description:</label>
<textarea class='form-control' name='description' id='description' rows=5 required></textarea>
<p class='help-block'><b>Description is Required</b> -- Describe the file or link in as much
detail as you need ... you can also format this to some extent (see toolbar)</p>
</div> <!-- // col-12-->
</div> <!-- // row -->
<button id='attachment_submit' name='attachment_submit' class='btn btn-primary' style='margin-top: 10px;'><i class='fa fa-upload'></i> Upload Attachment</button>
</form>
The Javascript code to deal with the form is based on code I have pulled here on StackOverflow, and has been working successfully in other places. I cannot see what is different or wrong with this ...
$("#attachment_form").submit(function(e)
{
e.preventDefault();
// first thing, clear out the message div used for this (if there's anything there):
document.getElementById("attachment_message").innerHTML = "";
// validation:
var filename_check = document.getElementById( "attachment_file" ).value;
var web_url_check = document.getElementById( "web_url" ).value;
if ( filename_check == "" && web_url_check == "" )
{
alert( "You must either select a file to upload or enter a web address ..." );
return;
}
// on the flip side:
if ( filename_check != "" && web_url_check != "" )
{
alert( "You must either select a either file to upload or a web address, not both ..." );
return;
}
// get value from TinyMCE
var description = tinymce.get('description').getContent();
// make sure it's in the textarea by the same name
document.getElementById( "description" ).value = description;
// this has always worked in the past, but having issues:
var formData = new FormData(this);
// this is where the error occurs when I open the web console of my browser
I am hoping someone has experience with this and can tell me what the error is, as I am completely stumped at this point. (I have checked "this.id" in an alert to be sure I am using the correct form ...)
The FormData call probably expects a DOM element and not a jQuery element. Try passing this[0] or this.get() to get the Html element of the form.
Okay, I found my problem (thanks to the suggestion to look at the output log by Art3mix above). The issue was that I had a surrounding div tag that was also called "attachment_form" (I have a collapsible (bootstrap 4) div that is opened with a button, and I didn't even think about the fact that I had named the form the same as the div). By changing that (and references to it) to "attachment_window" instead, that resolve the whole thing. Wow. Thanks for the suggestion to look at the console output log. I seldom, if ever, look at that.
I got this script to use it as a search engine, but when I tried to change the button to replace it with a CSS styled button (including fontawesome), the button doesn't call the results. I am a newbie and my javascript knowledge is limited.
<form name="searchengine">
<input type = text name ="keywords" placeholder ="Search..." style ="font-size:14px;hight:35px;width:240px;" value="" maxlength=40>
<input type = button name="go" Value=" 🔍 " style ="height:30px;width:35px;" onClick="search()">
</form>
I just adjusted the inline styling but I would like to replace it with this:
<form name="searchengine">
<input type="hidden" name="keywords" value="1">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="box">
<div class="container-4">
<input type="search" id="keywords" placeholder="Search..." />
<button class="icon"><i class="fa fa-search"></i></button>
</div>
</form>
I know that there is no onclick function assigned on the second example but I have searched everywhere and couldn't find an answer, I have tried different ways to make it "clickable" but with no success. Below are some examples of what I have done. Most come from Stackoverflow.
<span onClick="myFunction()"><i class="fa fa-search"></i></span>
<i class="fa fa-search" onclick="search()"></i>
Thanks in advance for your help. Please let me know if you require the full script.
Here is the entire script. Thanks for your help.
<html>
<title>
Search Engine
</title>
<head>
<script>
title = new Object();
desc = new Object();
links= new Object();
matched= new Object();
keywords= new Object();
found= new Object();
var temp=0;
// actual location or the item to be searched // description of he location
// actual link
// percentage match found
// keywords as parsed from the input
// # of titles present in the database
title[0]=14
//no of keywords after parsing
keywords[0]=0
//no of matches found.
found[0]=0
<!-- Begin List of Searchable Items -->
<!--put the list of the links and descriptions here!!-->
title[1]="Introduction FAQs Java JavaScript beginner"
desc[1]="JavaScript Primer (Part 1 of 2) "
links[1]="http://www.javascriptkit.com/primer1.htm"
matched[1]=0
title[2]="objects document function parameter last modified date"
desc[2]="JavaScript Primer (Part 2 of 2) "
links[2]="http://www.javascriptkit.com/primer2.htm"
matched[2]=0
title[3]="alert confirm prompt box pop up dialog"
desc[3]="Creating Alert, Confirm, and Prompt Boxes"
links[3]="http://www.javascriptkit.com/alert.htm"
matched[3]=0
title[4]="event handler onClick onLoad onMouseover onMouseout onUnload"
desc[4]="Understanding Event Handlers in JavaScript"
links[4]="http://www.javascriptkit.com/event.htm"
matched[4]=0
title[5]="object model tree accessing forms "
desc[5]="Accessing and Validating Forms Using JavaScript (Part 1 of 2)"
links[5]="http://www.javascriptkit.com/form1.htm"
matched[5]=0
title[6]="form validation onBlur onSubmit"
desc[6]="Accessing and Validating Forms Using JavaScript (Part 2 of 2)"
links[6]="http://www.javascriptkit.com/form2.htm"
matched[6]=0
title[7]="date object write html setTimeout function"
desc[7]="Creating Time Dependent Scripts using JavaScript (Part 1 of 2)"
links[7]="http://www.javascriptkit.com/time1.htm"
matched[7]=0
title[8]="live clock watermark"
desc[8]="Creating Time Dependent Scripts using JavaScript (Part 2 of 2)"
links[8]="http://www.javascriptkit.com/time2.htm"
matched[8]=0
title[9]="image preload rollover effect filter"
desc[9]="Images and JavaScript- Apples and Apples (Part 1 of 2)"
links[9]="http://www.javascriptkit.com/image1.htm"
matched[9]=0
title[10]="rollover effect"
desc[10]="Images and JavaScript- Apples and Apples (Part 2 of 2)"
links[10]="http://www.javascriptkit.com/image2.htm"
matched[10]=0
title[11]="new window open secondary reload close toolbar menubar status bar "
desc[11]="Windows and JavaScript"
links[11]="http://www.javascriptkit.com/window.htm"
matched[11]=0
title[12]="frames access object multiple"
desc[12]="Loading Two frames with one link."
links[12]="http://www.javascriptkit.com/twoframes.htm"
matched[12]=0
title[13]="selection list options array text vale"
desc[13]="I'll hava a double combo please (Part 1 of 2)"
links[13]="http://www.javascriptkit.com/combos1.htm"
matched[13]=0
title[14]="combo link box jump"
desc[14]="I'll hava a double combo please (Part 2 of 2)"
links[14]="http://www.javascriptkit.com/combos2.htm"
matched[14]=0
<!-- End list of Searchable items -->
function search(){
// get the input from the input by the user and strip it into keywords //
var skeyword=document.searchengine.keywords.value.toLowerCase();
var check=1;
var pos=0;
var i=0;
var j=0;
var itemp=0;
var config='';
while (true)
{
if (skeyword.indexOf("+") == -1 )
{
keywords[check]=skeyword;
break;
}
pos=skeyword.indexOf("+");
if (skeyword !="+")
{
keywords[check]=skeyword.substring(0,pos); check++;
}
else
{
check--;
break;
}
skeyword=skeyword.substring(pos+1, skeyword.length);
if (skeyword.length ==0)
{
check--;
break;
}
}
// the keywords have been put in keywords object.
keywords[0]=check;
//alert(check);
// matching and storing the matches in matched
for ( i=1; i<=keywords[0];i++)
{
for (j=1;j<=title[0];j++)
{
if (title[j].toLowerCase().indexOf(keywords[i]) > -1 )
{
matched[j]++;
}
}
}
// putting all the indexes of the matched records in found
for (i=1;i<=title[0];i++)
{
if (matched[i] > 0 )
{
found[0]++;
// increment the found
found[found[0]]=i;
}
}
//alert("found 0 " + found[0]);
// sort the list as per max percentage of matches
for (i=1;i<=found[0]-1;i++)
{
for(j=i+1;j<=found[0];j++)
{
if ( matched[found[i]]< matched[found[j]] )
{
temp= found[j];
found[j]=found[i];
found[i]=temp;
}
}
}
config='toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes'
output = window.open ("","outputwindow",config)
output.document.write('<title> Atlantis Direct Search Result </title>');
output.document.write('<BODY bgcolor=#ffffff text=#000000 link=#990099 vlink =#339966 >');
output.document.write('<center> <h1> Search Results </h1></center>');
output.document.write('<hr>');
output.document.write(' The Keyword(s) you searched :: '.big() );
for (i=1; i<=keywords[0]; i++)
{
output.document.write( keywords[i].bold() +" "); }
output.document.write('<br>');
if (found[0]==0)
{
output.document.write('<hr>');
output.document.write("<b>No matches resulted in this search </b> <br>");
output.document.write("You may close the results and reduce the length/number of the keywords <br>");
}
else
{
output.document.write(" <hr> <b> The Results of the search are : </b> ");
output.document.write( found[0] +" Entries found ".italics());
output.document.write("<table border=1 width=100%>");
for (i=1; i<=found[0];i++)
{
output.document.write("<tr><td valign=topbgcolor=#9999ff>");
output.document.write("<h3>" +i +"</h3>"); output.document.write("<td valign=top>");
itemp=found[i];
output.document.write(desc[itemp].bold() +"<br>" +links[itemp].link(links[itemp])+"<br>");
temp= (matched[itemp]/keywords[0])*100
output.document.write("<i> Matched with keywords :: "+temp+" % </i>" );
matched[itemp]=0
}
found[0]=0;
output.document.write("</table>");
}
output.document.write ('This search was created by © Satadip Dutta 1997'); output.document.write ("<hr>");
output.document.write ("<form><center>");
output.document.write ("<input type='button' value='Start Another Search' onClick = 'self.close()'>") ;
output.document.write ("</center></form>");
output.document.close();
}
</script>
<head>
<body bgcolor="#ffffff">
<center>
<H1>Search Engine</H1>
</center>
<hr>
This is a search engine implemented in Javascript. You will need a
Java Script enabled browser to run this search.
<hr>
<P>
</P>
<TABLE BORDER=0 CELLSPACING=5 CELLPADDING=5>
<TR>
<TD WIDTH="20%" ALIGN="left">
This search is NOT case sensitive.
</TD>
<TD WIDTH="80%" ALIGN="left">
Put "+" between keywords in a list if using more than one keywords.
</TD>
</TR>
</TABLE>
<form name="searchengine">
<center>
Keywords:
<input type = text name ="keywords" placeholder ="Search..." value="" maxlength=40>
<input type = button name="go" Value="Go ahead and find" onClick="search()">
<br>
</center>
</form>
<hr>
<!-- you can write more text/instructions out here. -->
</body>
<html>
Some points to consider:
You forgot to set the type of your button to submit
Links are normally place on the <head>
You should give your form an action
<head>
...
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
...
</head>
...
<form name="searchengine" action="doSomething">
<input type="hidden" name="keywords" value="1">
<div class="box">
<div class="container-4">
<input type="search" id="keywords" placeholder="Search..." />
<button type="submit" class="icon"><i class="fa fa-search"></i></button>
</div>
</div>
Hope it helps.
This code works just fine. Your link is messed up, why is it just // instead of https://? Your links should be in the head, if they aren't they aren't loaded before the body, which causes a split second of unstyled content to show before it reaches the stylesheet. Your form should have an action to perform and your search button should be of the type submit so it's a submit button for the form.
The below code and jsfiddle work just fine if you want to try them out.
Also, Dreamweaver is not that impressive, I recommend getting Netbeans instead, it does the same job but for free (all you really want from your web IDE is code completion so you don't have to write as much, and both Netbeans and Dreamweaver does this equally well except that Netbeans is better for more all-around programming for all kinds of languages).
https://jsfiddle.net/vfmrc40k/
<html>
<head>
<!-- Links go in the head, they are not scripts and this makes them load before the body so that you don't get a split second of unstyled content showing -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script>
function performSearch () {
alert('I am searching!')
// Use e.g. jQuery to get the value for the search box, it's easiest
}
</script>
</head>
<body>
<!-- Your form should have an action to perform, in this case a javascript function. It isn't just 'correct', it also makes it possible to press Enter to perform the search, because enter and the submit button both trigger the forms action. -->
<form name="searchengine" action="javascript:performSearch()">
<input type="hidden" name="keywords" value="1">
<div class="box">
<div class="container-4">
<input type="search" id="keywords" placeholder="Search..." />
<button type="submit" class="icon"><i class="fa fa-search"></i></button>
</div>
<!-- You forgot a </div> -->
</div>
</form>
</body>
</html>
All right. So I'm coding after A LOOONG TIME, and I just went on to codecademy to get a bit refreshed with javascript. So I learnt something I didn't know before : OOP.
Help. I tried something. Will include the JSfiddle. But I don't know why, it doesn't work.
Nevermind my Idiocy, I will complete the code as soon as I know what the problem in the prev code was. I have alot to do in that. I also want to learn PHP to make a kind of phone directory!
I have also NOT included the CSS, but that hardly matters.
What the code should do, is that everytime a user fills up the form and clicks submit, it should append the values in a '#results' div. Not doing anything. Help?
Also, nevermind the two password fields. I will write the code for validating the form once I am clear with this problem.
THANK YOU IN ADVANCE.
JSFIDDLE : http://jsfiddle.net/Ns66V/1/
HTML -- >
<html>
<head>
<link rel="stylesheet" href='style.css'>
<script type="type/javascript" src='jquery.js'></script>
<script type="type/javascript" src='js.js'></script>
<title>Form JS</title>
</head>
<body>
<div class='container'>
<h1>Create an ID! It's absolutely <strong>FREE!</strong></H1>
<div id='form'><form action='get'>
<input name='fname' type='text' placeholder='First Name'><br>
<input name='lname' type='text' placeholder='Last Name'><br>
<input name='email' type='email' placeholder='Email Address'><br>
<input name='passw' type='password' placeholder='Password'>
<input name='Again' id='last' type='password' placeholder='Again!'><br>
<select name='gender'>
<option value='male'>Male</option>
<option value='female'>Female</option>
<option value='other'>Other</option>
</select>
<div id='submit'><strong>SUBMIT IT!</strong></div>
</form>
</div>
<div class='results'>
<div class='vals' id='intro'>
<div class='srn item'>#</div>
<div class='bigitem item'>FULL NAME</div>
<div class='bigitem item'>EMAIL ADDRESS</div>
<div class='gender item'>Gender</div>
</div>
<div class='vals'>
<div class='srn item'>#</div>
<div class='bigitem item'>FULL NAME</div>
<div class='bigitem item'>EMAIL ADDRESS</div>
<div class='gender item'>Gender</div>
</div>
</div>
</div>
</body>
</html>
JS (JQuery) -->
$(document).ready(function(){
function Person(fname,lname,email,passw,gend){
this.fname = fname;
this.lname = lname;
this.email = email;
this.passw = passw;
this.gend = gend;
};
var numPeople = 0; //Setting the number of people var.
$('#submit').click(function(){
var fname = $('input[name=fname]').val(), //SETS VALUES OF ALL THE INPUTS
lname = $('input[name=lname]').val(), //SETS VALUES OF ALL THE INPUTS
email = $('input[name=email]').val(), //SETS VALUES OF ALL THE INPUTS
passw = $('input[name=passw]').val(), //SETS VALUES OF ALL THE INPUTS
gend = $('select[name=gender]').val(); //SETS VALUES OF ALL THE INPUTS
var People = new Array(); //Definin
numPeople++;
People[numPeople] = new Person(fname,lname,email,passw,gend);
$('.results').append(People[numPeople].fname + People[numPeople].lname + People[numPeople].email + People[numPeople].passw + People[numPeople].gend);
}); //#SUBMIT.CLICK() END
});
OOP isn't entirely needed in this case. The problems is that you need to use #results, and you need to close your button along with other tags.
HTML
<button id='submit' type='button'><strong>SUBMIT IT!</strong></button>
JS
$('#results').append(...);
Here is a Fiddle example, added a <br /> at the end.
Also get and post are for a forms method attribute. action is where the form sends the data. So you probably want:
<form method="get"></form>
Check http://jsfiddle.net/Ns66V/4/
The button tag was not closed and the content was appended to the button and
$('#submit').click(function()
should be replaced with
$('#submit').on('click', function()
Now seems to work.
Of course you should improve how you append the content though - use html tags to separate each information.
I have the following javascript code:
game.bind('gameover', function(seconds) {
setTimeout(function() {
var rank = game.getRank(seconds);
scorecard.find('.time').text(seconds + ' sec');
scorecard.find('.rank').text(rank[0]);
scorecard.find('.byline').text(rank[1]);
...more code
In the following div this data is displayed (so the js script is working):
<div class="inner">
<h3>Nice job! Your time:</h3>
<h1 class="wobble time"><!-- 15 seconds --></h1>
<h2 class="rank"><!-- Friendly Mallard --></h2>
<h3 class="byline"><!-- (That's pretty good) --></h3>
</div>
Now I want to put the results also in a form so I can post it to the a database (mysql). So I've added a form and put it in the same div:
<form id="form" action="updatescore.php" method="post">
<input type="text" id="time" name="time" value="" />
<input type="text" id="rank" name="rank" value="" />
<input type="text" id="byline" name="byline" value="" />
</form>
Now in the JS I've copied the lines (e.g. scorecard.find('.time').text(seconds + ' sec');) and changed it to look for the id, so . becomes # and passed it in the js like:
scorecard.find('.time').text(seconds + ' sec');
scorecard.find('#time').text(seconds + ' sec');
etc
So this should work I think, but the form inputs stay empty. What am I doing wrong?
Kind regards,
Maurice
If you are just looking to move js variables into your database via updatescore.php you don't need to use a form at all! You can do it with AJAX.
var scoreData = {
time : time,
rank : rank[0],
byline : rank[1]
};
$.post('updatescore.php', scoreData); //done!
Use val() instead of text() for setting the values