hello i want to hide the extra spacing taken by visibility:hidden. In the code when i select sort by date then it is replaced by default content, but when select sort by topic it comes under sort by date output. But i don't want this. I want to replace o/p of sort of topic to sort by date. I think it comes because of using visibility:hidden. Can anyone suggest me how i remove that space. I used display:none too, but no use.
<html>
<head>
<script>
function onloadfun()
{
document.getElementById("hideall").style.visibility="hidden";
}
function optionCheck()
{
if( document.getElementById("sorting").value=="bydate")
{
document.getElementById("topic1").style.visibility ="visible";
document.getElementById("topic").style.visibility ="hidden";
document.getElementById("showByDefault").style.display ="none";
}
if( document.getElementById("sorting").value =="bytopic")
{
document.getElementById("topic1").style.visibility ="hidden";
document.getElementById("topic").style.visibility ="visible";
document.getElementById("showByDefault").style.display ="none";
}
// validation of dropdownlist
var x = document.getElementById("sorting");
var option = x.options[x.selectedIndex].value;
var strUser1 = x.options[x.selectedIndex].text;
if(option=="s")
{
document.form.options.focus();
return false;
}
return true;
}
</script>
</head>
<body onLoad="onloadfun()">
<form name="form">
<select id="sorting" style="width:140px" onChange="optionCheck()">
<option id="s">---Sort By----</option>
<option value="bydate">Sort By Date</option>
<option value="bytopic">Sort By Topic</option>
</select>
</form>
<br /><br /><hr /><br /><br />
<?php include 'connection.php'; ?>
<div id="showByDefault">
<?php
echo "default content";
?>
</div>
<div id="hideall">
<div id="topic1">
<?php echo "hideing 1"; ?>
</div>
<div id="topic">
<?php echo "hideing 2"; ?>
</div>
</div>
</body>
</html>
Some reading:
visibility
The visibility CSS property has two purposes:
The hidden value hides an element but leaves space where it would
have been. The collapse value hides rows or columns of a table. It
also collapses XUL elements
display
In addition to the many different display box types, the value none
lets you turn off the display of an element; when you use none, all
descendant elements also have their display turned off. The document
is rendered as though the element doesn't exist in the document tre
An example based on your code but using display and setting it by a class using Element.classList.
var sorting = document.getElementById('sorting'),
showByDefault = document.getElementById('showByDefault'),
topic = document.getElementById('topic'),
topic1 = document.getElementById('topic1');
sorting.addEventListener('change', function optionCheck(e) {
var target = e.target;
if (target.value === 's') {
console.log('Do something here.');
} else if (target.value === 'bydate') {
topic1.classList.remove('hide');
topic.classList.add('hide');
showByDefault.classList.add('hide');
} else if (target.value === 'bytopic') {
topic1.classList.add('hide');
topic.classList.remove('hide');
showByDefault.classList.add('hide');
}
}, false);
#sorting {
width: 140px;
}
hr {
margin-top: 2em;
margin-bottom: 2em;
}
.hide {
display: none;
}
<form name="form">
<select id="sorting">
<option value="s">---Sort By----</option>
<option value="bydate">Sort By Date</option>
<option value="bytopic">Sort By Topic</option>
</select>
</form>
<hr>
<div id="showByDefault">"default content";</div>
<div id="topic1" class="hide">"hiding 1";</div>
<div id="topic" class="hide">"hiding 2";</div>
The example is using unobtrusive JavaScript and unobtrusive CSS.
The principles of unobtrusive JavaScript
Change your code as follows.
I preferred to use display:block and display:none instead set visiblity
and also recommend jquery $(selector).show() and $(selector).hide() method.
<html>
<head>
<script>
function onloadfun() {
document.getElementById("hideall").style.display = "none";
}
function optionCheck() {
if (document.getElementById("sorting").value == "bydate") {
document.getElementById("hideall").style.display = "block";
document.getElementById("topic1").style.display = "block";
document.getElementById("topic").style.display = "none";
document.getElementById("showByDefault").style.display = "none";
}
if (document.getElementById("sorting").value == "bytopic") {
document.getElementById("hideall").style.display = "block";
document.getElementById("topic1").style.display = "none";
document.getElementById("topic").style.display = "block";
document.getElementById("showByDefault").style.display = "none";
}
// validation of dropdownlist
var x = document.getElementById("sorting");
var option = x.options[x.selectedIndex].value;
var strUser1 = x.options[x.selectedIndex].text;
if (option == "s") {
document.form.options.focus();
return false;
}
return true;
}
</script>
</head>
<body onLoad="onloadfun()">
<form name="form">
<select id="sorting" style="width:140px" onChange="optionCheck()">
<option id="s">---Sort By----</option>
<option value="bydate">Sort By Date</option>
<option value="bytopic">Sort By Topic</option>
</select>
</form>
<br />
<br />
<hr />
<br />
<br />
<?php //include 'connection.php'; ?>
<div id="showByDefault">
<?php echo "default content"; ?>
</div>
<div id="hideall">
<div id="topic1">
<?php echo "hideing 1"; ?>
</div>
<div id="topic">
<?php echo "hideing 2"; ?>
</div>
</div>
</body>
Try changing above three function in your code.
Use display:none instead of visibility hidden.
See example: http://www.w3schools.com/css/css_display_visibility.asp
Related
I'm trying to create a master card check website where the credit card number, exp date, and CVV will be checked (using JavaScript). If the details are correct, the user will be redirected to another page and the credit card details will be stored in an MYSQL database (using PHP).
I have managed to create the two webpages and the javaScript function is working fine, but the problem is that when a user inputs any incorrect details an alert dialogue will show telling the user to enter the correct (card number, date, ....) WHICH IS WHAT I WANT, but when I click OK it automatically redirects me to the other page and store the details inside the database.
I would like your help in solving this problem so that when a user clicks OK it doesn't redirect to the other webpage, and allows the user to correct the details.
I tried putting onsubmit = "return false" inside the , which worked and allowed the user to re-edit the details, but when it redirects the user to another webpage the PHP/MySQL says "UNDEFINED INDEX" for the fields. I tried removing onsubmit = "return false" and the "UNDEFINED INDEX" error disappeared but the alert dialogue problem reappeared.
Please help with regards to the problem mentioned above.
I tried adding return false after each alert and alert box problem was solved, but the "Undefined Index" mysql error showed for the second page.
HTML CODE FOR FIRST WEBPAGE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Payment Page</title>
<link rel="stylesheet" href='form-style.css' type='text/css' />
</head>
<body>
<div class="mail">
<h2 style="margin-left:0px;">Payment Options</h2>
<hr>
<div id="CardImage/Text">
<br>
<img src="mastercard.png" alt="MasterCard" width="100px" height="50px" align="right">
<h3 style="margin-left:90px;"> Debit / Credit Card</h3>
<br>
</div>
<form name="form1" action="secondpage.php" method="post" onsubmit="return false;" >
<div id= "payment" style="margin-left:50px; background: #F0F0F0;">
<div id= "cardNumber">
<label for="cardno">Card Number</label>
<input type="text" name="creditCard" id="creditCard" style="width:300px;">
</div>
<br>
<div id="date">
<label for="Expiration">Expiration Date</label>
<select id= "month" name="month">
<option selected value="month">Month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
<select id= "year" name="year">
<option selected value="year">Year</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
</select>
</div>
<br>
<div id= "securityCode">
<label for="cvv">Security Code</label>
<input type="text" name="cvv" id="cvv" style="width:100px;">
<p>(3-4 digit code normally on the back of your card)</p>
</div>
<br>
<button type="submit" id="submit-button" onclick="cardCheck(document.form1.payment)">Continue</button>
</form>
</div>
<script src="credit-card-master-validation.js"></script>
</body>
</html>
HTML/PHP CODE FOR SECOND WEBPAGE
<?php
$servername = "localhost";
$database = "creditCard";
$username = "root";
$password = "";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $database);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
echo "Connected successfully";
$sql = "INSERT INTO card (ccnum, expmonth, expyear, seccode)
VALUES ('$_POST[creditCard]','$_POST[month]','$_POST[year]','$_POST[cvv]')";
if (mysqli_query($conn, $sql)) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Payment Successful</title>
<link rel="stylesheet" href='form-style.css' type='text/css' />
</head>
<body>
<div class="mail">
<h2 style="margin-left:0px;">You have successfully entered your credit card details</h2>
<hr>
<div id="CardImage/Text">
<br>
<img src="mastercard.png" alt="MasterCard" width="100px" height="50px" align="right">
<h3 style="margin-left:90px;"> Debit / Credit Card</h3>
<br>
</div>
<div id= "successPaymentConsole" style="margin-left:50px; padding-bottom:200px">
</div>
<script src="credit-card-master-validation.js"></script>
</body>
</html>
JavaScript Code
function cardCheck()
{
var enteredCardNo = document.getElementById("creditCard").value;
var cardNo = /^(?:5[1-5][0-9]{14})$/;
var mon = document.getElementById("month");
var monthSelectedValue = mon.options[mon.selectedIndex].value;
var year = document.getElementById("year");
var yearSelectedValue = year.options[year.selectedIndex].value;
var enteredCVV = document.getElementById("cvv").value;
if(enteredCardNo.match(cardNo)) {
if(monthSelectedValue != "month") {
if(yearSelectedValue !="year") {
if(enteredCVV.length > 2 && enteredCVV.length < 5) {
window.location.href = "secondpage.php";
} else {
alert("Please input a correct CVV");
}
} else {
alert("Please select a year");
}
} else {
alert("Please select a month");
}
} else {
alert("Not a valid Mastercard number!");
}
}
When you use return false then you switch off the default submit behavior. Then you do a simple redirection by changing href - so the form does not pass the data to the second page (all the $_POST data is empty) - that's why you have the error. So - what you can do:
Add id param to the form, eg:
<form id="creditCardForm" name="form1" action="secondpage.php" method="post" >
and then use preventDefault in your cardCheck function. It will prevent the form submission so you have to submit the form manually if the data is fine:
function cardCheck()
{
event.preventDefault(); //here you prevent it from being submitted every time
var enteredCardNo = document.getElementById("creditCard").value;
var cardNo = /^(?:5[1-5][0-9]{14})$/;
var mon = document.getElementById("month");
var monthSelectedValue = mon.options[mon.selectedIndex].value;
var year = document.getElementById("year");
var yearSelectedValue = year.options[year.selectedIndex].value;
var enteredCVV = document.getElementById("cvv").value;
if(enteredCardNo.match(cardNo)) {
if(monthSelectedValue != "month") {
if(yearSelectedValue !="year") {
if(enteredCVV.length > 2 && enteredCVV.length < 5) {
document.getElementById("creditCardForm").submit(); //here's the form submittion
} else {
alert("Please input a correct CVV");
}
} else {
alert("Please select a year");
}
} else {
alert("Please select a month");
}
} else {
alert("Not a valid Mastercard number!");
}
}
Didn't try it, but hopefully it will help you to solve the problem.
Remove the onsubmit attribute from your <form> element in the HTML. Try to use addEventListener in JavaScript to listen for events.
If we use the cardCheck function as the callback to the submit event, we can control inside the function what will happen with the event. Using event.preventDefault will prevent the form from submitting. When you use event.preventDefault in, for example a click event, it will prevent the default click behavior. So now the form won't submit and you can give it the behavior you want.
I've modified your nested if statements to a structure which does not require nesting. In my opinion, this is much more readable. The return keyword is essential in this. Whenever an if statement is true, the function will stop. Only if all the if statements result in false, (which means all input is correct) the user will be routed to the next page.
var form = document.querySelector('form[name="form1"]');
form.addEventListener('submit', cardCheck);
function cardCheck(event)
{
// Don't execute the default submit behavior.
event.preventDefault();
var enteredCardNo = document.getElementById("creditCard").value;
var cardNo = /^(?:5[1-5][0-9]{14})$/;
var mon = document.getElementById("month");
var monthSelectedValue = mon.options[mon.selectedIndex].value;
var year = document.getElementById("year");
var yearSelectedValue = year.options[year.selectedIndex].value;
var enteredCVV = document.getElementById("cvv").value;
if (!enteredCardNo.match(cardNo)) {
alert("Not a valid Mastercard number!");
return;
}
if (monthSelectedValue === "month") {
alert("Please select a month");
return;
}
if (yearSelectedValue === "year") {
alert("Please select a year");
return;
}
if (!(enteredCVV.length > 2 && enteredCVV.length < 5)) {
alert("Please input a correct CVV");
return;
}
window.location.href = "secondpage.php";
}
One way to resolve this problem is by using only onsubmit.
Remove onclick from the Continue(submit) button
<button type="submit" id="submit-button">Continue</button>
Change the form element so that it calls cardCheck on submit like below
<form name="form1" action="secondpage.php" method="post" onsubmit="return cardCheck(document.form1.payment)">
Inside you cardCheck if everything is alright return true else return false. Also remove the submit() call. Here is the updated code
function cardCheck()
{
event.preventDefault(); //here you prevent it from being submitted every time
var enteredCardNo = document.getElementById("creditCard").value;
var cardNo = /^(?:5[1-5][0-9]{14})$/;
var mon = document.getElementById("month");
var monthSelectedValue = mon.options[mon.selectedIndex].value;
var year = document.getElementById("year");
var yearSelectedValue = year.options[year.selectedIndex].value;
var enteredCVV = document.getElementById("cvv").value;
if(enteredCardNo.match(cardNo)) {
if(monthSelectedValue != "month") {
if(yearSelectedValue !="year") {
if(enteredCVV.length > 2 && enteredCVV.length < 5) {
return true;
} else {
alert("Please input a correct CVV");
return false;
}
} else {
alert("Please select a year");
return false;
}
} else {
alert("Please select a month");
return false;
}
} else {
alert("Not a valid Mastercard number!");
}
}
I am making a form that will have checkboxes and entry text. When a checkbox is check, related text should appear adjacent to it. This is my current code, but it does not work:
HTML:
<input type="checkbox" class="box1" onchange="showHide()"> Option 1
<div class="hid box1">
<select name="option1">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
Comments: <input type="text" name="option1Comment">
</div>
CSS:
.hid {
display: none;
}
JavaScript:
function showHide() {
var checkBox = document.getElementByClassName(this);
var text = document.getElementByClassName(this "hid");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
There are a couple of things you should fix in your code.
First, you could change the function call on the <input> from
onchange="showHide()" to onchange="showHide(this)"
Then, you could fix the syntax of getElementByClassName on your function or change it to querySelector to get just the one Node you want.
After that you could do something like this to hide or show your <div>:
function showHide(element) {
let checkboxClass = element.classList[0];
let div = document.querySelector("div.hid." + checkboxClass);
div.style.display = (element.checked) ? "block" : "none";
}
I am trying to show the FILE DIV if the user selects the doctor value in the select statement. I know the if statement works because I also print the value in the console which works perfectly fine. I toggle my divs in the same exact manner in my other webpages so I'm not understanding what's going on with this one in particular.
function viewFile(){
var file = document.getElementById("doclicense");
var type = document.getElementById('accountType').value;
if(type === 'doctor') {
file.style.display = "block";
console.log(type);
}
}
.hidden{
display : none;
}
<div>
<select id="accountType" name="type" class="form-control" onchange="viewFile()">
<option required>Account Type</option>
<option value="doctor" name="doctor" id="doctor">Doctor</option>
<option value="regular" name="regular" id="reg">Regular Account</option>
</select>
</div>
<div class="hidden file" id="doclicense">
<input type="file" name="license" />
<input type="submit"/>
</div>
****************************************EDIT-WORKAROUND**********************
Since my code refused to work, I added a line of code with 'head' being the title and not a real value. Thanks to everyone who contributed. I took out the hidden class altogether but when I add it, it still doesn't work correctly.
function viewDocFile() {
var file = document.getElementById("doclicense");
var type = document.getElementById('accountType').value;
if (type === 'regular' || type === 'head') {
file.style.display = "none";
console.log(type);
} else {
file.style.display = "block";
console.log(type);
}
}
***************************FINAL-EDIT************************
Kept the original code, but added the CSS inline.
<div class="form-group col-md-6" id="doclicense" style="display:none;">
Works perfectly now.
Here is an example of how this code should be written (even if there are still horrors)
// declare them here and not in a function where they will be redone each time the function is called
const
file_IHM = document.querySelector('#doclicense')
,
type_IHM = document.querySelector('#accountType') // and not with .value ...!
;
type_IHM.onchange = function()
{
file_IHM.style.display = (this.value==='doctor')?"block":"none";
console.log('type_IHM.value', this.value );
}
#doclicense { display : none; }
<div>
<select id="accountType" name="type" class="form-control" > <!-- let the js in the js part -->
<option required>Account Type</option>
<option value="doctor" id="doctor" >Doctor</option>
<option value="regular" id="regular" >Regular Account</option>
</select>
</div>
<div class="file-class" id="doclicense"> <!-- do not use class="hidden... -->
<input type="file" name="license" />
<input type="submit" /> <!-- there is no form anywhere... why don't you use <button> ?? -->
</div>
If that what your code really looks like, did you add your js in a <script></script> tag?
Or do you want to toggle the hide and show of the div?
if so this answer may help
<select id="accountType" name="type" class="form-control" onchange="viewFile()"><option required>Account Type</option>
<option value="doctor" name="doctor" id="doctor">Doctor</option>
<option value="regular" name="regular" id="reg">Regular Account</option>
</select>
</div>
<div class="hidden file" id="doclicense">
<input type="file" name="license" />
<input type="submit"/>
</div>
<script>
function viewFile(){
var file = document.getElementById("doclicense");
var type = document.getElementById('accountType').value;
if(type === 'doctor') {
file.style.display = "block";
console.log(type);
}else{
file.style.display = "none";
console.log(type);
}
}
</script>
i have a page containing a form, there's a javascript listener on input type select , the event is onchange, depending on the option chosen from the select
the page will display a block of inputs (div), i am using hide and show to display or hide a block of html elements, one of those divs (div 2) has an input type select also with onchange event with ajax call . my first problem is that after hitting validate button of the form browser brings the default div i want that he stay at the last previous div , second problem is that div 2 after refresh the ajax call does not bring any data , its logical since the event is on change.
so want if div 2 has been displayed , the ajax call works after refresh .
this my html code
<form id="boxpanel" class="form-panel" method='POST' enctype='multipart/form-data' action='<?php echo URL.htmlspecialchars('ads');?>'>
<div>
<label for='catego'><b>categories: </b><span>(*)</span></label>
<span><select name="catego" id="catego">
<option value='0'>select a category </option>
<?php
foreach($this->categories as $key => $value) { ?>
<option value=<?php echo $value['id'];?> <?php if (isset($_POST['catego']) && $_POST['catego'] == $value['id']){ echo 'selected';}else{ echo '';}?>> <?php echo $value['categorie'] ;?></option>
<?php
}
?>
</select><br /></span>
</div>
<div id="div12" class="hide">
<br />
<div>
<label for='mark'><b>cars:</b> <span>(*)</span></label>
<select name='cars' id='cars' onchange="showHint(this.value)">
<option value=0>s1</option>
<option value=2>s2</option>
<option value=3>s3</option>
</select>
</div>
<br />
<div>
<label for='categos'><b>Models:</b></label>
<select id="txtHintts" name="model" class="form-control">
</select>
</div>
<br />
</div>
<div id="div13" class="hide">
<br />
<div>
<label for='wheels'><b>wheels:</b> <span>(*)</span></label>
<select name='wheels' id='wheels'>
<option value=0>c</option>
<option value=2>v</option>
<option value=3>v</option>
</select>
</div>
<br />
<div>
<label for='wheels'><b>colors:</b> <span>(*)</span></label>
<select name='colors' id='colors'>
<option value=0>a</option>
<option value=2>d</option>
<option value=3>c</option>
</select>
</div>
<br />
</div>
</div>
this is how i make hide and show works
<script>
function catego() {
if ($('#catego').val() == 1 ) {
$('#div12').removeClass('hide');
$('#div13').addClass('hide');
}
if ($('#catego').val() == 2) {
$('#div12').addClass('hide');
$('#div13').removeClass('hide');
}
}
$('#catego').on('change', catego);
$( document ).ready(function() {
catego();
});
</script>
this is my ajax call
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHintts").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHintts").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "/gethint?q=" + str, true);
xmlhttp.send();
}
}
</script>
Remove the inline calling of
<select name='cars' id='cars' onchange="showHint(this.value)">
Call this method in the js after the show/hide is done.
Also, keep all the js events inside document.ready.
I have a page where, depending on whether the value of a combobox is false (no), an input box should be hidden and a fieldset disabled. When the combobox's value changes to true (yes), the form should show the input box and enable the fieldset.
This is what I have so far:
<html>
<head>
<title>combo</title>
<script language="javascript">
function ToggleDisplay(Section, boolHide) {
if (boolHide == true) {
Section.style.display = "none";
}
else {
Section.style.display = "";
}
}
function disableElement(element, boolHide)
{
var input =
document.getElementById(element).getElementsByTagName("input");
for(var i = 0; i < input.length; i++)
{
input[i].setAttribute("disabled",boolHide);
}
}
function hideShowElement(CurrentSection, OtherSection, DisableSection)
{
var sectionVal = CurrentSection.value;
if (sectionVal == 0) {
ToggleDisplay(OtherSection, true);
//disableGroup (this.form, 'Radio1' , true);
disableElement(DisableSection, "true");
}
else {
ToggleDisplay(OtherSection, false);
//disableGroup (this.form, 'Radio1' , true);
disableElement(DisableSection, "false");
}
}
</script>
</head>
<body>
<form name="testForm" action="" method="post">
Show Hidden Text? <select name="cmbYN"
onchange="hideShowElement(this, MyDIV, 'OptionGrp1');">
<option value="0" selected="selected"></option>
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<div id="MyDIV" style="display: none">
My Hidden Text: <input name="Text1" type="text" />
<br>
</div>
<fieldset id="OptionGrp1" name="Group1">
Option Group<br><br>
Option 1<input name="Radio1" type="radio" checked>
Option 2<input name="Radio1" type="radio">
</fieldset>
</form>
</body>
</html>
This is hiding the input box and disabling the fieldset, but not re-enabling them.
You should change the display back to what it was before, normally block.
if (boolHide){
Section.style.display = "none";
}else {
Section.style.display = "block";
}
Also for the disabled, the proper way is setting the disabled attribute to disabled and removing it afterwards:
for(var i = 0; i < input.length; i++)
{
if(boolHide){
input[i].setAttribute("disabled", "disabled");
}else{
input[i].removeAttribute("disabled");
}
}