I try to create bootstrap form which will after wrong submission change the color of the borders to the red. The Problem is that textbox it will always stay in red. Any ideas how can I set the textbox borders red after wrong input. Is there any class in bootstrap that will automatically output that borders in red color after wrong input?
if ($('#TextBoxID').val() == '') {
$('#TextBoxID').css('border-color', 'red');
} else {
$('#TextBoxID').css('border-color', '');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<div class="sign-up container">
<h2>Sign Up</h2>
<p>Please fill this form to create an account.</p>
<form action="" method="post">
<div class="form-group">
<label>Username</label>
<input id="TextBoxID" type="text" name="username" class="form-control" value="">
<span class=" text-danger"></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" value="">
<span class="text-danger"></span>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="confirm_password" class="form-control" value="">
<span class=" text-danger"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Submit">
<input type="reset" class="btn btn-default" value="Reset">
</div>
<p>Already have an account? Login here.</p>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
The Problem is that textbox it will always stay in red.
It is because of this line if ($('#TextBoxID').val() == ''). You need to check this on form submit
function formSubmit(e) {
e.preventDefault();
if ($('#TextBoxID').val() == '') {
$('#TextBoxID').css('border-color', 'red');
} else {
$('#TextBoxID').css('border-color', '');
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<div class="sign-up container">
<h2>Sign Up</h2>
<p>Please fill this form to create an account.</p>
<form action="" method="post">
<div class="form-group">
<label>Username</label>
<input id="TextBoxID" type="text" name="username" class="form-control" value="">
<span class=" text-danger"></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" value="">
<span class="text-danger"></span>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="confirm_password" class="form-control" value="">
<span class=" text-danger"></span>
</div>
<div class="form-group">
<button onclick="formSubmit(event)" type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-default" value="Reset"></button>
</div>
<p>Already have an account? Login here.</p>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
Related
I have an issue with BS modal (im using BS 3) and it is confirming form submission. But it is placed in accordion and when i click e.g. 5th element modal and validator works but shows error in first element. I dont know what can be the problem, maybe data-toggle is mixed (modal and validator).Below I put that part of code (with erased loop and other things connected with template viewer -> smarty)
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="accordion_dotacja">
<b>Udostępnij kod pracownikowi:</b> <br>
<div class="row">
<div class="col-xs-9" style="padding-right:0;">
<input class="form-control" type="text" value="" id="" style="border-top-right-radius: 0; border-bottom-right-radius: 0;" readonly>
</div>
<div class="col-xs-3" style="padding-left:0;">
<button class="btn button btn-info" style="border-top-left-radius: 0; border-bottom-left-radius: 0;">Kopiuj kod</button>
</div>
</div><br>
<b>Albo załóż konto pracownika:</b> <br><br>
<form id="myForm" action="" method="post" data-toggle="validator" role="form">
<div class="row">
<div class="col-sm-6 form-group">
Imię:<br>
<input type="text" class="form-control" name="employee_name" data-error="Proszę podać imię." required>
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-6 form-group">
Nazwisko:<br>
<input type="text" class="form-control" name="employee_surname" data-error="Proszę podać nazwisko." required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
Numer telefonu:<br>
<input placeholder="9-cyfrowy numer telefonu" type="text" class="form-control" name="employee_phone" data-error="Proszę podać numer telefonu" pattern="[0-9]{9}" required>
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-6 form-group">
Adres e-mail:<br>
<input type="email" class="form-control" name="employee_email" data-error="Proszę podać prawidłowy adres e-mail." required>
<div class="help-block with-errors"></div>
</div>
</div>
<input type="hidden" name="action" value="register_employee">
<input type="hidden" name="kurs_id" value="">
<input type="hidden" name="hash" value="">
<input type="button" name="btn" value="Utwórz" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn button btn-primary" />
</form>
</div>
</div>
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<p class="body" style="font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; font-weight: 400;">
<b> Klikając „Załóż konto/Aplikuj” akceptujesz
Regulamin Serwisu i potwierdzasz, że zapoznałeś się z
Polityką ochrony prywatności oraz
Polityką Cookies.
</b>
</p>
</div>
<div class="modal-footer">
<button type="submit" form="myForm" class="btn btn-success col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1">Załóż konto/Aplikuj
</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I dont use any js file to this (only the validator, but its default code).
To clarify whats going on with this problem i attach video https://drive.google.com/file/d/1pYwLbxyZTZUFiGXny5LdO9Zg1S9_jKnr/view?usp=sharing
Earlier the code was without modals an validator was working correctly e.g i click submit on 5th element and validator runs in this element and so on.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="accordion_dotacja">
<div>
<b>Udostępnij kod pracownikowi:</b> <br>
<div class="row">
<div class="col-xs-9" style="padding-right:0;">
<input class="form-control" type="text" value="" id="hash_{$v.id}" style="border-top-right-radius: 0; border-bottom-right-radius: 0;" readonly>
</div>
<div class="col-xs-3" style="padding-left:0;">
<button class="btn button btn-info" style="border-top-left-radius: 0; border-bottom-left-radius: 0;">Kopiuj kod</button>
</div>
</div><br>
<b>Albo załóż konto pracownika:</b> <br><br>
<form action="" method="post" data-toggle="validator" role="form" onsubmit="return confirm('Czy na pewno chcesz założyć konto pracownikowi?');">
<div class="row">
<div class="col-sm-6 form-group">
Imię:<br>
<input type="text" class="form-control" name="employee_name" data-error="Proszę podać imię." required>
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-6 form-group">
Nazwisko:<br>
<input type="text" class="form-control" name="employee_surname" data-error="Proszę podać nazwisko." required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
Numer telefonu:<br>
<input placeholder="9-cyfrowy numer telefonu" type="text" class="form-control" name="employee_phone" data-error="Proszę podać numer telefonu" pattern="[0-9]{9}" required>
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-6 form-group">
Adres e-mail:<br>
<input type="email" class="form-control" name="employee_email" data-error="Proszę podać prawidłowy adres e-mail." required>
<div class="help-block with-errors"></div>
</div>
</div>
<input type="hidden" name="action" value="register_employee">
<input type="hidden" name="kurs_id" value="{$i}">
<input type="hidden" name="hash" value="{$v.hash}">
<input type="submit" class="btn button btn-primary" value="Utwórz">
</form>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
production code snippet
version of bootstrap - 3.3.7
Thanks in advance for help :)
I'm learning javascript so this question may seem basic. I have a form that takes email address and a choice from a dropdown menu as inputs. When the button is clicked, I'd like both these inputs to be sent to the console log.
The javascript I'm using below just returns 'null'
How do I send the email AND the option selected from the dropdown menu to the console log?
document.getElementById('email').addEventListener('change', function() {
console.log(this.getAttribute('value'));
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<form role="form" id="sub_form">
<div class="container">
<div class="row">
<div class="col-sm-7">
<div class="form-group">
<input type="email" class="form-control custom-email" name="email" id="email" placeholder="Email Address">
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<select id="dropdown" name="dropdown" class="form-control custom-dropdown">
<option>Select...</option>
<option>Design</option>
<option>Human Resources</option>
<option>Finance</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<button type="submit" class="btn btn-large custom-button"> Sign up now </button>
</div>
</div>
</div>
</form>
Try this way:
document.getElementById('sub_form').onsubmit = function(){
console.log(document.getElementById('email').value, document.getElementById('dropdown').value)
return false;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<form role="form" id="sub_form">
<div class="container">
<div class="row">
<div class="col-sm-7">
<div class="form-group">
<input type="email" class="form-control custom-email" name="email" id="email" placeholder="Email Address">
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<select id="dropdown" name="dropdown" class="form-control custom-dropdown">
<option>Select...</option>
<option>Design</option>
<option>Human Resources</option>
<option>Finance</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<button type="submit" class="btn btn-large custom-button"> Sign up now </button>
</div>
</div>
</div>
</form>
In event listener.. this is not proerly availabe so use. event listner function receives event object as first parameter. so you can use that ...
change your code as below.
document.getElementById('email').addEventListener('change', function(e) {
console.log(e.target.value);
});
Try this to get email & dropdown value when clicked on Sign up now button.
document.getElementById('custom-button').addEventListener("click", function(e) {
e.preventDefault();
console.log(document.getElementById("custom-email").value);
console.log(document.getElementById("dropdown").value);
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<form role="form" id="sub_form">
<div class="container">
<div class="row">
<div class="col-sm-7">
<div class="form-group">
<input type="email" id="custom-email" class="form-control custom-email" name="email" id="email" placeholder="Email Address">
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<select id="dropdown" name="dropdown" class="form-control custom-dropdown">
<option>Select...</option>
<option>Design</option>
<option>Human Resources</option>
<option>Finance</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<button type="submit" id="custom-button" class="btn btn-large custom-button"> Sign up now </button>
</div>
</div>
</div>
</form>
I have an html page that contains 2 forms, one for sign up and the other for sign in, and each have a submit button. The problem is that when I click these buttons nothing happens despite that the form action pages have been set. I am using netbeans and wamp server and I tried to run the project directly from the php pages (instead of the html page) and I got the needed response "Connected successfully".
Here is the complete html page :
<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<!----------------------------------jQuery Validate---------------------------------->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<!------------------------------------------------------------------------------------------------>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
crossorigin="anonymous"></script>
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous">-->
<!-- Website Font style -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="SignUpStyle.css" type="text/css">
</head>
<body>
<div class="container">
<div class="row main">
<div class="main-login main-center">
<h5>Sign Up</h5>
<form action="SignUp.php" method="post" id="signupForm">
<div class="form-group">
<label for="fn" class="cols-sm-2 control-label">Firstname</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="fn" id="fn"
placeholder="Enter your firstname"/>
</div>
</div>
</div>
<div class="form-group">
<label for="ln" class="cols-sm-2 control-label">Lastname</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="ln" id="ln"
placeholder="Enter your lastname"/>
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="cols-sm-2 control-label">Email</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="email" class="form-control" name="email" id="email"
placeholder="Enter your Email"/>
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="cols-sm-2 control-label">Password</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="password" id="password"
placeholder="Enter your Password"/>
</div>
</div>
</div>
<div class="form-group">
<label for="confirm" class="cols-sm-2 control-label">Confirm Password</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="confirm" id="confirm"
placeholder="Confirm your Password"/>
</div>
</div>
</div>
<div class="form-group">
<input id="submit" type="submit" value="Register" name="submit" form="signupForm"
class="btn btn-primary btn-lg btn-block login-button">
<div id="agreeDiv">
<input id="agreeId" type="checkbox" value="agree"/>
<label id="agreeLbl">I accept the terms and conditions</label>
</div>
</div>
<div class="form-group">
<span id="signInSpan">Already have an account?<button id="signInBtn">Sign In!!</button></span>
</div>
</form>
<form method="post" action="SignIn.php" id="signinForm">
<div class="form-group">
<label for="email2" class="cols-sm-2 control-label">Email</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="email" class="form-control" name="email2" id="email2"
placeholder="Enter your Email"/>
</div>
</div>
</div>
<div class="form-group">
<label for="password2" class="cols-sm-2 control-label">Password</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="password2" id="password2"
placeholder="Enter your Password"/>
</div>
</div>
</div>
<div class="form-group">
<button id="submit2" type="submit" class="btn btn-primary btn-lg btn-block login-button">Login</button>
</div>
<div class="form-group">
<span id="signUpSpan">Don't have an account?<button id="signUpBtn">Sign Up!!</button></span>
</div>
</form>
</div>
</div>
</div>
<script src="SignUpIn.js"></script>
</body>
And that's the signup.php page:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$db = "projetpw";
$port = 3308;
$conn = mysqli_connect($servername, $username, $password, $db ,$port);
if(!$conn){
die("Connection failed : ".mysqli_connect_error());
}
else{
$jq = '<script type="text/javascript">'
. 'alert("Connected Successfully");'
. '</script>';
echo $jq;
}
Any help would be appreciated.
change the button html code to :
<button type="submit" form="form1" value="Submit">Submit</button>
just make sure to give the button type="submit"
I think the js file which you included at bottom maybe creating problem, otherwise no issue in submitting a form code.
<script src="SignUpIn.js"></script>
How to write code for modal? I tried as semantic documentation but i can't get result.
I include:-
<link rel="stylesheet" type="text/css" href="css/semantic.css">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/components/modal.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/semantic.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/components/modal.min.js"></script>
<script type="text/javascript">
$('.ui.modal').modal('show');
});
</script>
Here is my code:-
<div class="ui modal">
<form class="ui form">
<div class="field">
<label>Old password</label>
<input type="text" name="oldpass" placeholder="old password">
</div>
<div class="field">
<label>Last Name</label>
<input type="text" name="newpass" placeholder="new password">
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" tabindex="0" class="hidden">
<label>I agree to the Terms and Conditions</label>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>
</div>
Please give some idea. Advance Thanks..
There are two problems in your code:
You're trying to get the .ui.modal before it's declared in the HTML. You must place the script tag before closing the body tag, but after all the other tags. Or you must use some ready event.
Your code has a sintax error. You must remove that }); at the end of your script.
Take a look at the example below working:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.css">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/components/modal.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/components/modal.min.js"></script>
<div class="ui modal">
<form class="ui form">
<div class="field">
<label>Old password</label>
<input type="text" name="oldpass" placeholder="old password">
</div>
<div class="field">
<label>Last Name</label>
<input type="text" name="newpass" placeholder="new password">
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" tabindex="0" class="hidden">
<label>I agree to the Terms and Conditions</label>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>
</div>
<script type="text/javascript">
$('.ui.modal').modal('show');
</script>
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="gm.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile.structure-1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script src="assets/custom.js"></script>
<script type="text/javascript" src="assets/ejs_production.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true" id="pageregister">
<div data-role="header">
<h1>Sign Up</h1>
</div>
<!-- /header -->
<div data-role="content">
<form action="someurl.html" method="post" id="registerform">
<fieldset>
<div data-role="fieldcontain">
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="" />
</div>
<div data-role="fieldcontain">
<label for="email2">Re-type email:</label>
<input type="text" name="email2" id="email2" value=""
/>
</div>
<div data-role="fieldcontain">
<label for="password">Password:</label>
<input type="password" name="password" id="password"
value="" />
</div>
<div data-role="fieldcontain">
<label for="password2">Re-type password:</label>
<input type="password" name="password2" id="password2"
value="" />
</div>
<button type="submit"
data-theme="b" name="submit" value="submit-value">Sign Up</button>
</fieldset>
</form>
<script>
$('#pageregister').live('pageshow', function (event) {
var url = baseURL + "users/add.json";
$("registerform").attr("action", url); //THIS HAS NO EFFECT?????
alert(url); //I SEE THIS
});
</script>
</div>
<!-- /content -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
Search
</li>
<li>
Info
</li>
</ul>
</div>
<!-- /navbar -->
</div>
<!-- /footer -->
</div>
<!-- /page -->
</body>
</html>
Your selector is wrong, you are missing # in id selector.
Change this
$("registerform").attr("action", url);
to
$("#registerform").attr("action", url);
As a side note, always wrap your code inside DOM ready event which will ensure that DOM is available before trying to find the elements.
$(function(){
//Your code goes here
$('#pageregister').live('pageshow', function (event) {
var url = baseURL + "users/add.json";
$("#registerform").attr("action", url);
});
});