使用Ajax的下拉改变提交表单 [英] Submit form on dropdown change using Ajax

问题描述

我有一个调用另一个文件，并吐出基础上，下拉输出值以下。它工作正常，但我似乎无法得到它的正常工作，没有一个提交按钮。这工作，除了它会重定向本身 process.php 与正确的输出。这code整点是要显示在空DIV输出（输出）。

  $（文件）。就绪（函数（）{
   $（'＃下拉菜单'）。改变（函数（）{
       $（'＃MyForm的）提交（）。
       $阿贾克斯（{//创建一个AJAX调用...
           数据：$（本）.serialize（），//获取表单数据
           类型：$（本）.attr（方法），// GET或POST
           网址：$（本）.attr（行动），//文件调用
           成功：函数（响应）{//成功..
               $（'＃输出）HTML（响应）; //更新DIV
           }
       }）;
       返回false; //取消原来的事件，以prevent形式提交
    }）;
}）;


＆LT;形式ID =MyForm的方法= POST操作=process.php＆GT;
＆LT;选择一个id =下拉列表中NAME =下拉列表中＆GT;
    ＆LT;期权价值=QU＆GT;曲＆LT; /选项＆GT;
    ＆LT;期权价值=QF＆GT; QF＆LT; /选项＆GT;
    ＆LT;期权价值=QC＆GT; QC＆L​​T; /选项＆GT;
＆LT; /选择＆GT;
＆LT; /形式GT;
＆LT; D​​IV ID =输出＆GT;＆LT; / DIV＆GT;
 

解决方案

我觉得JQuery的加载功能可以做你是什么后，在不到code。

  $（文件）。就绪（函数（）{
   $（'＃下拉菜单'）。改变（函数（）{

    $（'＃输出）负载（'/ process.php'，{下拉：$（本）.VAL（）}）;

    }）;
}）;


＆LT;选择一个id =下拉列表中NAME =下拉列表中＆GT;
    ＆LT;期权价值=QU＆GT;曲＆LT; /选项＆GT;
    ＆LT;期权价值=QF＆GT; QF＆LT; /选项＆GT;
    ＆LT;期权价值=QC＆GT; QC＆L​​T; /选项＆GT;
＆LT; /选择＆GT;
 

I have the following which calls another file and spits output based on the dropdown value. It works fine except I can't seem to get it to work correctly without a submit button. This works except it will redirect itself to process.php with the correct output. The whole point of this code is to display the output within the empty div (output).

$(document).ready(function() {
   $('#dropdown').change( function() {
       $('#myform').submit();
       $.ajax({ // create an AJAX call...
           data: $(this).serialize(), // get the form data
           type: $(this).attr('method'), // GET or POST
           url: $(this).attr('action'), // the file to call
           success: function(response) { // on success..
               $('#output').html(response); // update the DIV
           }
       });
       return false; // cancel original event to prevent form submitting
    });
});


<form id="myform" method=POST action="process.php">
<select id="dropdown" name="dropdown">
    <option value="QU">QU</option>
    <option value="QF">QF</option>
    <option value="QC">QC</option>
</select>
</form>
<div id="output"></div>

解决方案

I think the JQuery load function can do what you are after in less code.

$(document).ready(function() {
   $('#dropdown').change( function() {

    $('#output').load('/process.php',{dropdown: $(this).val()});

    });
});


<select id="dropdown" name="dropdown">
    <option value="QU">QU</option>
    <option value="QF">QF</option>
    <option value="QC">QC</option>
</select>

这篇关于使用Ajax的下拉改变提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！