可以在父窗口中通过iframe jQuery invalidHandler ScrollTop

时间:2014-12-06 13:59:45

标签: javascript jquery html iframe

我有一个php表单通过父窗口中的iframe显示,php表单scrollTop本身就可以了,但是一旦在父窗口页面的iframe中,它就会直接跳转到错误。有没有办法添加到下面的代码,使其在父窗口的iframe中滚动?

$(function () {

$("#frmFormMail").validate({

        invalidHandler : function() {
            $('html, body').animate({
                scrollTop: $("#frmFormMail").offset().top // scroll top to your form on error
            }, 'slow' );
        },
        // Specify the validation rules
        rules: {
            field_0: { // Title
                required: true,
                minlength: 3
            },
            field_1: { // Full Name
                required: true,
                email: true,
                minlength: 5
            },
            field_2: { // Address
                required: true,
                minlength: 20
            },
            field_3: { // Age
                required: true,
                minlength: 2
            },
            field_4: { // Marital Status
                required: true,
                minlength: 3
            },
            field_5: { // Children
                required: true,
                minlength: 1
            },
            field_6: { // Nationality
                required: true,
                minlength: 3
            },
            field_7: { // Health
                required: true,
                minlength: 10
            },
            field_8: { // Glasses
                required: true,
                minlength: 3
            },
            field_9: { // Car Licence
                required: true,
                minlength: 10
            },
            field_10: { // Nationality
                required: true,
                minlength: 3
            },
            field_11: { // Website of interest 1
                required: false,
                minlength: 5
            },
            field_12: { // Website of interest 2
                required: false,
                minlength: 5
            },
            field_13: { // Applying for Position
                required: true,
                minlength: 3
            },
            field_14: { // Resume
                required: true,
                //Put the allowed file types accept here if required - add remove more extention type as required. accept: "jpg|jpe|jpeg|png|mp3|wav|aac|rtf|odt|doc|docx|pdf|txt"  
            },
            field_15: { // Cv
                required: true,
                //Put the allowed file types accept here if required - add remove more extention type as required. accept: "jpg|jpe|jpeg|png|mp3|wav|aac|rtf|odt|doc|docx|pdf|txt" 
            },
            field_16: { // Present Job
                required: true,
                minlength: 10
            },
            field_17: { // When can You Start
                required: true,
                minlength: 3
            },
            field_18: { // Relocate Dropdown
                required: true // required: false not a required field, required: true required field
            },
            field_19: { // Last 3 Jobs
                required: true,
                minlength: 30
            },
            field_20: { // Attach Reference
                required: false,
                //Put the allowed file types accept here if required - add remove more extention type as required. accept: "jpg|jpe|jpeg|png|mp3|wav|aac|rtf|odt|doc|docx|pdf|txt" 
            },
            field_21: { // Attach Other of interest
                required: false,
                //Put the allowed file types accept here if required - add remove more extention type as required. accept: "jpg|jpe|jpeg|png|mp3|wav|aac|rtf|odt|doc|docx|pdf|txt" 
            },
            field_22: { // Suitable for this job
                required: true,
                minlength: 100
            },
            field_23: { // Suitable for this job
                required: true,
                minlength: 100
            },
            field_24: { // Comments questions
                required: false,
                minlength: 50
            },

        },
        // Specify the validation error messages
        messages: {
            field_14: {
                required: "This field is required - will validate on submit"
            },
            field_15: {
                required: "This field is required - will validate on submit"
            },
        },

        submitHandler: function(form) {
            form.submit();
        }
    });

  });


