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

我有一个简单的表单，通过该表单可以在单击某个按钮时为输入字段赋予一个值。问题是需要很长时间才能重新加载页面，我想在不刷新页面的情况下提交它。我曾尝试过修改某些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>

来源

2012-10-06 user1557515

什么用完全AJAX脚本的问题？ – ultranaut

我不认为我正确调整了代码。 – user1557515

-1

我改编这只使用香草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/

来源

2012-10-06 00:42:04

看起来不错，非常感谢，我现在就试试看。 :) – user1557515

是的，它工作完美，很好，简洁。辉煌！ – user1557515

这是一个使用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'); 
    }); 
});

来源

2012-10-06 00:43:13 smdrager

谢谢你的代码。非常感激。 – user1557515

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

回答

相关问题