How to fill a table included iFrame - javascript

I included a remote page in my website with iframe.
This page has tables.
I want to fill tables with Javascript in iframe view.
<form action="" method="post" onsubmit="return IsValidForm();" >
<input type="hidden" name ="viewstate" value="HgIPYl1YWl1eXV9hHgViAAQHCQ4DAAMKHw4ZCh8OBgoFYRsCD2JfU1NhGwgfYlJhCB9iXVheW1JfWl5fWVxdW1JYXF5bYREEBQ5iWlldW1thCAYfCGJbYQ==" />
<input type="hidden" name ="un" value="kolbehkhaterateman" />
<input type="hidden" name ="chsm" value="160772526" />
<table cellpadding="2" width="450" border="0" style="text-align:right" id="tblc">
<tr>
<td width="64">name:</td>
<td width="372">
<input id="txtwriter" name="txtwriter" class="textbox" onkeypress="return farsikey(this,event)" onkeydown="changelang(this);" type="text" maxlength="50" value="" ></td>
</tr>
<tr>
<td width="64">email:</td>
<td width="372">
<input id="txtemail" name="txtemail" class="textbox" dir="ltr" type="text" maxlength="50" value="" ></td>
</tr>
<tr>
<td width="64">website:</td>
<td width="372">
<div style="FLOAT: left; WIDTH: 40px; HEIGHT: 20px; TEXT-ALIGN: left">
<img class="Off" onmouseover="On(this)" onclick="ShowSM()" onmouseout="Of(this)" id="imgsm" height="18" src="http://www.blogfa.com/cmt/images/1.gif" width="18" border="0">
</div>
<input id="txturl" name="txturl" class="textbox" dir="ltr" type="text" maxlength="50" value="" ></td>
</tr>
<tr>
<td width="100%" colspan="2">
<textarea class="textarea" name="txtcomment" id="txtcomment" onkeypress="return farsikey(this,event)" onkeydown="changelang(this);"></textarea></td>
</tr>
<tr>
<td width="100%" colspan="2"><input id="chkPrivate" type="checkbox" value="ON" name="chkPrivate" align="absmiddle"><label for="chkPrivate">urcomment
abs</label></td>
</tr>
<tr>
<td width="100%" colspan="2"><input id="chkSave" type="checkbox" name="chkSave" align="absmiddle"><label for="chkSave">ur sciority </label>
[remove info]</td>
</tr>
<tr id="captchaspace" style="visibility:hidden" >
<td width="100%" colspan="2" height="24" > type this numbre: <input class="textbox" dir="ltr" type="text" value="" id= "txtCaptcha" name= "txtCaptcha" maxlength="6" style="width:70px;" align="absmiddle" onfocus="document.getElementById ('btnSend').disabled=false;" autocomplete="off" > <span id="imgspace" ></span>
</td>
</tr>
<tr><td width="100%" colspan="2" align=center height="18"><span style="font-size:7.5pt;color:gray"> nazar </span></td> </tr>
<tr>
<td align="left" width="100%" colspan="2" height="33">
<input class="btn" id="btnSend" type="submit" value="submit" name="btnSend" >
</td>
</tr>
</table>
</form>
How can I fill table fields with values?
Using Javascript or something.
I'm not too familiar with Javascript. Please shown me an example.

i included a remote page in my website with iframe.
Short answer is you can't modify a page from another domain. For security reasons browsers implement a "same origin policy". You can only edit the content of an iframe if it came from the same domain as the outer page. Otherwise people could do all sorts of nasty things like show a remote site's login page but change the post location to your own site, steal cookie values, etc.

Related

Fill the login form before or after redirection to url automatically

