Question

我有一个简单的表单，如果单击某个按钮，输入字段将被赋予一个值。问题是重新加载页面需要很长时间，我想提交它而不刷新页面。我尝试过调整某些AJAX，不同类型的JQuery脚本，但它们没有用，有人可以建议使用一些简单的代码。这是基本的例子：

<html>
<form method='POST' action='test2.php'>
<input type='text' name='input_a' value='<?php if($_POST['submit_a'])
{
   echo "test1";
} ?>'>

<input type='submit' name='submit_a' value='a'>
<input type='text' name='input_b' value='<?php if($_POST['submit_b'])
{
    echo "test2";
}?>'>

<input type='submit' name='submit_b' value='b'>
</form>
</html>

Answer 1

以下是使用ajax发布的示例（您必须调整响应的代码）。我假设你需要发帖，因为你概述的场景可以很容易地用javascript完成。

$(function(){
    $('input[type="submit"]').click(function(){
         var form = $(this).parents('form');
         var postData = form.serialize();
         postData[$(this).attr('name')] = $(this).val(); // the value for the click won't be retrieved with serialize
         $.post(form.attr('action'), postData , function(data) {
             $('body').html(data);
         });
         return false;
    });
};

如果您可以在不发布的情况下进行，它看起来像这样：

$(function(){
    $('input[name="submit_a"]').click(function(){
        $('input[name="input_a"]').val('test1');
    });
    $('input[name="submit_b"]').click(function(){
        $('input[name="input_b"]').val('test2');
    });
});

Answer 2

我只使用vanilla javascript进行了调整，如果用例确实是这个基本的话。如果需要服务器端访问，此解决方案将无济于事，您将需要了解有关Ajax如何工作的更多信息。

HTML：

<html>
<form>
   <input type='text' name='input_a' id="input_a"/><input type='submit' name='submit_a' value="a" onclick="setInput(this, 'test1'); return false;">
   <input type='text' name='input_b' id="input_b"/><input type='submit' name='submit_b' value="b" onclick="setInput(this, 'test2'); return false;">
</form>
</html>

使用Javascript：

function setInput(button, setValue) {
    var buttonVal = button.value,
        textbox = document.getElementById('input_' + buttonVal);

    textbox.value = setValue;
}

以下是JSFiddle中的示例： http://jsfiddle.net/6jpNf/1/

修改表单，以便在提交时不刷新页面

2 个答案: