I have used javascript style to imitate a pop-up box(any other idea would be appreciated). I have a function to set it visible or hidden based on some conditions.
I have two buttons on the pop up box ,"close": which closes the popup and sets it as hidden and "save": which saves whatever was on the pop up box.
My function only tells the box to close when i want it to. It does this right. But it takes about 4 seconds for both buttons to be hidden(which is not acceptable). and so i tried to invoke another function that hides both buttons as soon as the box is hidden, but this 4 second interval is still there and i have no idea why.
JAVASCRIPT
function login(showhide) {
if (showhide == "show") {
document.getElementById('popuplogin').style.visibility = "visible";
} else if (showhide == "hide") {
document.getElementById('popuplogin').style.visibility = "hidden";
}
document.getElementById("container1").style.filter = "blur";
}
HTML
<div id ="popuplogin">
<form class ="loginform">
<div class ="backbutton2" onclick="login('hide')"></div>
<input type ="text" placeholder ="Name" id ="loginname" class="boxes" />
<input type="password" placeholder ="Password" id ="loginpassword" class="boxes"/>
<p class ="btn1" onclick ="logger()">LOG IN</p>
</form>
</div>
Related
Basically what I'm trying to do is conditionally show a section of a form. If an input field has either nothing or 0 as inputted, the section is hidden. Otherwise, I want the section to be displayed. While the section does appear when I input numbers in the correct field, it doesn't disappear after I remove the input.
So far, I've tried changing the event listener to listen to the busmiles variable after moving it outside of the function, but that results in the the section never displaying. I'm not sure what's causing this problem either since I'm not very experience in javascript.
HTML file
<label for="weeklybus">On average, how many miles do you take the bus/train in a week?</label><br>
<input name="weeklybus" id="weeklybus" type="number" required>
<br id="oppositeform">
<div id="busmodeform">
<p>Do you typically take the bus, light rail, or heavy rail?</p>
<input name="busmode" id="bus" type="radio" value="bus">
<label for="bus">Bus</label><br>
<input name="busmode" id="light" type="radio" value="light">
<label for="light">Light rail</label><br>
<input name="busmode" id="heavy" type="radio" value="heavy">
<label for="heavy">Heavy rail</label><br>
</div>
Javascript
function showFormSection() {
var busmiles = document.getElementById('weeklybus').value;
const busmode = document.getElementById('busmodeform');
const extralinebreak = document.getElementById('oppositeform');
if (busmiles != "" && busmiles != "0") {
busmode.style.display = 'block';
extralinebreak.style.display = 'hidden';
} else if (busmiles == "") {
busmode.style.display = 'hidden';
extralinebreak.style.display = 'block';
}
}
window.addEventListener('input', showFormSection);
EDIT: Fixed. Changed from hidden --> none.
You have not declared a "style=" attribute in your DIV element.
Too the DIV style should have a property set for "visibility".
<script>
// goes in head
function hideDiv(){
document.getElementById("busmodeform").style.visibility="hidden";
}
</script>
<div id="busmodeform" onblur="hideDiv();" style="visibility:visible;">
If a user clicks the save button as the next action after typing street data the onblur action intercepts the onclick and does not trigger the save. However, if you add some padding (30px) and click above the word save it works but below the word Save it does not work, the same as with no padding. I'm certain users will go right from typing text in the input field then click Save which will fail unless they first click somewhere else and then click Save. I’ve provide html and javascript example below. Is there a way using javascript to solve this issue?
<html>
<script>
function showstreet() {
var x = document.getElementById('street').value;
alert(x);
}
function focused() {
document.getElementById('title').style.display='';
document.getElementById('street').value='';
}
function blured() {
document.getElementById('title').style.display='none';
if (document.getElementById('street').value == '') {
document.getElementById('street').value='street';
}
}
</script>
<style>
.pad5 { padding:5px; }
.pad30 { padding:30px; }
</style>
<body>
<div id="title" class="pad5" style="display:none;">STREET NAME</div>
<div>
<input id="street" type="text" name="street" value="street" class="pad5"
onfocus="focused()" onblur="blured()">
</div>
<br>
<div>
<input type="button" value="Save" class="pad30" onclick="showstreet()">
</div>
</body>
</html>
I converted this to jsfiddle but I'm not doing something right (newbie) https://jsfiddle.net/eyo63mav/26/
use onMouseDown instead of onClick in your save button. Then onMouseDown will be fired before onBlur
below is working code
function showstreet() {
var x = document.getElementById('street').value;
alert(x);
}
function focused() {
document.getElementById('title').style.display = '';
document.getElementById('street').value = '';
}
function blured() {
document.getElementById('title').style.display = 'none';
if (document.getElementById('street').value == '') {
document.getElementById('street').value = 'street';
}
}
<div id="title" class="pad5" style="display:none;">STREET NAME</div>
<div>
<input id="street" type="text" value="street" class="pad5" onfocus="focused()" onblur="blured()">
</div>
<br>
<div>
<input type="button" value="Save" class="pad30" onclick="showstreet()">
</div>
Styling rarely makes a difference with events -- now, while that's a blanket statement and in lots of cases we find the styling of an inline element such as a link or a paragraph becoming problematic with inline events such as OnClick and OnFocus, in your case, adding thirty pixels to the size of a button is not your problem.
The problem with your code is that the variable you're assigning your #title's value to is local (it's inside the scope of showstreet(), of which can only be accessed by aforementioned function) -- nevermind that, it's never used again. You save a value to it, it alerts the user, and that's it -- it's never reassigned nor reused, so while it'll forever stay as the street name they entered, you'll never see it unless you apply it to something.
It took me a while to figure out what exactly you're trying to save, but I think I've managed it.
Here's the code I've created:
var streetValue = "Your street will appear here.";
function clickedField() {
// Init title
document.getElementById('title').innerHTML = streetValue;
// Reset field
document.getElementById('street').value = '';
}
function saveValue() {
// Reassign streetValue
streetValue = document.getElementById('street').value;
// Checking if value was left empty
if (streetValue === '') {
document.getElementById('title').innerHTML = "Error: No Street Entered!";
} else {
document.getElementById('title').innerHTML = streetValue;
}
}
(I'm not entirely sure what you had onblur for, but it should be very easy to insert back. If you need some help with that, comment on my reply, I'll be happy to.)
Now if we update the HTML with the approprate functions:
<div id="title" class="pad5" style="">STREET NAME</div>
<div>
<input id="street" type="text" name="street" value="street" class="pad5"
onfocus="clickedField()">
</div>
<br>
<div>
<input type="button" value="Save" class="pad30" onclick="saveValue()">
</div>
<script type="text/javascript">
function CheckBox(checkerbox, div) {
if (checkerbox.checked) {
document.getElementById(div, Urbanoo).style.display = "block"
} else {
document.getElementById(div, Rurall).style.display = "none"
$("#Rurall").find("*").prop("disabled", true);
}
}
function CheckBox1(checkerbox1, div) {
if (checkerbox1.checked) {
document.getElementById(div, Rurall).style.display = "block"
} else {
document.getElementById(div, Urbanoo).style.display = "none"
$("#Urbanoo").find("*").prop("disabled", true);
}
}
</script>
How to hide a checkbox in function another and disabled all elements to the checkbox disabled?
<input name="Rural" type="checkbox" onclick="CheckBox1(this,'Rurall');" />
<input name="Urbano" type="checkbox" onclick="CheckBox(this,'Urbanoo');" /> Urbanoo </center>
<div id="Urbanoo" style="display:none" >
<g:render template="../DomUrbano/form"/>
</div>
The problem is that when I turn on a check box not the other box is not disabled
<div id="Rurall" style="display:none">
</br>
<g:render template="../DomRural/form"/>
</div>
I think I see what you are attempting but frankly it's less than super clear.
SO what I think you want is;
Hide other checkboxes if I check one
If I do uncheck a box, show the other one again
Show a "partner" area if I check a box
Disable other NOT partner area inputs if I check a box
I modified your markup some to make it easier and also added some additional to clearly show what is happening. I also added a data element for the partner to the input so we can make this all simpler and only have one function; now called via an event handler and NOT with inline code in markup.
Revised markup:
<span class="myinputs"><input class="mycheck" name="Rural" type="checkbox" data-partner="#Rurall" /> Rurall</span>
<span class="myinputs"><input class="mycheck" name="Urbano" type="checkbox" data-partner="#Urbanoo" /> Urbanoo</span>
<div id="Urbanoo" class="hidden others">the Urbannoo
<g:render template="../DomUrbano/form" />
<input type="textbox"/>
</div>
<div id="Rurall" class="hidden others">the Rurall
<g:render template="../DomRural/form" />
<input type="textbox"/>
</div>
Code:
$('.mycheck').on('change', function() {
var amIChecked = $(this)[0].checked;
$(this).parent().siblings('.myinputs').toggle(!amIChecked);
var pt = $(this).data('partner');// get the partner selector
$(pt).toggle(amIChecked);// show the partner in the others list
//do the enable in the partner
$('.others').filter(pt).toggle(amIChecked).find("*").prop("disabled", !amIChecked);
//do the disable in the othes list not the partner
$('.others').not(pt).find("*").prop("disabled", amIChecked);
});
Play with it all here: https://jsfiddle.net/MarkSchultheiss/cLyb103x/1/
I'm having a bit of trouble with this assigment and would like your help.
We are meant to create a product registration form page with all the regular expressions and everything and display the correct error when the regexes don't match.
I am trying to print a tick or say OK next to a form field but I can't get the right function. My form right now looks like this: http://www.imageurlhost.com/images/98zrdmrmsvbxnwowrvsf.png
The "Please enter product ...." is activated by jquery with a slideUp and slideDown function with onblur on the text field.
So I want to display OK where the red circle is after you click away from it, and then if you change it to something that doesn't match the OK disappears and my alert shows up. So this is my code so far:
My html form:
<div>
<input type="text" class="name" placeholder="Name" name="name" onblur="return validateProductName()"> <p class ="p11" id="p1"></p>
<p class="name-help">Please enter a product name between 1-50 characters.</p>
</div>
My css:
.p11 {
float: right;}
My jQuery:
$(".name").focus(function(){
$(".name-help").slideDown(500);
}).blur(function(){
$(".name-help").slideUp(500);
});
And then my JavaScript:
// Function to validate product name
function validateProductName() {
// if statement for product name
if (document.myForm.name.value.trim().search(pName) == -1) {
alert("Invalid product name. Please note: product name should have 1-50 characters.");
} else {
document.getElementById("p1").innerHTML = "OK";
}
}
So, it prints the OK in between the field on the right side, but I want it right next to the field like I showed in the picture and I can't get this to work! I want it to disappear if I go back to the form and put something wrong...
Thanks guys!
I assume, you have no problem with the jQuery itself, you have a problem of showing it next to input box. So,
Create a <span id='tick'> tag after the input field
And once it passes the validation, use jquery to show the tick
$('#tick').html('whatever you want');
EDIT: You dont have to include the float:left on span
Check out the fiddle link
EDIT:
In this validation function, just show and hide according to the validation results
// Function to validate product name
function validateProductName() {
// if statement for product name
if (document.myForm.name.value.trim().search(pName) == -1) {
document.getElementById("tick").style.display = 'none'; // to hide the OK text if enterd the wrong input
} else {
document.getElementById("tick").innerHTML = "OK"; //NOTE: This is for showing the ok text
document.getElementById("tick").style.display= "block";
}
}
Create a span wherever you want your tick to be displayed and they do this,
$("#btn").click(function() {
if ($("#txtname").val() == "") //can be any check
{
$("#g").attr("style", "display:block;width:20px");
} else {
$("#g").attr("style", "display:none;width:20px;");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="txtname" style="display:inline-block" placeholder="enter name" />
<img id="g" style="width:50px;display:none;" src="http://pixabay.com/static/uploads/photo/2014/04/02/10/19/check-303494_640.png" />
<br/>
<input type="button" id="btn" value="click to submit" />
This should work-
<script src="jq.js"></script>
<div>
<input type="text" class="name" placeholder="Name" name="name" id="input"> <span class ="p11" id="p1"></span>
<p class="name-help">Please enter a product name between 1-50 characters.</p>
</div>
<style>
p11 {
float: right;}
</style>
<script>
$(".name").focus(function(){
$(".name-help").slideDown(500);
}).blur(function(){
$(".name-help").slideUp(500);
validateProductName()
});
</script>
<script>
// Function to validate product name
function validateProductName() {
// if statement for product name
if (document.getElementById("input").value.trim() == "" || document.getElementById("input").value.length > 50 ) {
alert("Invalid product name. Please note: product name should have 1-50 characters.");
document.getElementById("p1").innerHTML = "";
} else {
document.getElementById("p1").innerHTML = "OK";
}
}
</script>
I have this HTML code where I have a div and a button.
Now, with jQuery I made the div "hidden" and it will only show when you have selected the correct <option>. But now the button is only visible if the div is too.
HTML:
<div id="great">
Do you like the netherlands?
<input type="text" id="greatBox" value="Why..."
</div>
<input type="button" id="submitbutton" value="Submit">
and the JS/Jquery looks like this
(its spread over the file, the rest is not needed (i guess))
$('#great').hide()
$("#selectlist").change(function(){
var value = $(this).val();
if ($(this).val() == "netherlands") {
$('#great').slideDown(750)
$('#other').hide()
}
if ($(this).val() == "other") {
$('#great').hide()
}
});
There is not yet any jQuery/javascript bound to the button.
You need to close <input type="text" id="greatBox" value="Why..." >
Because it's open the div never gets closed and everything after it will be hidden.