Question

通过jquery对话框提交表单时，它不执行javascript函数。代码如下。我打算动态地为不同的表单使用相同的对话框。所以无法使用对话框内置按钮。请帮忙

主页

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Modal message</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>


$(function(){
    var diaWidth, diaHeight, diaTitle, form, dialog ;
    $('body').append('<div id="dv_move"></div>');   

    dialog = $( "#dv_move" ).dialog({
      autoOpen: false,
    resizable: false,
      modal: true,
      close: function() {
        $('#dv_move').remove();
        form[ 0 ].reset();
//        allFields.removeClass( "ui-state-error" );
      }
    });

    form = dialog.find( "form" ).on( "submit", function( event) {
      event.preventDefault();
      alert('tt');
      processForm();
    });

function processForm() {
    alert("ghg");
}

    $( "a.pop" ).click(function(e) {
        e.preventDefault();
        diaHeight = $('a.pop').data('info').height;     
        diaWidth = $('a.pop').data('info').width;       
        diaTitle= $('a.pop').data('info').title;    
        diaWidth = (( $('a.pop').data('info').width != undefined) ? $('a.pop').data('info').width:600);
        diaHeight = (($('a.pop').data('info').height != undefined) ? $('a.pop').data('info').height:500);
        if ($(window).width()<diaWidth) {
            diaWidth="98%";
        }
        if ($(window).height()<diaHeight) {
            diaHeight="98%";
        }
         $('#dv_move').dialog({title: diaTitle});
         $('#dv_move').dialog('option', 'width', diaWidth);
         $('#dv_move').dialog('option', 'height', diaHeight);
         $('#dv_move').load ($("a.pop").attr('href'));

        dialog.dialog( "open" );
    });
});

  </script>
</head>
<body>

<p><a href='student_form.html' data-popheight="500" data-popwidth="600">Normal form process</a>
<p><a href='popup-form.html' class='pop' data-info='{"height":"500", "width":"800", "title":"Register Child"}'>Popup form</a><br />
</body>
</html>

表格

                    <form id='frm_child' rel='frm_jquery' method='post' action='process.php'>
        <fieldset class='col-md-12'>
            <legend>Child Details</legend>
            <input type='hidden' name='student_id' value='0'>
            <input type='hidden' name='parent_id' value='1'>
            <p><label>Name:</label> <input type='text' value='' name='student_name' required='required' pattern="^[a-zA-Z- -'-\.]{1,50}$" title="supports Alphabets, '.' and single quote '" /></p>
            <p><label>Class & Section:</label> <select name='class_sec' required><option></option><option value='1_1_IV-A'>IV-A</option><option value='1_2_IV-B'>IV-B</option><option value='1_3_IV-C'>IV-C</option><option value='1_4_IV-D'>IV-D</option><option value='2_1_V-A'>V-A</option><option value='2_2_V-B'>V-B</option><option value='2_3_V-C'>V-C</option><option value='2_4_V-D'>V-D</option><option value='3_1_VI-A'>VI-A</option><option value='3_2_VI-B'>VI-B</option><option value='3_3_VI-C'>VI-C</option><option value='3_4_VI-D'>VI-D</option><option value='4_1_VII-A'>VII-A</option><option value='4_2_VII-B'>VII-B</option><option value='4_3_VII-C'>VII-C</option><option value='4_4_VII-D'>VII-D</option><option value='5_1_VIII-A'>VIII-A</option><option value='5_2_VIII-B'>VIII-B</option><option value='5_3_VIII-C'>VIII-C</option><option value='5_4_VIII-D'>VIII-D</option><option value='6_1_IX-A'>IX-A</option><option value='6_2_IX-B'>IX-B</option><option value='6_3_IX-C'>IX-C</option><option value='6_4_IX-D'>IX-D</option><option value='7_1_X-A'>X-A</option><option value='7_2_X-B'>X-B</option><option value='7_3_X-C'>X-C</option><option value='7_4_X-D'>X-D</option><option value='8_1_XI-A'>XI-A</option><option value='8_2_XI-B'>XI-B</option><option value='8_3_XI-C'>XI-C</option><option value='8_4_XI-D'>XI-D</option><option value='9_1_XII-A'>XII-A</option><option value='9_2_XII-B'>XII-B</option><option value='9_3_XII-C'>XII-C</option><option value='9_4_XII-D'>XII-D</option></select></p>
            <p><label>Gender: </label>
            <input type='radio' name='student_gender' value='M'  checked >Boy &nbsp; 
            <input type='radio' name='student_gender' value='F'  >Girl</p>
            <p><label>Admission No.:</label> <input type='text' name='student_admissionid' pattern='^[0-9]{0,15}$' title='Supports numeric value' /></p>
            <p><label>House Name:</label> <select name='house_id'><option></option><option value='1'>Aravalli</option><option value='2'>Nilgiri</option><option value='3'>Sumeru</option><option value='4'>Vindhya</option></select></p>
            <button id='submit' type='submit' name='but_modify' value='modify' class='button button-primary'>Save</button>
            <button type='reset' class='button'>Cancel</button> <span id='result'></span>
    </fieldset></form>

Answer 1

关于提交操作，您可以尝试下面的代码

"Submit": function () {
var $this = this;
var form = $('#frm_child', $this);
if (!$('#frm_child').valid()) {
   return false;
}

$.post(form.attr("action"), JSON.stringify($(form).serializeObject()), function () {
    $($this).dialog("close").dialog("distroy").remove();
});}

对话框表单提交问题

1 个答案: