Develop Reference

How to display a table onclick submit if textbox is not null demo: https://jsfiddle.net/21bbc4wm/

I want to display a table on click submit only if text box is not null
Demo: https://jsfiddle.net/21bbc4wm/
When i click submit button it returns no table, pls can someone help me out of this
<input type="text" list="user" id="note" name="Username"
placeholder="User ID*" autocomplete="off" required />
<div id= "container1" style="display:none;">
<p style="text-align:center; font-size:160%;">Search Result</p>
<table id="demo">
<tr><th>User ID</th>
<th>Date</th><tr>
</table>
<td><button style="background-color: #4CAF50;" id = "buttonSubmit"
type="submit" value="Submit" onclick ='check(); return
false'>Submit</button></td>
Javascript:
function check()
{
if(document.getElementById("note").value == null ||
document.getElementById("note").value == "")
{
alert("You must mention User ID for the result!!!");
document.getElementById("note").focus();
return false
var x = document.getElementById("container1");
if (x.style.display = "none") {
x.style.display = "block";
} else {
x.style.display = "true";
}
}

document.addEventListener("click", function(e){
var table = document.getElementById("demo");
var content = document.getElementById("container1");
var val = document.getElementById("note");
if(e.target.id === "buttonSubmit") {
if(val.value === null || val.value === "") {
alert("You must mention User ID for the result!!!");
content.classList.remove("active");
val.focus();
}
else {
var date = new Date();
/* remove this line for stacking */ table.innerHTML = '<tr><th>User ID</th><th>Date</th><tr>';
table.innerHTML += '<tr><td>' + val.value + '</th><td>'+ date.toDateString() +'</th><tr>';
val.value = "";
content.classList.remove("active");
content.classList.add("active");
}
}
if(e.target.id === "buttonReset") {
table.innerHTML = '<tr><th>User ID</th><th>Date</th><tr>';
val.value = "";
content.classList.remove("active");
}
});
input {
font-size: 1em;
}
#container1 {
display: none;
}
#container1.active {
display: block;
}
#result {
text-align: center;
font-size: 160%;
}
#buttonSubmit {
background-color: #4CAF50;
padding: 3px;
border: 1px solid black;
display: inline-block;
font-size: 1em;
cursor: pointer;
}
#buttonReset {
background-color: #4CAF50;
padding: 3px;
border: 1px solid black;
display: inline-block;
font-size: 1em;
cursor: pointer;
}
<input type="text" list="user" id="note" name="Username"
placeholder="User ID*" autocomplete="off" required>
<div id="container1">
<p id="result">Search Result</p>
<table id="demo">
<tr><th>User ID</th>
<th>Date</th><tr>
</table>
</div>
<a id="buttonSubmit">Submit</a>
<a id="buttonReset">Reset</a>

Javascript logic not working

The if condition is not working while the else if and else are working:
function userchk() {
var un = $('#user_name').val();
if (un.length < 3 && un.length != 0) {
$("#validateUser").html("<span style='color:red' class='status-not-available'>User Name Shoul Be Greater Then 3.</span>");
}
else if (un.length == 0) {
$('#validationUser').html("<span style='color:red' class='status-not-available'> User Name Cannot Be Empty.</span>");
}
else {
$('#validationUser').html("");
}
}
$('#btnTest').on('click', function() {
userchk();
});
input {
width: 100%;
margin-top: 20px;
float: left;
}
button {
font-size: 20px;
background-color: #555;
color: #fff;
padding: 10px 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnTest">Test userchk()</button>
<input type="text" name="user_name" id="user_name" onBlur="userchk()" class="form-control" placeholder="Username" />
<div id="validationUser"></div>

Your if condition results in an element with id #validateUser being selected and manipulated.
Your else if and else target #validationUser
The Javascript logic conditions are sound but you are not getting your expected results because you are targeting a different element in your if block.

CSS/HTML/JS Line up divs with dropdown search preview

UPDATE WITH SOLUTION:
I moved the unordered list to go after the go button,
<div class="row">
<form class="navbar-form suggest-holder">
<input class="form-control input-lg suggest-prompt" type="text" placeholder="Search...">
<select class="form-control input-lg">
<option>All</option>
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
<button type="submit" class="btn btn-primary btn-lg">Go</button>
<ul></ul>
</form>
</div>
and added the following to my CSS:
.form-control {
float: left;
}
I have a search bar in my header that is using a JS function for autocomplete based on a small list of sample products.
My site has several categories that can be searched, similar to Amazon, so to the right of the search input box, there is a drop-down menu and a "go" button.
Before I added the autocomplete JS, these were horizontally aligned. Now, the category drop-down and the go button are being pushed below the search input box.
How can I get them horizontally aligned again? I have included a fiddle with the HTML/CSS
HTML
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 search-block">
<div class="row">
<form class="navbar-form suggest-holder">
<input class="form-control input-lg suggest-prompt" type="text" placeholder="Search...">
<ul></ul>
<select class="form-control input-lg">
<option>All</option>
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
</select>
<button type="submit" class="btn btn-primary btn-lg">Go</button>
</form>
</div>
</div>
CSS:
.suggest-holder {
input {
border: 1px solid $gray-lighter;
}
ul {
list-style: none;
border: 1px solid $gray-lighter;
background-color: white;
width:65%;
}
li {
padding: 5px;
position: inherit;
}
li:hover {
cursor: pointer;
}
li:hover, li.active {
background: rgba(100,100,100,.2);
}
}
.suggest-name {
font-weight: bold;
display: block;
margin-left: 40px;
}
.suggest-sku {
font-style: italic;
font-size:$font-size-small;
color: $gray-light;
}
.suggest-image {
height: 35px;
float: left;
padding-right: 5px;
margin-top: -20px;
}
header .search-block {
input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
width: 65% !important;
#media (max-width:$screen-xs) {
width: 47% !important;
}
}
select {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-right: 5px;
margin-left: -5px;
width: 20% !important;
#media (max-width:$screen-xs) {
width: 30% !important;
}
}
button {
vertical-align: top;
width: 14% !important;
#media (min-width:$screen-lg) {
width: 8% !important;
}
#media (max-width:$screen-xs) {
width: 21% !important;
}
}
.form-group {
> form {
> * {
display: inline-block;
}
#media (max-width:$screen-xs) {
text-align: center;
margin-left: 0;
margin-right: 0;
#include pad-sides(0);
}
}
}
}
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
JS
var data = [
{
image: src = "http://placehold.it/35x35",
name: 'apples',
sku: '61583318'
},
{
image: src = "http://placehold.it/35x35",
name: 'oranges',
sku: '924335'
},
{
image: src = "http://placehold.it/35x35",
name: 'grapes',
sku: '73940'
},
{
image: src = "http://placehold.it/35x35",
name: 'strawberries',
sku: '66155'
},
{
image: src = "http://placehold.it/35x35",
name: 'string beans',
sku: '112509'
},
{
image: src = "http://placehold.it/35x35",
name: 'apricot',
sku: '112984'
}
];
// Suggest section holder
var $suggestedHL = $('.suggest-holder');
// Suggestions UL
var $suggestedUL = $('ul', $suggestedHL);
// Suggestions LI
var $suggestedLI = $('li', $suggestedHL);
// Selected Items UL
var $selectedUL = $('#selected-suggestions');
// Keyboard Nav Index
var index = -1;
function addSuggestion(el){
$selectedUL.append($('<li>' + el.find('.suggest-name').html() + '</li>'));
}
$('input', $suggestedHL).on({
keyup: function(e){
var m = false;
if(e.which == 38){
if(--index < 0){
index = 0;
}
m = true;
}else if(e.which == 40){
if(++index > $suggestedLI.length - 1){
index = $suggestedLI.length-1;
}
m = true;
}
if(m){
// Remove the active class
$('li.active', $suggestedHL).removeClass('active');
$suggestedLI.eq(index).addClass('active');
}else if(e.which == 27){
index = -1;
// Esc key
$suggestedUL.hide();
}else if(e.which == 13){
// Enter key
if(index > -1){
addSuggestion($('li.active', $suggestedHL));
index = -1;
$('li.active', $suggestedHL).removeClass('active');
}
}else{
index = -1;
// Clear the ul
$suggestedUL.empty();
// Cache the search term
$search = $(this).val();
// Search regular expression
$search = new RegExp($search.replace(/[^0-9a-z_]/i), 'i');
// Loop through the array
for(var i in data){
if(data[i].name.match($search)){
$suggestedUL.append($("<li><span class='suggest-name'>" + data[i].name + "</span><span class='suggest-sku'>" + data[i].sku + "</span><img src=" + data[i].image + " class='suggest-image'/></li>"));
}
}
// Show the ul
$suggestedUL.show();
}
if($(this).val() == ''){
$suggestedUL.hide();
}
},
keydown: function(e){
if(e.which == 38 || e.which == 40 || e.which == 13){
e.preventDefault();
}
},
focus: function(e){
if($(this).val() != ''){
$suggestedUL.show();
}
}
});
$suggestedHL.on('click', 'li', function(e){
addSuggestion($(this));
});
$('body').on('click', function(e) {
if (!$(e.target).closest('.suggest-holder li, .suggest-holder input').length) {
$suggestedUL.hide();
};
});
https://jsfiddle.net/sox0sxmz/1/

