如何在一个选项卡中提交表单并在下一个选项卡中查看结果？

Question

页面上有三个选项卡。输入、输出和审查。 Html 表单位于输入选项卡中，用户在文本框中输入输入。我想从该输入值计算一些东西，并通过单击提交按钮将其显示在下一个选项卡 OUTPUT 中。 我已经有那个文件，它将使用该输入进行计算。

非常感谢您的回答。

    <div class="container tabs-wrap">
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
      <a href="#input" aria-controls="input" role="tab" data-toggle="tab" aria-expanded="true">Input</a>
    </li>
    <li>
      <a href="#output" aria-controls="output" role="tab" data-toggle="tab" aria-expanded="false">Output</a>
    </li>
    <li>
      <a href="#review" aria-controls="review" role="tab" data-toggle="tab" aria-expanded="false">Review &amp; Email</a>
    </li>
  </ul>

<div class="tab-content">

  <div role="tabpanel" class="tab-pane active" id="input">
  <h2>Web based two tier ground mount bill of material generator</h2>
  <form class="form-horizontal" action="output.php" method="post" target="_blank">

    <div class="form-group">
      <label class="control-label col-sm-2" for="count">Module Count:</label>
      <div class="col-sm-10">          
        <input type="number" class="form-control" id="count" placeholder="Enter Number of Modules" name="count">
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-primary continue">Continue</button>
      </div>
    </div>
  </form>

Answer 1

假设输出选项卡是另一个视图文件，您可以使用javascript的导出功能。就像根据您的需要进行输入处理，然后使用如下功能：

// file1.js
export function value() {
  return "Your output";
}

file1 是您接受输入或处理输入的地方

// output.js
import {hello} from 'file1'; // or './file1'
let val = value(); // val is Your output;

确保在输出文件中放置一个“if”，并在一定时间间隔（1 秒左右）后刷新它，以便尽快获取该值。

Answer 2

一种可能的方法：

onFormSubmit(calculatedValue){
  $('#output').html(calculatedValue);
}

逻辑是，当您成功提交表单时，请确保将计算的值附加到#output，或者您想要将其附加到哪个 div。

如果您使用 AJAX 与 PHP 通信，它看起来像这样：

 $.ajax({
        url: "file.php",
        type: "post",
        data: values,
        success: function (response) {
           // you will get calculated value from your php page (what you echo or print) 
          $('#output').html(response);                       
        }
       });

Answer 3

根据您的代码，您应该在一个 html 文件中包含所有三个选项卡（而不是单独的文件）。查看here 了解更多信息。

您可以将一个函数附加到处理计算的“继续”按钮上

$(".continue").on("click", function () {
      //Handle calculation, changing tabs and writing results here
      // do your calculations here
      $('.nav-tabs a[href="#output"]').tab('show'); // change active tab
      $( '.resultElemClass' ).text('calculationValue'); // output the result
});

Answer 4

试试这个，

$(function() {
  $('#btnSubmit').on('click', function() {
    // your code goes here
    $('#outputSpan').text($('#count').val());
    // not triiger output tab to be open
    $('[href="#output"]').trigger('click');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container tabs-wrap">
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
      <a href="#input" aria-controls="input" role="tab" data-toggle="tab" aria-expanded="true">Input</a>
    </li>
    <li>
      <a href="#output" aria-controls="output" role="tab" data-toggle="tab" aria-expanded="false">Output</a>
    </li>
    <li>
      <a href="#review" aria-controls="review" role="tab" data-toggle="tab" aria-expanded="false">Review &amp; Email</a>
    </li>
  </ul>

  <div class="tab-content">

    <div role="tabpanel" class="tab-pane active" id="input">
      <h2>Web based two tier ground mount bill of material generator</h2>
      <form class="form-horizontal" action="output.php" method="post" target="_blank">

        <div class="form-group">
          <label class="control-label col-sm-2" for="count">Module Count:</label>
          <div class="col-sm-10">
            <input type="number" class="form-control" id="count" placeholder="Enter Number of Modules" name="count">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" id="btnSubmit" class="btn btn-primary continue">Continue</button>
          </div>
        </div>
      </form>
    </div>
    
    <div role="tabpanel" class="tab-pane" id="output">
      <h2>Output</h2>
      <span id="outputSpan"></span>
    </div>
  </div>
</div>