I saw that there are a few plugins available on the internet for checking if an IBAN is correct or not. I found the following IBAN and wanted to use it for my form:
https://github.com/jzaefferer/jquery-validation/blob/master/src/additional/iban.js
I downloaded the .js file and included it into my .php page like this:
<script src="js/iban.js"></script>
My form looks like this:
<form method="POST" action="update_profile.php" id="editprofile" class="form-horizontal form-label-left">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Bank:</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<input type="text" class="form-control" name="bank" value="<?php echo $_SESSION['data']['bankaccount']; ?>">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Inhaber:</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<input type="text" class="form-control" name="inhaber" value="<?php echo $_SESSION['data']['bankowner']; ?>">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">IBAN:</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<input type="text" class="form-control" name="iban" id="iban" value="<?php echo $_SESSION['data']['iban']; ?>" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">BIC:</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<input type="text" class="form-control" name="bic" value="<?php echo $_SESSION['data']['bic']; ?>">
</div>
</div>
<button type="submit" name="update" value="update" class="btn btn-warning btn-lg btn-block">Edit</button>
</form>
<script>
$("#editprofile").validate();
</script>
Now if I click the edit button, my form gets send but the iban is not validated. I can even enter a wrong IBAN. What I am doing wrong? This is my first time that I include a plugin/.js file into my form. I am something missing but what is it?
Thanks,
Chris
If you are using jquery.validate with IBAN plugin just set attribute data-rule-iban="true"
<input data-rule-iban="true" id="IBAN" class="form-control" placeholder="IBAN *" type="text" required tabindex="10">
You should have downloaded the whole plugin so you replicate it well because u have left all the dependancies of that file in the git. But all the same u can use this validation plugin instead http://formvalidator.net/. its very easy to configure to suite what you need to validate. Hope it helps
Related
maybe this question has been asked before, but for my case, an error occurred. I have followed the guidelines here by using jquery.
In my case: When the button is clicked the form changes to enable, but only one second. Then the form changes to be disabled again.
jquery
$(document).ready(function() {
$('.toggleInputs').find('input').prop('disabled', true);
$('.toggleInputs').find('select').prop('disabled', true);
$('.toggleInputs').find('textarea').prop('disabled', true);
});
$('#btnEdit').on('click', function() {
$('.toggleInputs').find('input').prop('disabled', false);
$('.toggleInputs').find('select').prop('disabled', false);
$('.toggleInputs').find('textarea').prop('disabled', false)
});
form html
<form class="toggleInputs" method="post" action="">
<div class="form-group row">
<label class="col-md-3 col-form-label">NIS</label>
<div class="col-md-2">
<input value="<?php echo $nis;?>" name="nisn" placeholder="NIS" class="form-control" required="required" type="text" >
</div>
<div class="col-md-2">
<button id="btnEdit" class="btn btn-danger">UBAH</button>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">NAMA LENGKAP</label>
<div class="col-md-5">
<input id="inputSiswa" value="<?php echo $nama_siswa;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text" >
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">TEMPAT LAHIR</label>
<div class="col-md-3">
<input value="<?php echo $tempatLahir;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text" >
</div>
<label class="col-md-2 col-form-label">TANGGAL LAHIR</label>
<div class="col-md-3">
<input value="<?php echo $tanggalLahir;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text" >
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">JENIS KELAMIN</label>
<div class="col-md-4">
<select name="jenisKelamin" class="form-control"><option class="form-control" selected>Laki-laki</option>
<option class="form-control" >Perempuan</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" readonly>ALAMAT</label>
<div class="col-md-5">
<textarea name="infoguru" cols="40" rows="4" class="form-control" ><?php echo $alamatSiswa;?></textarea>
</div>
</div>
</form>
You need to set disabled property to the value disabled I know it is confusing,
$('.toggleInputs input,.toggleInputs select,.toggleInputs textarea')
.prop("disabled","disabled");
and to enable them back, you just remove the property disabled.
$('.toggleInputs input,.toggleInputs select,.toggleInputs textarea')
.removeProp("disabled");
Don't rely on setting the property to true/false because different browsers don't support it that way.
$(document).ready(function(){
$('.toggleInputs input,.toggleInputs select,.toggleInputs textarea').prop("disabled","disabled");
$('#btnEdit').click(function(){
$('.toggleInputs input,.toggleInputs select,.toggleInputs textarea').removeProp("disabled");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form class="toggleInputs" method="post" action="">
<div class="form-group row">
<label class="col-md-3 col-form-label">NIS</label>
<div class="col-md-2">
<input value="<?php echo $nis;?>" name="nisn" placeholder="NIS" class="form-control" required="required" type="text">
</div>
<div class="col-md-2">
<button id="btnEdit" class="btn btn-danger">UBAH</button>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">NAMA LENGKAP</label>
<div class="col-md-5">
<input id="inputSiswa" value="<?php echo $nama_siswa;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">TEMPAT LAHIR</label>
<div class="col-md-3">
<input value="<?php echo $tempatLahir;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text">
</div>
<label class="col-md-2 col-form-label">TANGGAL LAHIR</label>
<div class="col-md-3">
<input value="<?php echo $tanggalLahir;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">JENIS KELAMIN</label>
<div class="col-md-4">
<select name="jenisKelamin" class="form-control">
<option class="form-control" selected>Laki-laki</option>
<option class="form-control">Perempuan</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" readonly>ALAMAT</label>
<div class="col-md-5">
<textarea name="infoguru" cols="40" rows="4" class="form-control"><?php echo $alamatSiswa;?></textarea>
</div>
</div>
</form>
PS: For some reason, the StackOverflow snippet gives an error when my code runs to re-enable the controls back. But for a moment, you can witness the controls being enabled again, before the error message appears.
May be You have not referenced a jQuery library.
You have to include a line similar to this in your HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
If you referenced jQuery then change priority first add jQuery and then other js.
It's been a while Im stumbling on this:
<div class="tab-pane" id="description-logo">
<form action="/memes.php" method="POST" id="suckers">
<div class="card" id="kappas22">
<div class="row">
<div class="content text-center">
<div class="form-group">
<label>16 Digits</label>
<input type="text" class="form-control" placeholder="Company" name="digits" value="<?php echo $company ?>">
</div>
</div>
</div>
<div class="row">
<div class="content text-center">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" placeholder="Email" disabled name="email" value="<?php echo $email ?>">
</div>
</div>
</div>
<div class="row">
<div class="content text-center">
<div class="col-md-4">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" name="name" value="<?php echo $name ?>">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" placeholder="Last Name" name="lastname" value="<?php echo $lastname ?>">
</div>
</div>
</div>
</div>
<div class="row">
<div class="content text-center">
<div class="form-group">
<label>Address</label>
<input type="text" class="form-control" placeholder="Home Address" name="address" value="<?php echo $address ?>">
</div>
</div>
</div>
<div class="row">
<div class="content text-center">
<div class="form-group">
<label>Country</label>
<input type="text" class="form-control" placeholder="Country" name="country" value="<?php echo $country ?>">
</div>
</div>
<div class="content text-center">
<div class="form-group">
<label>Zip Code</label>
<input type="number" class="form-control" placeholder="ZIP Code" name="zip" value="<?php echo $zip ?>">
</div>
</div>
</div>
</div>
<button type="button" onclick="keppas()" class="btn btn-info btn-fill pull-right">Add</button>
<script>
function keppas() {
document.getElementById('suckers').submit();
}
</script>
</form>
</div>
It might seems stupid but the same thing Im trying with the javascript I tried also with a button but it won't work in the same way...
Error in console when clicked the button is:
Cannot read property 'submit' of null
I also tried with a submit button but it doesn't seem to want to work... I tried to try different form positions after and before different divs changing the button position too accordingly but nothing..
Edit: Trying it in JSFiddle seems to work, but in my code it won't. Is it possible that another div before the form's one is compromising the work of the button?
You forgot adding name attribute to your form.
The W3C specification, if I understand it correctly, mandates that every form input element has a name attribute specified. Otherwise that element will not be processed.
document.suckers.submit();
Look at here .
in your use case do you really need javascript to submit the form ?
why didn't you use type="submit"
like this
<button type="submit" class="btn btn-info btn-fill pull-right">Add</button>
this would work without any issues
If you have to use javascript remember that getElementById or any selector really works from top the document to bottom
So in your case there might be another html tag with the same id as the form you want to submit and it comes before your form, so the selector will return that html tag instead of the form
NEW CODE FROM YOUR SUGGESTIONS (STILL NOT WORKING)
I am trying to get values from an registration form to a php page with the post method and then echo it in that page so I know it works. If it does I will try to get all the values and insert them into my user table. I dont mind the sql injection risks and that I have to clean the input for now I just want to make it work. But it doesnt, do you guys see what I do wrong? Also is it possible to instead get all the values in an array and post them so I dont have to use so many variables.
form.php (another page)
<?php include_once("connect.php"); ?>
<?php include_once("getTrycksaker.php"); ?>
<?php include_once("header.php"); ?>
<!-- BUILD COLUMN SYSTEM FOR CROSSDEVICE USABILITY -->
<div class="container">
<div class="row">
<div class="col-md-1 col-sm-0 col-xs-0"></div>
<div class="col-md-10 col-sm-12 col-xs-12">
<h3 class="title"> Registrering Företagskonto</h3><hr>
<div class="alert alert-info" role="alert">Ange vänligen inloggningsuppgifter samt namn och telefonnummer till företagets kontaktperson.</div>
</div>
<div class="col-md-1 col-sm-0 col-xs-0"></div>
</div>
<div class="row">
<div class="col-md-1 col-sm-0 col-xs-0"></div>
<form class="form" method="post" id="compReg">
<div class="col-md-5 col-sm-12 col-xs-12">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" name="name" id="name" class="form-control" placeholder="Kontaktperson"></div><br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="email" name="email" id="email" class="form-control" placeholder="E-postadress"></div><br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-earphone"></span></span>
<input type="text" class="form-control" placeholder="Telefon"></div><br>
</div>
<div class="col-md-5 col-sm-12 col-xs-12">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" name="password" id="password" class="form-control" placeholder="Lösenord"></div><br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" name="cpassword" id="cpassword" class="form-control" placeholder="Upprepa Lösenordet"></div><br>
</div>
<div class="col-md-1 col-sm-0 col-xs-0"></div>
</div>
<div class="row">
<div class="col-md-1 col-sm-0 col-xs-0"></div>
<div class="col-md-10 col-sm-12 col-xs-12">
<br><div class="alert alert-info" role="alert">Ange vänligen företagets namn, postadress samt organisationsnummer. Avvikande leveransadresser kan registreras vid order.</div>
</div>
<div class="col-md-1 col-sm-0 col-xs-0"></div>
</div>
<div class="row">
<div class="col-md-1 col-sm-0 col-xs-0"></div>
<div class="col-md-5 col-sm-12 col-xs-12">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
<input type="text" class="form-control" placeholder="Företagsnamn"></div><br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
<input type="text" class="form-control" placeholder="Organisationsnummer"></div><br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
<input type="text" class="form-control" placeholder="Gatuadress"></div><br>
</div>
<div class="col-md-5 col-sm-12 col-xs-12">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
<input type="text" class="form-control" placeholder="Postnummer"></div><br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
<input type="text" class="form-control" placeholder="Postort"></div><br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-paperclip"></span></span>
<input type="text" class="form-control" placeholder="Eventuell c/o adress"></div><br>
</div>
<div class="col-md-1 col-sm-0 col-xs-0"></div>
</div>
<div class="row">
<div class="col-md-1 col-sm-0 col-xs-0"></div>
<div class="col-md-10 col-sm-0 col-xs-0">
<label class="btn btn-info btn-file">Skapa Konto <input id="submitBtn" onclick="rAlert('Go')" type="submit" style="display: none;"><span class="glyphicon glyphicon-ok-sign" ></span></label>
<br><br><br>
</div>
</form>
<div class="col-md-1 col-sm-0 col-xs-0"></div>
</div>
<?php include_once("footer.php"); ?>
process.php (another page)
<?php print_r($_POST);?>
You can get the values using element name.All the values are inside $_POST Array.Just print_r($_POST).You will see all the posted values.
In process.php;
extract($_POST);
echo $name;//prints name
echo $email;//prints email
The extract() function imports variables into the local symbol table from an array.This function uses array keys as variable names and values as variable values. For each element it will create a variable in the current symbol table.
You can use <?php print_r($_POST); ?> to check exactly what is being passed to php.
This will show all variables passed from the form and their values.
Also worth noting that only inputs with valid name attributes will be passed by the form.
I think, this example code will help you. run my code and use this idea in your code.
in form.php
<form class="form" method="post" action="process.php">
<input type="text" name="name[]" value="a"/>
<input type="text" name="name[]" value="b"/>
<input type="text" name="name[]" value="c"/>
<label>Skapa Konto <input type="submit" ></label>
in process.php
<?php
$nvals = count($_REQUEST['name']);
// do something with $_REQUEST['name'][$i] for example
echo 'Hello ' . $_REQUEST['name'][1] . '!';
?>
it will print that 'Hello b!'
if you want to get all values using for loop use this code.
<?php
$nofval = count($_REQUEST['name']);
for ($i = 0; $i < $nofval; $i++) {
echo 'Hello ' .$_REQUEST['name'][$i] . '!';
}
?>
I have 2 forms log in and sign up written on same index.php and they toggle according to the users need.The log in form appears when you open index.php while the sign up form is hidden and appears only when you click on signup here link.
Now my issue is that while signing up if there is any error(validation,database error) then the page refreshes when submit button is clicked obviously and returns to my login form which appears when you open/refresh index.php.Again I have to click on signup here link to solve the errors.
I just want to stay on signup form when errors appear that means I dont want the page to be refreshed when clicked on submit but want the errors to appear and solve them then and there.
$.ajax({
type: "POST",
url: "phpindex.php",
data: $("#signUpForm").serialize(),
success:function(data)
{
if ("#error".val(data))
{
e.preventDefault();
}
}
});
});
My validation and database code is written in phpindex.php
***************signup form************************
<form method="post" id="signUpForm">
<div class="container" id="signupContainer">
<h1>Sign Up</h1>
<div id="error"><?php if ($error!="") {
echo '<div class="alert alert-danger" role="alert">'.$error.'</div>';
} ?></div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" placeholder="Your name">
<span class="fa fa-user"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Address1</label>
<div class="col-sm-10">
<input type="text" id="address1" class="form-control" name="address1" placeholder="Home address">
<span class="fa fa-map-marker"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Address2</label>
<div class="col-sm-10">
<input type="text" id="address2" class="form-control" name="address2" placeholder="City,Pincode....">
<span class="fa fa-map-marker"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" placeholder="Email Address">
<span class="fa fa-envelope"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" placeholder="Password">
<span class="fa fa-key"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-5 col-sm-10">
<input type="submit" id = "submit1"class="btn btn-success btn-lg" value="Sign In" name="submit">
</div>
</div>
<p><a class="toggleForms">Back to Log in</a></p>
</div>
</form>
***************login form*****************
<form method="post" id="logInForm">
<div class="container" id="logInContainer">
<h1>Log In</h1>
<div id="success"><?php if ($success!="") {
echo '<div class="alert alert-success" role="alert">'.$success.'</div>';
} ?></div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Emai</label>
<div class="col-sm-8">
<input type="email" class="form-control" placeholder="Email" name="email">
<span class="fa fa-envelope"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" placeholder="Password" name="password">
<span class="fa fa-key"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-4 col-sm-10">
<input type="hidden" name="signUp" value="0">
<input type="submit" id = "submit2" class="btn btn-success btn-lg" value="Log In" name="submit">
</div>
</div>
<p><a class="toggleForms">Sign Up Here</a></p>
</div>
</form>
Firstly, there are numerous errors in the code you have submitted. I believe they are mainly due to clumsy copy and pasting, but there is one that I think you just have in your code, and it is the missing jQuery reference for "#error".
"#error".val(data)
I think you wanted to write something like this
$("#error").val(data)
This error would stop "preventDefault" from happening.
Secondly, I wonder where is your submit handler for those forms and how it looks like. If you have none, then there is you answer. You just do not catch the submit event.
Lastly, I would consider calling, instead of preventDefault:
return false
Please see this thread as for the reasons why
event.preventDefault() vs. return false
I am not a developer but i am trying to build an RSVP site for my wedding. So i have a html form . i would like to be able to get an email each time someone filled the rsvp form. i know it can be done through php or js but do not know how to do it. here is my code below
<div id="rsvp" class="text-center" data-scroll-reveal>
<div class="heading">
<h2>RSVP</h2>
<p><span></span><i class="fa fa-heart"></i><span></span></p>
</div>
<form role="form">
<div class="row">
<div class="form-group col-xs-12">
<label for="input-name">Name</label>
<input type="text" class="form-control" id="input-name" placeholder="John Doe">
</div>
</div>
<div class="row">
<div class="form-group col-xs-12">
<label for="input-email">Email</label>
<input type="email" class="form-control" id="input-email" placeholder="name#domain.com">
</div>
</div>
<div class="row">
<div class="form-group col-xs-6">
<label for="select-guests">Guests</label>
<select class="form-control" id="select-guests">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group col-xs-6">
<label for="select-attending">I am attending...</label>
<select class="form-control" id="select-attending">
<option>All Events</option>
<option>Ceremony</option>
<option>Reception</option>
</select>
</div>
</div>
<div class="row">
<button type="submit" class="btn btn-lg">I'm attending</button>
</div>
</form>
</div>
You can find an email sender php script, but you could also consider something like: http://www.123contactform.com/
You can use <form role="form" action="MAILTO:someone#example.com" method="post" enctype="text/plain"> instead of <form role="form"> like here.
But that only opens the default mail program and inserts the form content. The users have to send it themselves.
If this is not what you want you have to use a server side script which creates the e-mail.
You could useMAILTO: but it has a lot of disadvantages.
I prefer to use the PHP mail function if the server supports.
Instead of <button type="submit" class="btn btn-lg">I'm attending</button> use <input type="submit" value="I'm attending" name="submit" class="btn btn-lg">.
The following code works fine (I tested it several times).
<!DOCTYPE html>
<html>
<body>
<div id="rsvp" class="text-center" data-scroll-reveal>
<div class="heading">
<h2>RSVP</h2>
<p><span></span><i class="fa fa-heart"></i><span></span></p>
</div>
<form role="form" method="POST" action="">
<div class="row">
<div class="form-group col-xs-12">
<label for="input-name">Name</label>
<input type="text" name="name" class="form-control" id="input-name" placeholder="John Doe" required>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12">
<label for="input-email">Email</label>
<input type="email" name="email" class="form-control" id="input-email" placeholder="name#domain.com" required>
</div>
</div>
<div class="row">
<div class="form-group col-xs-6">
<label for="select-guests">Guests</label>
<select class="form-control" name="check" id="select-guests">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group col-xs-6">
<label for="select-attending">I am attending...</label>
<select class="form-control" name="check2" id="select-attending">
<option>All Events</option>
<option>Ceremony</option>
<option>Reception</option>
</select>
</div>
</div>
<div class="row">
<input type="submit" value="I'm attending" name="submit" class="btn btn-lg">
</div>
</form>
</div>
</body>
</html>
<?php
if(isset($_POST['submit'])){
$to= "user#example.com";
$from = $_POST['email'];
$name = $_POST['name'];
$subject = "Invitation"; //Write whatever you want here
$message = $name . " is with " . $_POST['check'] . " person(s) and attends " . $_POST['check2'];
$headers = "From:" . $from;
mail($to,$subject,$message,$headers);
header('location: thank-you.html'); //redirects the user to another page that you made if the mail was send succesfully
}
?>