Try putting display: inline-block on all of the elements. E.g. form > * { display: inline-block;}. JSfiddle
You could also use float: left to not have the additional margins JSfiddle.
UPDATE:
Use:
.form-control {
float: left;
}
JSfiddle

There is a unordered list just before the select box which is causing the problem. It's defined as display:block and forcing the select box and the button to the next line.

You need another wrapper for the input and ul element which shows the results. Then you need elements with display-inline.
Here your jsfiddle: https://jsfiddle.net/sox0sxmz/8/
<div id-"my-container">
<input class="form-control input-lg suggest-prompt" type="text" placeholder="Search...">
<ul></ul>
</div>
Then apply a float:left to the container.
CSS:
form > * {
display: inline-block;
}
#my-container{
float: left;
}

How to apply CSS styling to elements created by jquery's append()?

I am trying to create a dynamic form, and have run into a problem with styling that makes itself quite apparent when you add elements to a form. There is styling added to inputs on load that aren't applied to any created when I add them with jQuery's append() function. The margins are nonexistant on the new input elements, whereas if I add them manually in the beginning on page load the styling is there. Seems to be some browser default styling which I cannot override. How do I fix this? Example code below.
CSS:
#GraphTools
{
border-top: 1px solid #BBBBBB;
height: 24px;
margin: 0 5px 3px;
padding-top: 2px;
}
#GraphSearch
{
float: left;
}
#GraphTools input
{
background-color: rgba(255, 255, 255, 0.4);
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 2px #444444 inset;
font-size: 14px;
padding: 2px;
}
#GraphTools input[type=button]:active, #GraphTools input[type=submit]:active
{
background-color: rgba(192, 192, 192, 0.4);
}
#GraphSearchFields
{
float: left;
margin-right: 5px;
}
#GraphSearchFields input
{
margin: 0 5px 0 5px;
}
#GraphZoom
{
float: right;
}
HTML:
<div id="GraphTools">
<div id="GraphSearch">
<form id="GraphSearchForm">
<div id="GraphSearchFields">
<input type="text" data-default-value="Sender" id="SenderBox0" class="GraphSearchBox" />
<input type="text" data-default-value="Reciever" id="RecieverBox0" class="GraphSearchBox" />
<input type="text" data-default-value="Sender" id="SenderBox1" class="GraphSearchBox" />
<input type="text" data-default-value="Reciever" id="RecieverBox1" class="GraphSearchBox" />
</div>
<input type="button" id="AddNewHumanSet" value="+" />
<input type="submit" value="Go" />
<input type="button" value="Reset" class="GraphResetButton" />
</form>
</div>
<div id="GraphZoom">
<input type="button" value="-" />
<input type="button" value="+" />
</div>
</div>
Javascript:
$(document).ready(function ()
{
function LoadDefaultSearchBoxValues()
{
$(".GraphSearchBox").each(function (i, e)
{
if ($(this).val() == "")
{
$(this).val($(this).data("default-value"));
}
});
}
LoadDefaultSearchBoxValues();
$(".GraphSearchBox").live("focus", function ()
{
if ($(this).val() == $(this).data("default-value"))
{
$(this).val("");
}
});
$(".GraphSearchBox").live("blur", function ()
{
if ($(this).val() == "")
{
$(this).val($(this).data("default-value"));
}
});
$("#GraphSearchForm").live("submit", function (event)
{
event.preventDefault();
var SenderBoxHasValue = !($("#SenderBox").val() == $("#SenderBox").data("default-value") && $("#SenderBox").val() == "");
var RecieverBoxHasValue = !($("#RecieverBox").val() == $("#RecieverBox").data("default-value") && $("#RecieverBox").val() == "");
if (SenderBoxHasValue && RecieverBoxHasValue)
{
graph.filterEdges(function (edge)
{
return edge.source.data.label.toLowerCase().indexOf($("#SenderBox").val().toLowerCase()) != -1 &&
edge.target.data.label.toLowerCase().indexOf($("#RecieverBox").val().toLowerCase()) != -1;
});
}
else if (SenderBoxHasValue)
{
graph.filterEdges(function (edge)
{
return edge.source.data.label.toLowerCase().indexOf($("#SenderBox").val().toLowerCase()) != -1;
});
}
else if (RecieverBoxHasValue)
{
graph.filterEdges(function (edge)
{
return edge.target.data.label.toLowerCase().indexOf($("#RecieverBox").val().toLowerCase()) != -1;
});
}
});
$(".GraphResetButton").live("click", function ()
{
graph.resetGraph();
});
$("#AddNewHumanSet").live("click", function ()
{
var inputcount = $("#GraphSearchFields").children("input").length / 2;
var mod4 = $("#GraphSearchFields").children("input").length % 4;
if (mod4 == 0)
{
$("#GraphSearchFields").append("<br />");
}
$("#GraphSearchFields").append('<input type="text" data-default-value="Sender" id="SenderBox' + inputcount + '" class="GraphSearchBox" /><input type="text" data-default-value="Reciever" id="RecieverBox' + inputcount + '" class="GraphSearchBox" />');
LoadDefaultSearchBoxValues();
});
});