I have ASP.NET Web Application that contains links to our other sites which runs locally.
So user is entering one address and got shortcuts to other addresses.
One of this pages has login form, and everytime user enter this page he has to fill it again and again. Saving login and password in browser is not an option.
I would like to make something that will automatically fill this form, but I am almost sure that I can't change this page.
The solution that I was thinking is that maybe I can open page with login form inside my own page and then use some JS to insert login & password? Is it possible?
This is source code of form that I would like to fill.
<div id="loadedLoginPage"><input type="hidden" name="hidChallenge" value="">
<table width="520" border="0" cellspacing="1" cellpadding="1">
<tbody><tr>
<td><label for="txtUserID" id="TEXT_LOGIN_USER_NAME">User name:</label></td>
<td class="inputLength"><input type="text" name="txtUserID" id="txtUserID" value="" onchange="hideErrorMessage();"></td>
</tr>
<tr>
<td><label for="txtPassWord" id="TEXT_LOGIN_PASSWORD">Password:</label> </td>
<td><input type="password" name="txtPassWord" id="txtPassWord" value="" onchange="hideErrorMessage();"></td>
</tr>
<tr>
<td><label for="txtDomainName" id="TEXT_LOGIN_DOMAIN">Domain:</label></td>
<td><input type="text" name="txtDomainName" id="txtDomainName" value="" onchange="hideErrorMessage();"></td>
</tr>
<tr>
<td> </td>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tbody><tr>
<td>
<label for="chkRememberMe" class="chkRememberMe">
<input type="checkbox" id="chkRememberMe">
<span id="TEXT_LOGIN_REMEMBER_ME">Remember me on this computer:</span>
</label>
</td>
<td>
</td>
<!--<td> <input id="chkRememberMe" name="chkRememberMe" type="checkbox" /></td>
<td><label for="chkRememberMe" id="TEXT_LOGIN_REMEMBER_ME" ></label></td>-->
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="btnLogin" class="buttonLogon" id="TEXT_LOGIN_LOG_ON" value="Log on" onclick="handleLogOnClick()"></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</tbody></table>
<div id="errorDivWrap" name="errorDivWrap" align="right" style="display: none;">
<div id="errorImageDiv" name="errorImageDiv" style="display: none;">
<img src="/login/images/Error_Stop.png?v=1.7.1.89" width="16" height="16" alt="" id="errorImage" name="errorImage" style="visibility: hidden;">
</div>
<div id="errorTextDiv" name="errorTextDiv" style="display: none;">
<label id="errorTextField" name="errorTextField" style="visibility: hidden;">
</label></div>
</div></div>

How can i make a login form that logs me in into my webmail?

English is not my native language, so I'm srry if there are some mistakes in this question..
But this is the thing.. I am trying to make a login form on my webpage so I can login to my webmail using my webpage instead of my roundcube.. but when I do that, the webpage is not private so I returns a error..
I am using localhost to login to webmail on a server.. is the problem mabye that it has to be on the same server or is it the code?
<div id="content-wrap"><form action="https:www.glazenwasserijnederpel.nl/webmail" method="post"> <input name="login_theme" type="hidden" value="cpanel" />
<table class="login" style="width: 200px;" border="0" cellspacing="0" cellpadding="0">
<tbody style="text-align: left;">
<strong>Login, alleen voor leden</strong>
<tr style="text-align: left;">
<td class="login_lines" style="text-align: left;">Email:</td>
<td class="login_lines" style="text-align: left;"><input id="user" name="user" size="16" type="text" tabindex="1" /></td>
</tr>
<tr class="row2" style="text-align: left;">
<td class="login_lines" style="text-align: left;">Password:</td>
<td class="login_lines" style="text-align: left;"><input id="pass" name="pass" size="16" type="password" tabindex="2" /></td>
</tr>
<tr style="text-align: left;">
<td style="text-align: left;" colspan="2"><input id="login" class="input-button" type="submit" value="Login" tabindex="3" /></td>
</tr>
</tbody>
</table>
<input name="goto_uri" type="hidden" value="/?login_theme=cpanel" /> </form> <br /> <br />
<script type="text/javascript"><!--
/* Must not include external javascript -jnk 06.20.09 */
var init = function() {
document.getElementById("user").value = '';
document.getElementById("pass").value = '';
document.getElementById("user").focus();
};
if( window.addEventListener ) {
window.addEventListener('load',init,false);
} else if( document.addEventListener ) {
document.addEventListener('load',init,false);
}
// --></script>
</div>
Most websites have protection against this sort of form submission, so yes, you have to be on the same server in order to login.

Scroll to the top of a scrollable pop div atomaticaly using jquery

