I am trying to validate the form with id's username and initial_password: The HTML portion is as:
<form name="myform" action="includes/logincontrol.php" method="POST" onsubmit="return validateForm()">
<div class="form-group"> <!-- User ID Field -->
<label id="user_name_error" >User ID:</label>
<input class="form-control" id="username" type="text" onfocusout ="validateUserName()"/>
</div>
<div class="form-group"> <!-- Password Field -->
<label id="password_error">Password: </label>
<input class="form-control" id="initial_password" type="password" onfocusout ="validatePassword()"/>
</div>
<div class="form-group"> <!-- Register -->
<p id="submit-error"></p>
<hr/>
<button class="btn btn-primary" id="login" type="submit">Login</button>
<input class="btn btn-danger" type="reset" value="Reset" onClick="clearfunc()"/>
<hr/>
<button type="button" class="btn btn-success" onclick="window.location.href = 'register_user.php'">Register</button>
<button type="button" class="btn btn-warning" onclick="window.location.href = 'changepw.php'">Change Password</button>
</div>
</form>
Java Script:
function validateUserName() {
var user_name_entered = document.getElementById('username').value;
if (user_name_entered.length === 0) {
producePrompt('User empty?', 'user_name_error', 'red');
document.getElementById('login').disabled = true;
return false;
}
producePrompt('User Name OK!', 'user_name_error', 'green');
document.getElementById('login').disabled = false;
return true;
}
function validatePassword() {
var password_entered = document.getElementById('initial_password').value;
if (password_entered.length === 0) {
producePrompt('Password empty?', 'password_error', 'red');
document.getElementById('login').disabled = true;
return false;
}
producePrompt('Password Entered!', 'password_error', 'green');
document.getElementById('login').disabled = false;
return true;
}
function producePrompt(message, promptLocation, color) {
document.getElementById(promptLocation).innerHTML = message;
document.getElementById(promptLocation).style.color = color;
}
I am unable to get the elements in $_POST array. Please help
You have to put name at inputs, to access them with $_POST.
<input name="usernameInput" class="form-control" id="username" type="text" onfocusout ="validateUserName()"/>
<?php
$username = $_POST['usernameInput'];
?>
If you want to see if the form is submited put a name in the type submit input and try this:
if (isset($_POST['submitButton']) {
$username = $_POST['usernameInput'];
#..etc
}
Related
I am trying to change (div.class=loguser)'s innerhtml to the username that has logged in. To get the username, I wrote a function that gets input of username and password from the register_button which is inside (div#register). I wrote an object(addData) which takes the username and password and stores it in an array(datas). After putting it in the array, I made a function where it verifies if the username and password exists in the array. If it does exist, it is suppose the change the innerhtml to the username. But it is not working. And I cant even submit the form while registering.
let datas = [];
const addData = (ev) => {
ev.preventDefault();
let data = {
username: document.getElementById('rusername').value,
password: document.getElementById('rpassword').value
}
datas.push(data);
document.forms[0].reset();
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('register_button').addEventListener('click', addData);
});
function isUserValid(username, password) {
var username = document.getElementById('lusername').value;
var password = document.getElementById('lpassword').value;
for (var i = 0; i < datas.length; i++) {
if (datas[i].username === username &&
datas[i].password === password) {
var name = username;
document.getElementsByClassName('loguser').innerHTML = username;
}
}
}
<body>
<div class="loguser">
<td>
<ul class="nav-area">
<li class="dropdown">User
</li>
</ul>
</td>
</div>
</tr>
</table>
</div>
<div class="wrapper">
<div class="login_box">
<div class="login_header">
<img src="images/alimama.png" alt=""> <br> Login or Register!
</div>
<div id="login">
<form action="" method="POST">
<input id="lusername" type="text" name="lusername" placeholder="Username" required>
<br>
<input id="lpassword" type="password" name="lpassword" placeholder="Password">
<br>
<input type="submit" name="login_button" value="Login">
<br>
Need an account? Register here!
</form>
</div>
<div id="register">
<form action="" method="POST">
<input id="rusername" type="text" name="rusername" placeholder="Username" required>
<br>
<input id="rpassword" type="password" name="rpassword" placeholder="Password" required>
<br>
<input id="register_button" type="submit" name="register_button" value="Register">
<br>
Already have an account? Sign in here!
</form>
</div>
</div>
</body>
isUserValid() shouldn't take username and password as parameters, since it gets them from the inputs. It should take an event parameter, so you can call it as an event listener.
document.getElementsByClassName() returns a NodeList. You need to use [0] to access the first match to set its innerHTML. You could also use document.querySelector(), it just returns the first match.
The login button doesn't have an ID. Add id="login_button" so you can add an event listener to it.
Instead of your loop you can use the find() method to search an array.
let datas = [];
const addData = (ev) => {
ev.preventDefault();
let data = {
username: document.getElementById('rusername').value,
password: document.getElementById('rpassword').value
}
datas.push(data);
document.forms[0].reset();
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('register_button').addEventListener('click', addData);
});
function isUserValid(e) {
e.preventDefault();
var username = document.getElementById('lusername').value;
var password = document.getElementById('lpassword').value;
var found_user = datas.find(d => d.username === username && d.password === password);
if (found_user) {
document.getElementsByClassName('loguser')[0].innerHTML = found_user.username;
}
}
document.getElementById("login_button").addEventListener("click", isUserValid);
<body>
<div class="loguser">
User
</div>
<div class="wrapper">
<div class="login_box">
<div class="login_header">
<img src="images/alimama.png" alt=""> <br> Login or Register!
</div>
<div id="login">
<form action="" method="POST">
<input id="lusername" type="text" name="lusername" placeholder="Username" required>
<br>
<input id="lpassword" type="password" name="lpassword" placeholder="Password">
<br>
<input type="submit" id="login_button" name="login_button" value="Login">
<br>
Need an account? Register here!
</form>
</div>
<div id="register">
<form action="" method="POST">
<input id="rusername" type="text" name="rusername" placeholder="Username" required>
<br>
<input id="rpassword" type="password" name="rpassword" placeholder="Password" required>
<br>
<input id="register_button" type="submit" name="register_button" value="Register">
<br>
Already have an account? Sign in here!
</form>
</div>
</div>
</body>
Heading
I'm trying to build a submit form for my login, but I don't know why this action is not working. Any ideas ?
List item jquery
$(function() {
var $formLogin = $('#login-form');
var $formLost = $('#lost-form');
var $formRegister = $('#register-form');
var $divForms = $('#div-forms');
var $modalAnimateTime = 300;
var $msgAnimateTime = 150;
var $msgShowTime = 2000;
$("form").submit(function (e) {
e.preventDefault();
switch(this.id) {
case "login-form":
var $lg_username=$('#login_username').val();
var $lg_password=$('#login_password').val();
if ($lg_username == "ERROR") {
msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "error", "glyphicon-remove", "Login error");
} else {
msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "success", "glyphicon-ok", "Login OK");
}
return false;
break;
case "lost-form":
var $ls_email=$('#lost_email').val();
if ($ls_email == "ERROR") {
msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "error", "glyphicon-remove", "Send error");
} else {
msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "success", "glyphicon-ok", "Send OK");
}
return false;
break;
case "register-form":
var $rg_username=$('#register_username').val();
var $rg_email=$('#register_email').val();
var $rg_password=$('#register_password').val();
if ($rg_username == "ERROR") {
msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "error", "glyphicon-remove", "Register error");
} else {
msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "success", "glyphicon-ok", "Register OK");
}
return false;
break;
default:
return false;
}
return false;
});
$('#login_register_btn').click( function () { modalAnimate($formLogin, $formRegister) });
$('#register_login_btn').click( function () { modalAnimate($formRegister, $formLogin); });
$('#login_lost_btn').click( function () { modalAnimate($formLogin, $formLost); });
$('#lost_login_btn').click( function () { modalAnimate($formLost, $formLogin); });
$('#lost_register_btn').click( function () { modalAnimate($formLost, $formRegister); });
$('#register_lost_btn').click( function () { modalAnimate($formRegister, $formLost); });
function modalAnimate ($oldForm, $newForm) {
var $oldH = $oldForm.height();
var $newH = $newForm.height();
$divForms.css("height",$oldH);
$oldForm.fadeToggle($modalAnimateTime, function(){
$divForms.animate({height: $newH}, $modalAnimateTime, function(){
$newForm.fadeToggle($modalAnimateTime);
});
});
}
function msgFade ($msgId, $msgText) {
$msgId.fadeOut($msgAnimateTime, function() {
$(this).text($msgText).fadeIn($msgAnimateTime);
});
}
function msgChange($divTag, $iconTag, $textTag, $divClass, $iconClass, $msgText) {
var $msgOld = $divTag.text();
msgFade($textTag, $msgText);
$divTag.addClass($divClass);
$iconTag.removeClass("glyphicon-chevron-right");
$iconTag.addClass($iconClass + " " + $divClass);
setTimeout(function() {
msgFade($textTag, $msgOld);
$divTag.removeClass($divClass);
$iconTag.addClass("glyphicon-chevron-right");
$iconTag.removeClass($iconClass + " " + $divClass);
}, $msgShowTime);
}
});
List item html
<!-- Begin # DIV Form -->
<div id="div-forms">
<!-- Begin # Login Form -->
<form id="login-form" method="post" action="login.php">
<div class="modal-body">
<div id="div-login-msg">
<div id="icon-login-msg" class="glyphicon glyphicon-chevron-right"></div>
<span id="text-login-msg">Type your username and password.</span>
</div>
<input id="login_username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)" required>
<input id="login_password" class="form-control" type="password" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
<div class="modal-footer">
<div>
<button type="submit" name="login" class="btn btn-primary btn-lg btn-block">Login</button>
</div>
<div>
<button id="login_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
<button id="login_register_btn" type="button" class="btn btn-link">Register</button>
</div>
</div>
</form>
<!-- End # Login Form -->
<!-- Begin | Lost Password Form -->
<form id="lost-form" style="display:none;" method="post" action="submit.php">
<div class="modal-body">
<div id="div-lost-msg">
<div id="icon-lost-msg" class="glyphicon glyphicon-chevron-right"></div>
<span id="text-lost-msg">Type your e-mail.</span>
</div>
<input id="lost_email" class="form-control" type="text" placeholder="E-Mail (type ERROR for error effect)" required>
</div>
<div class="modal-footer">
<div>
<button type="submit" name="submit" class="btn btn-primary btn-lg btn-block">Send</button>
</div>
<div>
<button id="lost_login_btn" type="button" class="btn btn-link">Log In</button>
<button id="lost_register_btn" type="button" class="btn btn-link">Register</button>
</div>
</div>
</form>
<!-- End | Lost Password Form -->
<!-- Begin | Register Form -->
<form id="register-form" style="display:none;" method="post" action="submit.php">
<div class="modal-body">
<div id="div-register-msg">
<div id="icon-register-msg" class="glyphicon glyphicon-chevron-right"></div>
<span id="text-register-msg">Register an account.</span>
</div>
<input id="register_username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)" required>
<input id="register_email" class="form-control" type="text" placeholder="E-Mail" required>
<input id="register_password" class="form-control" type="password" placeholder="Password" required>
</div>
<div class="modal-footer">
<div>
<button type="submit" name="submit" class="btn btn-primary btn-lg btn-block">Register</button>
</div>
<div>
<button id="register_login_btn" type="button" class="btn btn-link">Log In</button>
<button id="register_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
</div>
</div>
</form>
<!-- End | Register Form -->
</div>
<!-- End # DIV Form -->
</div>
</div>
</div>
You have to prevent your form from submitting first before you can run custom code, or else your form will submit before your code runs. This can be done by using e.preventDefault(). For example:
$("form").submit(function (e) {
e.preventDefault();
...
}
I have next form:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function submit(form) {
var first_pass = form.find('.first_try');
var second_pass = form.find('.second_try');
if (first_pass.value == second_pass.value) {
return true
}
first_pass.value = '';
second_pass.value = '';
first_pass.attr('placeholder', 'Пароли не совпадают');
first_pass.css('border-color', 'red');
second_pass.css('border-color', 'red');
return false
}
</script>
<form role="form" method="post" onsubmit="return submit($('#PasswordChange form'))">
<h3>Редактирование пользователя</h3>
<div class="form-group">
<input type="password" class="form-control first_try" name="password"
placeholder="Новый пароль"
required>
</div>
<div class="form-group">
<input type="password" class="form-control second_try" name="password"
placeholder="Повтор пароля"
required>
</div>
<input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить"></input>
</form>
This script checks whether passwords are the same.
But using firefox debugger i can't find that it goes into this method.
Is this problem with script? Or Is ths problem about declaring onsubmit handler?
There was many problems:
change value to val
use another name for submit function, it's kinda reserved
use this instead of $('#PasswordChange form')
use var first_pass = $('.first_try'); instead of find
you forgot to write else
and you need use event.preventDefault(); to stop refreshing page or submiting page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function save(form) {
var first_pass = form.querySelector('.first_try');
var second_pass = form.querySelector('.second_try');
if (first_pass.value == second_pass.value) {
alert('its ok');
return true;
} else {
first_pass.value = '';
second_pass.value = '';
first_pass.placeholder = 'Пароли не совпадают';
first_pass.style.borderColor='red';
second_pass.style.borderColor='red';
return false
}
}
</script>
<form role="form" method="post" onsubmit="event.preventDefault(); return save(this)">
<h3>Редактирование пользователя</h3>
<div class="form-group">
<input type="password" class="form-control first_try" name="password"
placeholder="Новый пароль"
required>
</div>
<div class="form-group">
<input type="password" class="form-control second_try" name="password"
placeholder="Повтор пароля"
required>
</div>
<input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить"/>
</form>
Use this code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function submitData(form) {
var first_pass = form.find('.first_try');
var second_pass = form.find('.second_try');
if (first_pass.value == second_pass.value) {
return true
}
first_pass.value = '';
second_pass.value = '';
first_pass.attr('placeholder', 'Пароли не совпадают');
first_pass.css('border-color', 'red');
second_pass.css('border-color', 'red');
return false
}
</script>
</head>
<body>
<form role="form" method="post" onsubmit="return submitData($('#PasswordChange form'))">
<h3>Редактирование пользователя</h3>
<div class="form-group"> <input type="password" class="form-control first_try" name="password" placeholder="Новый пароль" required></div>
<div class="form-group"> <input type="password" class="form-control second_try" name="password" placeholder="Повтор пароля" required></div><input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить"></form>
</body>
</html>
Please change submit function name because it is keyword so it is not use it. Also remove </input> next to submit button
Use this :
onsubmit="return submit(this)"
You should not return anything if you don't need to cancel the submit action. Also you could use submit form event handler with jQuery .submit() method instead of hanler definition in onsubmit attribute.
$("form").submit(function(e) {
var passwords = $('[name=password]');
if (passwords.eq(0).val() !== passwords.eq(1).val()) {
alert("Пароли не совпадают!");
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" method="post" action="/">
<h3>Редактирование пользователя</h3>
<div class="form-group">
<input type="password" class="form-control first_try" name="password" placeholder="Новый пароль" required >
</div>
<div class="form-group">
<input type="password" class="form-control second_try" name="password" placeholder="Повтор пароля" required />
</div>
<input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить" />
</form>
Also I recommend you to use Bootstrap validation states instead of input's border style setting.
i'm working on a email sending function on a project. here when i fill the form and after sending it the web site page getting refresh and showing white background page. i need to prevent that from the refreshing and submit the form. here i'l attach the codes and can someone tell me the answer for this question.
HTML code for form
<form class="form-vertical" onsubmit="return sendEmail();" id="tell_a_friend_form" method="post" action="index.php?route=product/product/tellaFriendEmail" enctype="multipart/form-data">
<div class="form-group ">
<label class="control-label ">Your Name <span >* </span> </label><br>
<div class="form-group-default">
<input type="text" id="senders_name" name="sender_name" value="" class="form-control input-lg required" >
</div>
</div>
<div id="notify2" class="">
<div id="notification-text2" class="xs-m-t-10 fs-12"></div>
<!--<button type="button" class ="close" id="noti-hide">×</button>-->
</div>
<div class="form-group ">
<label class="control-label ">Your Email <span >* </span> </label><br>
<div class="form-group-default">
<input type="text" id="sender_email_ID" name="sender_email" value="" class="form-control input-lg" >
</div>
</div>
<div id="notify1" class="">
<div id="notification-text1" class="xs-m-t-10 fs-12"></div>
<!--<button type="button" class ="close" id="noti-hide">×</button>-->
</div>
<div class="form-group ">
<label class="control-label">Your Friends' Email <span >* </span></label>
<p class="lineStyle">Enter one or more email addresses, separated by a comma.</p>
<div class="form-group-default">
<input type="text" value="" id="receiver_email" class="form-control required" name="receivers_email" >
</div>
</div>
<div id="notify" class="">
<div id="notification-text" class="xs-m-t-10 fs-12"></div>
<!--<button type="button" class ="close" id="noti-hide">×</button>-->
</div>
<div >
<label domainsclass="control-label ">Add a personal message below (Optional) <br></label>
<div class="form-group-default">
<textarea type="text" id="tell_a_friend_message" name="tell_a_friend_message" class="form-control" rows="10" col="100" style=" width: 330px; height: 100px;"></textarea>
</div>
</div>
<div id="notify3" class="">
<div id="notification-text3" class="xs-m-t-10 fs-12"></div>
<!--<button type="button" class ="close" id="noti-hide">×</button>-->
</div>
<input type="hidden" name="product_url" id="product_url_field" value="">
<div class="p-t-15 p-b-20 pull-right">
<button id="send_mail_button" class="btn btn-rounded btn-rounded-fl-gold text-uppercase" name="submit" onclick="return sendEmail();" >Send</button>
<button id="cancel_email_form" class="btn btn-rounded btn-rounded-gold text-uppercase btn-margin-left" data-dismiss="modal" aria-hidden="true" >Cancel</button>
</div>
javascript code:
<script>
function sendEmail() {
document.getElementById('product_url_field').value = window.location.href
var emailpattern = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var receivers_email = $("#receiver_email").val();
var sender_email = $("#sender_email_ID").val();
var sender_name = $("#senders_name").val();
var email_pathname = window.location.pathname;
var product_url = window.location.href;
if (receivers_email == '') {
$('#notify').removeClass().addClass("alert-danger");
$('#notification-text').empty().html("Invalid e-mail or fill the email address correctly");
$('#notification-text').show();
setTimeout(function() {
$('#notification-text').fadeOut('slow');
}, 10000);
return false;
}
else {
!emailpattern.test(receivers_email);
}
if(sender_name == ''){
$('#notify2').removeClass().addClass("alert-danger");
$('#notification-text2').empty().html("please fill the name");
$('#notification-text2').show();
setTimeout(function() {
$('#notification-text2').fadeOut('slow');
}, 10000);
return false;
}
if (sender_email == '') {
$('#notify1').removeClass().addClass("alert-danger");
$('#notification-text1').empty().html("Invalid e-mail or fill the email address correctly");
$('#notification-text1').show();
setTimeout(function() {
$('#notification-text1').fadeOut('slow');
}, 10000);
return false;
}
else {
!emailpattern.test(sender_email);
}
$('#notify3').removeClass().addClass("alert-success");
$('#sender_email').val('');
$('#notification-text3').empty().html("Email has sent successfully");
$('#notification-text3').show();
setTimeout(function() {
$('#notification-text3').fadeOut('slow');
}, 10000);
return true;
}
</script>
Controller php class:
public function tellaFriendEmail(){
if (isset($_POST['submit'])) {
$receiver_email = $_POST['receivers_email'];
$name = $_POST['sender_name'];
$email = $_POST['sender_email'];
$message = $_POST['tell_a_friend_message'];
$products_url = $_POST['product_url'];
$mail = new Mail();
$mail->protocol = $this->config->get('config_mail_protocol');
$mail->parameter = $this->config->get('config_mail_parameter');
$mail->smtp_hostname = $this->config->get('config_mail_smtp_hostname');
$mail->smtp_username = $this->config->get('config_mail_smtp_username');
$mail->smtp_password = html_entity_decode($this->config->get('config_mail_smtp_password'), ENT_QUOTES, 'UTF-8');
$mail->smtp_port = $this->config->get('config_mail_smtp_port');
$mail->smtp_timeout = $this->config->get('config_mail_smtp_timeout');
$mail->setTo($receiver_email);
$mail->setFrom($this->config->get('config_email'));
$mail->setSender("Waltersbay");
$mail->setSubject($name.' '.'wants you to checkout this product from waltersbay.com');
if ($message !=''){
$mail->setHtml('Hi Dear,<br/> please checkout the following product that'.' '.$name.' '.'wanted you to see.'.' '.'we hope that you will like it !!!!<br/>'.$products_url.'<br/>'.'<br/> Here is a little message from your friend:<br/>'.$message.'<br/>'.'<br/> Thank you, <br/> ');
}
else{
$mail->setHtml('Hi Dear,<br/> please checkout the following product that'.' '.$name.' '.'wanted you to see.'.' '.'we hope that you will like it !!!!<br/>'.$products_url.'<br/>'/*.'<br/> Here is a little message from your friend:<br/>'.$message.'<br/>'*/.'<br/> Thank you, <br/> ');
}
$mail->send();
}
else{
header('location : tella_friend.tpl');
}
}
}
Put a hidden input in your form. before submitting in your js, fill it with a new key according to time.
in your php file check if key is duplicate or not? or even if its filled?
Because js fill this input after clicking the submit button, every time you submit your form you have a new key! If you refresh the form, you're gonna send the previous value again.
For your problem then best practice recommended is to use jquery ajax requests.
Firstly if you pretend to use "submit" element then do following,
$(".form-vertical").submit(function(e) {
e.preventDefault();
//send ajax with your form data. Ample examples on SO already.
$.ajax(.....);
});
Other option we would recommend is to avoid using 'submit' behavior at first place for requirement you have.
1. Use button elements instead of submit element.
2. Attach click event on button. i.e. in your case 'send'.
3. On click, send ajax as described above. This will avoid doing things like onsubmit="return sendEmail();" you had to do.
4. Also following is not required as well,
$(".form-vertical").submit(function(e) {
e.preventDefault();
as it will be done as follows,
$("button#buttonId").click(function(e) {
// your ajax call.....
}
Can I have yout help pleas there,I make a validation field for a popup form :
function prepareEventHandlers() {
document.getElementById("contact").onsubmit = function () {
if (document.getElementById("message").value == '') {
document.getElementById("errorMessage").innerHTML = 'the field should not be empty!';
return false;
}
else {
document.getElementById("errorMessage").innerHTML = '';
return true;
}
};
}
window.onload = function () {
prepareEventHandlers();
}
then the html code :
<div id="form-content" class="modal hide fade in" style="display: none;">
<div class="modal-body">
<form class="contact" name="contact" >
<label class="label" for="message">Enter a Message</label><br>
<textarea id="message" name="message" class="input-xlarge"></textarea>
<p><span id="errorMessage"></span></p>
</form>
</div>
<div class="modal-footer">
<input class="btn btn-success" type="submit" value="Send!" id="btnsubmit">
No!
</div>
and I got this error :
TypeError: document.getElementById(...) is null document.getElementById("contact").onsubmit = function () {
Any Idea?
Edit:
OK I add id="contact" to my form so the error is gone but now the popup form is displyaed but when I try to click send with empty or not empty value nothing is happened...
just close </form> after <input class="btn btn-success" type="submit" value="Send!" id="btnsubmit">
and change html form id to contact