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>
Related
I'm trying to make a contact-form in php. You can find it here.
I try to make the textbox with datepicker invisible until the visitor checks the radiobutton "ja", only then it needs to be visible.
Here's the code for the form:
var FormStuff = {
init: function() {
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function() {
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function() {
$(".require-if-active").each(function() {
var el = $(this);
if ($(el.data("require-pair")).is(":checked")) {
el.prop("required", true);
} else {
el.prop("required", false);
}
});
}
};
FormStuff.init();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
<!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
<table id="contactForm">
<tr>
<th colspan="2">Contact</th>
</tr>
<div>
<tr>
<td><label>Reservatie: </label></td>
<td>
<table>
<tr>
<td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
<td id="nospacing"><label for="reservatie">Ja</label></td>
<td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
<td id="nospacing"><label for="reservatie">Nee</label></td>
</tr>
</table>
</td>
</tr>
<div class="reveal-if-active">
<tr>
<td><label for="reservering">Reserveringsdatum: </label></td>
<td><input type="text" id="reservering" autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
</tr>
</div>
</div>
<tr>
<td><input type="submit" name="submit" value="Verzenden" /></td>
<td><input type="reset" value="Formulier wissen" class="alt" /></td>
</tr>
</table>
</form>
you use $('input[type="radio"]').click(function(){}) to detect you input change see code snippet.
var FormStuff = {
init: function() {
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function() {
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function() {
$(".require-if-active").each(function() {
var el = $(this);
if ($(el.data("require-pair")).is(":checked")) {
el.prop("required", true);
} else {
el.prop("required", false);
}
});
}
};
FormStuff.init();
/* this is the function to handle you need */
$(function(){
$('input[type="radio"]').click(function(){
if ($('input[type="radio"]#ja').is(':checked'))
{
$(".reveal-if-active").show();
}
else if('input[type="radio"]#nee'){
$(".reveal-if-active").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
<!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
<table id="contactForm">
<tr>
<th colspan="2">Contact</th>
</tr>
<div>
<tr>
<td><label>Reservatie: </label></td>
<td>
<table>
<tr>
<td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
<td id="nospacing"><label for="reservatie">Ja</label></td>
<td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
<td id="nospacing"><label for="reservatie">Nee</label></td>
</tr>
</table>
</td>
</tr>
<div >
<!-- make the tr the element to hide and show -->
<tr class="reveal-if-active" style="display:none">
<td ><label for="reservering">Reserveringsdatum: </label></td>
<td><input type="text" id="reservering" autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
</tr>
</div>
</div>
<tr>
<td><input type="submit" name="submit" value="Verzenden" /></td>
<td><input type="reset" value="Formulier wissen" class="alt" /></td>
</tr>
</table>
</form>
Firstly, your markup is kinda messed up:
You shouldn't mix div tags with tr, only tr tags should be present on the same 'level' of nesting in table tag
Secondly, answering you actual question - add click event listeners on the radiobuttons, so that when YES is clicked, you make visible your "reveal-if-active" row:
var inputToHide = document.getElementsByClassName("reveal-if-active")[0];
var jaInput = document.getElementById("ja");
var neeInput = document.getElementById("nee");
function makeInputVisibleAgain() {
inputToHide.style.display = "block";
}
function hideInput() {
inputToHide.style.display = "none";
}
jaInput.addEventListener("click", makeInputVisibleAgain);
neeInput.addEventListener("click", hideInput);
Thirdly - don't use several ids with same name, better change your id="nospacing" to class
It is possible that you want something like this? Notice that it's very easy to do it in very few lines of code. Since you're a beginner I'll explain:
$( ... ); is jQuery's way to say "when the page is totally loaded, start executing what's inside". In case you didn't know, without this the scripts would start executing any time and could cause errors, mainly because of not finding the elements you work with.
$('input[name="reservatie"]').change(function(){ ... });: the radio buttons have name "reservatie", so when they are changed it will execute the function inside change().
$('#reveal').prop('hidden', !$('#ja').prop('checked'));: I identified the row of the table where the datepicker was as "reveal", because, maybe I'm wrong, but putting one row of it inside of a div didn't let my code go well, so I believe that was just wrong. I deleted the div and used the row instead. So, its attribute hidden will be the opposite of the checked property of "ja", which means, if "ja" is checked, the datepicker won't be hidden, and if it's not, it will.
Hope it helps you.
$(function(){
$('input[name="reservatie"]').change(function(){
$('#reveal').prop('hidden', !$('#ja').prop('checked'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
<!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
<table id="contactForm">
<tr>
<th colspan="2">Contact</th>
</tr>
<div>
<tr>
<td><label>Reservatie: </label></td>
<td>
<table>
<tr>
<td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
<td id="nospacing"><label for="reservatie">Ja</label></td>
<td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
<td id="nospacing"><label for="reservatie">Nee</label></td>
</tr>
</table>
</td>
</tr>
<tr id="reveal" hidden>
<td><label for="reservering">Reserveringsdatum: </label></td>
<td><input type="text" id="reservering" autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
</tr>
</div>
<tr>
<td><input type="submit" name="submit" value="Verzenden" /></td>
<td><input type="reset" value="Formulier wissen" class="alt" /></td>
</tr>
</table>
</form>
I have added this script to my form and its working with alpha numeric.The problem is when i click on wrong format on click function it will updated the data in database with submit button.How can i block? I need to update data with correct alert function.
function CheckPassword(inputtxt) {
var passw = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/;
if (inputtxt.value.match(passw)) {
alert('Congratulations You have successfully changed your password!..Plz Logout and signin again.');
return true;
} else {
alert('Wrong Format...!')
return false;
}
}
<script src="check-password-2.js"></script>
<?php
if(isset($_POST['submit']) )
{
$password = $_POST['newpassword'];
$sql = mysql_query("UPDATE tbl_login SET str_password='$password',status='1' where str_username='$user'");
}
?>
<body onload='document.form1.newpassword.focus()'>
<form name="form1" action="" method="post" id="form1" onClick="CheckPassword(document.form1.newpassword)">
<table width="388" align="center"></br>
</<tr>
<td align="right">Enter Username</td>
<td align="center">
<input type="username" name="username" value="<?php echo ucwords($_SESSION['username']); ?> " class="TxtBox" disabled="disabled" />
</td>
</tr>
<h5>Input Password and Submit [6 to 20 characters which contain at least one numeric digit, one uppercase and one lowercase letter]</h5>
<tr>
<td align="right">New Password</td>
<td align="center">
<input type="password" name="newpassword" class="TxtBox" />
</td>
</tr>
<tr>
<td align="center">
<div align="center">
<input type="submit" name="submit" value="submit" />
</div>
</td>
</tr>
</table>
</form>
</body>
Firstly you need to use the onsubmit attribute of the form, not onclick. Secondly, you need to use a return statement within the attribute to provide the value returned by the function to the event handler to prevent or allow the form submission. You also need to fix several errors in your HTML. Try this:
<body onload='document.form1.newpassword.focus()'>
<form name="form1" action="" method="post" id="form1" onsubmit="return CheckPassword(document.form1.newpassword)">
<table width="388" align="center"></br>
<tr>
<td align="right">Enter Username</td>
<td align="center">
<input type="username" name="username" value="<?php echo ucwords($_SESSION['username']); ?> " class="TxtBox" disabled="disabled" />
</td>
</tr>
<tr>
<td colspan="2">
<h5>Input Password and Submit [6 to 20 characters which contain at least one numeric digit, one uppercase and one lowercase letter]</h5>
</td>
</tr>
<tr>
<td align="right">New Password</td>
<td align="center">
<input type="password" name="newpassword" class="TxtBox" />
</td>
</tr>
<tr>
<td align="center">
<div align="center">
<input type="submit" name="submit" value="submit" />
</div>
</td>
</tr>
</table>
</form>
</body>
I have problem when i want show form edit
<!-- this is form-->
<table class="table table-bordered">
<thead>
<tr>
<th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
</tr>
</thead>
<% while(resultset.next()){ %>
<tbody>
<form method='POST' action='EditCompany'>
<tr align='center'>
<td><%= no %></td>
<td><input id='f1' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(2)%>'></td>
<td><input id='f2' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(3)%>'></td>
<td><input id='f3'class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(4)%>'></td>
<td><input id='f4' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(5)%>'></td>
<td><input id='f5' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(6)%>'></td>
<td><input id='f6' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(7)%>'></td>
<td><a id='elementId' onclick="showDiv()"><span class='glyphicon glyphicon-pencil'></span></a> <input type='submit' id="welcomeDiv" style="display:none;"></td>
<td><span class="glyphicon glyphicon-trash"></span></td>
</tr>
</form>
</tbody>
<% no++; } %>
</table>
The form will enable when the glypicon edit click. Here is the
JAVASCRIPT :
<script type="text/javascript">
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<script type="text/javascript">
$('#elementId').click(function(){
$('#f1').removeAttr("disabled");
$('#f2').removeAttr("disabled");
$('#f3').removeAttr("disabled");
$('#f4').removeAttr("disabled");
$('#f5').removeAttr("disabled");
$('#f6').removeAttr("disabled");
$('#f7').removeAttr("disabled");
});
</script>
when <a id='elementId' onclick="showDiv()"><span class='glyphicon glyphicon-pencil'></span></a> <input type='submit' id="welcomeDiv" style="display:none;"> click
for first row, work.
but for the second row like this
You are repeating the same id on one page. You must use only one id on a page. You can use the same class multiple times but not id.
Basically when you click on AAA then it is removing the class "aaa" from input field. You can check it with Firebug . It is not showing or popping up anything in it. But I have written a new code. It will enable and disable the input
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
</tr>
</thead>
<tbody>
<form method='POST' action='EditCompany'>
<tr align='center'>
<td>1</td>
<td><input type="text" class="aaa" value ="kool" disabled="disabled"/></td>
<td><input type="text" class="aaa" value ="fool" disabled="disabled"/></td>
<td class="abc">AAA</td>
</tr>
</form>
</tbody>
</table>
<script type="text/javascript">
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<script type="text/javascript">
$('.abc').click(function(){
$(this).closest('tr').find('.aaa').attr('disabled',false);
});
</script>
box.
A small example to do for this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
</tr>
</thead>
<tbody>
<form method='POST' action='EditCompany'>
<tr align='center'>
<td>1</td>
<td><input type="text" class="aaa"/></td>
<td><input type="text" class="aaa"/></td>
<td class="abc">AAA</td>
</tr>
</form>
</tbody>
</table>
<script type="text/javascript">
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<script type="text/javascript">
$('.abc').click(function(){
$(this).closest('tr').find('.aaa').removeClass('aaa');
});
</script>
In this way you are just referring to closest element of click.You can modified any content based on this. Please feel free to ask any query, if you face any problem in it. I just shared an example for execution for this.
This is applicable for any number of rows in a table.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
</tr>
</thead>
<tbody>
<form method='POST' action='EditCompany'>
<tr align='center'>
<td>1</td>
<td><input type="text" class="aaa" value ="kool" disabled="disabled"/></td>
<td><input type="text" class="aaa" value ="fool" disabled="disabled"/></td>
<td class="abc">AAA</td>
</tr>
</form>
</tbody>
</table>
<script type="text/javascript">
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<script type="text/javascript">
$('.abc').click(function(){
$(this).closest('tr').find('.aaa').attr('disabled',false);
$(this).closest('tr td:eq(2)').find('a:eq(0)').show();
$(this).closest('tr td:eq(2)').find('a:eq(1)').hide();
// Or YOu can use
$(this).closest('tr td:eq(2)').find('a:eq(0)').css('display','block');
$(this).closest('tr td:eq(2)').find('a:eq(0)').css('display','none');
});
</script>
Please refer eq:(COlUMN of TR). It starts from zero so make adjustment accordingly. Hope you get complete answer of your query.
Add some class in tr.
<script type="text/javascript">
$('.abc').click(function(){
$('trClassName').find('.aaa').attr('disabled',true);
$(this).closest('tr').find('.aaa').attr('disabled',false);
});
</script>
Hope it will solve all your problems.
Only add class in tbody tr and also it should be with dot in jquery syntax.I have mentioned classname and it should also be with .TrClassName which you will mention in tr.
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);
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');
});
});