First thing first, I am having a popup div, which contains a form
Here's is my div
<div class="addnewrule" id="add_message_0">
<form method="post" action="" id="frmadd">
<input type="hidden" name="filter" value="1">
<input name="rule_id" type="hidden" value="0">
<table class="table-responsive" width="100%" border="0" cellspacing="0" cellpadding="10" id="" style="text-align:center; margin-top:0px;">
<tr>
<td colspan="2" align="left"><div id="display_msg_0"></div></td>
</tr>
<tr>
<td width="40%" align="left">Name:</td>
<td width="60%" align="left"><input class="input_field" name="rule_name" type="text"></td>
</tr>
<tr>
<td align="left">Type:</td>
<td align="center">
<input type="radio" name="rule_type" value="0" style="display:none;" />
<input type="radio" name="rule_type" value="1" checked="checked" style="display:none;" />
<div class="btn-group equal_btn">
<button id="block_click" class="btn btn-default" type="button" onclick="setRules(0);">Block Clicks</button>
<button id="filter_click" class="btn btn-default active" type="button" onclick="setRules(1);">Filter Clicks</button>
</div></td>
</tr>
<tr>
<td align="left">Rule Active:</td>
<td align="center">
<input type="radio" id="active_0" name="active" value="1" checked="checked" style="display:none;" />
<input type="radio" id="inactive_0" name="active" value="0" style="display:none;" />
<div class="btn-group">
<button type="button" id="status_enb_0" class="btn btn-default active_btn active" onclick="setruleStatus(0,1);">Enable</button>
<button type="button" id="status_dis_0" class="btn btn-default inactive_btn" onclick="setruleStatus(0,0);">Disable</button>
</div></td>
</tr>
<tr>
<td align="left">Campaign ID:</td>
<td align="left"><input class="input_field" name="camp_id" type="text" /></td>
</tr>
<tr>
<td align="left" id="rRange">Filter IP Ranges:</td>
<td align="left"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding:0;" width="45%"><input class="input_field" name="start_ip" type="text" /></td>
<td width="10%" align="center">To</td>
<td style="padding:0;" width="45%" align="right"><input class="input_field" name="end_ip" type="text" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" id="rUAs">Filter users agents that contains:</td>
<td align="left"><input class="input_field" name="user_agent" type="text" /></td>
</tr>
<tr>
<td align="left" id="rRefs">Filter referers that contains:</td>
<td align="left"><input class="input_field" name="referer" type="text" /></td>
</tr>
<tr id="rUrl" style="display:none;">
<td align="left">Send Blocked Clicks to:</td>
<td align="left"><input class="input_field" type="text" id="rule_url" name="rule_url" value="" /></td>
</tr>
<tr>
<td align="left" colspan="2"><table class="copypaste" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Apply <a href="javascript:void(0)" class="btn orange_button tab2" onclick="cancel_popup('add_new_rule')" >Cancel</a></td>
</tr>
</table></td>
</tr>
</table>
</form>
</div>
Now, here is the jquery ajax function given below.. It checks for the validation and displays the validation message in a message div...
function submitRule(frmId,rule_id)
{
var data=$('#'+frmId).serializeArray();
$.ajax({
type:'POST',
url:'ajax/rule_update_process.php',
data: data,
dataType:'json',
success:function(jData)
{
if(jData.status==1)
{
$("#display_msg_"+rule_id).html(jData.error);
$("#display_msg_"+rule_id).addClass('error');
var child_div = $("#display_msg_"+rule_id);
var parent_div = $("#add_message_"+rule_id);
parent_div.scrollTop(parent_div.scrollTop() + child_div.position().top);
}
else
{
window.location.href='settings_rules.php';
}
}
});
}
Since the popup is a scrollable div, i want to scroll(only within the popup div) to the top so that i can show the message div with the error message..
here'sw how i am getting the screens,.
I used this piece if code to scroll to the top of the popup div to show the error message div,
but this piece of code doesn't seem to work..
What am i doing wrong??
$("#display_msg_"+rule_id).html(jData.error);
$("#display_msg_"+rule_id).addClass('error');
var child_div = $("#display_msg_"+rule_id);
var parent_div = $("#add_message_"+rule_id);
parent_div.scrollTop(parent_div.scrollTop() + child_div.position().top);
replace ur last line of code with this
parent_div.scrollTop(0,0);
I will suggest a very simple apprach:
$("#apply_button").click(function () {
var error_message = $("#your_error_message").css("display");
if (error_message != "none") {
$("#add_message_0").scrollTop(0);
};
});
Code speaks for itself.
BR
You can use css only brother. Example this is your form.
<div>
<form class="has-error">
<p>error</p>
<input name="" value="">
</form>
<div>
you can use the class .has-error to set a css codes. your css codes will only use if the error message is displayed.
div{ overflow-y: scroll; }
div .has-error{ height: 400px; }
height will defend your current section height with errors message.
Something like this on fiddle demo
if the message is not visible on button click, add this to your click function code
$( '#add_message_1' ).delay( 200 ).animate({scrollTop: 0 }, 300);}

