I have an issue where I am validating form submission with javascript. The form is prefilled with results from the database as PHP values like this:
<form name="profiledit" action="profile_edited.php" method="POST" >
<h3>Name:</h3>
<input type="text" id="teamname" name="teamname"
value="<?php echo $result['teamname'];?>">
</form>
This is the javascript:
<script type="text/javascript">
function empty() {
tn = document.getElementById("teamname").value;
if (! /^[a-zA-Z0-9]+$/.test(tn)) {
alert("Please enter a valid Team Name");
return false;
}
}
</script>
The submit button is :
onClick="return empty();"
The problem is that is always tells me top "Please enter a valid Team Name" unless I retype the text in the box (that was supplied by the PHP value).
I cannot see any weird spaces or things in "view source".
What could the problem be?
Thanks.
EDIT1 : Sorry I forgot to paste closing brace. It was there in the code and this does work for BLANK forms OK. Just not when it has a prefilled value from PHP.
Try this
Check this link
Html
<form name="profiledit" action="" method="POST" id="profiledit">
<h3>Name:</h3>
<input type="text" id="teamname" name="teamname" value=""/>
<input type="button" id="submit" value="submit" name="submit" />
<input type="submit" id="submitform" value="submitform" name="submit" style="display:none;" />
</form>
Jquery
$('#submit').click(function(){
var pattern=/^[a-zA-Z0-9]*$/;
var tn = $("#teamname").val();
if(tn == "" && pattern.test(tn)){
alert('1');
}else {
//alert('2');
$('#submitform').trigger('click');
}
});
Hope its helps
Well, there was nothing wrong with the responses after all. My code was good and you guys code was good as well.
The problem?
Well I just happened to be testing with a teamname that had a SPACE in it!!!!!!!!!!
So having finally worked out that was the problem all along I would like to thank you all for your inputs.
I have used the regex instead : /^\w+( \w+)*$/
Allows words, numbers and a space.
Related
Got a form that requires users to input an amount to donate. On clicking submit, a function is called and the function is meant to display the amount specified and prompt the user to confirm if the amount typed is the actual amount or not.
The Cancel option in the Confirm() keeps submitting the form instead of returning false.
function donationFormSend(){
get_donation_amount = document.getElementById("get_donation_amt").value;
if(get_donation_amount != ''){
return confirm("You have specified "+get_donation_amount+" as the amount you wish to donate. \n\n Are you sure you want to proceed with the donation?");
}
else{
alert("Amount must be specified to process your donation.");
return false;
}
}
<form method="post" action="">
<div>
<div>Donation Amount:</div>
<input name="amount" type="text" id="get_donation_amt" required="required" />
</div>
<input name="donation_submit" type="submit" id="Submit" value="Proceed" onclick="return donationFormSend();" />
</form>
Jsfiddle link
Would be pleased getting help with this.
I updated your jsfiddle so it's in the expected format (loading the js in the head) and returning the confirm result
return confirm('blah blah')
works perfectly well for me in FF! Just make sure you clear your cache and reload your page.
A way to do do it might be:
form :
<form id='test' method="post" action="">
<div>
<div>Donation Amount:</div>
<input name="amount" type="text" id="get_donation_amt" required="required" />
</div>
<input type="submit" value="submit" onClick="form_submit(this.value)">
<input type="submit" value="cancel" onClick="form_submit(this.value)">
</form>
javascript:
document.getElementById('test').addEventListener('submit',function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
})
form_submit= function (submited_by) {
if(submited_by == 'submit'){
alert('Submited')
}else if (submited_by == 'cancel'){
alert('cancelled')
}
}
I'd rather use a switch statement to make it expandable in the future but this should work.
Also I'm using jquery mostly because I'm not sure how to stop default action without it.
here's a JSFiddle with the code running.
EDIT: Updated to not use Jquery.
EDIT: well, I feel stupid now, realised it wasn't cancel button in a submit form but in a confirmation form.
In your HTML use : onclick="return donationFormSend();"
In Your Javascript: return confirm("Are you sure ....blah blah blah")
I am trying to make a login form with an input for Staff ID, Password, and submit. For say, software has a serial # that will only be accepted if it matches the pattern or format of the serial that is required for the software. How would I do that? I want it to have a thumbnail that will popup and tell you that is is not the proper format kind of like required does when you put in in the input tag. I want to also be able to possibly style the thumbnail as well, in order to make it match the UI of the site.
html form:
<section name="LoginSection" id="LoginSection" class="LoginSection">
<div name="LoginHeader" id="LoginHeader" class="LoginHeader">
<center><h3>Staff Login</h3></center>
</div>
<form name="LoginForm" id="LoginForm" class="LoginForm" action="">
<input type="text" placeholder="Staff Identification Number" name="StaffInput" id="StaffInput" class="StaffInput" required />
<input type="password" placeholder="Staff Login Password" name="StaffPass" id="StaffPass" class="StaffPass" required />
<center><input type="submit" value=" Submit " name="Submit" id="Submit" class="Submit" /></center>
</form>
</section>
try more on HTML5 thing:
<input type="tel" name="mobileno" pattern="[789][0-9]{9}" required title="Enter Mobileno in correct format"/>
Or if you want it using Javascript something like :
<script type="text/javascript">
function login()
{
if(document.loginFrm.mobileno.value.length==0 )
{
alert('Enter MobileNo please');
document.loginFrm.mobileno.focus()
}
//return false
}
</script>
i think you can get your imagination for combination some html css and php. or with bootstrap design ?
for example :
<?php
if(isset($_POST['submit'])){
if($_POST['name'] == NULL && $_POST['pass'] == NULL){
echo'<div class="login">
<span> It didn't work ! </span>
</div>';
}
}
hehe i always do that if i want to combine skill with css html and php :)
You can see my update answare with jquery :
$(document).ready(function(){
$('#button').click(function(){
if($('#txt-name').val() == '' && $('#txt-pwd').val() == ''){
alert('It didn't work');
}
});
});
I have two input fields as this:
input type="hidden" name="action" value="login">
input type="hidden" name="action" value="admin_login">
I have two separate login forms, which I want to become one
I've searched for the solution on internet and it seems that it is better to let in tho form the value of "login", so that normal users login using their credentials, and then do some javascript in the page translated as IF username === adminX then this. form value="admin_login".
Any help on how to accomplish this, I don't know much of javascript
Using java script you can do this by
<script>
function check_login() {
if (userType==admin){
Myform.value="admin_login";}
else{
Myform.value="user";
}
}
</script>
<input type="submit" onclick="check_login()">
I think the best way to do this by having single form for both user but now depend on server side how you handle it.like
if(userType==admin_login) {
//show admin permissions for result page
}
else{
hide all admin permissions and show only given permission for normal user for result page
}
later: done it like this, because next day the version from comment is not working anymore..boh
<form method="POST" action="index.php">
<input type="text" placeholder="Username" id="username" onBlur="myFunction()" name="username" value="">
<input type="password" placeholder="Password" name="password">
<button type="submit" name="action" id="log" value="login">SIGN UP</button>
</form>
and javascript:
<script type="text/javascript">
function myFunction(){
var username = document.getElementById("username").value;
if(username == 'admin'){
document.getElementById("log").value='admin_login';
}else{
document.getElementById("log").value='login';
}
}
</script>
Hope it helps someone in the future. Thank you!
Issue 1:
I'm trying to create a simple javascript function to check if all the characters entered into the field are numeric. The function is running, but not as I had hoped. I've located the isNaN function in javascript and it does not appear to be working. It enters the if statement every time, no matter if I type "asdf" or "1234" into the box.
Issue 2:
I want the form to stop submission obviously if the check for digits fails. However, I want it to continue to the submission page otherwise. I've been reading on ways to do this with pure JavaScript, and have the returns implemented as instructed. Is this a viable way to perform this? Alternatives?
Any help would be great on issue 1 or 2.
Here's my entire code:
<title>Bank System</title>
<script type="text/javascript">
function checkNumeric()
{
var pin = document.getElementById('pin');
if(isNaN(pin))
{
document.getElementById('message').innerHTML="Not A Valid Number";
return false;
}
else
{
return true;
}
}
</script>
<body style="background-color: gray;">
<h1>Welcome To Clayton's Credit Union</h1>
</br></br>
<form action="process.php" method="POST">
<label>Username: <input type="text" name="username"/></label>
</br>
<label>Pin Number<input type="text" maxlength="4" name="pin" id="pin"/></label>
</br></br>
<input type="submit" value="Submit" name="submit" onClick=" return checkNumeric()"/>
<p id="message"></p>
</br>
</form>
*Please note, I know this is not secure in anyway. I'm making this example specifically to show how vulnerable it is.
You are passing an element to isNaN rather than it's value. Try this:
var pin = document.getElementById('pin').value;
BTW
You should run this validation on the form submit rather than the button click:
<form action="process.php" method="POST" onsubmit="return checkNumeric()">
<input type="submit" value="Submit" name="submit" />
instead of:
<form action="process.php" method="POST">
<input type="submit" value="Submit" name="submit" onclick="return checkNumeric()" />
I am trying to check whether or not the password field on a form has been filled in on submission on a form but it always returns as "undefined" so the code I'm trying to run when the form is submitted never runs.
The username field seems to work fine though.
Here's my code...
$("#form1").find("input[type=submit]").click( function() {
if($(".username").val() != "" && $(".password").val() != "") {
console.log("Success")
} else {
console.log("fail");
}
});
Something must be wrong with your html since it seems to work:
<form id="form1" method="post">
<input type="text" class="username">
<input type="text" class="password">
<input type="submit" value="Submit">
</form>
See live example here.
I have a feeling that you might be confusing classes that are selected with a "." with id's that are selected with a "#", but if I don't see your html, I'm just guessing.