How can I replace the default placeholder in a form (using JQuery or JavaScript) with the submitted value? Thank you!
Here is a sample code:
<form name="" id="RegForm" method="post" action="">
<table cellpadding="0" cellspacing="0" width="260" align="center">
<tr>
<td align="center" colspan="2" height="45" valign="middle"><input type="text" name="username" id="username" class="text" placeholder="Your Username here" style="background:url(img/bg_text.png) no-repeat;" /></td>
</tr>
<tr>
<td align="left" width="120" height="50" valign="middle"><input type="image" id="submitbtn" src="img/but_register.png" class="submit" onclick="checkPreReg()"/></td>
</tr>
</table>
Javascript:
<script>
function checkPreReg() {
var form = $("#RegForm");
var u = $("#username", form).val();
$('#username',form).attr('placeholder',u);
}
</script>
It doesn't work at all. I tried other scripts but the value goes back to the default Placeholder after the new one appears briefly.
I would say this question might need some clarification, however I will give it a shot.
if you mean:
<input type="text" placeholder="default_placeholder" />
Then I would try:
$(document).ready(function(){
$('#FORM').submit(function(){
$('#INPUT_ID').attr('placeholder','new text here');
});
});
Related
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.
Actual keys redacted" I'm implementing a simple login form with ReCaptcha.
The ReCaptcha gives me this error:
"The reCAPTCHA wasn't entered correctly. Go back and try it again. (reCAPTCHA said: incorrect-captcha-sol)"
This is my code:
Index.php
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<form name="form1" method="post" action="verify.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="3"><strong>Member Login </strong></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername" /></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input name="mypassword" type="text" id="mypassword" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Login" /></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
<html>
<title>Title Dolan Webiste</title>
<body>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=actual_key_redacted"></script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=actual_key_redacted" height="300" width="500" frameborder="0"></iframe><br />
<textarea name="recaptcha_challenge_field" rows="3" cols="40"> </textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge" />
</noscript>
</body>
</html>
Verify.php
<?php
echo "<pre> _POST: =========\n";
print_r($_POST);
echo "\n=========\n</pre>";
require_once('recaptchalib.php');
$privatekey = "private_key_here";
$resp = recaptcha_check_answer ($privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);
if (!$resp->is_valid) {
// What happens when the CAPTCHA was entered incorrectly die ("The reCAPTCHA wasn't entered correctly. Go back and try it again.".
"(reCAPTCHA said: " . $resp->error . ")");
} else {
// Your code here to handle a successful verification
}
?>
I have no clue what I did wrong. Any help?
P.s. Yes, I do have the recaptchalib.php in the same directory.
See this...
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]
The $_POST variable array comes from the form data upon submit. The problem is, how can the form data post array contain recaptcha_challenge_field and recaptcha_response_field when you've failed to put these fields in the form container?
You must put the reCaptcha widget inside of your form container, or between your <form> and </form> tags.
<form name="form1" method="post" action="verify.php">
.... the rest of your form here
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=actual_key_redacted">
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=actual_key_redacted"
height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea>
<input type="hidden" name="recaptcha_response_field"
value="manual_challenge">
</noscript>
</form>
However, not sure why you didn't notice the missing post data when you did your print_r($_POST);
I am developing a code, which takes a value as input and the form when submitted, displays the result and the code is as follows:
<script>
function submitme()
{
document.forms["myform"].submit();
}
</script>
<body onload="submitme()">
<FORM name="performance" id="myform" method="post" action="http://www.pvpsiddhartha.ac.in/index.sit" >
<INPUT type="hidden" name="service" value="STU_PERFORMANCE_MARKS_DISPLAY">
<TABLE border="0" width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD colspan="2" align="center"><STRONG><U>Student Marks Performance Display Form</U></STRONG></TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD align="right" width="40%">Regd. No:</TD>
<TD><INPUT type="text" name="stid" value="<?php echo $_GET['x']; ?>"></TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD align="right"><INPUT type="submit" name="submit" value="Submit"></TD>
<TD align="center"><INPUT type="reset" value="Clear"></TD>
</TR>
</TABLE>
</FORM>
</body>
The problem is, when the page is loaded completely, the form should be submitted , but the form cannot be submitted. What is the problem , Help me!! Thanks in advance
Try this pure javascript,
<body>
<FORM name="performance" id="myform" method="post" action="http://www.pvpsiddhartha.ac.in/index.sit" >
<INPUT type="hidden" name="service" value="STU_PERFORMANCE_MARKS_DISPLAY">
<TABLE border="0" width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD colspan="2" align="center"><STRONG><U>Student Marks Performance Display Form</U></STRONG></TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD align="right" width="40%">Regd. No:</TD>
<TD><INPUT type="text" name="stid" value=""></TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD align="right"><INPUT type="submit" name="submit_button" value="Submit"></TD>
<TD align="center"><INPUT type="reset" value="Clear"></TD>
</TR>
</TABLE>
</FORM>
<script>
window.onload = function(){
document.getElementById('myform').submit();
};
</script>
To access this document.getElementById('myform').submit(), you should change <INPUT type="submit" name="submit" value="Submit"> to <INPUT type="submit" name="submit_button" value="Submit">. Don't use other element with name of submit or id.
And also the better one is,
<script>
window.ready = function(){
document.getElementById('myform').submit();
};
</script>
It should help:
$(document).ready(function () {
$('#myform').trigger('submit'); });
Still I don't get what is the point of submitting the form after page loads.
try
<script>
function submitme()
{
document.forms["performance"].submit();
}
</script>
or
<script>
function submitme()
{
document.forms[0].submit();
}
</script>
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.
Im trying to show a delete confirmation box once the user clicks the delete button within the display:column. I have the dialog to show up but once the user confirms that he wants to delete the action is not getting called. The page just reloads without the row being deleted. Without the delete confirmation the row will be deleted successfully. Im doing something wrong with the confirmation. Any help would be appreciated, Thanks
What I have right now is:
jQuery:
$(".btnShowDeleteConfirmation").click(function (e)
{
ShowDialog(true);
e.preventDefault();
});
$("#btnClose, #btnNo").click(function (e)
{
HideDialog();
e.preventDefault();
});
$("#btnYes").click(function (e)
{
});
Javascript:
function deleteEntry(rowId)
{
document.getElementById('rowId').value=rowId;
document.forms['myForm'].action='/myAction/deleteAction.action?method=deleteRow';
document.forms['myForm'].submit;
}
display tag table:
<form action="" method="POST" id="mainForm" name="MyFormBean">
<display:table requestURIcontext="true" requestURI="/unavailability/loadUnavailability.action?method=loadForm" uid="myList" name="requestScope.unavailList" class="simple" pagesize="10" defaultsort="2" sort="list" cellspacing="0" excludedParams="*">
<display:column property="startDate" title="Start Date" width="18%" decorator="com.mhngs.util.DisplayTagDateWrapper" sortable="true" headerClass="sortable"/>
<display:column property="endDate" title="End Date" width="18%" decorator="com.mhngs.util.DisplayTagDateWrapper" sortable="true" headerClass="sortable" />
<display:column property="reason" title="Comments" width="30%" sortable="true" headerClass="sortable" />
<display:column media="html" width="10%" class="btnShowDeleteConfirmation">
Delete
</display:column>
</display:table>
<input type="hidden" name="rowId" id="rowId" />
</form>
HTML: This will be displayed once user clicks the delete button
<div id="overlay" class="delete_overlay"></div>
<div id="dialog_delete" class="delete_overlay">
<form method="post" action="">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="web_dialog_title">Delete Row Confirmation</td>
<td class="web_dialog_title align_right">Close</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<label>You seleted a row to be deleted</label>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnYes" type="submit" value="Yes" onClick="javascript:deleteEntry('<c:out value="${myList.rowId}"/>')"/>
<input id="btnNo" type="button" value="No" />
</td>
</tr>
</table>
</form>
</div>
You haven't specified form name in html. Where have you mentioned "myForm" name in the form tag?
<form name="myForm" .. >