We Keep Coding

Show 3 div one by one depending on input filed

I want to make a search form. Here when a user clicks on input filed first show a div (id: 1) where will be some link, then when user type on the input filed first for search div (id: 1) will hide and second div (id: 2) will show that place. Here will show the search result. After that, select a search result, the third div (id: 3) will appear here. In this process, if the user clicks outside on the window div will hide.
For reference please visit this site and see the search form. https://www.immobiliare.it/
Here is my code:
<div id="1">
<button>Open Map in Modal</button>
<button>Open Map in Modal 2</button>
</div>
<div id="2">
<p>Search result</p>
<p>Search result</p>
<!-- this will fetch result via AJAX, try with static data for testing. just show the div -->
</div>
<div id="3">
<input type="checkbox"> Villa
<input type="checkbox"> Apartment
<input type="checkbox"> Cotage
</div>
<style>
#1{
display: none;
}
#2{
display: none;
}
#3{
display: none;
}
.form-group input::focus + #1{
display: block;
}
<script>
var input = document.getElementById('searchLocation');
var result = document.getElementById('2');
input.addEventListener('keypress', function() {
result.style.display = "block";
});
input.addEventListener('focusout', function() {
result.style.display = "none";
});
</script>
I tried with focus in-out method. But the problem is I can't click on the div content, because of focus out, the div hide.
Please see the referecnce link, I want to make similiar. I just need the design only.

<!-- <form> -->
<input type="search" placeholder=" Search..." id="searchbox" name="searchitem" list="searchhints">
<!-- </form> -->
<datalist id="searchhints">
<!-- <option>Open Map in Modal 1</option>
<option>Open Map in Modal 2</option> -->
</datalist>
<div id="display">
<input type="checkbox"> Villa
<input type="checkbox"> Apartment
<input type="checkbox"> Cottage
</div>
<script>
var default_datalist = {"Open Map in Modal 1" : "modal1", "Open Map in Modal 2" : "modal2"};
var searched_datalist = {"Search result 1": "search1", "Search result 2": "search2"};
$(function(){
$("#display").hide();
fill_searchhints(default_datalist);
})
function fill_searchhints(datalist) {
$("#searchhints").html("");
for (let data in datalist) {
$("#searchhints").append("<option><div id='"+datalist[data]+"'>"+data+"</div></option");
}
}
$("body").delegate("#searchbox","change input",function(event){
event.preventDefault();
if($("#searchbox").val()!=''){
keyword = $('#searchbox').val();
//send keyword to AJAX function
fill_searchhints(searched_datalist);
if(keyword == 'Search result 1'){
event.preventDefault();
$("#display").show();
}
} else {
fill_searchhints(default_datalist);
}
});
</script>
You can do something along this line. Here I have used datalist tag instead instead of div. In script, i have created default_datalist and searched_datalist to replace datalist in HTML. Rest are normal functions, loops and event-listeners.
The link you provided seems to mainly use AJAX with backend search as well, so it is kinda difficult to replicate same result in here
Edit:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" name="search" id="search">
<div id="div1" class="drop" hidden>
<button>Open Map in Modal</button>
<button>Open Map in Modal 2</button>
</div>
<div id="div2" class="drop" hidden>
<p>Search result</p>
<p>Search result</p>
</div>
<div id="div3" hidden>
<input type="checkbox"> Villa
<input type="checkbox"> Apartment
<input type="checkbox"> Cottage
</div>
<script>
$("#search").on("focusin input change", function(){
$(".drop").hide();
if($("#search").val() == ""){
$("#div1").show();
// $("#div3").hide();
} else {
$("#div2").show();
}
})
$("#search").on("focusout", function() {
$(".drop").hide();
})
$("#div2").on("mousedown", function(){
$("#div3").show();
});
</script>
Here, if you apply the commented part, #div3 will hide when input text is empty,

How to stop my page from reseting after the page is submited