You need to put a space in between 2 input boxes when you append them.
Take a look at this working demo it is fine now
http://jsfiddle.net/2xfED/1/

Does anyone know why my multi-phase form won't work?

I am making a multi-phase form but it is not acting normal
I have written a lot of diffrent code for it but don't know why it is not working the way I want it
It has been two days working with it I am feeling stupid now
here is the code
HTML:
<div id="form-container">
<div id="phase-1">
<h3>Phase 01</h3>
<form>
<input id="fname" type="text" placeholder="First name">
<input id="lname" type="text" placeholder="Last name">
<input id="email" type="text" placeholder="Email">
<button id="phase-1-btn">Next</button>
</form>
</div>
<div id="phase-2">
<h3>Phase 02</h3>
<form>
<input id="pass" type="text" placeholder="Password">
<input id="cpass" type="text" placeholder="Confirm Password">
<button id="phase-2-btn">Next</button>
</form>
</div>
<div id="phase-3">
<h2>Thank You for Testing my pen</h2>
</div>
</div>
CSS :
#form-container{
height: 350px;
width: 300px;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
background-color: #95a5a6;
font-family: "Slabo 27px";
position: relative;
box-shadow: 1px 1px 2px,
-1px -1px 2px;
}
#phase-1, #phase-2{
height: 100%;
width: 100%;
border-top: 3px solid #f39c12;
display: block;
}
#phase-1 h3, #phase-2 h3{
height: 10%;
width: 60%;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 23px;
color: #fff;
}
#phase-1 form, #phase-2 form{
display: block;
height: 75%;
padding: 0;
padding-top: 15px;
margin: 0;
}
input{
display: block;
width: 80%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px 20px;
border: none;
border-radius: 5px;
}
button {
display: block;
width: 60%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
padding: 10px 5px;
background-color: #f39c12;
color: #fff;
font-weight: 600;
border: none;
border-radius: 6px;
}
#phase-2{
display: none;
}
#phase-3{
display: none;
height: 0;
width: 100%;
color: #000;
position: absolute;
top: 0;
left: 0;
background: #f39c12
}
#phase-3 h2{
width: 200px;
height: 60px;
margin-left: auto;
margin-right: auto;
margin-top: 135px;
text-align: center;
}
JS :
var fname, lname, email, pass, cpass;
function id( id ) {
return document.getElementById(id);
}
function phase1 () {
fname = id("fname").value;
lname = id("lname").value;
email = id("email").value;
if ( fname.length > 2 && lname.length > 2 && email.length > 2 ) {
id("phase-1").style.display = "none";
id("phase-2").style.display = "block";
// end of if
} else {
alert("Please fill the Form");
}
} // end of phase1 function
// add the event to the phase-1-btn
id("phase-1-btn").addEventListener("click", phase1());
/* phase 02 */
function phase2 () {
pass = id("pass").value;
cpass = id("cpass").value;
if ( pass.length > 2 && cpass.length > 2 ) {
id("phase-2").style.display = "none";
id("phase-3").style.display = "block";
id("phase-3").style.height = "100%";
// end of if
} else {
alert("Please fill the Form");
}
} // end of phase2 function
id("phase-2-btn").addEventListener("click", phase2());