<div align="left" style="margin-top:5px; margin-left:10px; width:690px;">
<fieldset style="border:#CCCCCC 1px solid;"><legend><label class="label" style="background-color:#989EEF;">Job Application Form</label></legend>
<form name="frmFormMail" id="frmFormMail" target="submitToFrame" action='<?php echo PHPFMG_ADMIN_URL . '' ; ?>' method='post' enctype='multipart/form-data' onsubmit='return fmgHandler.onSubmit(this);'>
<input type='hidden' name='formmail_submit' value='Y'>
<input type='hidden' name='mod' value='ajax'>
<input type='hidden' name='func' value='submit'>
<table width="100%" border="0" cellpadding="5" cellspacing="0">
  <tr>
    <td valign="top" style="width:50%">
     <div class='field_block' id='field_1_div'>
        <label class='title'>Title and Full Name&nbsp;<span style="color:red;">*</span></label>
        <input type="text" name="field_0"  id="field_0" value="<?php  phpfmg_hsc("field_1", ""); ?>" class='inputbox' maxlength="80"  placeholder="Full Name" autocomplete="off" style="width:295px;" />
     </div>
     </td>
    <td valign="top" style="width:50%">
     <div class='field_block' id='field_1_div'>
        <label class='title'>Email&nbsp;<span style="color:red;">*</span></label>
        <input type="text" name="field_1"  id="field_1" value="<?php  phpfmg_hsc("field_1", ""); ?>" class='inputbox' maxlength="60"  placeholder="Email" autocomplete="off" style="width:295px;" />
     </div>
    </td>
  </tr>
  <tr>
    <td valign="top" style="width:50%">
     <div class='field_block' id='field_2_div'>
        <label class='title'>Address&nbsp;<span style="color:red;">*</span></label>
        <input type="text" name="field_2"  id="field_2" value="<?php  phpfmg_hsc("field_2", ""); ?>" class='inputbox' maxlength="250"  placeholder="Address" autocomplete="off" style="width:295px;" />
     </div>
    </td>
    <td valign="top" style="width:50%">
     <div class='field_block' id='field_3_div'>
        <label class='title'>Age&nbsp;<span style="color:red;">*</span></label>
        <input type="text" name="field_3"  id="field_3" value="<?php  phpfmg_hsc("field_3", ""); ?>" class='inputbox' maxlength="20"  placeholder="Age" autocomplete="off" style="width:295px;" />
     </div>
   </td>
  </tr>
  <tr>
    <td valign="top" style="width:50%">
     <div class='field_block' id='field_4_div'>
        <label class='title'>Marital Status&nbsp;<span style="color:red;">*</span></label>
        <input type="text" name="field_4"  id="field_4" value="<?php  phpfmg_hsc("field_4", ""); ?>" class='inputbox' maxlength="50"  placeholder="Marital Status" autocomplete="off" style="width:295px;" />
     </div>
    </td>
    <td valign="top" style="width:50%">
     <div class='field_block' id='field_5_div'>
        <label class='title'>Dependants / Children&nbsp;<span style="color:red;">*</span></label>
        <input type="text" name="field_5"  id="field_5" value="<?php  phpfmg_hsc("field_5", ""); ?>" class='inputbox' maxlength="100"  placeholder="Number of Children / Dependants" autocomplete="off" style="width:295px;" />
     </div>
    </td>
  </tr>
  <tr>
    <td valign="top" style="width:50%">
     <div class='field_block' id='field_6_div'>
        <label class='title'>Nationality&nbsp;<span style="color:red;">*</span></label>
        <input type="text" name="field_6"  id="field_6" value="<?php  phpfmg_hsc("field_6", ""); ?>" class='inputbox' maxlength="100"  placeholder="Nationality" autocomplete="off" style="width:295px;" />
     </div>
    </td>
    <td valign="top" style="width:50%">
     <div class='field_block' id='field_7_div'>
        <label class='title'>General Health / Smoker / Non-Smoker&nbsp;<span style="color:red;">*</span></label>
        <input type="text" name="field_7"  id="field_7" value="<?php  phpfmg_hsc("field_7", ""); ?>" class='inputbox' maxlength="250"  placeholder="General Health / Smoker / Non-Smoker" autocomplete="off" style="width:295px;" />
     </div>
   </td>
  </tr>
  <tr>
    <td valign="top" style="width:50%">
     <div class='field_block' id='field_8_div'>
        <label class='title'>Do You Wear Glasses or Contact Lens&nbsp;<span style="color:red;">*</span></label>
        <input type="text" name="field_8"  id="field_8" value="<?php  phpfmg_hsc("field_8", ""); ?>" class='inputbox'  maxlength="100"  placeholder="Glasses / Contact Lenses" autocomplete="off" style="width:295px;" />
     </div>
    </td>
    <td valign="top" style="width:50%">
     <div class='field_block' id='field_9_div'>
        <label class='title'>Car / Licence / Clean Driving Licence&nbsp;<span style="color:red;">*</span></label>
        <input type="text" name="field_9"  id="field_9" value="<?php  phpfmg_hsc("field_9", ""); ?>" class='inputbox'  maxlength="200" placeholder="Car / Licence / Clean" autocomplete="off" style="width:295px;" />
     </div>
   </td>
  </tr>
  <tr>
    <td colspan="2">
     <div class='field_block' id='field_10_div'>
        <label class='title'>Anything else you think we should know</label>
        <textarea name="field_10" id="field_10" class='textarea' maxlength="1000" data-limit="1000" placeholder="Please tell us of anything else that might be relevant about your self and about any special needs or disabilities you might have or need help with." style="width:627px; height:60px;"><?php  phpfmg_hsc("field_10"); ?>
</textarea><span style="color:#999999; width:25px; font-size:10px; float:right; margin-top:1px; margin-right:13px;" class="countdown"></span>
     </div>
   </td>
  </tr>
  <tr>
    <td valign="top" style="width:50%">
     <div class='field_block' id='field_11_div'>
        <label class='title'>Website of interest 1 (Optional)</label>
        <input type="text" name="field_11"  id="field_11" value="<?php  phpfmg_hsc("field_11", ""); ?>" class='inputbox' maxlength="250"  placeholder="Website Address" autocomplete="off" style="width:295px;" />
     </div>
    </td>
    <td valign="top" style="width:50%">
     <div class='field_block' id='field_12_div'>
        <label class='title'>Website of interest 2 (Optional)</label>
        <input type="text" name="field_12"  id="field_12" value="<?php  phpfmg_hsc("field_12", ""); ?>" class='inputbox' maxlength="250"  placeholder="Website Address" autocomplete="off" style="width:295px;" />
     </div>
   </td>
  </tr>
  <tr>
    <td valign="top" style="width:50%">
     <div class='field_block' id='field_13_div'>
        <label class='title'>Position you are applying for&nbsp;<span style="color:red;">*</span></label>
        <input type="text" name="field_13"  id="field_13" value="<?php  phpfmg_hsc("field_13", ""); ?>" class='inputbox' maxlength="250"  placeholder="Title of Job You Are Applying For" autocomplete="off" style="width:295px;" />
     </div>
   </td>
  </tr>
  <tr>
    <td valign="top" style="width:50%">
     <div class='field_block' id='field_14_div'>
        <label class='title'>Attach Your Resume (Cover Letter)&nbsp;<span style="color:red;">*</span> </label>
        <input type="file" name="field_14" id="field_14" value="" class='inputbox' onchange="fmgHandler.check_upload(this);" style="width:310px; margin-bottom:5px;" />
     </div>
    </td>
    <td colspan="2">
     <div class='field_block' id='field_15_div'>
        <label class='title'>Attach Your Cv (Curriculum Vitae)&nbsp;<span style="color:red;">*</span></label>
        <input type="file" name="field_15"  id="field_15" value="" class='inputbox' onchange="fmgHandler.check_upload(this);" style="width:310px; margin-bottom:5px;" />
     </div>
   </td>
  </tr>
  <tr>
    <td valign="top" style="width:50%">
     <div class='field_block' id='field_16_div'>
        <label class='title'>Present / Most Resent Job and Salary&nbsp;<span style="color:red;">*</span></label>
        <input type="text" name="field_16"  id="field_16" value="<?php  phpfmg_hsc("field_16", ""); ?>" class='inputbox' maxlength="250"  placeholder="Present / Resent Job and Salary" autocomplete="off" style="width:295px;" />
     </div>
    </td>
    <td valign="top" style="width:50%">
     <div class='field_block' id='field_17_div'>
        <label class='title'>When could you start?&nbsp;<span style="color:red;">*</span></label>
        <input type="text" name="field_17"  id="field_17" value="<?php  phpfmg_hsc("field_17", ""); ?>" class='inputbox' maxlength="100"  placeholder="Available to Start" autocomplete="off" style="width:295px;" />
     </div>
   </td>
  </tr>
  <tr>
    <td valign="top" style="width:50%">
     <div class='field_block' id='field_18_div'>
        <label class='title'>Are you willing to relocate if applicable?&nbsp;<span style="color:red;">*</span></label>
        <?php phpfmg_dropdown( 'field_18', "- Please Select Option -=|Not Applicable|Yes|No|Not Sure" );?>
     </div>
    </td>
    <td valign="top" style="width:50%">
     <div class='field_block' id='field_19_div'>
        <label class='title'>Last 3 jobs held Including Dates&nbsp;<span style="color:red;">*</span></label>
        <textarea name="field_19" id="field_19" class='textarea' maxlength="400" data-limit="400" placeholder="Please tell us about the last 3 jobs you have had, if that many, giving a discrption and the start finshed dates." style="width:295px; height:60px;"><?php  phpfmg_hsc("field_19"); ?>
