jquery对话框按钮来触发ajax

时间:2012-05-16 00:33:54

标签: jquery ajax forms jquery-ui jquery-dialog

我最近移动了一个表单,我用来将一些记录添加到数据库中,当我点击一个按钮时出现的jquery对话框...我正在使用ajax通过使用提交将数据发布到数据库按钮作为触发器我现在已经在对话框中使用j查询创建了一个按钮,并希望将其用作ajax的触发器,然后关闭对话框但我不确定该怎么做..

    $(function()
    {
 $('form').bind('submit', function(){
                $.ajax({
                    type: 'POST',
                    url: "request.php",
                    data: $("form").serialize(),

                    success: function(data) {

                            if(data == 1){//Success 
                                    alert('Sucess');
                                         }
                             if(data == 0){//Failure 
                                    alert('Data was NOT saved in db!');
                                         }
                                 }
                });
                return false;
            });
                      $("#claim").change(function(){       
             $("#area").find(".field").remove();
             //or
               $('#area').remove('.field');
          if( $(this).val()=="Insurance")
             {
        $("#area").append("<input class='field' name='cost' type='text' placeholder='Cost' />");

             }
          });


        $( "#dialog" ).dialog({
            autoOpen: false,
            draggable: false,
            modal: true,
            buttons: {
                "Add to Log": function() {
                    $( this ).dialog( "close" ); // use this as the ajax trigger instead of the submit button bellow which was previously used
                },
                Exit: function() {
                    $( this ).dialog( "close" );
                }
            }

        });

        $( "#opener" ).click(function() {
            $( "#dialog" ).dialog( "open" );
            return false;
        });

              });

</script>
</head>
<body>
<button id="opener">Open Dialog</button>

<div id="dialog" title="Add Student">
<form name="form1aa" method="post" id="form1a" >
 <div id="area">
 <input type=text name="cases"  placeholder="Cases ID">
         <select id="claim" name="claim">
            <option value="">Select a Claim</option>
        <option value="Insurance">Insurance</option>  
        <option value="Warranty">Warranty</option>
        </select>
        </div>
    <select name="type" onChange=" fill_damage (document.form1aa.type.selectedIndex); ">
    <option value="">Select One</option>
    <option value="Hardware">Hardware</option>
    <option value="Software">Software</option>
    </select>

    <select name="damage">
    </select>
    <br />
    <input type=text name="comment"  placeholder="Comments Box">

    <input type="submit" value="Submit" name="Submit"> <!-- instead of this button triggering the ajax, use the button i created in the jquery dialog to trigger the ajax script and then close the dialog-->

    </form>
</div>

0 个答案:

没有答案