So I originally wanted to create a form that generated a lightbox ON successful submission of the form data saying thanks for submitting the form but I read that just taking the user to a thank you page was the safest and most assuring way for the user to be notified is with that classic method stated earlier. IF using the fancy box proves effective how exactly would I go about doing this? Where would the call for the javascript go? In the PHP or the HTML file the form is on? Since the page is mobile and tablet only and so simple I thought it would be a good idea to use the lightbox (I'm looking at adding fancybox) instead of making more pages.
I'm having trouble finding resources on the net as well, as I'm just getting lightbox forms and sending submission results back in the form of a lot box. I just want a simple Thank You or Error message honestly. That is if this is a good workable solution for a form at all.
Thanks in advance!
Here is a basic form for ref.
<form id="fusion_form" name="fusion_form" method="post" action="fusion_form.php" target="_blank">
<p><input name="first_name" type="text" id="first_name" style="width:140px" value="" placeholder="First Name" /></p>
<p><input name="last_name" type="text" id="last_name" style="width:140px" value="" placeholder="Last Name" /></p>
<p><input name="email" type="text" id="email" style="width:140px" value="" placeholder="Email Address" /></p>
<p><textarea name="comments" cols="20" rows="3" id="comments" class="FormText" style="width:200px; padding-left:2px" placeholder="Comments"></textarea></p>
<p><input type="image" src="images/submit-button.jpg" id="send_email" value="Submit Form" onclick="return verify_form();" /></p>
</form>
$('form').on('submit', function(e){
e.preventDefault(); // stop the form submission
var $d = $(this).serialize(); //serialize form to be submit to server
$.ajax({
url: $(this).prop('action'),
type: $(this).prop('method'),
data: {formData : $d},
success: function(data){
if(false != data){
//form submission did NOT return false
//build lightbox, extrapolate what is needed from `data` variable
}
}
});
});
php.
if(isset($_POST['formData'])):
$formData = $_POST['formData]';
//do whatever with the form
if(someCondition):
return '<h4> Thank you for submitting the form!</h4>';
else:
return false;
endif;
endif;
Related
I am Developing popup component for joomla site,
The Pop up Working Great , In my Popup i get phone number from user, i need to store that phone number to joomla database , but i am unable to call JFactory::getDBo(), when i call these method , popup was not working, i am in trouble , any help will be appreciate me.. thanxs in advance...
site/default.php
<script>
function openColorBox() {
$.colorbox({
innerWidth:500,
innerHeight:300,
iframe:true,
href: "subscribe.php",
overlayClose:true,
onLoad: function() {
$('#cboxClose').remove();
}
});
}
setTimeout(openColorBox, 1000);
</script>
site/subscribe.php
<body class="oneColFixCtr">
<div id="container">
<form name="Mail_list" action="#" method="post">
<p>
<label for="phone">Your Mobile Number </label>
<input type="tel" name="phone" id="phone" size="10" pattern="\d{10}" required />
<input type="hidden" name="date1" id="date1" value="<?php echo date('d.m.y'); ?>" />
</p>
<input type="submit" name="submit" value="Enter">
</form>
</div>
Your form is not posting the data anywhere when sumitted. Your action="#" will never allow the form to submit. Set your action to PHP_SELF if you need to submit it back to subscribe.php, then have a check in your subscribe.php that processes your form.
The better method would be to have your popup content in a hidden div and open that div instead of using an iframe. Use subscribe.php as your logic for saving the users data to the database. Using ajax to submit the form wouldn't be a bad idea either.
Updated Question:
I added "required" to all fields, except the form will still submit if
first#second is used as the email. It submits even if missing the .com (or whatever).
How can I incorporate this validation too?
Thanks!
Original Question:
My site has a sign-up form with just an email field. Currently there are validators in place to verify the proper syntax of an entered e-mail, but the form will submit if the field is left blank. I need to verify that the field is not blank before submission. If it's blank, there should be some message that appears - similar to the ones that appear is no # symbol is included for instance.
My demo page is here.
The form html:
<div class='form animated flipInX'>
<h2>Sign Up</h2>
<form action="http://mydomain.us10.list-manage.com/subscribe/post" method="POST">
<input type="hidden" name="u" value="a324dfsf32erwdafdaf3dfsdsdf">
<input type="hidden" name="id" value="32df32rff2">
<input type="email" name="MERGE0" id="MERGE0" placeholder="Your Email Address" class="boxfield">
<button class='animated infinite pulse'>Let's Go!</button>
</form>
</div>
Any suggestions? Thank you
Use required in your input tags
The required attribute is a boolean attribute.
When present, it specifies that an input field must be filled out before submitting the form.
So your input should be
<input type="email" name="MERGE0" id="MERGE0" placeholder="Your Email Address" class="boxfield" required>
Look here for more information
Update :
type="email" is the common attribute of html5. If you need to validate you shall use the patten inside your input element
You shall use pattern="[a-z0-9!#$%&'*+/=?^_{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_{|}~-]+)*#(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)\b
Here is the one use should use
<input type="email" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*#(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)\b">
Here is the jsfiddle as per your updated question
You can add required attribute in input tags.
<input type="email" name="MERGE0" id="MERGE0" placeholder="Your Email Address" class="boxfield" required="true">
Luckily it's that easy
The best way to do this to add required attribute in input tags
Please check this solution in which i using jquery to check it is blank or filled
<div class='form animated flipInX'>
<h2>Sign Up</h2>
<form action="http://mydomain.us10.list-manage.com/subscribe/post" method="POST">
<input type="hidden" name="u" value="a324dfsf32erwdafdaf3dfsdsdf">
<input type="hidden" name="id" value="32df32rff2">
<input type="email" name="MERGE0" id="MERGE0" placeholder="Your Email Address" class="boxfield">
<button class='animated infinite pulse' type="submit" onClick="checkval();">Let's Go!</button>
</form>
</div>
<script>
function checkval()
{
var email_val=$("#MERGE0").val();
if(email_val.length>2)
{
}
else
{
alert("email is required.");/*there you change show the value which you want to show as a error message.*/
event.preventDefault();
/* this help to stop submit form*/
}
}
</script>
hopefully this may help you
I don't know if your question has been answer, but try this:
//The Input
<input type='email' id='email' placeholder='email' onchange='emailCheck()'>
//The Button
<button id='button' style='visibility:hidden'>Submit</button>
//Javascript
<script>
var input = document.getElementById('email').value;
if(input.indexOf("#") > -1){
if(input.indexOf(".com") >= input.length - 4){
document.getElementById('button').style.visibility = 'visible';
}else{
alert('Custom Invalid Email Alert');
}
}else{
alert('Custom Invalid Email Alert');
}
</script>
required is best option or u can use java script
like this
<script type="text/javascript">
function validateForm()
{
var a=document.forms["Form"]["answer_a"].value;
var b=document.forms["Form"]["answer_b"].value;
var c=document.forms["Form"]["answer_c"].value;
var d=document.forms["Form"]["answer_d"].value;
if (a==null || a=="",b==null || b=="",c==null || c=="",d==null || d=="")
{
alert("Please Fill All Required Field");
return false;
}
}
</script>
<form method="post" name="Form" onsubmit="return validateForm()" action="">
<textarea cols="30" rows="2" name="answer_a" id="a"></textarea>
<textarea cols="30" rows="2" name="answer_b" id="b"></textarea>
<textarea cols="30" rows="2" name="answer_c" id="c"></textarea>
<textarea cols="30" rows="2" name="answer_d" id="d"></textarea>
</form>
I have the below for that works well, but is open for spam bots.
I want to put in a honeypot, not a captcha.
The code below works with the validation for the name, email, message,
but I can not get it to work with the honeypot.
Can anyone look at the "honeypot" code and tell me how to fix it?
I would like for the form to give an $success2 = "No Spamming allowed" that acts like the form was submitted, but does not actually submit the form.
Thanks
The Form:
<form id="contactform" action="send2.php" method="post"><div id="success"></div><div id="error"></div>
<label for="name">Name:</label><input type="text" id="name" name="name"/>
<label for="email">Email:</label><input type="text" id="email" name="email"/>
<label for="message">Message:</label><textarea id="message" name="message" rows="12" cols="20"></textarea>
<label id="robot">Are you a robot?</label><input type="text" name="robot" id="robot">
<input type="submit" value="Send your message" id="send" />
</form>
The PHP:
can be found here: http://goviewmy.com/contact/showcode/
Sorry, but i cannot get the PHP code to post in this question, so I attached a link to it.
Thanks
Honeypots work best if they have a field name that sounds legit, they should also be hidden using javascript to change the css after the page loads. (Most) bots don't have javascript enabled so they cannot process that this field should not be filled out.
I use something like this:
<div class='req'>
<label for='website'>Leave blank</label>
<input type='text' name='website'>
</div>
Hide it with jquery:
$(document).ready(function(){
$(".req").hide();
});
reject it server side if the field is filled out with something like this
if($_POST['website'] != ''){
echo "It appears you are a bot!";
}
else{
//process the rest of the form
}
I have a page with login form (on click, login form slides dowm) and underneath I have a link for registering a new user. With click on 'register new' link, new form pops-up and after validating each field, the submit event doesn't work - because there is a login form too and jQuery tries to trigger submit event of the first form.
How to trigger this specific onsubmit event - for the second form? I tried to hide a first form, but it didn't work and then I try to disabled it, which doesn't work as well.
(forms on separate pages works fine - validated with PHP and JS)
I think this is an easy thing to do .. but I cannot figure out how to do. Till now I overcome this problem, but I really like to find out how to make it work.
Thanks.
Unfortunatelly .. none of this answers works ...
Here is the code:
<div id="loginFormContainer">
<h2 id="loginShow" class="myriad_pro_bold_condensed_italic">Login</h2>
<form name="login_form" action="<?php if(isset($action) && !empty($action)) echo $action; ?>" method="POST" id="login_form" >
<fieldset>
<label>Your name </label>
<input type="text" name="username" maxlength="30" id="username_login" value="" class="required" placeholder="Enter Your Name" />
<label>Your password </label>
<input type="password" name="password" maxlength="16" id="password_login" value="" class="required " placeholder="Enter Your Password" />
</fieldset>
<input type="hidden" name="token" value="<?php if(isset($token)) echo $token; ?>" />
<input type="submit" name="submit-login" id="submit_login" value="Login" />
</form>
<div class="small">Register | Forgotten Password</div>
<div class="error"></div>
</div>
And JS ... should work like: if on register click: register windows pops-up, if on login the login form should slide down.
Right now, both of them slides ...I can remove the login form if I want to register, but the submit button from register form doesn't work.
$("#login_form").hide();
$("#loginShow").click(function(){
$('form#login_form .error').remove();
$("#login_form").slideDown("slow");
$('form#login_form').on("submit", function(event) {
event.preventDefault();
//code validation and ajax submit
}); //end form submit
});
$('#register').click(function(e) {
//$('#loginShow').remove(); //form is removed, but submit event still doesn't work
//if I completely remove login form from php page, then works fine
e.preventDefault();
$('form#register_form').click(function(event) {
event.preventDefault();
//
}); //end form submit
});//end register floating
Oh, yes, one final detail: on Chrome works fine :S, not in FF (v.10)
$(":submit").click(function(e){
$(this).closest("form").submit();
return false;
});
Try this:
var secondForm = $('form').eq(1);
secondForm.trigger('submit');
Just give the second submit button an id.
<input type='submit' id='submit2'>
Now for trigerring validation bind onclick event to the submit2 id
$('#submit2').click(function(){
//logic goes here
});
i'm creating my own MVC Framework.
I have a basic form in my view
<form action="?" method="post" >
<input type="hidden" name="envoie" value="envoie" />
<?php dico('INSCRIPTION_NOM'); ?><input id="name" type="text" name="name" /><br />
<?php dico('INSCRIPTION_EMAIL'); ?><input id="email" type="text" name="email" /><br />
<?php dico('INSCRIPTION_PWD'); ?><input id="pwd" type="password" name="pwd" /><br />
<input type="button" value="<?php dico('INSCRIPTION_SINSCRIRE'); ?>" onclick="verifForm(document.getElementById('email').value);"/>
</form>
when I clock on the button they have a javascript function like that :
function verifForm(email) {
var url ="?c=Inscription&a=VerifForm&email="+email;
$.get(url, function(data){
alert('resultat == '+data);
});
}
Inscription was my controllers and VerifForm an method of the controller. email was the value of a input.
The Php function was :
public function actionVerifForm() {
echo "OK";
}
When i click on the button i have all the code of the page on my alert but i only want the message "OK".
Thanks for helping me
what you are doing is AJAX, am i right? the data parameter IS your result. AJAX returns the echo-ed page as a string. if you mean to place it in the page, try jQuery .html() or .text() for a text only, escaped version.
function verifForm(email) {
var url ="?c=Inscription&a=VerifForm&email="+email;
$.get(url, function(data){
$('#container-id-here').html(data); //html insert
$('#container-id-here').text(data); //text insert
});
}
and in your PHP, since you are doing AJAX, you should only echo what you need returned, and not the whole HTML mark-up (which means no <html><head>...</head></html>