I have a code, who helps me switch between forms, however, when I submit the form, the page will reset and display first(default) tab again. Could anyone help me understand how I can make it so the tab I submit the form from stays there if the submision fails or even if the submision was successfull?
Forms are switching using a little JS code and are submited from a PHP POST method form.
Please find the code below:
Javascript responsible for switching between tabs:
function onTabClick(event) {
let activeTabs = document.querySelectorAll('.active');
// deactivate existing active tab
for (let i = 0; i < activeTabs.length; i++) {
activeTabs[i].className = activeTabs[i].className.replace('active', '');
}
// activate new tab
event.target.parentElement.className += 'active';
document.getElementById(event.target.href.split('#')[1]).className += 'active';
}
const elements = document.getElementsByClassName('nav-tab-element');
for (let i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', onTabClick, false);
}
CSS:
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
And here is the HTML forms:
<body>
<header>
<h1 class="main-header">
Add a New Product
</h1>
</header>
<main>
<ul id="nav-tab" class="nav">
<li class="active">
<a class="nav-tab-element" href="#books">Books</a>
</li>
<li>
<a class="nav-tab-element" href="#dvds">DVD's</a>
</li>
<li>
<a class="nav-tab-element" href="#furniture">Furniture</a>
</li>
</ul>
<form method="POST">
<div class="tab-content active" id="books">
<div class="book-tab">
<input type="text" name="sku" placeholder="test form for books" autocomplete="off">
</div>
<div class="btn">
<input type="submit" value="Submit">
</div>
</div>
</form>
<form method="POST">
<div class="tab-content " id="dvds">
<div class="dvd-tab">
<input type="text" name="sku" placeholder="test form for DVD" autocomplete="off">
</div>
<div class="btn">
<input type="submit" value="Submit">
</div>
</div>
</form>
<form method="POST">
<div class="tab-content " id="furniture">
<div class="furniture-tab">
<input type="text" name="sku" placeholder="test form for furniture" autocomplete="off">
</div>
<div class="btn">
<input type="submit" value="Submit">
</div>
</div>
</form>
</main>
<script src="main.js"></script>
</body>

Clicking submit submits the form data to the page given in the action attribute in form. If you don't put this attribute in (as you have not done) the default is to submit to the current page.
To fix the issue you have, I would suggest that rather than using vanilla form submit, you do you submission via ajax. Making an ajax call is quite simple in jQuery, so I recommend you look into that.

There is an event that is triggered when you send a form. You can prevent your page to reload doing the following:
event.preventDefault()
you can find more about here: https://www.w3schools.com/jsref/event_preventdefault.asp
or here https://www.w3schools.com/jquery/event_preventdefault.asp

All you have to do is add event.preventDefault() to the first line of your onTabClick(event) function. After you preventDefault you can run whatever logic you want right there.
The way vanilla html/js interact is: On form submission, the page attempts to send the info to a server and then it refreshes to update with new information. The rise of SPAs has shifted the desired behavior, and you need to override the browser default behavior to stop the refresh.
Adding Ajax/Axios would work as most of those API libraries have built in functions to override the default, but it is not necessary.

Post button without refreshing page

I'm a newbie in coding and I need your expertise help.
This is my index.php codes
<div class="container">
<div class="row text-center"><h1>Stamford Network</h1></div>
<div class="row">
<div class="col-md-9">
<input type="textarea" name="text" placeholder="What's on your mind?" class="form-control" id="info" />
<input type="button" name="post" value="Post" class="btn btn-primary" id="post" />
</div>
<div class="col-md-3">
<h3>Hello,
<?php echo $_SESSION['username']; ?>
</h3>
<a class="btn btn-primary" href="login.php" role="button" >Logout</a>
</div>
</div>
<div class="row">
<div class="col-md-9">
<h4 id="display"></h4>
</div>
<div class="col-md-3"></div>
</div>
</div>
My .js code which link to the above index.php
window.onload = function() {
var button = document.getElementById("post");
button.addEventListener("click",
function() {
document.getElementById("display");
});
}
Can anyone tell me how create a post and display it without refreshing the page. Simply just click on the Post button then the information should appear below the posting form. While the words in the textarea should be gone when the button is clicked.
Please only show me the javascript way

var button = document.getElementById('post'),
info = document.getElementById('info'),
display = document.getElementById('display');
button.addEventListener('click', function(){
display.innerText = info.value;
info.value = '';
});
If you want the value to be uploaded to server for processing, you will need to add ajax XMLHttpRequest in the event listener.
Learn more about ajax here.

You should do it asynchronously.
First, use the tag to surround the data that you want to post:
<form>
...
</form>
Tutorial about forms:
https://www.w3schools.com/html/html_forms.asp
To post form asynchronously, you can use jquery or js. The simple and quick way is jquery. Here is a link to the documentation:
https://api.jquery.com/jquery.post/
There is an example at the end of the page of the jquery post doc's page, that explains how to use it, and basically do the thing that you wanted.

