如何创建一个javascript函数来记住用户输入，然后显示摘要

我创建了一个表单，在页面上提交表单后显示用户输入。我需要添加一个函数，它将记住以前的输入并显示在同一页面上。我使用document.write来输出表单结果，它很有效，但我不知道如何显示所有输入的摘要。例如：yu输入订单详细信息，然后点击"sumbit"。它显示输入值。然后您返回并输入新数据，然后单击提交，它将显示新数据。假设在用不同的值填写表格5次后，我需要一个功能来显示所有5个输入订单的总值，例如交易的总值。。。也许是一个记得以前输入的数组？

我的HTML:

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset=UTF-8">
<!--script area-->
<link rel="stylesheet" type="text/CSS" href="formstyle.css">
<script src="millends.js"></script>

<title>
Mill-Ends Order</title>
</head>
<body>
<!--start form-->
<form method="post">
<fieldset>
<h1 class="data_entry">Tickets Order</h1>

<ul>

<li>
<label for="first_name">Customer Name:</label>
<input type="text" id="customer_name" name="customer_name" placeholder="first name and family name" class="medium"/></br>
</li>
<li>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" required class="telephone"></br></br>
<li>
<label for="number_of_tickets">Number of tickets:</label>
<input type="number" id="number_of_tickets" name="number_of_tickets" required class="small"/>
</li>

<h3 class"address">Delivery Address</h3>
<li>
<label for="street_name">Street:</label>
<input type="text" id="street_name" name="street_name" required placeholder="e.g. 111 Smith St" class="large"/>
</li>
<li><label for="city">City:</label>
<input type="text" id="city" name="city" class="medium"/>
</li>
<li><label for="state">State:(e.g.VIC)</label>
<input type="text" id="state" name="state" required placeholder="XXX" maxlength="3" size="3" class="three" />
</li>
<li>
<label for="post_code">Postcode:</label>
<input type="text" id="post_code" name="post_code" required placeholder="XXXX" maxlength="4" class="four"/>
</li>

<li>
<label for="distance">Distance from Depot(in kms)</label>
<input type="number" id="distance" name="distance" required class="howfar"/><br><br>
</li>

<button class="reset" type="reset" id="clear">Clear Form</button><br><br>

<button onclick="go()">Create Order</button><br><br>
<button onclick="summary()">Daily Sales Summary</button>

</form>

</body>
</script>
</html>

我的Javascript：

