I have a popup form and I have to validate fields in this form before I close this popup, I need to use this validation with a normal button, not a submit, if the fields are emty I need to mark these on a red box and put the 'This field is empty' after. After I close the form I need to clean up data from form. How should I do this using jQuery and Javascript?
<form id="frmUsers" data-userid="">
<img id="btnClose" src="resources/img/close_window.png">
<h2 id="popupTitle"></h2>
<ul>
<li>
<label for="username">Username:</label>
<input type="text" id="username" name="txtUsername" placeholder="Please select username" class="required"/>
<p></p>
</li>
<li>
<label for="level">Level:</label>
<input type="number" id="level" name="txtLevel" placeholder="Please select level"/>
<p></p>
</li>
<li>
<label for="registrationStatus">RegistrationStatus:</label>
<select name="txtRegistrationStatus" id="registrationStatus"
placeholder="Please select registration status">
<option value="Registered">Registered</option>
<option value="Unregistered">Unregistered</option>
</select>
<p></p>
</li>
<li>
<label for="registrationDate">RegistrationDate:</label>
<input type="text" id="registrationDate" name="txtRegistrationDate"
placeholder="Please select date"/>
<p></p>
</li>
<div class="btnZone">
<input class="btnDown" type="button" value=" " id="btnPopup" />
<input class="btnDown" type="button" value="Cancel" id="btnCancel"/>
</div>
</ul>
</form>
And my form validation function:
function validateForm() {
var txtUsername = $("#username").val();
if(txtUsername == ""){
("#username").css("border-color", "red");
}
// $(":input").each(function () {
// if ($(this).val() == "") {
// $(this).css("border-color", "red");
// // $("p").html("This field is empty");
// // $("input").val("This field is required");
// // alert($(this).attr("id") & " validate error");
// }else{
// $(this).css("border-color", "black");
// }
//
// });
}
You can use one of many popup/modal plugins, but if you want to create your own, than you should do something similar to this:
var txtUsername = $("#username");
function validateForm() {
txtUsernameValid = $.trim(txtUsername.val());
txtUsername.toggleClass('invalid-input', !txtUsernameValid);
return txtUsernameValid;
};
$('[data-popup]').each(function(i) {
var thisButton = $(this);
var toPopup = $(thisButton.data('popup'));
toPopup.wrap('<div class="popup-container"><div class="popup-content"></div></div>');
var popupContainer = toPopup.closest('.popup-container').hide();
popupContainer.find('.popup-content').append('<span class="popup-close">X</span>')
thisButton.on('click', function(e) {
e.preventDefault();
popupContainer.show();
});
popupContainer.find('.popup-close').on('click', function(e) {
popupContainer.hide();
});
popupContainer.find('#btnSave').on('click', function(e) {
/* Save your data, than reset the form */
if( validateForm() ) {
popupContainer.find('form')[0].reset();
popupContainer.hide();
};
});
popupContainer.find('#btnCancel').on('click', function(e) {
popupContainer.find('form')[0].reset();
popupContainer.hide();
});
});
body {
font-family: sans-serif;
}
.popup-container {
background: none rgba(0, 0, 0, .5);
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
text-align: center;
}
.popup-container::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.popup-content {
position: relative;
display: inline-block;
vertical-align: middle;
background: none #fff;
padding: 10px 20px;
text-align: left;
}
form ul {
list-style: none;
padding: 0;
}
.popup-close {
display: inline-block;
padding: 4px;
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
.invalid-input {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-popup="#frmUsers">
Open form
</button>
<form id="frmUsers" data-userid="">
<img id="btnClose" src="resources/img/close_window.png">
<h2 id="popupTitle"></h2>
<ul>
<li>
<label for="username">Username:</label>
<input type="text" id="username" name="txtUsername" placeholder="Please select username" class="required" />
<p></p>
</li>
<li>
<label for="level">Level:</label>
<input type="number" id="level" name="txtLevel" placeholder="Please select level" />
<p></p>
</li>
<li>
<label for="registrationStatus">RegistrationStatus:</label>
<select name="txtRegistrationStatus" id="registrationStatus" placeholder="Please select registration status">
<option value="Registered">Registered</option>
<option value="Unregistered">Unregistered</option>
</select>
<p></p>
</li>
<li>
<label for="registrationDate">RegistrationDate:</label>
<input type="text" id="registrationDate" name="txtRegistrationDate" placeholder="Please select date" />
<p></p>
</li>
<div class="btnZone">
<input class="btnDown" type="button" value="Save" id="btnSave" />
<input class="btnDown" type="button" value="Cancel" id="btnCancel" />
</div>
</ul>
</form>
It is not complicated indeed, but I never try to invent hot water, I just take one of existing plugins, as Magnific Popup.
Same code on JSFiddle.
Related
I have the following code :
i = 0;
function add_task(){
return document.getElementById("tasklist").value += (document.getElementById("addtask").value+"\n");
}
#pos{
position: absolute;
bottom: 25px;
text-align:center;
}
form{
padding-left:70px;}
h1{padding:50px; color:blue}
#body {border:5px solid black;}
<form name="form1">
<label for="addtask">Add task : </label>
<input type="text" id="addtask"/>
<button id="ad" onclick="add_task()">Add task</button><br><br>
<label style="vertical-align:top;">Task list :</label>
<textarea id="tasklist" rows=10>
</textarea>
<div id="pos">
<label for="nexttask">Next task : </label>
<input type="text" id="nexttask"/>
<button id="nt" onclick="next_task">Show Next task</button><br>
</div>
</form>
I need to copy the text entered in textbox and paste in the textarea. But the text is displayed and erased immediately like blinking. I want that to be displayed permanently.
Please guide me!
<button>s, by default are type="submit", so clicking is submitting your form. Add type="button" to your button.
Here's a working version. I think your issue was that buttons within a form will default to type submit if no type is specified.
i = 0;
function add_task(){
return document.getElementById("tasklist").value += (document.getElementById("addtask").value+"\n");
}
function formSubmitted(e) {
// Handle form submit, if needed
return false;
}
function next_task() {
// Not yet implemented
}
#pos{
position: absolute;
bottom: 25px;
text-align:center;
}
form{
padding: 1rem;
}
h1{
padding: 1rem;
margin: 0;
color: blue;
}
#body {
border: 5px solid black;
}
<header>
<h1>To Do list</h1>
</header>
<form name="form1" onsubmit="return formSubmitted(event)">
<label for="addtask">Add task : </label>
<input type="text" id="addtask"/>
<button id="ad" onclick="add_task()">Add task</button><br><br>
<label style="vertical-align:top;">Task list :</label>
<textarea id="tasklist" rows=10></textarea>
<div id="pos">
<label for="nexttask">Next task : </label>
<input type="text" id="nexttask"/>
<button id="nt" onclick="next_task">Show Next task</button><br>
</div>
</form>
The idea is for the user to select the options and the best employment
sector would be suggested by the form based on his selection.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Survey that will will give you suggestion.
</title>
<style>
/* Styling the Body element i.e. Color,
Font, Alignment */
body {
background-color: #05c46b;
font-family: Verdana;
text-align: center;
}
/* Styling the Form (Color, Padding, Shadow) */
form {
background-color: #fff;
max-width: 500px;
margin: 50px auto;
padding: 30px 20px;
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
}
/* Styling form-control Class */
.form-control {
text-align: left;
margin-bottom: 25px;
}
/* Styling form-control Label */
.form-control label {
display: block;
margin-bottom: 10px;
}
/* Styling form-control input,
select, textarea */
.form-control input,
.form-control select,
.form-control textarea {
border: 1px solid #777;
border-radius: 2px;
font-family: inherit;
padding: 10px;
display: block;
width: 95%;
}
/* Styling form-control Radio
button and Checkbox */
.form-control input[type="radio"],
.form-control input[type="checkbox"] {
display: inline-block;
width: auto;
}
/* Styling Button */
button {
background-color: #05c46b;
border: 1px solid #777;
border-radius: 2px;
font-family: inherit;
font-size: 21px;
display: block;
width: 100%;
margin-top: 50px;
margin-bottom: 20px;
}
</style>
</head>
The form is made with HTML. and for javascript operations i have added
value=1 in the checkbox for generating the different output string.
please view the code below to understand better.
<body>
<h1>Your job type survey suggestion quiz</h1>
<!-- Create Form -->
<form id="form">
<!-- Details -->
<div class="form-control">
<label for="name" id="label-name">
Name
</label>
<!-- Input Type Text -->
<input type="text"
id="name"
placeholder="Enter your name" />
</div>
<div class="form-control">
<label for="email" id="label-email">
Email
</label>
<!-- Input Type Email-->
<input type="email"
id="email"
placeholder="Enter your email" />
</div>
<div class="form-control">
<label for="age" id="label-age">
Age
</label>
<!-- Input Type Text -->
<input type="text"
id="age"
placeholder="Enter your age" />
</div>
<div class="form-control">
<label for="role" id="label-role">
Which option best describes you?
</label>
<!-- Dropdown options -->
<select name="role" id="role">
<option value="student">Student</option>
<option value="intern">Intern</option>
<option value="professional">
Professional
</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-control">
<label>
DO you like studying?
</label>
<!-- Input Type Radio Button -->
<label for="recommed-1">
<input type="radio"
id="recommed-1"
name="recommed">Yes</input>
</label>
<label for="recommed-2">
<input type="radio"
id="recommed-2"
name="recommed">No</input>
</label>
<label for="recommed-3">
<input type="radio"
id="recommed-3"
name="recommed">Maybe</input>
</label>
</div>
<div class="form-control">
<label>Skills that you have
<small>(Check all that apply)</small>
</label>
<!-- Input Type Checkbox -->
<label for="inp-1">
<input type="checkbox" name="inp" id="c" value=1>Coding</input></label>
<label for="inp-2">
<input type="checkbox" name="inp" id="d" value=2>Dancing</input></label>
</div>
<button onclick="checkCheckbox()">
Submit
</button>
</form>
Here as of now only 2 questions are in the form, I want to add more
questions and on based of the selection the form will suggest. In this
the alert or any message i`enter code here`s not shown neither there is any error.
<script>
function checkCheckbox() {
var c = document.getElementById("c");
var d = document.getElementById("d");
var add=0
if (c.checked == true){
var y = document.getElementById("c").value;
var add=y;
return add;
}
else if (d.checked == true){
var n = document.getElementById("d").value;
var add += n;
}
else {
return document.getElementById("error").innerHTML = "*Please mark any of checkbox";
}
if(add==2){
alert('You are multi-talented! become a dancer or a coder');
}
else{
alert('Become a coder');
</script>
</body>
</html>
here on selecting dancing and coding a different output should be
given and on selecting either dancing or either coding a different
output string should be shown. please suggest for any modifications or
if there is a better way to complete this idea.
There are several errors in the script section. You can use Web Developer debugging in your browser to check them out. I can see that you are new to coding in general, so there are a couple of common mistakes we've all made in the beginning.
This is one way of writing the function so it works as I think you intended it:
function checkCheckbox() {
var c = document.getElementById("c");
var d = document.getElementById("d");
var add = 0, val;
if (c.checked == true){
val = "coder";
add += 1;
}
if (d.checked == true){
val = "dancer";
add += 1;
}
if (add == 2) {
alert('You are multi-talented! become a dancer or a coder');
return true;
}
else if (add == 1) {
alert('Become a ' + val);
return true;
}
else {
document.getElementById("error").innerHTML = "*Please mark any of checkbox";
return false;
}
}
Also, you need to add return in the event handler of the button, to avoid it submitting when the form is invalid:
<button onclick="return checkCheckbox()">Submit</button>
And lastly add an element for the error message that is referred to in the script. Something like:
<div id="error"></div>
What I try to achieve:
I'm working on a code, which does fetch categories together with other elements from a database (php & mysql).
These elements/nodes are all in a "<label> ... </label>" for a radio button.
If a user clicks on one of these labels for a radio button, the category name and an img, which are also in the label, should how up ALSO in a other "<div id="selection"> ... </div>".
What does work:
By clicking on a radiobutton/label, I already can fetch the radioButton value (in my case the value must be the the category id).
What doesn't work:
I cant fetch the other elements in this label and display it ALSO in a other span
VERY IMPORTANT!: The content in the labels getting fetched from a database, so it is dynamically!
Here is a simple version of my code without php elements, but the output should be kinda the same.
function check() {
var radioBttn = document.querySelectorAll("input[name = 'pet']");
var countRadioBttn = radioBttn.length;
for (i = 0; i < countRadioBttn; i++) {
if (radioBttn[i].checked) {
selection.innerHTML = "You selected a/n " + radioBttn[i].value + ",<br>good choice!";
}
}
}
*{margin: 0; padding: 0;font-family: arial; font-family: ubuntu; -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;}
b{color: dodgerBlue;}
body{background-color: rgba(50,50,50);}
#option{width: 250px; height: 100px; background-color: rgba(255,255,255,.3); margin: 10px; padding: 10px; color: rgba(255,255,255,.9);}
#selection{width: 250px; height: 55px; background-color: rgba(100,100,100,.3); margin: 10px; padding: 10px; color: lightgreen;}
<div id="option">
<b>Option Box</b>
<br>
<label>
<input onclick="check()" type="radio" name="pet" class="rb_category" value="id:1">
<span>Cat</span>
<img src=""></img>
</label>
<br>
<label>
<input onclick="check()" type="radio" name="pet" class="rb_category" value="id:2">
<span>Dog</span>
<img src=""></img>
</label>
<br>
<label>
<input onclick="check()" type="radio" name="pet" class="rb_category" value="id:3">
<span>Hamster</span>
<img src=""></img>
</label>
<br>
<label>
<input onclick="check()" type="radio" name="pet" class="rb_category" value="id:4">
<span>Mammoth</span>
<img src=""></img>
</label>
</div>
<div id="selection">
No selection yet
</div>
Do you mean this?
var rads = document.querySelectorAll("input[name=pet]");
for (var i = 0; i < rads.length; i++) {
rads[i].addEventListener("click", function() {
var parentLabel = this.closest("label");
document.getElementById("selection").innerHTML =
"You selected a/n " + this.value + ",<br>good choice!" +
"<span>" + parentLabel.querySelector("span").innerHTML + "</span>" +
"<img src='" + parentLabel.querySelector("img").src + "'/>";
});
};
*{margin: 0; padding: 0;font-family: arial; font-family: ubuntu; -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;}
b{color: dodgerBlue;}
body{background-color: rgba(50,50,50);}
#option{width: 250px; height: 100px; background-color: rgba(255,255,255,.3); margin: 10px; padding: 10px; color: rgba(255,255,255,.9);}
#selection{ width: 250px; height: 55px; background-color: rgba(100,100,100,.3); margin: 10px; padding: 10px; color: lightgreen;}
label>img { height:25% }
<div id="option">
<b>Option Box</b>
<br>
<label>
<input type="radio" name="pet" class="rb_category" value="id:1">
<span>Cat</span>
<img src="https://lorempixel.com/output/cats-q-c-200-200-5.jpg" />
</label>
<br>
<label>
<input type="radio" name="pet" class="rb_category" value="id:2">
<span>Dog</span>
<img src="https://lorempixel.com/output/animals-q-c-200-200-8.jpg" />
</label>
<br>
<label>
<input type="radio" name="pet" class="rb_category" value="id:3">
<span>Rhino</span>
<img src="https://lorempixel.com/output/animals-q-c-200-200-1.jpg" />
</label>
<br>
<label>
<input type="radio" name="pet" class="rb_category" value="id:4">
<span>Tiger</span>
<img src="https://lorempixel.com/output/animals-q-c-200-200-3.jpg" />
</label>
</div>
<br style="clear:both" />
<div id="selection">
No selection yet
</div>
I am trying to make a calculator program in php code.
I made it using html and javascript, but I've been told to use php code for the logical part.
Is there any way we can take more than one input from a textbox, in a php form ?
Yes, you can easily use multiple inputs in a form, by giving them different names and accessing them through $_REQUEST['input_name'].
In this example, what I am doing is taking the selected checkboxes from the popup and putting them into the text input field in the main form as a comma-separated list.
HTML
<input type="text" id="entry-r1" placeholder="place" tabindex="1">
<a class="show-lookup button" href="#" id="popup-r1" tabindex="2"><i class="fa fa-search"></i></a>
<div class="overlay"> </div>
<div class="lookup-multiselect" id="lookup-r1">
<a class="button close-button right">x</a>
<form action="" id="form-r1" name="form-r1" method="post">
<input class="checkall" id="checkall" type="checkbox">
<label for="checkall" class="narrow">Select all</label>
<p class="category" id="checkboxes-r1"><strong>Select...</strong><br>
<input class="js-popup-focus" type="checkbox" name="place" id="antwerp" value="Antwerp" tabindex="3"> <label for="antwerp">Antwerp</label><br>
<input type="checkbox" name="place" id="berlin" value="Berlin" tabindex="3"> <label for="berlin">Berlin</label><br>
<input type="checkbox" name="place" id="cairo" value="Cairo" tabindex="3"> <label for="cairo">Cairo</label><br>
<input type="checkbox" name="place" id="duss" value="Düsseldorf" tabindex="3"> <label for="duss">Düsseldorf</label><br>
</p>
</form>
Use selected
</div>
CSS
.overlay {
display: none;
position: fixed;
text-align: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.7;
background: #333;
}
.lookup-popup, .lookup-multiselect {
padding: 0.5em;
display: none;
z-index: 99999;
background-color: #fff;
position: absolute;
top: 5em;
left: 25%;
width: 20%;
}
jQuery
$(document).ready(function ()
{
/* get id of form to work with */
$('.show-lookup').click(function()
{
var pairedId = $(this).attr('id').split('-');
var lookupToDisplay = '#lookup-' + pairedId[1];
$('.overlay').show();
$(lookupToDisplay).show();
$('.js-popup-focus').focus();
});
/* put value selected in lookup into field in main form */
$('.lookup-popup input').on('change', function()
{
var fieldname = $(this).attr('name');
var pairedId = $(this).parent().attr('id').split('-');
var selOption = $('input[name='+fieldname+']:checked').val();
$("#entry-"+pairedId[1]).val(selOption);
});
/* for checkbox version, append selected values to field in main form */
$('.lookup-multiselect input').on('change', function()
{
var pairedId = $(this).parent().attr('id').split('-');
//event.preventDefault();
var selOptions = $(".category input:checkbox:checked").map(function(){
return $(this).val();
}).get(); // <----
//console.log(selOptions);
var selectedString = selOptions.toString();
$("#entry-"+pairedId[1]).val(selOptions);
});
$('.close-button').click(function()
{
$(this).parent().hide();
var pairedId = $(this).parent().attr('id').split('-');
$('.overlay').hide();
$("#entry-"+pairedId[1]).focus();
});
});
I have been trying to create a HTML form consisting of checkboxes in a dropdown. I have been able to do this part. But when you click on a particular dropdown, the remaining dropdown shift down. on the second click th dropdown collapses and they return to their original place. Please help me to correct this problem. I am trying to keep the position of the dropdown constant, if or not the checkboxes are visible.
What I am trying to achieve is something like the filters on the left hand side at http://www.luxuryretreats.com/. Would be thankful for any advise!
Here is the code.
<html>
<head>
<script type="text/javascript">
function ExposeList1() {
var showstatus = document.getElementById('ScrollCountry').style.display;
if (showstatus == 'none') {
document.getElementById('ScrollCountry').style.display = "block";
} else {
document.getElementById('ScrollCountry').style.display = 'none';
}
}
function ExposeList2() {
var showstatus = document.getElementById('Scrollguests').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollguests').style.display = "block";
} else {
document.getElementById('Scrollguests').style.display = 'none';
}
}
function ExposeList3() {
var showstatus = document.getElementById('Scrollminprice').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollminprice').style.display = "block";
} else {
document.getElementById('Scrollminprice').style.display = 'none';
}
}
function ExposeList4() {
var showstatus = document.getElementById('Scrollmaxprice').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollmaxprice').style.display = "block";
} else {
document.getElementById('Scrollmaxprice').style.display = 'none';
}
}
</script>
</head>
<body>
<form action="trying.php" method="post">
<img src="original1.png" onmouseover="this.src='onhover1.png'"
onmouseout="this.src='original1.png'" onclick="ExposeList1()">
<div>
<div id="ScrollCountry"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="scb1" name="c1" value="Mexico">Mexico<br>
<input type="checkbox" id="scb2" name="c2" value="Belize">Belize<br>
<input type="checkbox" id="scb3" name="c3" value="Jamaica">Jamaica<br>
<input type="checkbox" id="scb4" name="c4" value="Thailand">Thailand<br>
<input type="checkbox" id="scb5" name="c5"
value="Turks & Caicos">Turks & Caicos<br>
<br />
</div>
</div>
<img src="original2.png" onmouseover="this.src='onhover2.png'"
onmouseout="this.src='original2.png'" onclick="ExposeList2()">
<div>
<div id="Scrollguests"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="n1" name="n1" value="4">2 - 4<br>
<input type="checkbox" id="n2" name="n2" value="6">4 - 6<br>
<input type="checkbox" id="n3" name="n3" value="8">6 - 8<br>
<input type="checkbox" id="n4" name="n4" value="10">8 -
10<br> <input type="checkbox" id="n5" name="n5" value="30">10+<br>
<br />
</div>
</div>
<img src="original3.png" onmouseover="this.src='onhover3.png'"
onmouseout="this.src='original3.png'" onclick="ExposeList3()">
<div>
<div id="Scrollminprice"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="mn1" name="mn1" value="200">200<br>
<input type="checkbox" id="mn2" name="mn2" value="300">300<br>
<input type="checkbox" id="mn3" name="mn3" value="400">400<br>
<input type="checkbox" id="mn4" name="mn4" value="500">500<br>
<input type="checkbox" id="mn5" name="mn5" value="600">600<br>
<br />
</div>
</div>
<img src="original4.png" onmouseover="this.src='onhover4.png'"
onmouseout="this.src='original4.png'" onclick="ExposeList4()">
<div>
<div id="Scrollmaxprice"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="mx1" name="mx1" value="600">600<br>
<input type="checkbox" id="mx2" name="mx2" value="700">700<br>
<input type="checkbox" id="mx3" name="mx3" value="800">800<br>
<input type="checkbox" id="mx4" name="mx4" value="900">900<br>
<input type="checkbox" id="mx5" name="mx5" value="1000">1000<br>
</div>
</div>
<input type="submit" />
</form>
</body>
</html>
You should put a position: absolute on your dropdown list. That way the other dropdown will not be impacted by the fact that you have open / close the other one.
Instead of using the display attribute, use the visibility attribute (visibility = visible | hidden). That would reserve the space required for the DIV irrespective whether is displayed or not.
Modified version here at jsfiddle.