try this.
<script type="text/javascript">
window.onload = function() {
var button = document.getElementById("post");
button.addEventListener("click",
function() {
//document.getElementById("display");
document.getElementById('display').innerHTML = document.getElementById('info').value;
document.getElementById("info").style.display = "none";
});
}
</script>

Show new field after button click

I want to make a field that only shows up after a button click.
Heres my code so far:
<div class="control-group" style="display:none" id="passwordfield">
<label class="control-label">Password:</label>
<div class="controls"><input id="pw" type="password"></div>
</div>
The "display:none" makes it invisible, after that I have my button and a javascript which should change the display to "block", thus making it visible again.
<div style="padding-left: 160px;padding-bottom:20px">
<button class="btn btn-primary" onclick="showPWField()">Log-In</button>
<script>
function showPWField() {
document.getElementByID("passwordfield").style.display = "block";
}
</script>
</div>
But it just doesnt work. The function gets called I tested that with an alert, but I just can't change the style :/
Thanks for help in advance

the error is that getElementByID does not exist, you should use getElementById:
function showPWField() {
document.getElementById("passwordfield").style.display = "block";
}
<div class="control-group" style="display:none" id="passwordfield">
<label class="control-label">Password:</label>
<div class="controls"><input id="pw" type="password"></div>
</div>
<div style="padding-left: 160px;padding-bottom:20px">
<button class="btn btn-primary" onclick="showPWField()">Log-In</button>
<script>
function showPWField() {
document.getElementById("passwordfield").style.display = "block";
}
</script>
</div>

Javascript is a case sensitive,the method you used is getElementByID() won't work in javascript, better to use getElementById()
function showPWField() {
document.getElementById("passwordfield").style.display = "block";
}enter code here

Javascript onfocus / onblur issues

So I am making a little searchbar that shows results underneath of it like such:
<div id='searchWrapper'>
<div id='Search'>
<input id="inputSpn" type="input" value="" />
<input id="searchBtn" type="image" src="/search.png" />
<br clear='all'/>
</div>
<div id='Results'>
</div>
</div>
I am basically doing a livesearch with through AJAX. The <div id='Results'> is initially hidden until you type and it populates some results. My issue however is getting it to hide when the user clicks away. having it disappear through onblur does not work either as I need to be able to click on the results and not have them disappear on me. Unfortunately I have not been able to find a good non jQuery method on the internet yet. Simplest way to put it is: I want the results to disappear if anything but the <div id='searchWrapper'> is clicked. Thanks!

Here is a non-optimised but working non-jQuery solution
<script>
document.onclick=function(e) {
var elem = e?e.target:event.srcElement;
var id = elem.id;
document.getElementById("inputSpn").value=id+" clicked"; // debug - remove when happy
// the following could be done by looping over the searchWrapper and its children
if (id !="searchWrapper" && id!="Search" && id != "inputSpn" && id != "searchBtn" && id != "Results") {
document.getElementById("Results").style.display="none"
}
}
</script>
<div id='searchWrapper'>
<div id='Search'>
<input id="inputSpn" type="input" value="" />
<input id="searchBtn" type="image" src="TekTP/icons/search.png" />
<br clear='all'/>
</div>
<div id='Results'>hello
</div>
</div>
UPDATE:
Toggle if clicked on the wrapper div
var hide= (id !="searchWrapper" && id!="Search" && id != "inputSpn" && id != "searchBtn" && id != "Results");
document.getElementById("Results").style.display=(hide)?"none":"block";

Add a listener to the document (using addEventListener) - JSFiddle Example
<style>
#Results {
display: none;
}
</style>
<script type="text/javascript">
window.onload = function(){
document.addEventListener('click', function(event){
if(document.getElementById('searchBtn') != (event.target) ? event.target : event.srcElement) {
document.getElementById('Results').style.display = 'none';
} else {
document.getElementById('Results').style.display = 'block';
}
});
};
</script>
<div id='searchWrapper'>
<div id='Search'>
<input id="inputSpn" type="input" value="" />
<input id="searchBtn" type="button" value="Search"/>
<br clear='all'/>
</div>
<div id='Results'></div>
</div>
But if you are going to be using a significant amount of Javascript in your site, you might consider using jQuery - it will make your life much easier.