function go()
        {


//form fields start here:

        var customer_name = document.getElementById('customer_name').value;
    var phone=document.getElementById('phone').value;
        var street_name=document.getElementById('street_name').value;
    var city=document.getElementById('city').value;
    var state=document.getElementById('state').value;
    var post_code=document.getElementById('post_code').value;
        var distance=document.getElementById('distance').value;
    var number_of_tickets=document.getElementById('number_of_tickets').value;
    var cost_per_ticket=15.20;
    var total_cost_without_gst=cost_per_ticket*number_of_tickets;
    var total_cost_with_gst=(total_cost_without_gst*0.10)+total_cost_without_gst;
    var close_delivery=20;
    var far_delivery=35;
        var close_total=close_delivery+total_cost_with_gst;
        var far_total=far_delivery+total_cost_with_gst;

    var currentDate = new Date()
    var day = currentDate.getDate()
    var month = currentDate.getMonth() + 1
    var year = currentDate.getFullYear()
    var currentTime = new Date()
    var hours = currentTime.getHours()
    var minutes = currentTime.getMinutes()
    if (minutes < 10)
    minutes = "0" + minutes

          if (customer_name=="")
{
alert("Error: please enter customer name")
return false;
}

          if (isNaN(phone))
{
alert("Error: phone must be in numbers");
return false;
}

          if (phone=="")
{
alert("error: please enter customer phone number");
return false;
}    
          if (number_of_tickets=="")
{
alert("error: please enter Number of Tickets");
return false;
}  

          if (isNaN(number_of_tickets))
{
alert("ERROR: tickets must be a number");
return false;
}  
          if (number_of_tickets <= 0)
{
alert("ERROR: number of tickets must be greater than 0");
return false;
}
          if (!(number_of_tickets==Math.round(number_of_tickets)))
{
alert("ERROR: number of tickets must be a whole number");
return false;
}
          if (street_name=="")
{
alert("ERROR: Please enter street name");
return false;
}

          if (city=="")
{
alert("ERROR: Please enter city name");
return false;
}
          if (state=="")
{
alert("ERROR: Please enter state");
return false;
}
          if (isNaN(post_code))
{
        alert("ERROR: Postcode must be a number");
        return false;
}

          if (post_code=="")
{
alert("ERROR: Please enter valid postcode");
return false;
}
          if (isNaN(distance))
{
alert("ERROR: Distance must be a number");
return false;
}

          if (distance=="")
{
alert("ERROR: Please enter distance");
return false;
}
        document.write("Order Date/Time: ","<b>" + day + "/" + month + "/" + year + "<b>" +", ");
        document.write("<b>" + hours + ":" + minutes + " " + "</b>", "<br><br>");
        document.write("ORDER DETAILS",'<br><br><br>',"Customer Name: "+ customer_name,'<br>'); 
        document.write("Phone: "+phone,'<br><br>');
    document.write("--------Delivery Address--------", '<br>'+street_name,'<br>');
    document.write(city,'<br>');
    document.write(state);

        document.write(" "+ post_code, '<br><br>');

    document.write("<u>Order Summary</u>", '<br><br>');
    document.write("Tickets Ordered: " + number_of_tickets, '<br><br>');
    document.write("Cost per ticket: "+"$"+cost_per_ticket.toFixed(2) + '<br><br>');
    document.write("Total cost without GST: " +"$"+total_cost_without_gst.toFixed(2) +'<br><br>');
    document.write("Total cost with GST: "+"$"+total_cost_with_gst.toFixed(2) +'<br><br>');
if(distance>20)
    document.write("Delivery Cost: " +"$"+ far_delivery.toFixed(2)+'<br><br>');
else
    document.write("Delivery Cost: "+"$"+close_delivery.toFixed(2));
    document.write('<br><br>');
if(distance>20)
    document.write("TOTAL ORDER COST: " +"$"+far_total.toFixed(2));
    else
    document.write("TOTAL ORDER COST: "+ "$"+close_total.toFixed(2));

        }

这是一个简单的任务，基本上我们需要一个button，当我们点击它输出某个输出元素中的表单元素时，我将使用一个div。要在JavaScript中获取元素，我们可以将id的分配给元素，并执行以下操作：document.getElementById("elementIdName")检索这些值。从那里我们可以使用onclick，它将在我们单击某个元素时激活，value用于检索输入值，innerHTML用于将HTML分配给某个元素。这里有一个获取单个输入元素的简单示例，我们称之为name。并输出：Your name is 'nameHere':

为了存储所有输出，我们使用array，每次我们提交数据时，我们都希望push()我们的当前值输入我们的全局数组。举个例子，我将称之为allNames。

HTML

<label>Enter Name:</label><input type="text" id="name" />
<button id="submit">Submit</button>
<button id="showAll">Show All</button>
<div id="output"></div>

JavaScript

var allNames = [];
document.getElementById("submit").onclick = function()
{
    var name = document.getElementById("name").value;
    document.getElementById("output").innerHTML = "Your name is "+name;
    allNames.push(name);    
}
document.getElementById("showAll").onclick = function()
{
    var names = "Names: ";
    for(name in allNames) names += allNames[name] + ", ";
    document.getElementById("output").innerHTML = names;
}

下面是一个小提琴的例子：http://jsfiddle.net/ghbAQ/1/

相关内容

最新更新

热门标签：