Question

我的主页userinput上有一个表单输入。该主页还包含一个JavaScript函数，该函数使用userinput值来计算结果。

<form action="/run.php" method="POST" target="_blank">
    <input type="hidden" id="idg" value="<?php echo $rand ?>"> // gets random url, can be ignored
    <input type="text" name="userinput" id="userinput">
    <button type="submit" onclick="calcResult();">Go!</button>
</form>

<script>
    function calcResult() {
        var userinput = document.getElementById('userinput').value;
        var result = userinput + 10; // want to POST result in a hidden input field w/ form
</script>

我试图找到一种方式，用户可以输入他们的输入，提交表单，JavaScript接受userinput并计算结果，然后结果是POST＆ed; ed使用表单中的userinput。

我能用这种方法预见的问题是：

JavaScript函数需要userinput才能计算结果。但是，获取userinput的唯一方法是提交表单，这意味着表单数据将在返回JavaScript结果之前进行POST。

我尝试过的解决方案：

我一直在尝试使用AJAX（Unable to access AJAX data [PHP]）并一直遇到问题。

我想知道是否可以使用按钮（type="button"），而不是表单的提交（type="submit"）。然后只需使用该按钮调用JS函数，然后（以某种方式）提交表单（使用JS函数结果）在JS函数完成后？（使用普通的JS或jQuery）。

Answer 1

有多种方法可以做到这一点，

我会在这里使用jquery而不是纯粹的javascript来简化它

[未提交]您可以查看活动change

$('#userinput').change(function (e) {
    // make some calculation
    // then update the input value
});

[使用表单提交]您将使用submit活动中的对象preventDefault停用提交

$('#userinput').submit(function (e) {
    e.preventDefault();
    // make some calculation
    // then update the input value

    // your ajax goes here OR resubmission of your form
    // to resubmit the form
    $(this).submit();
});

Answer 2

在此方案中您会发现有用的是event.preventDefault();

function calcResult(e) {
    // Prevent the default action of the form
    e.preventDefault();

    var userinput = document.getElementById('userinput').value;
    var result    = userinput + 10;

    // Do whatever else you need to do

    // Submit the form with javascript
    document.getElementById("myForm").submit();
}

Answer 3

我相信这就是你要找的东西。一种通过PHP计算信息的方法，无需页面请求。这使用一个表单然后序列化数据，然后将其传输到PHP并显示run.php 的结果。

注意的：我确实将您的id更改为HTML中的名称，因此代码将正确序列化。我可以根据要求更改此内容。

<强>的index.php

$rand = rand(10,100);

?>

<form action="javascript:void(0);" id="targetForm">
    <input type="hidden" name="idg" value="<?php echo $rand ?>">
    <input type="text" value="12" name="userinput" id="userinput">
    <button onclick="ready()">Go!</button>
</form>

<div id="result"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
function ready() {
    $.post('run.php', $('#targetForm').serialize(), function (data) {
        $("#result").html(data);
    })
}
</script>

<强> run.php

<?php

echo floatval($_POST['userinput']) * floatval($_POST['idg']);

?>

Answer 4

一种方法是onSubmit

  <form action="/run.php" method="POST" onSubmit="return calcResult()">
    <input type="hidden" id="idg" value="<?php echo $rand ?>"> // gets random url, can be ignored
    <input type="text" name="userinput" id="userinput">
    <button type="submit" onclick="calcResult();">Go!    </button>
 </form>

当你返回true时，只有表格会提交。

<script>
  function calcResult() {
    var userinput = document.getElementById('userinput').value;
    var result = userinput + 10; // want to POST result in a hidden input field w/ form
   return true;
  }
</script>

Answer 5

您的问题中没有任何指示您的任务需要AJAX。您只是在提交时尝试更改输入值。不需要AJAX。

首先，将onsubmit事件处理程序附加到表单，而不是在按钮上使用onclick属性。请注意，我们并未停止使用return false提交表单，因为我们仍希望提交表单。

为方便起见，我们在表单中添加一个ID，然后添加一个隐藏的输入字段来存储计算出的值。

（旁注：如果document.getElementById(ID)是一个没有破折号的字符串，则{1}}可以缩短为ID，您无需使用document.getElementById('userinput')

userinput

使用隐藏的输入来POST JavaScript函数结果

5 个答案: