使用 php 计算 html 个文本字段的输入

Question

目前，我尝试在网页中创建调查。在调查结束时，用户可以用值填充两个文本字段。使用这些值，我的计划是计算输出，并在同一页面上为它们显示。所以：

输入：一个

输入：b

结果：ab+b-ab（请不要浓缩，仅举个例子）

我的计划是用户能够填写两个输入字段并通过单击按钮，php 函数正在计算结果字段（通过我自己的算法取决于输入 - 这已经在工作）并填写该字段。为此，我必须 link 到另一个网页吗？以及如何获取两个输入值并将其提供给我的 php 函数？最后，如何启动嵌入在 html 或自己文件中的 php 函数？

我尝试了您的解决方案和其他一些解决方案（使用 document.getElementById 从 DOM 获取 inputA 和 inputB 不起作用。下面是我的代码

<form>
    InputA:<br>
    <input type="text" id="inputA"/></br>
    InputB:<br>
    <input type="text" id="inputB"/></br>
    Output:<br>
    <input type="text" id="output"/>
</form> 

<input name="go" type="button" value="Calculate" id="calculate" >

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js" ></script>
<script type="text/javascript">
$("#calculate").click(function(){
        $.get( "submit.php", { value1: $("#inputA").val(), value2: $("#inputB").val() } )
        .done(function( data ) {
        $("#output").val(data);
    });

});

</script>

submit.php:

<?php 
        $value1 = $_POST['value1'];
        $value2 = $_POST['value2'];

        $output = $value1 + $value2;
        echo($output);

    }
?>

当我检查 firebug 错误时，我得到一个：在两个 (html 和 php) 文件中都没有找到元素异常。似乎问题在于： value1: $("#inputA").val();未向服务器提供任何值或无法在那里处理。

如果我从 DOM 中获取值，我可以 "bring" .click 函数中的值，但仍然存在 "no element found exception" 通过调用 submit.php .

我不知道我做错了什么，有什么建议吗？我需要 install/bind 任何内容才能使用 JQuery 吗？

经过一些额外的更改，它终于起作用了（一件事是 submit.php 文件中的 header 行）：

<form>
    WorkerID:<br>
    <input type="text" id="workerId"/></br>
    CampaignId:<br>
    <input type="text" id="campaignId"/></br>
    Payment Code:<br>
    <input type="text" id="payCode"/>
</form> 

<input name="go" type="button" value="Calculate" id="calculate" >

<script type="text/javascript">
$("#calculate").click(function(){
    $.get( 'submit.php', { wId: $('#workerId').val(), cId: $('#campaignId').val()} )
    .done(function( data ) {
        $('#payCode').val(data.payCode);
    });     
});

和submit.php：

<?php 
    header('Content-Type: text/json');

    $workerId = $_GET['wId'];
    $campaignId = $_GET['cId'];

    $payCode = $campaignId . $workerId;

    $result = array("status" => "success",
                    "payCode" => $payCode);
    echo json_encode($result);
?>

Answer 1

为简化起见，我正在使用 jQuery，在我看来，在 vanilla JS 中执行此操作真的很痛苦。

您可以使用 .get(), which is the GET shorthand for .ajax().

使用该代码，您可以在提交按钮上绑定一个处理程序，并向您的 PHP 发出 AJAX 请求，然后将 PHP 给出的结果异步填充到您的结果字段中。

$("#calculate").click(function(){

  $.get( "path/to/your_php.php", { value1: $("#inputA").val(), value2: $("#inputB").val() } )
  .done(function( data ) {
    $("#output").val(data);
  });

});

也将您的提交更改为如下内容：

<input name="go" type="button" value="Calculate" id="calculate" >

这样，您的按钮不会提交表单，因此会同步加载您的 PHP。

因为您似乎是 JavaScript 的新手并且您有此评论

my button, but here i got redirected to submit, no idea how i can go back to page before with filled textfield

在你的问题中，我会告诉你，JavaScript 在加载 DOM（文档对象模型）时工作，这意味着你可以在加载后访问你的元素并更改它们。

获取输入值与 jQuery:

中一样简单

$("#inputA").val();

使用 AJAX，您将获得 php 在 data 中将 return 得到的东西。

// the { value1: $("#inputA").val(), value2: $("#inputB").val() } object
// is what you send to your PHP and process it
$.get( "path/to/your_php.php", { value1: $("#inputA").val(), value2: $("#inputB").val() } )
.done(function( data ) {
     // data is what your php function returned
});

使用 JS，您现在可以像刚才所说的那样更改您的元素，这实际上意味着更改此处输出的值：

$("#output").val(data);

"Working"例子：JSFiddle（没有PHP可以访问，所以不会主动做任何事情）

使用 php 计算 html 个文本字段的输入

Calculate input of html text fields with php

html

javascript

php

jquery

buttonclick