0
我有一个jQuery的功能，提出一个问题，但当用户点击提交，无论答案是否正确，它会自动刷新页面。我的目标是当用户在相应的可拖动div上拖动一个图标时，它会显示正常工作的答案，但是当用户回答问题时，它将刷新页面。请帮忙。如果代码段不起作用，网站就是这样。 http://ceruleanlab.com/prozzleRaw/prozzle.php页面jquery后自动重新加载
function dragItem_ts() {
$(function() {
$("#draggable_ts, #draggable-nonvalid").draggable();
$("#droppable_ts").droppable({
accept: "#draggable_ts",
drop: function(event, ui) {
showquiz();
$(this).addClass("ui-state-highlight").find("p").html("Correct!").alert("I am an alert box!");
}
});
});
}
function dragItem_email() {
$(function() {
$("#draggable_email, #draggable-nonvalid").draggable();
$("#droppable_email").droppable({
accept: "#draggable_email",
drop: function(event, ui) {
showquiz2();
$(this).addClass("ui-state-highlight").find("p").html("Correct!");
}
});
});
}
function dragItem_validation() {
$(function() {
$("#draggable_validation, #draggable-nonvalid").draggable();
$("#droppable_validation").droppable({
accept: "#draggable_validation",
drop: function(event, ui) {
showquiz3();
$(this)
.addClass("ui-state-highlight").find("p").html("Correct!");
}
});
});
}
function dragItem_availability() {
$(function() {
$("#draggable_availability, #draggable-nonvalid").draggable();
$("#droppable_availability").droppable({
accept: "#draggable_availability",
drop: function(event, ui) {
showquiz4();
$(this).addClass("ui-state-highlight").find("p").html("Correct!");
}
});
});
}
function dragItem_order() {
$(function() {
$("#draggable_order, #draggable-nonvalid").draggable();
$("#droppable_order").droppable({
accept: "#draggable_order",
drop: function(event, ui) {
showquiz5();
$(this)
.addClass("ui-state-highlight").find("p").html("Correct!");
}
});
});
}
function tabulateAnswers() {
// initialize variables for each choice's score
// If you add more choices and outcomes, you must add another variable here.
var c1score = 0;
var c2score = 0;
var c3score = 0;
var c4score = 0;
// get a list of the radio inputs on the page
var choices = document.getElementsByTagName('input');
// loop through all the radio inputs
for (i = 0; i < choices.length; i++) {
// if the radio is checked..
if (choices[i].checked) {
// add 1 to that choice's score
if (choices[i].value == 'c1') {
c1score = c1score + 1;
}
if (choices[i].value == 'c2') {
c2score = c2score + 1;
}
if (choices[i].value == 'c3') {
c3score = c3score + 1;
}
if (choices[i].value == 'c4') {
c4score = c4score + 1;
}
// If you add more choices and outcomes, you must add another if statement below.
}
}
// Find out which choice got the highest score.
// If you add more choices and outcomes, you must add the variable here.
var maxscore = Math.max(c1score, c2score, c3score, c4score);
// Display answer corresponding to that choice
var answerbox = document.getElementById('answer');
if (c1score == maxscore) { // If user chooses the first choice the most, this outcome will be displayed.
answerbox.innerHTML = "You are correct"
}
if (c2score == maxscore) { // If user chooses the second choice the most, this outcome will be displayed.
answerbox.innerHTML = "The correct answer is [email protected]"
}
if (c3score == maxscore) { // If user chooses the third choice the most, this outcome will be displayed.
answerbox.innerHTML = "The correct answer is [email protected]"
}
if (c4score == maxscore) { // If user chooses the fourth choice the most, this outcome will be displayed.
answerbox.innerHTML = "The correct answer is [email protected]"
}
// If you add more choices, you must add another response below.
}
// program the reset button
function resetAnswer() {
var answerbox = document.getElementById('answer');
answerbox.innerHTML = "Your result will show up here!";
}
function showquiz() {
var e = document.getElementById('wrapper');
e.style.display = "block";
}
function tabulateAnswers2() {
// initialize variables for each choice's score
// If you add more choices and outcomes, you must add another variable here.
var c1score = 0;
var c2score = 0;
var c3score = 0;
var c4score = 0;
// get a list of the radio inputs on the page
var choices = document.getElementsByTagName('input');
// loop through all the radio inputs
for (i = 0; i < choices.length; i++) {
// if the radio is checked..
if (choices[i].checked) {
// add 1 to that choice's score
if (choices[i].value == 'c1') {
c1score = c1score + 1;
}
if (choices[i].value == 'c2') {
c2score = c2score + 1;
}
if (choices[i].value == 'c3') {
c3score = c3score + 1;
}
if (choices[i].value == 'c4') {
c4score = c4score + 1;
}
// If you add more choices and outcomes, you must add another if statement below.
}
}
// Find out which choice got the highest score.
// If you add more choices and outcomes, you must add the variable here.
var maxscore = Math.max(c1score, c2score, c3score, c4score);
// Display answer corresponding to that choice
var answerbox = document.getElementById('answer2');
if (c1score == maxscore) { // If user chooses the first choice the most, this outcome will be displayed.
answerbox.innerHTML = "The correct answer is 24 - 48 hours"
}
if (c2score == maxscore) { // If user chooses the second choice the most, this outcome will be displayed.
answerbox.innerHTML = "The correct answer is 24 - 48 hours"
}
if (c3score == maxscore) { // If user chooses the third choice the most, this outcome will be displayed.
answerbox.innerHTML = "The correct answer is 24 - 48 hours"
}
if (c4score == maxscore) { // If user chooses the fourth choice the most, this outcome will be displayed.
answerbox.innerHTML = "You are correct"
}
// If you add more choices, you must add another response below.
}
// program the reset button
function resetAnswer2() {
var answerbox = document.getElementById('answer2');
answerbox.innerHTML = "Your result will show up here!";
}
function showquiz2() {
var b = document.getElementById('wrapper2');
b.style.display = "block";
}
function tabulateAnswers3() {
// initialize variables for each choice's score
// If you add more choices and outcomes, you must add another variable here.
var c1score = 0;
var c2score = 0;
var c3score = 0;
var c4score = 0;
// get a list of the radio inputs on the page
var choices = document.getElementsByTagName('input');
// loop through all the radio inputs
for (i = 0; i < choices.length; i++) {
// if the radio is checked..
if (choices[i].checked) {
// add 1 to that choice's score
if (choices[i].value == 'c1') {
c1score = c1score + 1;
}
if (choices[i].value == 'c2') {
c2score = c2score + 1;
}
if (choices[i].value == 'c3') {
c3score = c3score + 1;
}
if (choices[i].value == 'c4') {
c4score = c4score + 1;
}
// If you add more choices and outcomes, you must add another if statement below.
}
}
// Find out which choice got the highest score.
// If you add more choices and outcomes, you must add the variable here.
var maxscore = Math.max(c1score, c2score, c3score, c4score);
// Display answer corresponding to that choice
var answerbox = document.getElementById('answer3');
if (c1score == maxscore) { // If user chooses the first choice the most, this outcome will be displayed.
answerbox.innerHTML = "Customer will get a brand new replacement"
}
if (c2score == maxscore) { // If user chooses the second choice the most, this outcome will be displayed.
answerbox.innerHTML = "You are correct"
}
if (c3score == maxscore) { // If user chooses the third choice the most, this outcome will be displayed.
answerbox.innerHTML = "Customer will get a brand new replacement"
}
if (c4score == maxscore) { // If user chooses the fourth choice the most, this outcome will be displayed.
answerbox.innerHTML = "Customer will get a brand new replacement"
}
// If you add more choices, you must add another response below.
}
// program the reset button
function resetAnswer3() {
var answerbox = document.getElementById('answer3');
answerbox.innerHTML = "Your result will show up here!";
}
function showquiz3() {
var b = document.getElementById('wrapper3');
b.style.display = "block";
}
function tabulateAnswers4() {
// initialize variables for each choice's score
// If you add more choices and outcomes, you must add another variable here.
var c1score = 0;
var c2score = 0;
var c3score = 0;
var c4score = 0;
// get a list of the radio inputs on the page
var choices = document.getElementsByTagName('input');
// loop through all the radio inputs
for (i = 0; i < choices.length; i++) {
// if the radio is checked..
if (choices[i].checked) {
// add 1 to that choice's score
if (choices[i].value == 'c1') {
c1score = c1score + 1;
}
if (choices[i].value == 'c2') {
c2score = c2score + 1;
}
if (choices[i].value == 'c3') {
c3score = c3score + 1;
}
if (choices[i].value == 'c4') {
c4score = c4score + 1;
}
// If you add more choices and outcomes, you must add another if statement below.
}
}
// Find out which choice got the highest score.
// If you add more choices and outcomes, you must add the variable here.
var maxscore = Math.max(c1score, c2score, c3score, c4score);
// Display answer corresponding to that choice
var answerbox = document.getElementById('answer4');
if (c1score == maxscore) { // If user chooses the first choice the most, this outcome will be displayed.
answerbox.innerHTML = "Customer will get a brand new replacement"
}
if (c2score == maxscore) { // If user chooses the second choice the most, this outcome will be displayed.
answerbox.innerHTML = "You are correct"
}
if (c3score == maxscore) { // If user chooses the third choice the most, this outcome will be displayed.
answerbox.innerHTML = "Customer will get a brand new replacement"
}
if (c4score == maxscore) { // If user chooses the fourth choice the most, this outcome will be displayed.
answerbox.innerHTML = "Customer will get a brand new replacement"
}
// If you add more choices, you must add another response below.
}
// program the reset button
function resetAnswer4() {
var answerbox = document.getElementById('answer4');
answerbox.innerHTML = "Your result will show up here!";
}
function showquiz4() {
var b = document.getElementById('wrapper4');
b.style.display = "block";
}
function tabulateAnswers5() {
// initialize variables for each choice's score
// If you add more choices and outcomes, you must add another variable here.
var c1score = 0;
var c2score = 0;
var c3score = 0;
var c4score = 0;
// get a list of the radio inputs on the page
var choices = document.getElementsByTagName('input');
// loop through all the radio inputs
for (i = 0; i < choices.length; i++) {
// if the radio is checked..
if (choices[i].checked) {
// add 1 to that choice's score
if (choices[i].value == 'c1') {
c1score = c1score + 1;
}
if (choices[i].value == 'c2') {
c2score = c2score + 1;
}
if (choices[i].value == 'c3') {
c3score = c3score + 1;
}
if (choices[i].value == 'c4') {
c4score = c4score + 1;
}
// If you add more choices and outcomes, you must add another if statement below.
}
}
// Find out which choice got the highest score.
// If you add more choices and outcomes, you must add the variable here.
var maxscore = Math.max(c1score, c2score, c3score, c4score);
// Display answer corresponding to that choice
var answerbox = document.getElementById('answer4');
if (c1score == maxscore) { // If user chooses the first choice the most, this outcome will be displayed.
answerbox.innerHTML = "Customer will get a brand new replacement"
}
if (c2score == maxscore) { // If user chooses the second choice the most, this outcome will be displayed.
answerbox.innerHTML = "You are correct"
}
if (c3score == maxscore) { // If user chooses the third choice the most, this outcome will be displayed.
answerbox.innerHTML = "Customer will get a brand new replacement"
}
if (c4score == maxscore) { // If user chooses the fourth choice the most, this outcome will be displayed.
answerbox.innerHTML = "Customer will get a brand new replacement"
}
// If you add more choices, you must add another response below.
}
// program the reset button
function resetAnswer5() {
var answerbox = document.getElementById('answer5');
answerbox.innerHTML = "Your result will show up here!";
}
function showquiz5() {
var b = document.getElementById('wrapper5');
b.style.display = "block";
}
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
dragItem_ts();
dragItem_email();
dragItem_validation();
dragItem_availability();
dragItem_order();#droppable_ts,
#droppable_email,
#droppable_validation,
#droppable_availability,
#droppable_order,
#droppable_quality,
#droppable_shipment,
#droppable_delivery {
width: 120px;
height: 120px;
padding: 0.5em;
float: left;
margin: 10px;
}
#draggable_ts,
#draggable_email,
#draggable_validation,
#draggable_availability,
#draggable_order {
width: 100px;
height: 100px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
z-index: 4;
}
body {
font-family: sans-serif;
}
h2 {
margin: 5px 0;
}
#wrapper,
#wrapper2,
#wrapper3,
#wrapper4,
#wrapper5 {
width: 600px;
margin: 0 auto;
background: white;
padding: 10px 15px;
border-radius: 10px;
display: none;
}
input {
margin: 5px 10px;
}
button {
font-size: 18px;
padding: 10px;
margin: 20px 0;
color: white;
border: 0;
border-radius: 10px;
border-bottom: 3px solid #333;
}
#submit {
background: green;
}
#reset {
background: red;
}
#answer {
border: 1px dashed #ccc;
background: #eee;
padding: 10px;
}
#draggable_container {
background-color: blue;
}
.ui-widget-content {
background-color: #99ff66;
margin: auto;
width: 12.5%;
}
.draggable_container_inner {
heigth: 100px;
width: 12.5%;
float: left;
}
.draggable_container {
width: 1400px;
}
#droppable_ts {
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#droppable_email {
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
#droppable_ts .popuptextTs {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
}
#droppable_email .popuptextEmail {
visibility: visible;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
}
/* Popup arrow */
#droppable_ts.popuptextTs::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
#droppable_email.popuptextEmail::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
#droppable_ts .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animatitsadeIn 1s;
}
#droppable_email .show2 {
visibility: visible;
-webkit-animation: fadeIn 1s;
animatitsadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src=javascript/functions.js>
</script>
<div id="draggable_container">
<div class="draggable_container_inner">
<div id="draggable_ts" class="ui-widget-content">
<img src="images/ts_image02.jpg">
</div>
</div>
<div class="draggable_container_inner">
<div id="draggable_email" class="ui-widget-content">
<img src="images/email_logo.jpg">
</div>
</div>
<div class="draggable_container_inner">
<div id="draggable_validation" class="ui-widget-content">
<img src="images/validation_logo.jpg">
</div>
</div>
<div class="draggable_container_inner">
<div id="draggable_availability" class="ui-widget-content">
<img src="images/availability_logo.jpg">
</div>
</div>
<div class="draggable_container_inner">
<div id="draggable_order" class="ui-widget-content">
<img src="images/order_logo.jpg">
</div>
</div>
<div class="draggable_container_inner">
<div id="draggable_email" class="ui-widget-content">
<img src="images/quality_logo.jpg">
</div>
</div>
<div class="draggable_container_inner">
<div id="draggable_email" class="ui-widget-content">
<img src="images/shipment_logo.jpg">
</div>
</div>
<div class="draggable_container_inner">
<div id="draggable_email" class="ui-widget-content">
<img src="images/delivered_logo.jpg">
</div>
</div>
</div>
<div id="droppable_container">
<div id="droppable_ts" class="ui-widget-header" onclick="myFunction()">
<span class="popuptextTs" id="myPopup">This step is where the level 1 support does troubleshooting</span>
<p></p>
</div>
<div id="droppable_email" class="ui-widget-header" onclick="myFunction2()">
<span class="popuptextEmail" id="myPopup">This step is where the customer needs to send the email for verification</span>
<p></p>
</div>
<div id="droppable_validation" class="ui-widget-header">
<p></p>
</div>
<div id="droppable_availability" class="ui-widget-header">
<p></p>
</div>
<div id="droppable_quality" class="ui-widget-header">
<p></p>
</div>
<div id="droppable_shipment" class="ui-widget-header">
<p></p>
</div>
<div id="droppable_delivery" class="ui-widget-header">
<p></p>
</div>
</div>
<div id="wrapper">
<h1>What is the email address that the customer should send them to?</h1>
<form id="quiz">
<!-- Question 1 -->
<!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
<!-- The value is which answer the choice corresponds to. -->
<label>
<input type="radio" name="q1" value="c1">
[email protected]
</label><br />
<label>
<input type="radio" name="q1" value="c2">
[email protected]
</label><br />
<label>
<input type="radio" name="q1" value="c3">
[email protected]
</label><br />
<label>
<input type="radio" name="q1" value="c4">
[email protected]
</label><br />
<button type="submit" id="submit" onclick="tabulateAnswers()">Submit Your Answers</button>
<button type="reset" id="reset" onclick="resetAnswer()">Reset</button>
</form>
<div id="answer">Your result will show up here!</div>
</div>
<div id="wrapper2">
<h1>What is the TAT for validating the pictures and POP?</h1>
<form id="quiz">
<!-- Question 1 -->
<!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
<!-- The value is which answer the choice corresponds to. -->
<label>
<input type="radio" name="q1" value="c1">
24 hours
</label><br />
<label>
<input type="radio" name="q1" value="c2">
6 hours
</label><br />
<label>
<input type="radio" name="q1" value="c3">
72 hours
</label><br />
<label>
<input type="radio" name="q1" value="c4">
24 - 48 hours
</label><br />
<button type="submit" id="submit" onclick="tabulateAnswers2()">Submit Your Answers</button>
<button type="reset" id="reset" onclick="resetAnswer2()">Reset</button>
</form>
<div id="answer2">Your result will show up here!</div>
</div>
<div id="wrapper3">
<h1>What will the customer get if the original unit is within 90 days from DOP?</h1>
<form id="quiz">
<!-- Question 1 -->
<!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
<!-- The value is which answer the choice corresponds to. -->
<label>
<input type="radio" name="q1" value="c1">
Refurbished Unit
</label><br />
<label>
<input type="radio" name="q1" value="c2">
Brand New Replacement Unit
</label><br />
<label>
<input type="radio" name="q1" value="c3">
Defective Unit
</label><br />
<label>
<input type="radio" name="q1" value="c4">
Refund
</label><br />
<button type="submit" id="submit" onclick="tabulateAnswers3()">Submit Your Answers</button>
<button type="reset" id="reset" onclick="resetAnswer3()">Reset</button>
</form>
<div id="answer3">Your result will show up here!</div>
</div>
<div id="wrapper4">
<h1>A B stock unit undergoes a different quality check from that of A stock. True or false?</h1>
<form id="quiz">
<!-- Question 1 -->
<!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
<!-- The value is which answer the choice corresponds to. -->
<label>
<input type="radio" name="q1" value="c1">
True
</label><br />
<label>
<input type="radio" name="q1" value="c2">
False
</label><br />
<label>
<input type="radio" name="q1" value="c3">
N/A
</label><br />
<label>
<input type="radio" name="q1" value="c4">
not sure
</label><br />
<button type="submit" id="submit" onclick="tabulateAnswers4()">Submit Your Answers</button>
<button type="reset" id="reset" onclick="resetAnswer4()">Reset</button>
</form>
<div id="answer4">Your result will show up here!</div>
</div>
<div id="wrapper5">
<h1>A B stock unit undergoes a different quality check from that of A stock. True or false?</h1>
<form id="quiz">
<!-- Question 1 -->
<!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
<!-- The value is which answer the choice corresponds to. -->
<label>
<input type="radio" name="q1" value="c1">
True
</label><br />
<label>
<input type="radio" name="q1" value="c2">
False
</label><br />
<label>
<input type="radio" name="q1" value="c3">
N/A
</label><br />
<label>
<input type="radio" name="q1" value="c4">
not sure
</label>
<br />
<button type="submit" id="submit" onclick="tabulateAnswers5()">Submit Your Answers</button>
<button type="reset" id="reset" onclick="resetAnswer5()">Reset</button>
</form>
<div id="answer5">Your result will show up here!</div>
</div>
从'<按钮类型更改按钮* S * = “提交”''到<按钮类型= “按钮”'。因为它们是'type ='submit''，所以它将表单发布到服务器上，您所描述的并不是您希望在此时执行的操作。或者，在'function tabulateAnswers（）'（及其他）的末尾添加'return false;'。 –
帮助，谢谢，但我需要隐藏或删除调查问卷，一旦他们点击提交，无论它是否正确，有什么想法？我可以通过CSS设置它是否隐形？ –
我想我会在旁边放一个关闭按钮，非常感谢您的亲切先生。 –