Form does not do anything when pressing Submit

The form is missing an action url, since the javascript takes care of that.
I recently fixed an issue with not labeling the submit button as type=submit that caused ie 6 and 7 to not do anything when clicking on the submit..
But I recently still get complains on the form not doing anything when someone presses the submit button.
My only last guess would be that they disabled javascript...
If anyone have some other point of view on this Please Take a look. Could be old Browsers issue, could be code issue..
JSfiddle
http://jsfiddle.net/wn21av2y/1/
HTML
<form id="form1" name="form1" method="post" style="transition: 3s height; overflow: hidden;">
<table width="100%" border="0" cellspacing="2" cellpadding="5">
<tbody>
<tr>
<td width="25%" align="right">Practitioner's Full Name<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="name" type="text" required="" pattern=".{3,}">
</td>
</tr>
<tr>
<td width="25%" align="right">Type<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<select name="type" required="">
<option value="MD">MD</option>
<option value="OD">OD</option>
<option value="OTHER">OTHER</option>
</select>
</td>
</tr>
<tr>
<td align="right">Street Address<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="address" type="text" required="" pattern=".{3,}">
</td>
</tr>
<tr>
<td align="right">City<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="city" type="text" required="" pattern=".{3,}">
</td>
</tr>
<tr>
<td align="right">State<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<select name="state" id="state" required="">
<option value="AL" selected="">Alabama</option>
<option value="AK">STATES</option>
</select>
</td>
</tr>
<tr>
<td align="right">Zip<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="zip" type="text" placeholder="12345-1234" required="" pattern="(\d{5}([\-]\d{4})?)">
</td>
</tr>
<tr>
<td align="right">Phone<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="phone" type="text" required="" placeholder="123-456-7890" pattern="\d{3}[\-]\d{3}[\-]\d{4}">
</td>
</tr>
<tr>
<td align="right">Email<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="email" type="email" required="" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$">
</td>
</tr>
<tr>
<td align="right">Signature ( Type Name )<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="sig" type="text" required="" pattern=".{3,}">
</td>
</tr>
<tr>
<td align="right">Today's Date<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input type="text" class="datepicker date1" required="">
</td>
</tr>
<tr>
<td align="right">State License Number<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="lic_numb" type="text" required="" pattern=".{3,}">
</td>
</tr>
<tr>
<td align="right">License Exp. Date<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input type="text" class="datepicker date2" required="">
</td>
</tr>
<tr>
<td align="right" valign="top">
<input name="check1" type="checkbox" value="" required=""><span style="color:red;">*</span>
</td>
<td style="text-align: left">My signature certifies that
<br>1) The information provided</td>
</tr>
<tr>
<td align="right" valign="top">
<input name="check2" type="checkbox" value="" required=""><span style="color:red;">*</span>
</td>
<td style="text-align: left">I verify that the recipient is eligible to receive samples.<br>
</td>
</tr>
<tr>
<td width="25%" align="right"> </td>
<td style="text-align: left">
<button type="submit" class="submits">Submit</button>
</td>
</tr>
</tbody>
</table>
</form>
script
jQuery(function($) {
$(".datepicker").datepicker({
numberOfMonths: 3,
showButtonPanel: true
});
$("#form1").submit(function() {
var url = "example.com/process.php"; // the script where you handle the form input.
$.post(url, {
name: $("input[name='name']").val(),
type: $("select[name='type'] option:selected").text(),
address: $("input[name='address']").val(),
city: $("input[name='city']").val(),
state: $("select[name='state'] option:selected").text(),
zip: $("input[name='zip']").val(),
phone: $("input[name='phone']").val(),
email: $("input[name='email']").val(),
sig: $("input[name='sig']").val(),
date: $(".date1").datepicker("getDate"),
lic_numb: $("input[name='lic_numb']").val(),
lic_date: $(".date2").datepicker("getDate"),
code: 'tEH4s'
}).done(function(data) {
$(".result").html(data);
$('input').val('');
$('#form1').css("height", "0");
});
return false; // avoid to execute the actual submit of the form.
});
});
An important quirk to be aware of: In a form that contains a <button/> element, IE6 and IE7 will not submit the form when the <button/> element is clicked. Other browsers, on the other hand, will submit the form. - Source
To get it to work in IE6 and IE7 you need to change the button tag to instead be:
<input type="submit" class="submits" value="Submit" />
To my mind you need an action for the form to be submitted, as it's said at the w3c HTML 4 spec.

