javascript - 用php计算html文本字段的输入

Question

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

输入:a

输入:b

结果:ab+b-ab(请不要集中于此，这只是一个示例)

我的计划是用户能够填写两个输入字段，并通过单击按钮，php 函数正在计算结果字段(通过我自己的算法，取决于输入 - 这已经起作用)并填充该字段。为此我必须链接到另一个网页吗？如何获取两个输入值并将其提供给我的 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>

提交.php:

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

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

    }
?>

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

如果我从 DOM 中获取值，我可以将值“带入”.click 函数中，但通过调用 Submit.php 仍然会出现“未找到元素异常”。

我不知道我做错了什么，有什么建议吗？我需要安装/绑定(bind)任何东西才能使用 JQuery 吗？

<小时/>

经过一些额外的更改，它终于起作用了(其中一件事是submit.php文件中的标题行):

<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() ，这是 .ajax() 的 GET 简写.

使用该代码，您可以在提交按钮上绑定(bind)一个处理程序，并向 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 中返回的内容。

// 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);

“工作”示例:JSFiddle (没有PHP可以访问，所以不会主动做任何事情)