Question

我有这个表格

name....
amount....
remaining....
[submit]

我正在使用的代码

<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Form Name</legend>
<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="name">name</label>
  <div class="controls">
    <input id="name" name="name" type="text" placeholder="name" class="input-xlarge">
  </div>
</div>
<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="amount">Amount</label>
  <div class="controls">
    <input id="amount" name="amount" type="text" placeholder="$" class="input-xlarge">
  </div>
</div>
<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="Remaining">Remaining</label>
  <div class="controls">
    <input id="Remaining" name="Remaining" type="text" placeholder="$" class="input-xlarge">
  </div>
</div>
<!-- Button -->
<div class="control-group">
  <label class="control-label" for="singlebutton">Submit</label>
  <div class="controls">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Submit</button>
  </div>
</div>
</fieldset>
</form>

我想输出

customer (name) has submitted (20$). remaining amount is (30$)

我可以使用php / cgi等只使用javascript来解决这个问题。最好是在带有打印按钮的新窗口中

Answer 1

试试这可能会对你有所帮助

 <script>
var PrintMail = function () {

            window.frames["print_frame"].document.body.innerHTML = document.getElementById("printArea").innerHTML;
            window.frames["print_frame"].window.focus();
            window.frames["print_frame"].window.print();

        };
    </script>

   <div id="printArea">
    Content that you want to print
   </div>



  <iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank">
  </iframe>

Answer 2

我删除了“form”标签，因为我假设我们只使用客户端编程，因此不需要表单提交。下面这个脚本可以帮到你。

<fieldset>
<!-- Form Name -->
<legend>Form Name</legend>
<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="name">name</label>
  <div class="controls">
    <input id="name" name="name" type="text" placeholder="name" class="input-xlarge">
  </div>
</div>
<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="amount">Amount</label>
  <div class="controls">
    <input id="amount" name="amount" type="text" placeholder="$" class="input-xlarge">
  </div>
</div>
<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="Remaining">Remaining</label>
  <div class="controls">
    <input id="Remaining" name="Remaining" type="text" placeholder="$" class="input-xlarge">
  </div>
</div>
<!-- Button -->
<div class="control-group">
  <label class="control-label" for="singlebutton">Submit</label>
  <div class="controls">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary" onclick="return submit();">Submit</button>
  </div>
</div>
</fieldset>

<div id="info"></div>


<script type="text/javascript">

    function submit()
    {
        var name = document.getElementById("name").value;
        var amount = document.getElementById("amount").value;
        var remaining = document.getElementById("Remaining").value;

        document.getElementById("info").innerHTML = "customer ("+name+") has submitted ("+amount+"$). remaining amount is ("+remaining+"$)"; 
        document.getElementsByTagName("fieldset")[0].style.display = 'none';
        return false;
    }
</script>

使用javascript从html表单打印

2 个答案: