Question

我需要在故事中显示表单中的答案。只有在表单成功提交（不是警报）之后，故事必须显示在表单下方，并且表单保留在页面上（不是新页面）。我可以将表单值插入到故事中，但在提交表单后需要帮助显示故事。我不能使用除HTML和JavaScript之外的任何东西。我认为这可以通过innerHTML来完成。

<head><title>Questions</title>
<script type = "text/javascript" src="quiz1.js">
</script>
</head><body>
<h1>Tell Me About Yourself</h1>
<form name = "the_form" action = "" method = "post"
onSubmit = "var the_result = checkMandatory(); return the_result;">
Full Name:<input type = "text" name = "name" id = "name" /><br/>
Favourite Animal:<input type = "text" name = "animal" id = "animal"><br/>
Favourite Food:<input type = "text" name = "favFood" id = "favFood"><br/>
Favourite Destination:<input type = "text" name = "destination" id = "desitnation"><br/>
Least Favourite Food:<input type = "text" name = "leastFav" id = "leastFav"><br/>
Happiest Moment:<input type = "text" name = "moment" id = "moment"><br/>
Adjective that describes you:<input type = "text" name = "adjective" id = "adjective"><br/>
<br>
<input type="button" value="Submit" onClick = "checkMandatory(); return false;"/><br />
<br />
</form>

<div id="storyDiv"></div>


</body>
</html>


function checkMandatory()
{
// check the text field
// make a var for each question to access easier eg "favMeal"
var name = window.document.the_form.name.value;
//! means 'not'... flips around the if 
if (!(name.indexOf(" ") > 0))
{
    alert("You must give your full name.");
 //return false stops the program
    return false;
} else {
//firstName checks all character from 0 to whenever (space) occurs and strips it
        var firstName = name.substring(0,name.indexOf(" "));
        var name = window.document.the_form.name.value;
        var animal = window.document.the_form.animal.value;
        var favFood = window.document.the_form.favFood.value;
        var destination = window.document.the_form.destination.value;
        var leastFav = window.document.the_form.leastFav.value;
        var moment = window.document.the_form.moment.value;
        var adjective = window.document.the_form.adjective.value;

//alert("first name is " + firstName);
//use alert firstName to test the firstName function
document.write("The young person's name was "+firstName+". "+firstName+" loved to ride
 "+animal+
" almost every day. "+firstName+"'s second happiest moment, only next to "+moment+", was in 
"+destination+", where "+favFood+
" was served for breakfast, lunch and dinner. It was only when "+firstName+" was told that   
"+favFood+
" is actually made from "+animal+", that it instantly became "+firstName+"'s least    
favourite food, even worse than "+leastFav+
", and that made "+firstName+" feel very "+adjective+" indeed.")
//document.getElementById('storyDiv').innerHTML = document.getElementById('name').value;



//document.getElementById(‘storyDiv’).innerHTML="The boy's name was "+firstName;
//document.write(‘storyDiv’).innerHTML="The boy's name was " + firstName;

}
}

Answer 1

您可以通过使用ajax发布表单来实现此目的。

不要调用writethetext（）;在提交按钮

我将在我的解决方案中使用jQuery：

$(function() {
  $("form").on("submit", function(e) {
    var data = JSON.stringify($("form").serializeArray());
    e.preventDefault();
    $.post("yourserver/path/", data, function(result) {
      writethetext(result);

    });
  });
});

function checkMandatory() {
  // check the text field
  // make a var for each question to access easier eg "favMeal"
  var name = window.document.the_form.name.value;
  //! means 'not'... flips around the if 
  if (!(name.indexOf(" ") > 0)) {
    alert("You must give your full name.");
    //return false stops the program
    return false;
  } else {
    //firstName checks all character from 0 to whenever (space) occurs and strips it
    var firstName = name.substring(0, name.indexOf(" "));
    //alert("first name is " + firstName);
    //use alert firstName to test the firstName function
  }
}



function writethetext() {
  document.getElementById(‘storyDiv’).innerHTML =
    ("There once was a boy named" + name;)
  var firstName = name.substring(0, name.indexOf(" "));
  var name = window.document.the_form.name.value;
  var animal = window.document.the_form.animal.value;
  var favFood = window.document.the_form.favFood.value;
  var destination = window.document.the_form.destination.value;
  var leastFav = window.document.the_form.leastFav.value;
  var moment = window.document.the_form.moment.value;
  var adjective = window.document.the_form.adjective.value;

}

function writethetext(text) {
  document.getElementById(‘storyDiv’).innerHTML = text;
}
}

<html>

<head>
  <title>Questions</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="quiz1.js">
  </script>
</head>

<body>
  <h1>Tell Me About Yourself</h1>
  <form name="the_form" action="" method="post" onSubmit="var the_result = checkMandatory(); return the_result;">
    Full Name:
    <input type="text" name="name" id="name" />
    <br/>Favourite Animal:
    <input type="text" name="animal" id="animal">
    <br/>Favourite Food:
    <input type="text" name="favFood" id="favFood">
    <br/>Favourite Destination:
    <input type="text" name="destination" id="desitnation">
    <br/>Least Favourite Food:
    <input type="text" name="leastFav" id="leastFav">
    <br/>Happiest Moment:
    <input type="text" name="moment" id="moment">
    <br/>Adjective that describes you:
    <input type="text" name="adjective" id="adjective">
    <br/>
    <br>
    <input type="button" value="Submit" onClick="checkMandatory();  
return           false;" />
    <br />
    <br />
  </form>
  <div id="storyDiv"></div>
</body>

</html>

我需要在表单提交后显示包含变量（表单中的答案）的消息

1 个答案: