0
我有一個PHP窗體顯示通過父窗口中的iframe，PHP窗體scrollTop本身好，但一旦在父窗口頁面的iframe中，它只是直接跳轉到錯誤。有沒有辦法添加到下面的代碼，使其父窗口中的iframe的scrolltop？jQuery invalidHandler ScrollTop通過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 <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 <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 <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 <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 <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 <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 <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 <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 <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 <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 <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) <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) <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 <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? <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? <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 <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 <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 <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: <span style="color:red;">*</span></label>
<?php phpfmg_show_captcha(); ?>
</div>
</div>
<div>
<div class='col_label'> </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' /> <span class="required">Required <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&func=processing' ;?>' border="0" alt='Processing...' />
<label id='phpfmg_processing_dots'></label>
</span> </td>
<td valign="top" style="width:50%"> </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>
它不是完全清楚你的問題在這裏。一個演示覆制情況將有助於 – charlietfl 2014-12-06 14:27:34
嗨，問題是，一旦它通過iframe顯示它跳轉到錯誤，而不是scrolltop。它在單獨的表單上工作正常，但我必須通過iframe顯示它，所以我試圖找出是否有方法在父窗口中的iframe中滾動它。喜歡將它綁定到父窗口。這我不知道該怎麼辦，因爲我沒有足夠的理解如何編寫JavaScript。 – Neil 2014-12-06 14:47:46
我不知道現成的簡單現成解決方案。您需要編寫一些位置計算來比較2個窗口。 – charlietfl 2014-12-06 14:54:02