Let's try this one. Then tell me what you see in the console.
<script>
function phase1()
{
window.console.log('phase1 function called');
var fname_val = document.getElementById('fname').value;
var lname_val = document.getElementById('lname').value;
var email_val = document.getElementById('email').value;
// verify values
window.console.log('fname_val='+fname_val + ' lname_val='+lname_val + ' email_val='+email_val);
if( fname_val.length > 2 && lname_val.length > 2 && email_val.length > 2 )
{
window.console.log('validation!! :)');
document.getElementById("phase-1").style.display = "none";
document.getElementById("phase-2").style.display = "block";
}
else
{
alert("Please fill the Form");
}
}
function phase2()
{
window.console.log('phase2 function called');
}
document.addEventListener("DOMContentLoaded", function(event) {
window.console.log("DOM fully loaded and parsed");
document.getElementById("phase-1-btn").addEventListener("click", phase1);
document.getElementById("phase-2-btn").addEventListener("click", phase2);
});
</script>
<div id="phase-1">
<h3>Phase 01</h3>
<input id="fname" type="text" placeholder="First name" />
<input id="lname" type="text" placeholder="Last name" />
<input id="email" type="text" placeholder="Email" />
<input type="button" id="phase-1-btn" value="Next" />
</div>
<div id="phase-2">
<h3>Phase 02</h3>
<input id="pass" type="text" placeholder="Password" />
<input id="cpass" type="text" placeholder="Confirm Password" />
<input type="button" id="phase-2-btn" value="Next" />
</div>
<div id="phase-3">
<h2>Thank You for Testing my pen</h2>
</div>

To submit a form you want to use a submit button (not classic button).
Have all of your inputs within the form tags.
Add the appropriate form tag attributes such as (action & method)
Use one form tag that wraps around everything with the submit button on the inside.
CSS will have no effect so no need to share that part.
Last but not least - Dont call yourself stupid. Stupid people never ask for help. Reaching out for help is how you improve your skillset.
If you insist on using Javascript to submit the form that is fine, but you want to make sure the form works with classic HTML first.
To make this a multi-step process you should try doing 1 form per page. You will need to understand session handling. You can display portions of the form at a time with Javascript which gives an impression of doing steps but still using 1 form.
<form action="" method="POST">
<script>
function toggleSection(x){
document.getElementById('sec'+x).style.display = "block";
}
</script>
<div id="sec1">
section 1 stuff
<input type="button" value="Continue" onclick="toggleSection(2);" />
</div>
<div id="sec2" style="display:none;">
section 2 stuff
<input type="button" value="Continue" onclick="toggleSection(3);" />
</div>
<div id="sec3" style="display:none;">
section 3 stuff
<input type="submit" value="Submit" />
</div>
</form>

here it is with the changes you ordered
var fname, lname, email, pass, cpass;
function el( id ) {
return document.getElementById(id);
}
function phase1 () {
fname = el("fname").value;
lname = el("lname").value;
email = el("email").value;
if ( fname.length > 2 && lname.length > 2 && email.length > 2 ) {
el("phase-1").style.display = "none";
el("phase-2").style.display = "block";
// end of if
} else {
alert("Please fill the Form");
}
} // end of phase1 function
// add the event to the phase-1-btn
el("phase-1-btn").addEventListener("click", phase1);
/* phase 02 */
function phase2 () {
pass = el("pass").value;
cpass = el("cpass").value;
if ( pass.length > 2 && cpass.length > 2 ) {
el("phase-2").style.display = "none";
el("phase-3").style.display = "block";
el("phase-3").style.height = "100%";
// end of if
} else {
alert("Please fill the Form");
}
} // end of phase2 function
el("phase-2-btn").addEventListener("click", phase2);