I have an asp.net mvc4 application, i need some in this issue :
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css"/>
<script>
$(function () {
$(".datepicker").datepicker();
});
</script>
</head>
<br/><br/>
<center><strong style="color:red; font-size:x-large">Réserver une véhicule</strong></center>
<br/><br/>
<form action="/User/Reserver" method="post" style="margin-left: 33%; ">
<div>
<strong style="color:blue">L'affaire de la réservation </strong>
<div>
<SELECT style="" name="id_affaire">
#for(int item =0; item < Model[0].Count; item++){
<OPTION VALUE="#Model[0][item].Id_affaire">#Model[0][item].Affaire_description</OPTION>
}
</SELECT>
</div>
<br/> <br/>
</div>
<div>
<strong style="color:blue">Le matricule de véhicule </strong>
<div>
<SELECT style="" name="matricule">
#for(int item =0; item < Model[1].Count; item++){
<OPTION VALUE="#Model[1][item].Id_vehicule">#Model[1][item].Matricule</OPTION>
}
</SELECT>
</div>
</div>
<br/><br/>
<div>
<input type="radio" name="choix" id="plus" value="Plus d'un jour" style=" margin-left:0px; width: 30px" checked>
<strong style="color:black ">Plus d'un jour</strong>
<br/>
<div><strong style="color:blue ">Nombre de jours</strong></div>
<div><input type="text" name="nbr_jours"/></div>
<br/>
<div>
<strong style="color:blue ">A partir de </strong>
<div>
<input type="text" class="datepicker" name="date" value="" style=""/>
</div>
</div>
</div>
<br/>
<div>
<input type="radio" name="choix" id="un" value="un jour" style=" margin-left:0px; width: 30px">
<strong style="color:black ">Un jour</strong>
<br/>
<div>
<strong style="color:blue ">Le : </strong>
<div>
<input type="text" class="datepicker" name="date" value="" style=""/>
</div>
</div>
</div>
<br/>
<div>
<input type="radio" name="choix" id="periode" value="une periode" style=" margin-left:0px; width: 30px">
<strong style="color:black ">Une période</strong>
<br/> <strong style="color:blue">La période </strong>
<div>
<SELECT style="" name="periode">
<OPTION VALUE="1">Matinale</OPTION>
<OPTION VALUE="2">Aprés Midi</OPTION>
</SELECT>
</div>
</div>
<div>
<strong style="color:blue ">Jour </strong>
<div>
<input type="text" class="datepicker" name="date" value="" style=""/>
</div>
</div>
<br/>
<div><input type="submit" value="Reserver" name="btn" style="color:black"/></div>
</form>
I need to fadein and fadeout the input elements when i check a radiobox : for example if i check the <input type="radio" name="choix" id="plus" value="Plus d'un jour" style=" margin-left:0px; width: 30px" checked> all the input in the div below will be hidden.
How can i do it with jquery?
$('input[name="choix"]').on('click', function(){
var $this = $(this),
allinputs = $this.parent().find('input:not("' + $this + '")');
if($this.is(':checked')) allinputs.fadeOut(300);
else allinputs.fadeIn(300);
});
$(document).ready(function(){
$("input:radio").click(function(){
$("input:radio").siblings("div").show();
$(this).siblings("div").hide();
});
});
http://jsfiddle.net/ZfXTT/2/
<script>
$(function () {
$(".datepicker").datepicker();
$("#plus").click(function(ev){
var $el = $(ev.currentTarget),
$target = $('div[data-toggler="' + $el.attr('id') + '"]');
if ($el.prop("checked")) {
$target.fadeOut();
} else {
$target.fadeIn();
}
})
});
</script>
<div>
<label><!-- use label for good usability -->
<input type="radio" name="choix" id="plus" value="Plus d'un jour" style=" margin-left:0px; width: 30px" checked>
<strong style="color:black ">Plus d'un jour</strong>
</label>
<!-- set attr data-toggler for direct detection target -->
<div class="fadeToggle" data-toggler="plus">
<label>
<strong style="color:blue ">Nombre de jours</strong><br />
<input type="text" name="nbr_jours"/>
</label>
<br/>
<label>
<strong style="color:blue ">A partir de </strong><br />
<input type="text" class="datepicker" name="date" value="" style=""/>
</label>
</div>
</div>
Related
This code is in loop
<div class="card card-fluid">
#php $counterId++;
$formId = 'startLog'.$counterId;
#endphp
{!! Form::open(['id'=>$formId,'class'=>'ajax-form','method'=>'POST', 'onSubmit' => 'return false']) !!}
<div class="card-body">
<div class="row white-box">
<div class="col-md-4">
<input type="text" class="task-name" name="task_name" value="" placeholder="write about your task">
</div>
<div class="col-md-2" style="margin-right: -50px;">
<select class="custom-select-timer" name="update_memberProject[]">
<option selected disabled>Projects</option>
<option>1st</option>
<option>2nd</option>
<option>3rd</option>
</select>
</div>
<div class="col-md-1 bill_icon" style="border-left: lightgray 1px dotted; max-width: 50px;">
<input type="checkbox" name="bill">
<label style="margin-left: 8px;">Check Bill </label>
</div>
</div>
</div>
{!! Form::close() !!}
all i want if any change in form either select new option or check box or text field i can catch that chages
please help
You can select all input in jquery and test the tagname modified.
//i have added event 'input' if you want to test every modification of input Text
// if you want to test the input Text after validation, keep only the event change
$("select, input[type=checkbox], input[type=text]").on('change, input', function(e){
console.log($(this).prop("tagName") + " has been changed");
console.log("formid: " + $(this).parents("form:first").attr("id"));
//following the The tag, you could navigate along the properties of tag and its children
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="card-body">
<div class="row white-box">
<div class="col-md-4">
<input type="text" class="task-name" name="task_name" value="" placeholder="write about your task">
</div>
<div class="col-md-2" style="margin-right: -50px;">
<select class="custom-select-timer" name="update_memberProject[]">
<option selected disabled>Projects</option>
<option>1st</option>
<option>2nd</option>
<option>3rd</option>
</select>
</div>
<div class="col-md-1 bill_icon" style="border-left: lightgray 1px dotted; max-width: 150px;">
<input type="checkbox" name="bill">
<label style="margin-left: 8px;">Check Bill </label>
</div>
</div>
you can simplify the test of change/input and just keep the test of tag modified:
$("form").on('change, input', 'input, textarea, select', function(e){
console.log($(this).prop("tagName") + " has been changed");
console.log("formid: " + $(this).parents("form:first").attr("id"));
//following the The tag, you could navigate along the properties of tag and its children
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<form action="/ma-page-de-traitement" method="post" id="form1">
<div class="card-body">
<input type="text" class="task-name" name="task_name" value="" placeholder="write about your task">
<div class="col-md-2" style="margin-right: -50px;">
<select class="custom-select-timer" name="update_memberProject[]">
<option selected disabled>Projects</option>
<option>1st</option>
<option>2nd</option>
<option>3rd</option>
</select>
</div>
<div class="col-md-1 bill_icon" style="border-left: lightgray 1px dotted; max-width: 150px;">
<input type="checkbox" name="bill">
<label style="margin-left: 8px;">Check Bill </label>
</div>
<div>
<label for="mail">e-mail :</label>
<input type="email" id="mail" name="user_mail">
<div>
<label for="msg">Message :</label>
<textarea id="msg" name="user_message"></textarea>
</div>
</div>
</div>
</form>
<form action="/ma-page-de-traitement" method="post" id="form2">
<div class="card-body">
<input type="text" class="task-name" name="task_name" value="" placeholder="write about your task">
<div class="col-md-2" style="margin-right: -50px;">
<select class="custom-select-timer" name="update_memberProject[]">
<option selected disabled>Projects</option>
<option>1st</option>
<option>2nd</option>
<option>3rd</option>
</select>
</div>
<div class="col-md-1 bill_icon" style="border-left: lightgray 1px dotted; max-width: 150px;">
<input type="checkbox" name="bill">
<label style="margin-left: 8px;">Check Bill </label>
</div>
<div>
<label for="mail">e-mail :</label>
<input type="email" id="mail" name="user_mail">
<div>
<label for="msg">Message :</label>
<textarea id="msg" name="user_message"></textarea>
</div>
</div>
</div>
</form>
I'm currently working on a web app I'm stuck on deleting the elements that I have created.
I'm using jQuery to display thumbnail pictures and I'm trying to include a hovering X to the top right corner that will on-click delete the thumbnail and the original file upload before sending the form.
This is my code:
$(document).ready(function() {
// This is where I create the thumbnail:
$('#uploadImage').on('change', function() {
resizeImages(this.files[0], function(dataUrl) {
$('#photo1').val(dataUrl);
document.getElementById("uploadPreview").src = dataUrl;
});
});
// This is where I am attempting to delete it:
$('.hiddenImages .close').on('click', function() {
var id = $(this).closest('.hiddenImages').find('img').data('id');
alert('remove picture: ' + id);
document.getElementById(".hiddenImages").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pictureHolders">
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview" data-id="photo-1" style="width: 100px;
height: 100px;" />
</div>
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview2" data-id="photo-2" style="width: 100px;
height: 100px;" />
</div>
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview3" data-id="photo-3" style="width:
100px; height: 100px;" />
</div>
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview4" data-id="photo-4" style="width: 100px;
height: 100px;" />
</div>
</div>
<div class="inputs">
<div> Photo 1:
<input type="text" id="desc1" name="desc1" />
<input id="uploadImage" type="file" />
</div>
<input type="hidden" class="photos" id="photo1" name="photo1" value="" />
<br/>
<div> Photo 2:
<input type="text" id="desc2" name="desc2" />
<input id="uploadImage2" type="file" />
</div>
<input type="hidden" class="photos" id="photo2" name="photo2" value="" />
<br/>
<div> Photo 3:
<input type="text" id="desc3" name="desc3" />
<input id="uploadImage3" type="file" />
</div>
<input type="hidden" class="photos" id="photo3" name="photo3" value="" />
<br/>
<div> Photo 4:
<input type="text" id="desc4" name="desc4" />
<input id="uploadImage4" type="file" />
</div>
<input type="hidden" class="photos" id="photo4" name="photo4" value="" />
<br/>
</div>
Any help would be appreciated.
You are trying to get a handle to an identifier by using a class name inside getElemlementById
You should be able to simply remove the container of the clcked x, similar to this: $(this).closest('.hiddenImages').remove();
In addition your selector for the click event on the x might need to change as you are removing the container your binding to and as such any new .hiddenImages container will not have that click event bound.
You might need to update $('.hiddenImages .close').on('click', function... to $('.pictureHolders').on('click', '.hiddenImages .close', function...
$(document).ready(function() {
// This is where I create the thumbnail:
$('#uploadImage').on('change', function() {
resizeImages(this.files[0], function(dataUrl) {
$('#photo1').val(dataUrl);
document.getElementById("uploadPreview").src = dataUrl;
});
});
// This is where I am attempting to delete it:
$('.pictureHolders').on('click', '.hiddenImages .close', function() {
$(this).closest('.hiddenImages').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pictureHolders">
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview" data-id="photo-1" style="width: 100px;
height: 100px;" />
</div>
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview2" data-id="photo-2" style="width: 100px;
height: 100px;" />
</div>
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview3" data-id="photo-3" style="width:
100px; height: 100px;" />
</div>
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview4" data-id="photo-4" style="width: 100px;
height: 100px;" />
</div>
</div>
<div class="inputs">
<div> Photo 1:
<input type="text" id="desc1" name="desc1" />
<input id="uploadImage" type="file" />
</div>
<input type="hidden" class="photos" id="photo1" name="photo1" value="" />
<br/>
<div> Photo 2:
<input type="text" id="desc2" name="desc2" />
<input id="uploadImage2" type="file" />
</div>
<input type="hidden" class="photos" id="photo2" name="photo2" value="" />
<br/>
<div> Photo 3:
<input type="text" id="desc3" name="desc3" />
<input id="uploadImage3" type="file" />
</div>
<input type="hidden" class="photos" id="photo3" name="photo3" value="" />
<br/>
<div> Photo 4:
<input type="text" id="desc4" name="desc4" />
<input id="uploadImage4" type="file" />
</div>
<input type="hidden" class="photos" id="photo4" name="photo4" value="" />
<br/>
</div>
$('.hiddenImages .close').on('click', function() {
var id = $(this).closest('.hiddenImages').find('img').data('id');
alert('remove picture: ' + id);
document.getElementById(".hiddenImages").remove();
});
become:
$('.hiddenImages .close').on('click', function() {
var img = $(this).closest('.hiddenImages').find('img');
img.remove()
});
It worked and now it doesn't. I just can't find what i did wrong.
It should show a div with driving license categories when you select "Ja" in select box.
Following is the source code. It should be very simple to solve this i just can't see it :(
var nein = $('#nein'),
ja = $('#ja');
ja.click(function() {
if ($('#kfz').hasClass('in')) {
return false;
}
});
nein.click(function() {
if (!$('#kfz').hasClass('in')) {
return false;
}
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<label for="has_driverslicense">KFZ Führerschein:</label>
<select class="form-control" required="required" id="has_driverslicense" name="has_driverslicense">
<option value="0" id="nein" data-toggle="collapse" data-target="#kfz">Nein</option>
<option value="1" id="ja" data-toggle="collapse" data-target="#kfz">Ja</option>
</select>
<div id="kfz" class="collapse out">
<div>
<input id="checkbox-20" class="checkbox-style" name="work_as_service" type="checkbox">
<label for="checkbox-20" class="checkbox-style-3-label">B (Auto bis 3,49t)</label>
</div>
<div>
<input id="checkbox-21" class="checkbox-style" name="work_as_service_cashier" type="checkbox">
<label for="checkbox-21" class="checkbox-style-3-label">BE (Auto mit Anhänger)</label>
</div>
<div>
<input id="checkbox-22" class="checkbox-style" name="work_as_service_leader" type="checkbox">
<label for="checkbox-22" class="checkbox-style-3-label">C1 (LKW bis 7,49t)</label>
</div>
<div>
<input id="checkbox-23" class="checkbox-style" name="work_as_bar" type="checkbox">
<label for="checkbox-23" class="checkbox-style-3-label">C (LKW bis 40t)</label>
</div>
<div>
<input id="checkbox-24" class="checkbox-style" name="work_as_logistics" type="checkbox">
<label for="checkbox-24" class="checkbox-style-3-label">CE (LKW mit Anhänger)</label>
</div>
<div>
<input id="checkbox-25" class="checkbox-style" name="work_as_cook" type="checkbox">
<label for="checkbox-25" class="checkbox-style-3-label">Fahrerkarte</label>
</div>
<div>
<input id="checkbox-26" class="checkbox-style" name="work_as_cook_assistant" type="checkbox">
<label for="checkbox-26" class="checkbox-style-3-label">Gabelstaplerführerschein</label>
</div>
<div>
<input id="checkbox-27" class="checkbox-style" name="work_as_cook_assistant" type="checkbox">
<label for="checkbox-27" class="checkbox-style-3-label">Geländestaplerführerschein</label>
</div>
<div>
<input id="checkbox-28" class="checkbox-style" name="work_as_cook_assistant" type="checkbox">
<label for="checkbox-28" class="checkbox-style-3-label">IPAF – Arbeitsbühnen</label>
</div>
</div>
</body>
</html>
Get the value from select, and use addClass/remoceClass
$("#has_driverslicense").on("change", function(){
if($(this).val() === "1") {
$('#kfz').addClass("in");
} else {
$('#kfz').removeClass("in");
}
})
I've updated the fiddle:
https://jsfiddle.net/aq8pqbft/1/
I'm trying to pass in the dropdown menu selection to a function in my Javascript File. This works, but as soon as I hit the submit button the dropdown menu choices get deleted, and I'm left with an empty dropdown menu. (This seems to only happen when it's an app in google scripts.)
Any thoughts why this is happening? Is there a better way to do this with apps script?
Any help would be greatly appreciated.
function doSomething(){
var x = document.getElementById("API_key").value;
document.getElementById("API_key").innerHTML = x;
var subdomain =document.getElementById("subdomain").value;
document.getElementById("subdomain").innerHTML = subdomain;
var state = document.getElementById("stateSelect").value;
document.getElementById("stateSelect").innerHTML = state;
google.script.run.getInfo(x,subdomain,state);
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<head>
<base target="_top">
</head>
<body>
<P ALIGN=Center>
<BLOCKQUOTE>
<P ALIGN=Left>
<div class="inline form-group">
<label for="API_key">API Key</label>
<input type="text" id="API_key" style="width: 150px;" value="Enter API key here!">
</div>
<P ALIGN=Left>
<div class="inline form-group">
<p>
<label for="Subdomain">Subdomain</label>
<input type="text" id="subdomain" style="width: 150px;">
</p>
</div>
<select id ="stateSelect">
<option value="">All</option>
<option value="&state=active">Active</option>
<option value="&state=past_due">Past Due</option>
<option value="&state=canceled">Canceled</option>
<option value="&state=expired">Expired</option>
<option value="&state=trialing">Trialing</option>
</select>
<div>
<input type="checkbox" id="Product Info" checked>
<label for="Product Info">Product Info</label>
</div>
<div>
<input type="checkbox" id="Shipping Info">
<label for="Shipping Info">Shipping Info</label>
</div>
<div>
<p>
<input class="action" type="button" onclick="doSomething()" value="Get Info!" />
</p>
</div>
</BLOCKQUOTE>
</body>
</html>
function doSomething(){
var x = document.getElementById("API_key").value;
var subdomain =document.getElementById("subdomain").value;
var state = document.getElementById("stateSelect").value;
google.script.run.getInfo(x,subdomain,state);
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<head>
<base target="_top">
</head>
<body>
<P ALIGN=Center>
<BLOCKQUOTE>
<P ALIGN=Left>
<div class="inline form-group">
<label for="API_key">API Key</label>
<input type="text" id="API_key" style="width: 150px;" value="Enter API key here!">
</div>
<P ALIGN=Left>
<div class="inline form-group">
<p>
<label for="Subdomain">Subdomain</label>
<input type="text" id="subdomain" style="width: 150px;">
</p>
</div>
<select id ="stateSelect">
<option value="">All</option>
<option value="&state=active">Active</option>
<option value="&state=past_due">Past Due</option>
<option value="&state=canceled">Canceled</option>
<option value="&state=expired">Expired</option>
<option value="&state=trialing">Trialing</option>
</select>
<div>
<input type="checkbox" id="Product Info" checked>
<label for="Product Info">Product Info</label>
</div>
<div>
<input type="checkbox" id="Shipping Info">
<label for="Shipping Info">Shipping Info</label>
</div>
<div>
<p>
<input class="action" type="button" onclick="doSomething()" value="Get Info!" />
</p>
</div>
</BLOCKQUOTE>
</body>
</html>
This is not necessary .just comment and check it
function doSomething(){
var x = document.getElementById("API_key").value;
document.getElementById("API_key").innerHTML = x;
var subdomain =document.getElementById("subdomain").value;
document.getElementById("subdomain").innerHTML = subdomain;
var state = document.getElementById("stateSelect").value;
//document.getElementById("stateSelect").innerHTML = state;
google.script.run.getInfo(x,subdomain,state);
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I know that I need to add a window.open to my code, but my problem is I am not sure where it needs to go to work properly. What I am trying to do is have a new window open when you click on check. This window will display the results. Thank You
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Math Worksheet</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script>
var variable = new Array();
var correct=0;
function setupEvents() { // Loads page
makeProblems();
}
function makeProblems() { // Creates variables for problems
var tempText;
for ( i=0; i < 20; i++) {
variable[i] = Math.floor(Math.random() * 50) + 1;
tempText = variable[i];
i++;
document.getElementById('var' + i).innerHTML = tempText;
i--;
}
}
function checkAnswers() { // checks the answers
var answer;
var sum;
var number1;
var number2;
var j=0;
var img=0;
for ( i=1; i <= 10; i++) {
answer = document.getElementById('answer' + i).value;
if ( checkInput(answer, i) == false ) { //Error-checking
return false;
}
number1 = variable[j];
j++
number2 = variable[j];
sum = number1 + number2;
j++;
if ( answer == sum ) {
document.images[img].src = "img/correct.gif";
correct++;
} else {
document.images[img].src = "img/wrong.gif";
}
//}
img++;
}
disableButton();
giveResults();
}
function checkInput(answer, i){
if( isNaN(answer) || answer == "" ) { // makes sure that the input is a number
for (j=0; j < 10; j++) {
document.images[j].src = "img/hide.png"; // image used to swap between corret and wrong images
}
window.alert("Please enter a number.");
document.getElementById('answer' + i).value = "";
document.getElementById('answer' + i).focus();
correct=0;
return false;
} else {
document.getElementById('answer' + i).setAttribute("class", "");
}
}
function disableButton() {
document.getElementById('buttons').innerHTML = "<input type='button' value=' More! ' onclick='moreProblems()' id='more' class='right' /><input type='button' value=' Check! ' onclick='checkAnswers()' id='check' class='right' disabled='disabled'/>";
}
function giveResults() {
// gives number of correct answers
if ( correct == 10 ) {
document.getElementById('correct').innerHTML = correct + " out of 10!<br />Way to Go! You are great at Math!";
} else {
document.getElementById('correct').innerHTML = correct + " out of 10!<br />Nice try! Let's give it another shot! I know you can do it!";
}
}
function moreProblems() { // reloads the page
window.document.location = "math.html";
}
window.onload = setupEvents;
</script>
</head>
<body>
<div id="container">
<div id="header"> </div>
<div id="header2"> </div>
<div id="worksheet">
<form action="">
<div id="main">
<div class="problem">
<input class="carryOver" type="text" size="1" maxlength="1">
<img src="img/hide.png" alt="">
<p class="variables">
<span id="var1">34</span><br>
+<span id="var2">8</span>
</p>
<div class="line"> </div>
<hr>
<input type="text" size="3" maxlength="3" id="answer1" value="" class="">
</div>
<div class="problem">
<input class="carryOver" type="text" size="1" maxlength="1">
<img src="img/hide.png" alt="">
<p class="variables">
<span id="var3">4</span><br>
+<span id="var4">25</span>
</p>
<div class="line"> </div>
<hr>
<input type="text" size="3" maxlength="3" id="answer2" value="" class="">
</div>
<div class="problem">
<input class="carryOver" type="text" size="1" maxlength="1">
<img src="img/hide.png" alt="">
<p class="variables">
<span id="var5">9</span><br>
+<span id="var6">26</span>
</p>
<div class="line"> </div>
<hr>
<input type="text" size="3" maxlength="3" id="answer3" value="" class="">
</div>
<div class="problem">
<input class="carryOver" type="text" size="1" maxlength="1">
<img src="img/hide.png" alt="">
<p class="variables">
<span id="var7">28</span><br>
+<span id="var8">4</span>
</p>
<div class="line"> </div>
<hr>
<input type="text" size="3" maxlength="3" id="answer4" value="" class="">
</div>
<div class="problem">
<input class="carryOver" type="text" size="1" maxlength="1">
<img src="img/hide.png" alt="">
<p class="variables">
<span id="var9">32</span><br>
+<span id="var10">24</span>
</p>
<div class="line"> </div>
<hr>
<input type="text" size="3" maxlength="3" id="answer5" value="" class="">
</div>
<div class="problem">
<input class="carryOver" type="text" size="1" maxlength="1">
<img src="img/hide.png" alt="">
<p class="variables">
<span id="var11">46</span><br>
+<span id="var12">17</span>
</p>
<div class="line"> </div>
<hr>
<input type="text" size="3" maxlength="3" id="answer6" value="" class="">
</div>
<div class="problem">
<input class="carryOver" type="text" size="1" maxlength="1">
<img src="img/hide.png" alt="">
<p class="variables">
<span id="var13">3</span><br>
+<span id="var14">48</span>
</p>
<div class="line"> </div>
<hr>
<input type="text" size="3" maxlength="3" id="answer7" value="" class="">
</div>
<div class="problem">
<input class="carryOver" type="text" size="1" maxlength="1">
<img src="img/hide.png" alt="">
<p class="variables">
<span id="var15">43</span><br>
+<span id="var16">50</span>
</p>
<div class="line"> </div>
<hr>
<input type="text" size="3" maxlength="" id="answer8" value="" class="">
</div>
<div class="problem">
<input class="carryOver" type="text" size="1" maxlength="1">
<img src="img/hide.png" alt="">
<p class="variables">
<span id="var17">9</span><br>
+<span id="var18">44</span>
</p>
<div class="line"> </div>
<hr>
<input type="text" size="3" maxlength="3" id="answer9" value="" class="">
</div>
<div class="problem">
<input class="carryOver" type="text" size="1" maxlength="1">
<img src="img/hide.png" alt="">
<p class="variables">
<span id="var19">18</span><br>
+<span id="var20">43</span>
</p>
<div class="line"> </div>
<hr>
<input type="text" size="3" maxlength="3" id="answer10" value="" class="">
</div>
</div>
<div id="footer">
<div class="left">Correct: <span id="correct"> </span></div>
<div id="buttons" class="right buttons">
<input type="button" value=" More! " onclick="moreProblems()" id="more" class="right">
<input type="button" value=" Check! " onclick="checkAnswers()" id="check" class="right">
</div>
</div>
</form>
</div>
<p></p>
</div>
</html>
I'm assuming the Results you want in the new window are those described by giveResults.
You could rewrite the function to open a data URI of what you want to display.
function giveResults() { // gives number of correct answers
if (correct == 10) {
window.open('data:text/plain,' + encodeURIComponent(correct + " out of 10!\r\nWay to Go! You are great at Math!"));
} else {
window.open('data:text/plain,' + encodeURIComponent(correct + " out of 10!\r\nNice try! Let's give it another shot! I know you can do it!"));
}
}