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
Related
When testing my web form that was built using HTML, CSS, Bootstrap, PHP and jQuery, the first thing I do is click the Submit button. When I do this, the text-danger errors display below the Input and Text Area fields as expected since the fields are empty. If I add a value in the Input field "Name" and click the Submit button again, the text-danger field continues to display below the Name field. The same goes when I try the same thing for the Email and Security Check fields.
When I add a value in the Message Text Area field, the text-danger error for the message field disappears along with the other errors. The message field needs to have a value in order for the errors for all of the fields to disappear.
How should I set up my jQuery so that once a value is added to a field and I click the Submit button to test, the text-danger error for that specific field no longer displays?
HTML and jQuery Code
<div class="container">
<div class="row">
<form method="post" action="index.php" class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" id="name" name="name" placeholder="Enter your name" class="form-control" value="<?php echo $name;?>">
<p class="text-danger">You need to enter a name value</p>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" id="email" name="email" placeholder="your#email.com" class="form-control" value="<?php echo $email;?>">
<p class="text-danger">You need to enter a valid email</p>
</div>
</div>
<div class="form-group">
<label for="message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<textarea id="message" name="message" rows="4" class="form-control"><?php echo $message;?></textarea>
<p class="text-danger">You need to enter a message</p>
</div>
</div>
<div class="form-group">
<label for="secCheck" class="col-sm-2 control-label">
<?php echo $_SESSION["a"] .'+'.$_SESSION["b"];?>
</label>
<div class="col-sm-10">
<input type="text" id="secCheck" name="secCheck" class="form-control">
<p class="text-danger">Answer the question above</p>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input type="submit" value="Send" class="btn btn-primary btn-large btn-block" id="submit" name="submit">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<?php echo $result; ?>
</div>
</div
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$('form').on('submit',function(){
$(".text-danger").hide();
var holderValue = false;
$(this).find('input[type!="hidden"]').each(function(){
if(!$(this).val()){holderValue=true; $(this).parent().find(".text-danger").show();}
})
if(!$("#message").val()){holderValue=true; $(this).parent().find(".text-danger").show();};
if(holderValue){return false;}
// event.preventDefault();
// console.log('form submitted');
})
$("input").on("change paste keyup", function() {
if($(this).val()){
$(this).parent().find(".text-danger").hide();
}
});
$("textarea").on("change paste keyup", function() {
if($(this).val()){
$(this).parent().find(".text-danger").hide();
}
});
</script>
Bootstrap Custom Form
There are a couple of key Bootstrap attributes and classes needed for custom validation:
HTML
<form ... novalidate>
All <input ... required>
Remove all <p class='danger-text'>...
Replace the previous with <aside class='invalid-feedback'>
Also the tags have been changed from <div> to a more semantic tag, but it isn't required. The layout has been changed as well -- originally the layout had only one .row which now has several .form-rows (not sure if that was intentional or not, but it looks better when using .form-control).
jQuery
On each .form-control ...
$('.form-control').each(function() {...
...if the current .form-control is invalid...
if ($(this).is(':invalid')) {...
...stop the from submitting and show the invalid message...
e.preventDefault();
$(this).next('.invalid-feedback').show();...
...otherwise hide the invalid message if need be.
} else {
$(this).next('.invalid-feedback').hide();
}
Demo
$('.invalid-feedback').hide();
$('#main').on('submit', function(e) {
$('.form-control').each(function() {
if ($(this).is(':invalid')) {
e.preventDefault();
$(this).next('.invalid-feedback').show();
} else {
$(this).next('.invalid-feedback').hide();
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<main class="container">
<form id='main' class="form-horizontal" method="post" action="index.php" novalidate>
<section class="form-row">
<fieldset class="form-group col-sm-10">
<label for="name" class="control-label">
Name
</label>
<input id="name" name="name" class="form-control" type="text" placeholder="Enter your name" required>
<aside class="invalid-feedback">
You need to enter your name.
</aside>
</fieldset>
</section>
<section class="form-row">
<fieldset class="form-group col-sm-10">
<label for="email" class="control-label">
Email
</label>
<input id="email" name="email" class="form-control" type="email" placeholder="your#email.com" required>
<aside class="invalid-feedback">
You need to enter your email.
</aside>
</fieldset>
</section>
<section class="form-row">
<fieldset class="form-group col-sm-10">
<label for="message" class="control-label">
Message
</label>
<textarea id="message" name="message" class="form-control" rows="4" required></textarea>
<aside class="invalid-feedback">
You need to enter a message.
</aside>
</fieldset>
</section>
<section class="form-row">
<fieldset class="form-group col-sm-10">
<label for="secCheck" class="control-label">
</label>
<input id="secCheck" name="secCheck" class="form-control" type="text" required>
<aside class="invalid-feedback">
Answer the security question above.
</aside>
</fieldset>
</section>
<section class="form-row">
<fieldset class="form-group col-sm-10 col-sm-offset-2">
<input id="submit" name="submit" class="btn btn-primary btn-large btn-block" type="submit" value="Send">
</fieldset>
</section>
<section class="form-row">
<fieldset class="form-group col-sm-10 col-sm-offset-2">
<output id='result'></output>
</fieldset>
</section>
</form>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
I have this situation:
2 files (contact.html and booking.php)
On my contact.html I have the following code:
<form action="booking.php" method="POST" role="form" class="formular">
<h3>Online booking!</h3>
<br />
<div class="control-group">
<div class="controls">
<div class="input-group">
<input type="text" id="dateFrom" name="dateFrom" class="form-control" placeholder="Check in" style="width: 258px;"/>
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="input-group">
<input type="text" id="dateToInput" name="dateToInput" class="form-control" placeholder="Check out" style="width: 258px;"/>
</div>
</div>
</div>
</form>
On my booking.php file I have the following code:
<form>
<div class="booking">
<form name="" action=" " method="post">
<h1>BOOKING</h1>
<div class="bookingDate">
<p>Check in:</p>
<div id="dateFrom">
</div>
</div>
</div>
<div class="bookingDate">
<p>Check out:</p>
<div id="dateTo">
</div>
</div>
<input type="hidden" name="dateFrom" id="dateFromInput" value= $_POST["dateFrom"] />
<input type="hidden" name="dateTo" id="dateToInput" value=$_POST["dateTo"]/>
</form>
So, I have two calendars on my contact.html page and two calendars on booking.php.
I want that when I choose 2 dates (on my contact.html) form, those exact dates to be passed to the other two calendars that I have on booking.php
Could anyone please help me? I have searched a lot and I can't find an answer.
Modify the code to following in value section. Similary for other field as well.
<input type="hidden" name="dateFrom" id="dateFromInput" value= "<?php echo $_POST["dateFrom"] ?>" />
Contact has name="dateToInput" yet booking is looking for dateTo
Fix one: correct the name of the input in contact
<input type="text" id="dateToInput" name="dateTo" class="form-
Fix two: You have no PHP tags in your booking code, without them $_POST is not available, nor are those values being printed.
<input type="hidden" name="dateFrom"
id="dateFromInput" value="<?php echo $_POST["dateFrom"];?>">
<input type="hidden" name="dateTo"
id="dateToInput" value="<?php echo $_POST["dateTo"]; ">
Note I also wrapped the values with quotes
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
}
?>
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