</textarea><span style="color:#999999; width:25px; font-size:10px; float:right; margin-top:1px; margin-right:13px;" class="countdown"></span>
     </div>
   </td>
  </tr>
  <tr>
    <td valign="top" style="width:50%">
     <div class='field_block' id='field_20_div'>
        <label class='title'>Attach References </label>
        <input type="file" name="field_20"  id="field_20" value="" class='inputbox' onchange="fmgHandler.check_upload(this);" style="width:310px;" />
     </div>
    </td>
    <td colspan="2">
     <div class='field_block' id='field_21_div'>
        <label class='title'>Other attachment of interest i.e. Photo </label>
        <input type="file" name="field_21"  id="field_21" value="" class='inputbox' onchange="fmgHandler.check_upload(this);" style="width:310px;" />
     </div>
   </td>
  </tr>
  <tr>
    <td colspan="2">
     <div class='field_block' id='field_22_div'>
        <label class='title'>Please tell us what you think makes you suitable for this position&nbsp;<span style="color:red;">*</span></label>
        <textarea name="field_22" id="field_22" class='textarea' maxlength="1500" data-limit="1500" placeholder="Please tell us of any experience you have that makes you suitable for this position?" style="width:627px; height:60px;"><?php  phpfmg_hsc("field_22"); ?>
</textarea><span style="color:#999999; width:25px; font-size:10px; float:right; margin-top:1px; margin-right:13px;" class="countdown"></span>
     </div>
   </td>
  </tr>
  <tr>
    <td colspan="2">
     <div class='field_block' id='field_23_div'>
        <label class='title'>Tell us more about yourself, Hobbies and Interests&nbsp;<span style="color:red;">*</span></label>
        <textarea name="field_23" id="field_23" class='textarea' maxlength="1500" data-limit="1500" placeholder="Please tell us more about yourself, your temperament, personality. Are you a positive and punctual person. Do you work well with others as a team or on your own. Hobbies and interests. Anything else relevant to this position." style="width:627px; height:60px;"><?php  phpfmg_hsc("field_23"); ?>
</textarea><span style="color:#999999; width:25px; font-size:10px; float:right; margin-top:1px; margin-right:13px;" class="countdown"></span>
     </div>
   </td>
  </tr>
  <tr>
    <td colspan="2">
     <div class='field_block' id='field_24_div'>
        <label class='title'>Comments / Questions </label>
        <textarea name="field_24" id="field_24" class='textarea' maxlength="1000" data-limit="1000" placeholder="Please leave any comment or ask any questions you might have." style="width:627px; height:60px;"><?php  phpfmg_hsc("field_24"); ?>
</textarea><span style="color:#999999; width:25px; font-size:10px; float:right; margin-top:1px; margin-right:13px;" class="countdown"></span>
     </div>
   </td>
  </tr>
  <tr>
    <td valign="top" style="width:50%"><div class='field_block' id='phpfmg_captcha_div'>
        <div class='col_label'>
          <label class='title'>Security Code:&nbsp;<span style="color:red;">*</span></label>
          <?php phpfmg_show_captcha(); ?>
        </div>
      </div>
      <div>
      <div class='col_label'>&nbsp;</div>
      <div class='form_submit_block col_field'>
      <div id='err_required' class="form_error" style='display:none;'>
        <label class='form_error_title'>Please check Captcha Security Code</label>
      </div>
      <br />
      <input type='submit' value='Submit' class='form_button' />&nbsp;<span class="required">Required&nbsp;<span style="color:red;">*</span></span>
      <span id='phpfmg_processing' style='display:none;'> <img id='phpfmg_processing_gif' src='<?php echo PHPFMG_ADMIN_URL . '?mod=image&amp;func=processing' ;?>' border="0" alt='Processing...' />
      <label id='phpfmg_processing_dots'></label>
      </span> </td>
    <td valign="top" style="width:50%">&nbsp;</td>
  </tr>
</table>
 </form>
</fieldset>
</div>

<!-- this is the iframe -->

<iframe src="assets/form.php" name="iframe" width="780" height="1770" id="iframe" frameborder="0" scrolling="auto"></iframe>

1 个答案:

答案 0 :(得分:0)

为了从iframe内部滚动父窗口,您需要访问父窗口的jQuery实例。在iframe内部,可以在window.parent.$处找到。

// From inside iframe
window.parent.$('html, body').animate({
        scrollTop: window.parent.$("#frmFormMail").offset().top
    }, 'slow');

如果您不在iframe的范围内使用jQuery,则可以将$定义为父{q} $,这样可以避免必须写出{{1}多次:

window.parent.$