表单提交在jquery选项卡 [英] form submitting in jquery tab

问题描述

我开始使用jquery和jquery-ui。我正试图提交一个标签内的表单。一旦我点击'提交'，页面刷新自己，标签消失，并且URL被更改为标签的功能url。提交按钮正在工作，我得到了预期的结果。但是，它与标签不在同一页面。

有人对如何让页面不再清爽有什么想法吗？

我的问题的示例：

我有一个名为'index.php'的页面，带有3个不同的选项卡。其中一个标签被称为'提交表单'，在那里我有一个使用POST方法的表单，它从'form.php'中获取它的源代码。一旦我点击提交按钮，页面刷新，网址从www.example.com更改为www.example.com/form.php，我在那里得到结果，但页面是普通 ，意味着它不在一个标签下，只是一个普通的页面。

我希望我能正确解释自己。

$ b 编辑：
这里是我的提交代码：

  $ submit = $ _POST ['submit']; 
 $ name = $ _POST ['name']; 
 
 if（$ submit）{
 echo'submitted< br>< br>'; 
 echohello $ name; 
} 
  

解决方案

然后通过 preventDefault（）;

$（$'$ $ $ $ $ $ $ $'$ $ $ $ $'$'$ $ $ $'$'$ $ $ $''$'$' .preventDefault（）;
var formSrc = $（this）.attr（'action'）;
var formMethod = $（this）.attr（'method'）;
var formData = $（this）.serialize（）;
$ .ajax（{
url：formSrc，
type：formMethod，
data：formData，
success：function（数据）{
//处理来自请求文件的返回数据
alert（data）;
}
}）;
}）;
}） ;

编辑：

我选择使用 on（）; 而不是默认的 submit（） 。这是因为表单可能会或可能不会在DOM.ready中可用。

I started using jquery and jquery-ui. I am facing a problem trying to submit a form that is inside a tab. Once i hit 'submit', the page refresh itself, the tabs are gone, and the url is changed to the tab's function url. the submit button is working, and i get the desired result. However, it is not on the same page as the tabs.

Does anyone have any idea on how to keep the page from refreshing?

example of my problem:

I have a page called 'index.php' with 3 different tabs. one of the tabs is called 'submit form' where there I have a form using POST method, it is taking its source from 'form.php'. once i hit the 'submit' button, the page refreshes, the url changes from 'www.example.com' to 'www.example.com/form.php', i get the result there, but the page is "plain", means that its not under a tab, just a normal page.

I hope I explained myself correctly.

Thanks!

EDIT: here is my submission code:

$submit = $_POST['submit'];
$name= $_POST['name'];

if($submit){
echo 'submitted <br><br>';
echo "hello $name";
}

解决方案

Capture the form submission in jQuery and then stop it with preventDefault();

$(function(){
  $('#formID').on('submit', function(e){
    e.preventDefault();
    var formSrc = $(this).attr('action');
    var formMethod = $(this).attr('method');
    var formData = $(this).serialize();
    $.ajax({
      url: formSrc,
      type: formMethod,
      data: formData,
      success: function(data){
        //work with returned data from requested file
        alert(data);
      }
    });
  });
}); 

EDIT:

i should add that I chose to use on(); as opposed to the default submit(). This is because the form may or may not be available at DOM.ready.

这篇关于表单提交在jquery选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！