Calculate sum of textboxes inside nested grid

I have two nested grids in a GridView. Both nested grids have different number of controls (TextBoxes). I want to calculate sum of nested grid textboxes and put in a relevant textbox of relevant row parent grid.
I want to do this using jQuery.
Following is the source of grids:
<table cellspacing="0" rules="all" border="1" id="gvSPActivities" style="width:100%;border-collapse:collapse;">
<tr class="donorh1" align="left" style="height:35px;">
<th scope="col" style="width:40px;">#</th><th scope="col">Activity</th><th scope="col">Unit</th><th scope="col">Target</th><th scope="col">Benefic</th><th scope="col">Cost</th>
</tr><tr class="gridrow2">
<td>
1
</td><td>a</td><td>u1</td><td>
<input name="gvSPActivities$ctl02$txtTarget" type="text" value="100" id="gvSPActivities_txtTarget_0" class="numeric" style="width:150px;" />
</td><td>
<a class="showDetails" href="javascript:switchViews('div1', 'one');">
Show Details</a>
<input name="gvSPActivities$ctl02$txtTotalBenefic" type="text" id="gvSPActivities_txtTotalBenefic_0" />
<div class="details" id="div1" style="display: none;
left: 30px;">
<div>
<table cellspacing="0" rules="all" border="1" id="gvSPActivities_gvBenefic_0" style="border-collapse:collapse;">
<tr>
<th scope="col">Male</th><th scope="col">Female</th><th scope="col">Children</th><th scope="col">Family</th>
</tr><tr>
<td>
<input name="gvSPActivities$ctl02$gvBenefic$ctl02$txtMaleBenefic" type="text" id="gvSPActivities_gvBenefic_0_txtMaleBenefic_0" class="numeric" style="width:100px;" />
</td><td>
<input name="gvSPActivities$ctl02$gvBenefic$ctl02$txtFemaleBenefic" type="text" id="gvSPActivities_gvBenefic_0_txtFemaleBenefic_0" class="numeric" style="width:100px;" />
</td><td>
<input name="gvSPActivities$ctl02$gvBenefic$ctl02$txtChildren" type="text" id="gvSPActivities_gvBenefic_0_txtChildren_0" class="numeric" style="width:100px;" />
</td><td>
<input name="gvSPActivities$ctl02$gvBenefic$ctl02$txtFamilyBenefic" type="text" id="gvSPActivities_gvBenefic_0_txtFamilyBenefic_0" class="numeric" style="width:100px;" />
</td>
</tr>
</table>
</div>
</div>
</td><td>
<a class="showDetails" href="javascript:switchViews('div1', 'one');">
Show Details</a>
<input name="gvSPActivities$ctl02$txtTotalCost" type="text" id="gvSPActivities_txtTotalCost_0" />
<div class="details" id="div1" style="display: none;
left: 30px;">
<div>
<table cellspacing="0" rules="all" border="1" id="gvSPActivities_gvCost_0" style="border-collapse:collapse;">
<tr>
<th scope="col">Main Cost</th><th scope="col">Other Cost</th>
</tr><tr>
<td>
<input name="gvSPActivities$ctl02$gvCost$ctl02$txtMainCost" type="text" id="gvSPActivities_gvCost_0_txtMainCost_0" class="numeric" style="width:100px;" />
</td><td>
<input name="gvSPActivities$ctl02$gvCost$ctl02$txtOthercost" type="text" id="gvSPActivities_gvCost_0_txtOthercost_0" class="numeric" style="width:100px;" />
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
Thanks.
var total = 0;
$("input[id^='gvSPActivities']", "#gvSPActivities").each(function() {
total = total+this.value;
});
$(someInputElement).val(total);

Categories