Regarding enabling and disabling fields for registration form? - javascript

I have to create a registration form with fields as first name,last name,address,contact no,email.initially only first name shouid be visible as i enter name it should enable last name as i enter last name it should enable address

you could do somthing like this
<form>
<input id='firstname' >
<input id='lastname' disabled>
</form>
<script>
const firsname = document.getElementById('firstname')
const lastname = document.getElementById('lastname')
firstname.oninput = function(){
if(firstname.value.length>0) lastname.disabled = false
else lastname.disabled = true
}
</script>

I have totally different take on this. There is nothing wrong with this approach. In-fact there are many cool UIs design with same terminology. typeform.com is great example for this.
This is very bad practice at SO, whats a point in down rating a new user.
If you cant give a proper suggestion, then you have no right to down rate someone only because you failed to understand his view point.
To answer this :
It will be very bad idea if its just implemented this in wrong way, and user might get annoyed with this.
Its better to use combination of CSS and JS (jquery) to achieve this for great looking, user friendly UI.
Find this small snippet i've created using jQuery might help you.
with little css it can be made to look great!
Press enter after entering detail into text box.
jQuery.extend(jQuery.expr[':'], {
focusable: function(el, index, selector) {
return $(el).is('a, button, :input,[tabindex]');
}
}); // extention to jquery
$("#res").hide();
$("#email").hide();
$("#mobile").hide();
//Focuse Next on Enter press
$(document).on('keypress', 'input,select', function(e) {
if (e.which == 13) {
e.preventDefault();
var $focusable = $(':focusable');
var index = $focusable.index(document.activeElement) + 1;
if (index >= $focusable.length) index = 0;
$focusable.eq(index - 1).hide();
$focusable.eq(index).show();
$focusable.eq(index).focus();
}
});
function subscribeRelease() {
$("#res").show(200);
$(".btn").hide(200);
}
body,
html {
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="container-fluid h-100 justify-content-center">
<div class="row justify-content-center align-middle h-100">
<div class="col-10 text-center align-self-center">
<h1 style="font-size:40pt;">Register</h1>
<form id="register" class="form-inline justify-content-center">
<input type="text" class="form-control" id="name" placeholder="Name" /><br>
<input type="text" class="form-control" id="email" placeholder="Email" /><br>
<input type="text" class="form-control" id="mobile" placeholder="Mobile" /><br>
<br><br><br>
<button class="btn btn-info" onclick="subscribeRelease(); return false;">Submit!</button>
<span id="res"><h3 class="text-success">Registration Completed!</h3></span>
</form>
</div>
</div>
</div>

Related

Add Class on Scroll Issue with Vanilla JS

I am coding a new site for a client and I want to add a class to a div element once the user reaches 100vh. I have given the body an id of "myBody" and the div element that I want to add the class to an id of "quoteForm" and a class of "quote-form" Here is the html of the page...
<body id="myBody">
<div id="quoteForm" class="quote-form">
<div id="quoteFormHead"></div>
<form action="<?php the_permalink(); ?>" method="post">
<div id="quoteFormBody">
<div class="formfullwrapper">
<input type="text" name="message_fname" placeholder="Enter your full name here...">
</div>
<div class="formfullwrapper">
<input type="email" name="message_email" placeholder="Enter your email address here...">
</div>
<div class="formfullwrapper">
<input type="number" name="message_phone" placeholder="Enter your phone number here...">
</div>
<div class="formfullwrapper">
<textarea name="message_msg" placeholder="Details, please! Audience? Word count? Type of document? Tone? Deadlines? Sensitive content?"></textarea>
</div>
</div>
<div id="quoteFormFooter">
<div class="formfullwrapper">
<input type="submit" id="submitform" value="Get my free quote">
</div>
</div>
</form>
</div>
</body>
as you can see its quite a simple form. Below if the javascript logic I have used to add the class name...
document.addEventListener("DOMContentLoaded", function(){
var scrollElement = document.getElementById('myBody');
var scrollElementPos = scrollElement.scrollTop;
var form = document.getElementById('quoteForm');
scrollElement.addEventListener('scroll', function(){
scrollElementPos = scrollElement.scrollTop;
if(scrollElementPos >= 10){
form.classList.add("form-fixed");
} else {
form.classList.remove("form-fixed");
}
console.log(scrollElementPos);
});
});
At present nothing is happening and the class name is not being added to the quote form. Any ideas? Many thanks,
Phillip Dews
Yep its the scroll "On" Window. This is what I came up with and it works a dream...
window.onscroll = function(){
var top = window.pageYOffset || document.documentElement.scrollTop;
var form = document.getElementById('quoteForm');
if (top > 1000) {
form.classList.add("form-fixed");
} else {
form.classList.remove("form-fixed");
}
}

Django, JS/JQuery validate inputs and disable submit button

I have a simple input params that are required. I want to disable my submit button until all the required fields are satisfied. Granted I am new to django, and the particular code I am working on is very old. As a result, post like this or this are not helping.
Current code that I am trying from one of the posts linked and including my own template
<script type="text/javascript">
$(document).ready(function() {
validate();
$('input').on('keyup', validate);
});
function validate() {
var inputsWithValues = 0;
// get all input fields except for type='submit'
var myInputs = $("input:not([type='submit'])");
myInputs.each(function(e) {
// if it has a value, increment the counter
if ($(this).val()) {
inputsWithValues += 1;
}
});
if (inputsWithValues == myInputs.length) {
$("input[type=submit]").prop("disabled", false);
} else {
$("input[type=submit]").prop("disabled", true);
}
}
$('#submit').on('click', function() {
var zip = $('#zip').val();
var email = $('#email').val();
var name = $('#name').val();
//if inputs are valid, take inputs and do something
});
<form class="form-horizontal" action="" method="get" id="dataform">
<div class="form-group">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-3">
<input class="col-md-12" id="zip" type="text" placeholder="Enter zip code" aria-required="true">
</div>
<div class="col-md-3">
<input class="col-md-12" id="name" type="text" placeholder="Enter last name" aria-required="true">
</div>
<div class="col-md-3">
<input class="col-md-12" id="email" type="email" placeholder="Enter email address" aria-required="true">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="btn btn-primary" id="submit" type="submit">Submit</div>
</div>
</div>
</form>
any help on disabling my submit button until input fields are not validated/filled is much appreciated. Again, new to django and I am unable to use existing threads on said topic
From your current code, looks like your selector for the submit input is not actually getting the submit "button". Currently, your template defines the submit as a div and not an input, thus your selectors should be $("div[type=submit]") not $("input[type=submit]")
Better yet, just select by div id $('#submit')
Instead of targeting attributes, I was targeting props. Below is the fix for my particular issue.
if (inputsWithValues === 3) {
$("div[type=submit]").attr("disabled", false);
} else {
$("div[type=submit]").attr("disabled", 'disabled');
}

Javascript input field only being required if shown?

I am new to js/jquery and I am hoping you might be able to help me out with a simple edit to my script. The basis of my script is that I have a set of radio buttons, if the user selects Yes - they're done. However, if they click No, a new input box will popup and ask for more information.
Unfortunately, I have been unable to find a way to make the popup input box be required for submission because it has issues when the user clicks Yes, still being required, but hidden.
Here is my code so far:
function ShowHide(){
if(document.getElementById('spellingN').checked){
document.getElementById("spellingT").style.display = "block";
} else {
document.getElementById("spellingT").style.display = "none";
}
}
<div class="col-md-4">
<div class="radio"><b><input id="spellingY" name="spelling" onchange="ShowHide()" required="" type="radio" value="yes" /> Yes</b></div>
<div class="radio"><b><label for="radios-1"><input id="spellingN" name="spelling" onchange="ShowHide()" required="" type="radio" value="no" /> No </label></b></div>
</div>
</div>
<div id="spellingT" style="display: none;">
<div class="form-group"><b><label class="col-md-4 control-label" for="Spelling-Correction"><b>Question 2a</b> Type the grammatically correct version of the term.</label> </b>
<div class="col-md-4"><b><input class="form-control input-md" id="Grammar-Correction" name="Grammar-Correction" placeholder="" required="" style="width: 100%;" type="text" /></b></div>
</div>
I hope you'll be able to make some sense of it and help me out. Thanks in advance!
You could add this check in your function:
if(document.getElementById('spellingT').style.display == "block"){
//your submission
}
// Element is hidden
if(document.getElementById('spellingT').offsetParent === null)
{
}
// Element is visible
else
{
}
For more details visit https://stackoverflow.com/a/21696585/2240375

jQuery/JS - Hiding specific dynamically created elements/buttons

I've built a simple chat application with message rating functionality. I want to prevent self-ratings by hiding the corresponding rating buttons. So on Bob's screen for example there should be no rating buttons next to Bob's messages.
I've tried to realize that by comparing the #name and #user-name. If they are equal, the rating buttons should be hidden. But it looks like I'm doing that not correctly.
That main problem is that a message div .standard-msg is created dynamically so I need something like "on-dom-change".
Every help appriciated.
$("#standard-msg").on("DOMSubtreeModified", function() {
$('.standard-msg').each(function() {
if ($('#name').val() == $(this).find('#user-name').text()) {
$('button').hide();
}
});
});
<div id="chat-wrapper" class="wrapper">
<div class="message-box" id="message-box">
<div class="standard-msg">
<button class="rating like-btn">Like</button>
<button class="rating dislike-btn">Dislike</button><span style="color:#FF7000" class="user-name">Bob</span> : <span class="user-message">hi</span>
</div>
<div class="standard-msg">
<button class="rating like-btn">Like</button>
<button class="rating dislike-btn">Dislike</button><span style="color:#FF7000" class="user-name">Alice</span> : <span class="user-message">hello</span>
</div>
</div>
<div class="panel">
<input type="text" name="name" id="name" placeholder="Your Name" maxlength="10" />
<input type="text" name="message" id="message" placeholder="Message" maxlength="80" />
<button id="send-btn" class="btn">Send</button>
</div>
</div>
If the buttons were added to the page after the page has loaded then they won't respond to any code (in the page before they were created) that references them. This is because new event listeners are added for the buttons when they are created and somehow they don't pickup on any code older than they are.
To get around this quirk, just add the code dynamically as you add the buttons to the page and it should work.
e.g.
var s = "$('#standard-msg').on('DOMSubtreeModified', function() { $('.standard-msg').each(function() { if ($('#name').val() == $(this).find('#user-name').text()) { $('button').hide(); } }); }); ";
then append to the page,
$("body").append(s);

Validating Form with Javascript (Simple Test)

var name = document.getElementById('contact-name'),
email = document.getElementById('contact-email'),
phone = document.getElementById('contact-phone'),
message = document.getElementById('contact-message');
function checkForm() {
if (name.value == '') {
alert('test');
}
}
I was simply trying to make sure everything was working before I began learning actual client-side validation.
Here is the HTML
<form role='form' name='contactForm' action='#' method="POST" id='contact-form'>
<div class="form-group">
<label for="contact-name">First and Last Name</label>
<input type="text" class="form-control" id="contact-name" name="contactName" placeholder="Enter your name.." pattern="[A-Za-z]+\s[A-Za-z]+">
</div>
<div class="form-group">
<label for="contact-email">Email address</label>
<input type="email" class="form-control" id="contactEmail" name="contactEmail" placeholder="Enter Email" required>
</div>
<div class="form-group">
<label for="contact-phone">Phone Number</label>
<input type="number" class="form-control" id="contactPhone" name="contactPhone" placeholder="Enter Phone Number" required'>
</div>
<div class="form-group">
<label for='contactMessage'>Your Message</label>
<textarea class="form-control" rows="5" placeholder="Enter a brief message" name='contactMessage' id='contact-message' required></textarea>
</div>
<input type="submit" class="btn btn-default" value='Submit' onclick='checkForm()'>
</fieldset>
</form>
I took the required attribute off, and if I leave the name field empty it goes right to the other one when i click submit. To check whether javascript was working at all, i did an basic onclick function that worked.
Maybe someone can explain to me what is wrong with the checkForm function. Thanks in advance.
P.S The form-group and form-control classes belong to bootstrap
Change your javascript to this:
var contactName = document.getElementById('contact-name'),
email = document.getElementById('contact-email'),
phone = document.getElementById('contact-phone'),
message = document.getElementById('contact-message');
function checkForm() {
if (contactName.value === '') {
alert('test');
}
}
Okay, Hobbes, thank you for editing your question, now I can understand your problem.
Your code faces three two issues.
Your control flow. If you want to validate your field, you have to obtain its value upon validation. You instead populate variable name when the page loads, but the user will enter the text only after that. Hence you need to add var someVariableName = document.getElementById(...); to the beginning of the checkForm() function.
global variables. Please do not use them like that, it is a good design to avoid global variables as much as possible, otherwise you bring upon yourself the danger of introducing side effects (or suffering their impact, which happens in your situation). The global context window already contains a variable name and you cannot override that. See window.name in your console. You can of course use var name = ... inside the function or a block.
Even if you fix the above, you will still submit the form. You can prevent the form submission if you end your checkForm() function with return false;
For clarity I append the partial javascript that should work for you:
function checkForm() {
var name = document.getElementById('contact-name');
if (name.value == '') {
alert('test');
return false;
}
}
EDIT: As Eman Z pointed out, the part 1 of the problem does not really prevent the code from working as there's being retrieved an address of an object (thanks, Eman Z!),

Categories

Resources