I have a html code:
<div class="fieldWrapper">
<label for="id_planner_step_email_address">To:</label>
<input type="email" name="planner_step_email_address" value="a#sp.edu.sg" maxlength="254" required id="id_planner_step_email_address" />
<span>
<a href=""><button type="button" class="btn-secondary" id="send_email_btn>
<i class="fas fa-envelope-square"></i> Send Email:
</button></a>
</div>
How do i make it so that if theres any changes made to the id_planner_step_email_address input field the send_email_btn gets disabled
Why not make it readonly?
Anyway - I fixed your invalid HTML -no need to wrap a button in an anchor and you had a lose span there
I allow changing if they change back
jQuery:
$(function() {
$("#send_email_btn").prop("disabled", false);
$("#id_planner_step_email_address").on("input", function() {
$("#send_email_btn").prop("disabled", this.value!=this.defaultValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fieldWrapper">
<label for="id_planner_step_email_address">To:</label>
<input type="email" name="planner_step_email_address" value="a#sp.edu.sg" maxlength="254" required id="id_planner_step_email_address" />
<button type="button" class="btn-secondary" id="send_email_btn" disabled="disabled">
<i class="fas fa-envelope-square"></i> Send Email: </button>
</div>
Plain JS
window.addEventListener("load",function() {
document.getElementById("send_email_btn").disabled=false;
document.getElementById("id_planner_step_email_address").addEventListener("input", function() {
document.getElementById("send_email_btn").disabled=this.value!=this.defaultValue;
});
});
<div class="fieldWrapper">
<label for="id_planner_step_email_address">To:</label>
<input type="email" name="planner_step_email_address" value="a#sp.edu.sg" maxlength="254" required id="id_planner_step_email_address" />
<button type="button" class="btn-secondary" id="send_email_btn" disabled="disabled">
<i class="fas fa-envelope-square"></i> Send Email: </button>
</div>
Here the code allows the disabled button to back to enable if the email gets back to its original address.
var currentEmail = $("#id_planner_step_email_address").val();
$(function() {
$("#id_planner_step_email_address").on("input", function() {
if (currentEmail != $(this).val()) {
$("#send_email_btn").prop("disabled", true);
} else {
$("#send_email_btn").prop("disabled", false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fieldWrapper">
<label for="id_planner_step_email_address">To:</label>
<input type="email" name="planner_step_email_address" value="a#sp.edu.sg" maxlength="254" required id="id_planner_step_email_address" />
<button type="button" class="btn-secondary" id="send_email_btn">
<i class="fas fa-envelope-square"></i> Send Email: </button>
</div>
Add a script tag to the end of your body...and note that your <span> tag is not closed.
<div class="fieldWrapper">
<label for="id_planner_step_email_address">To:</label>
<input type="email" name="planner_step_email_address" value="a#sp.edu.sg" maxlength="254" required id="id_planner_step_email_address" />
<span>
<a href="">
<button type="button" class="btn-secondary" id="send_email_btn">
<i class="fas fa-envelope-square"></i> Send Email:
</button>
</a>
</span>
</div>
<script>
const input = document.querySelector('#id_planner_step_email_address');
const button = document.querySelector('#send_email_btn');
input.addEventListener('change', button.disabled = true);
</script>
First of all fix your invalid HTML, missing some of the ending quotes ".Then you can try this way with inline oninput event or input on text element,
With inline usingoninput:
function disableButton() {
document.getElementById("send_email_btn").disabled = true;
}
<div class="fieldWrapper">
<label for="id_planner_step_email_address">To:</label>
<input type="email" name="planner_step_email_address" value="a#sp.edu.sg" maxlength="254" required id="id_planner_step_email_address" oninput="disableButton()" />
<span>
<a href=""><button type="button" class="btn-secondary" id="send_email_btn">
<i class="fas fa-envelope-square"></i> Send Email:
</button></a>
</div>
Without inline using input:
window.addEventListener('load', function() {
document.getElementById('id_planner_step_email_address').addEventListener('input', function() {
document.getElementById("send_email_btn").disabled = true;
})
})
<div class="fieldWrapper">
<label for="id_planner_step_email_address">To:</label>
<input type="email" name="planner_step_email_address" value="a#sp.edu.sg" maxlength="254" required id="id_planner_step_email_address" />
<span>
<a href=""><button type="button" class="btn-secondary" id="send_email_btn">
<i class="fas fa-envelope-square"></i> Send Email:
</button></a>
</div>
Related
I want to create login form, and then the result is going to another page, using js to catch the value and create the process.
I have success created it using onclick, but I want to change onclick to onsubmit as I don't want to click the button, just press 'Enter' keyboard, the process is working. I have tried change from onclick to onsubmit process, but I still not get the value on the js page.
Here's the login form
<form >
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Phone Number" name="phone_number" id="phone_number">
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" class="form-control" placeholder="Password" name="password" id="password">
</div>
<div class="form-group">
<input type="button" value="Login" class="btn float-justify login_btn" onClick="login()">
</div>
</form>
<script src="<?= base_url() ?>assets/js-process/login/login.js" type="text/javascript"></script>
Here's the js page
function login()
{
var phone_number = $('#phone_number').val();
var password = $('#password').val();
console.log(phone_number)
}
I have changed the onclick to onsubmit, but I can't get the value on the js page again.
here's my change
<form id="myform" onsubmit="login()">
......
<div class="form-group">
<input type="submit" value="Submit" class="btn float-justify login_btn">
</div>
Do you know where's the error on my code ?
Thank you
As I see it , everything is good , where should be looking now on 2 things
first its jquery you are using but i can not see its link
second check your base url , it is properly being generated or not
Below you can see its working on onclick
same way you can do with on submit but you have to pass event in function so that you can stop its default action . you can do that using event.preventDefault();
function login(e)
{
e.preventDefault();
var phone_number = $('#phone_number').val();
var password = $('#password').val();
alert(phone_number)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onSubmit="login(event)">
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Phone Number" name="phone_number" id="phone_number">
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" class="form-control" placeholder="Password" name="password" id="password">
</div>
<div class="form-group">
<input type="submit" value="Login" class="btn float-justify login_btn" >
</div>
</form>
Statement
This code worked so far but I would like to make it run without using <form>...</form>
What should I need to change in the javascript part? Any method or suggestion?
Using element.onclick() instead of using element.addEventListener() ?
Expectation
It will be able to run and get exactly the same result as before.
<div class="row justify-content-center">
<div class="container">
<h3>Please enter location name :</h3>
<form id="locPost">
<!--HERE-->
<div class="form-group">
<input size="50" type="text" id="getGPS" required>
</div>
<button style="font-size:18px;border:2px solid black" type="submit" name="Convert" class="btn btn-primary">Convert <i class="fas fa-location-arrow"></i></button>
<button style="font-size:18px;border:2px solid black" onclick="location.reload();" class="btn btn-success">Refresh Page <i class="fas fa-sync"></i></button>
<div class="form-group"></div>
<div class="form-group">
<label>Latitude</label>:
<input id="latte" style="font-size:1em" type="text" maxlength="10" step="any" name="lat" readonly>
</div>
<div class="form-group">
<label>Longitude</label>:
<input id="longer" style="font-size:1em" type="text" maxlength="10" step="any" name="lng" readonly>
</div>
<div class="row justify-content-center">
<button style="font-size:18px;border:2px solid black" onclick="window.close()" class="btn btn-danger">Close Geoconverter <i class="fas fa-times"></i></button>
</div>
</form>
<!--AND HERE-->
</div>
</div>
<script>
// Get location form
var locationForm = document.getElementById('locPost');
// Listen for submit
locationForm.addEventListener('submit', geocode);
function geocode(e) {
// Prevent actual submit
e.preventDefault();
var location = document.getElementById('getGPS').value;
axios.get('https://maps.googleapis.com/maps/api/geocode/json', {
params: {
address: location,
key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' //Paste your Google API KEY HERE!
}
})
.then(function(response) {
// Get Lat-Long
var latpos = response.data.results[0].geometry.location.lat;
var lngpos = response.data.results[0].geometry.location.lng;
document.getElementById('latte').value = latpos;
document.getElementById('longer').value = lngpos;
})
}
</script>
Add an event listener on the button and call the geocode function on its click:
<div class="row justify-content-center">
<div class="container">
<h3>Please enter location name :</h3>
<form id="locPost">
<!--HERE-->
<div class="form-group">
<input size="50" type="text" id="getGPS" required>
</div>
<button style="font-size:18px;border:2px solid black" type="submit" name="Convert" class="btn btn-primary" id="convert">Convert <i class="fas fa-location-arrow"></i></button>
<button style="font-size:18px;border:2px solid black" onclick="location.reload();" class="btn btn-success">Refresh Page <i class="fas fa-sync"></i></button>
<div class="form-group"></div>
<div class="form-group">
<label>Latitude</label>:
<input id="latte" style="font-size:1em" type="text" maxlength="10" step="any" name="lat" readonly>
</div>
<div class="form-group">
<label>Longitude</label>:
<input id="longer" style="font-size:1em" type="text" maxlength="10" step="any" name="lng" readonly>
</div>
<div class="row justify-content-center">
<button style="font-size:18px;border:2px solid black" onclick="window.close()" class="btn btn-danger">Close Geoconverter <i class="fas fa-times"></i></button>
</div>
</form>
<!--AND HERE-->
</div>
</div>
<script>
// Get location form
var button = document.getElementById('convert');
// Listen for submit
button.addEventListener('click', geocode);
function geocode(e) {
// Prevent actual submit
e.preventDefault();
var location = document.getElementById('getGPS').value;
axios.get('https://maps.googleapis.com/maps/api/geocode/json', {
params: {
address: location,
key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' //Paste your Google API KEY HERE!
}
})
.then(function(response) {
// Get Lat-Long
var latpos = response.data.results[0].geometry.location.lat;
var lngpos = response.data.results[0].geometry.location.lng;
document.getElementById('latte').value = latpos;
document.getElementById('longer').value = lngpos;
})
}
</script>
I have a form that is being used as a basic contact form. I have added a checkbox that adds some fields if selected. How can I change the onclick action of the submit button based on if this box is checked or not. Here is what I have currently.
<form class="homeContact">
<label for="chkJob">
Interested in a career? Check to apply
<input type="checkbox" id="chkJob" />
</label>
<div id="dvApply" style="display: none">
Download Application
Download the application. Fill it out and upload below:
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<div id="popErr"></div>
<input type="hidden" name="nospam">
<div class="field">
<div class="label-form">
<input type="text" placeholder="Name *" value="" name="name" id="popName">
<span class="form-icon fa fa-user"></span>
</div>
</div>
<div class="field">
<div class="label-form">
<input type="text" placeholder="Email *" value="" name="email" id="popEmail">
<span class="form-icon fa fa-envelope"></span>
</div>
</div>
<div class="field">
<div class="label-form">
<input type="text" placeholder="Phone *" value="" name="phone" id="popTel">
<span class="form-icon fa fa-phone"></span>
</div>
</div>
<div id="submit_button">
<input type="button" class="button submit" id="contact-submit" onclick="submitForm()" value="Request Information">
</div>
</form>
<script>
jQuery(document).ready(function($) {
$("#chkJob").click(function () {
if ($(this).is(":checked")) {
$("#dvApply").show();
} else {
$("#dvApply").hide();
}
});
});
</script>
You can implement this login into your submitForm function:
function submitForm()
{
if ($('#chkJob').is(":checked")) {
$("#dvApply").show();
} else {
$("#dvApply").hide();
}
}
But if you want dvApply to be toggled every time checkbox button is clicked without waiting for submit button to be clicked you can do something like:
jQuery(document).ready(function($) {
$('#chkJob').change(function() {
$('#dvApply').toggle();
});
});
I am currently working on a website and this particular section requires the user to enter their details in a form. What I am trying to achieve is the following;
If the user hits the submit button and any fields are empty, I want a span element, which is initially set to CSS display none, to show up for each respective input field which has not been filled.
However, nothing seems to be happening when I click on the button. When I go to the console, it does not display any error message.
Can someone please assist? Many thanks.
HTML:
<!-- START OF 'YOUR DETAILS' FORM-->
<section>
<div class="container">
<h3>Step 3: Your Details</h3>
<!-- SLIDE-IN DIV TO REPRESENT DAY PASS -->
<div class="row chosenmembership">
<div class="col-md-12 text-center" id="yourdetails">
<form action="" method="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" placeholder="Email Address" id="email" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Email is required!</span>
</div>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" placeholder="Full Name" id="name" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Name is required!</span>
</div>
<div class="form-group">
<label for="number">Contact Number:</label>
<input type="tel" placeholder="Contact Number" id="number" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Contact Number is required!</span>
</div>
<div class="form-group">
<label for="postcode">Post Code:</label>
<input type="text" placeholder="Post Code" id="postcode" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Post Code is required!</span>
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="tel" placeholder="DD/MM/YYYY" id="dob" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
DOB is required!</span>
</div>
</form>
<div class="form-group">
<input type="submit" id="submit" value="CONTINUE">
</div>
</div>
</div>
</div>
</section>
<!-- END OF YOUR DETAILS FORM -->
JS / JQUERY:
$("#submit").click(function(){
var $formValues = $(".your-details");
var $warning = $(".warnings");
$($formValues).each(function(index){
if ($(this).val("")){
$($warning[index]).css("display","block");
}
})
})
When your running this code $($formValues).each(function(index){if ($(this).val("")){ console.log(this) and see in which context your function is running, the issue is that every time you write a function declaration it creates a new this context and thus the previous this is lost.
Your selectors are kind of redundant, keep the form from submission and show the warnings when any are empty seems to be your intent.
$("#submit").click(function(e) {
$(".your-details").each(function(index) {
if ($(this).val() =="") {
e.preventDefault();// no submit if not filled out
$(this).next('.warning').css("display", "block");// next sibling show
}
});
});
Thought about this for a bit and believe you might handle the form submit instead
$("form").on('submit', function(e) {
$(this).find('.warning').css("display", "none");// hide in case they fix input values
$(this).find(".your-details").each(function(index) {
if ($(this).val() =="") {
$(this).next('.warning').css("display", "block");// next sibling show
}
});
});
Alternately you might use a filter.
$("form").on('submit', function(e) {
$(this).find('.warning').css("display", "none");// hide in case they fix input values
var emptyInputs = $(this).find(".your-details")
.filter(function() {
return ($(this).val() =="");
});
if(!!emptyInputs) {
e.preventDefault();
emptyInputs.next('.warning').css("display", "block");
}
});
Except typo, there was one problem more, you are actually setting value, instead of checking it: if ($(this).val("")) If you change it, and fix typo, something like this should work. Simplified, your code could look like this:
$("#submit").click(function(){
var $formValues = $(".your-details");
$($formValues).each(function(index){
if ($(this).val()==''){
$(".warning").eq(index).css("display","block");
}
else {
$(".warning").eq(index).css("display","none");
}
})
})
Demo:
$("#submit").click(function(){
var $formValues = $(".your-details");
$($formValues).each(function(index){
if ($(this).val()==''){
$(".warning").eq(index).css("display","block");
}
else {
$(".warning").eq(index).css("display","none");
}
})
})
.warning {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- START OF 'YOUR DETAILS' FORM-->
<section>
<div class="container">
<h3>Step 3: Your Details</h3>
<!-- SLIDE-IN DIV TO REPRESENT DAY PASS -->
<div class="row chosenmembership">
<div class="col-md-12 text-center" id="yourdetails">
<form action="" method="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" placeholder="Email Address" id="email" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Email is required!</span>
</div>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" placeholder="Full Name" id="name" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Name is required!</span>
</div>
<div class="form-group">
<label for="number">Contact Number:</label>
<input type="tel" placeholder="Contact Number" id="number" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Contact Number is required!</span>
</div>
<div class="form-group">
<label for="postcode">Post Code:</label>
<input type="text" placeholder="Post Code" id="postcode" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Post Code is required!</span>
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="tel" placeholder="DD/MM/YYYY" id="dob" class="form-control your-details">
<span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
DOB is required!</span>
</div>
</form>
<div class="form-group">
<input type="submit" id="submit" value="CONTINUE">
</div>
</div>
</div>
</div>
</section>
<!-- END OF YOUR DETAILS FORM -->
P.S. You can keep your: $($warning[index]) vars, but you should hide warnings, anyway (else block), if field is not empty.
So I have login page and I am trying to replace the login form with the signup form if they click the button to sign up.
Currently I have:
<script>
$(document).ready(function(){
$("button").click(function(){
$("w").replaceWith(function(n){
return "DIV HERE BUT DIVS DO NOT WORK";
});
});
});
</script>
</head>
<body>
<div class="col-lg-6 col-sm-6 col-xs-12 social-login">
<a href="#" class="google_button login_btn">
<i aria-hidden="true" class="fa fa-google-plus-square"></i><span>Continue with Google</span>
</a>
<a href="#" class="facebook_button login_btn">
<i aria-hidden="true" class="fa fa-facebook-square"></i><span>Continue with Facebook</span>
</a>
<a href="#" class="twitter_button login_btn">
<i aria-hidden="true" class="fa fa-twitter-square"></i><span>Continue with Twitter</span>
</a>
<a href="#" class="linkedin_button login_btn">
<i aria-hidden="true" class="fa fa-linkedin-square"></i><span>Continue with Linkedin</span>
</a>
<a href="/signup" class="email_button login_btn">
<i aria-hidden="true" class="fa fa-linkedin-square"></i><span>Continue with Email</span>
</a>
<button>Continue With Email</button> <span class="light_grey">By signing up you indicate that you have read and agree to the <a target="_blank" href="#">Terms of Service</a> and <a target="_blank" href="#">Privacy Policy</a>.</span>
</div>
<form action="" class="signin_form" method="post">
<w><div class="title">Login</div></p></w>
<div class="form_inputs">
<div class="form_column">
<input type="text" name="username" id="username" placeholder="Email" value="" class="username">
</div>
<div class="form_column">
<input type="password" name="password" id="password" placeholder="Password" value="" class="password">
</div>
<div class="form_column">
<span><div class="remember_checkbox"><input type="checkbox" value="" name="remember_checkbox" checked="checked" class="remember_checkbox">Remember Me</div></span><input type="submit" value="Sign In" name="send" class="btn btn-primary pull-right" />
<span>Forgot Password?</span>
</div>
</div>
</form>
</body>
I would like to replace the form class signin_form with:
<form action="" class="signup_form" method="post">
<div class="title">Sign up!</div>
<div class="form_inputs">
<div class="form_column">
<input type="text" name="email" id="email" value="<?php echo $dd; ?>" class="email" placeholder="Email">
</div>
<div class="form_column">
<input type="text" name="username" id="username" placeholder="First Name" value="<?php echo $_POST['username']; ?>">
</div>
<div class="form_column">
<input type="password" name="password" id="password" placeholder="Password" value="" class="password">
<div class="form_column">
<input type="password" id="confirm_password" name="confirm_password" placeholder="Confirm Password" value="" class="confirm_password">
</div>
<div class="form_column">
<span>Already Have an Account?</span><input type="submit" value="Sign Up" name="send" class="btn btn-primary pull-right" />
</div>
</div>
</form>
Using the replaceWith that I am currently using I can replace a single line if it doesn't include a div, if I put in a div it doesn't load anymore.
I think replaceWith is not the right way to achieve the functionality that you want, this is not because you cannot, it is because you will then need to dynamically create a new form and have to hook all the events to the elements in the new form.
Instead you should do the following
Create both the Signin and Signup form
Hide the Signup form in CSS and show only the Signin form
On click of the button Hide the Signin form and show the signup form.
This will be the easiest and safest way to achieve the sort of functionality you are after.