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

时间：2014-05-19 01:20:56

标签： javascript

我创建了一个表单，在页面上总结表单后显示用户输入。我需要添加一个功能，它将记住以前的输入并显示在同一页面上。 我使用document.write输出表单结果并且它可以工作，但我无法弄清楚如何显示所有输入的摘要。例如：yu输入订单详细信息，然后点击＆＃34; sumbit＆＃34;。它显示输入值。然后返回并输入新数据并单击提交它将显示新数据。在用不同的值填写表格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));



        }

1 个答案:

答案 0 :(得分：1)

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

为了存储所有输出，我们使用push()，每次我们提交我们想要的数据allNames时，我们的当前值输入我们的全局数组。我将这个例子称为<label>Enter Name:</label><input type="text" id="name" /> <button id="submit">Submit</button> <button id="showAll">Show All</button> <div id="output"></div> 。

<强> HTML 

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;
}

<强>的JavaScript 

{{1}}

以下是一个示例小提琴：http://jsfiddle.net/ghbAQ/1/

相关问题
最新问题