Блог

Главная - Вопросы по программированию - печать из HTML-формы с помощью JavaScript

печать из HTML-формы с помощью JavaScript

#javascript #html #forms

#javascript #HTML #формы

Вопрос:

У меня есть эта форма:

 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. Желательно в новом окне с кнопкой печати.

Комментарии:

1. не уверен, какой javascript я бы использовал.

2. какой javascript ??, сколько у вас

Ответ №1:

Я удалил тег «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>

Комментарии:

1. потрясающе … могу ли я получить вывод на новой странице. или на той же странице, но скрыть форму

2. возможно ли, что при отправке форма исчезает, и на той же странице отображается только вывод… Спасибо

3. извините за длинный ответ, я был в отпуске 2 дня назад. :). если вы хотите скрыть форму, скройте элемент fieldset. я отредактирую свой код выше, чтобы форма скрывалась при нажатии кнопки отправки. :). надеюсь, это поможет.

Ответ №2:

Попробуйте, это может помочь вам

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