Show 3 div one by one depending on input filed - javascript

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,

Related

Unable to attach Event to an Submit button in a form

On the following page "https://www.capgemini.com/new-ways-to-accelerate-innovation". there are multiple sections with "Expand" button and when you click on expand button a form gets exposed. the issue here is am not able to attach click event to the "Submit" button.
I have tried using addeventlistener but the event is not getting assigned.
How do I do that, please advise.
https://www.capgemini.com/new-ways-to-accelerate-innovation
Expand Button is in the below code.
<div class="exp_article-header-bg">
<div class="exp_article-header-inner">
<h2 class="exp_article-header-title">TechnoVision 2017</h2>
<div class="exp_article-header-author"></div>
<div class="exp_article-header-lead">
<p>
TechnoVision 2017 gives you a framework to create a new digital story to solve problems and grasp new opportunities. Our 37 technology building blocks will help you to navigate the technology maze and give a clear direction to your business.
</p>
</div>
<div class="exp_article-header-expand">
**
<div class="exp_link exp_link--white exp_link--expand">
<span class="exp_link-label">EXPAND</span>**
<span class="exp_button-arrow exp_button-arrow--down"></span>
</div>
</div>
</div>
</div>
Form gets exposed when you click the above Expand button. The Submit button is in the form as highlighted below.
<form accept-charset="UTF-8" method="post" action="https://go.pardot.com/l/95412/2017-08-09/2tfbfg" class="form" id="pardot-form">
<style type="text/css">
form.form p label {
color: #000000;
}
</style>
<p class="form-field email pd-text required ">
<label class="field-label" for="95412_59459pi_95412_59459">Email Address</label>
<input type="text" name="95412_59459pi_95412_59459" id="95412_59459pi_95412_59459" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 95412, 59459, 44072473);">
</p>
<div id="error_for_95412_59459pi_95412_59459" style="display:none"></div>
<p style="position:absolute; width:190px; left:-9999px; top: -9999px;visibility:hidden;">
<label for="pi_extra_field">Comments</label>
<input type="text" name="pi_extra_field" id="pi_extra_field">
</p>
<!-- forces IE5-8 to correctly submit UTF8 content -->
<input name="_utf8" type="hidden" value="☃">
<p class="submit">
<input type="submit" accesskey="s" value="Submit Now">
</p>
<script type="text/javascript">
//<![CDATA[
var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") && !anchor.getAttribute("target")) {
anchor.target = "_top";
}
}
//]]>
</script>
<input type="hidden" name="hiddenDependentFields" id="hiddenDependentFields" value="">
</form>
Have CSS display:none; for the element which needs to be expanded. when expand is clicked call a javascript function which checks if the element is hidden , if hidden change the CSS display: block;.
Check the below working code.
<body>
<div class="exp_article-header-bg">
<div class="exp_article-header-inner">
<h2 class="exp_article-header-title">TechnoVision 2017</h2>
<div class="exp_article-header-author"></div>
<div class="exp_article-header-lead"><p>TechnoVision 2017 gives you a framework to create a new digital story to
solve problems and grasp new opportunities. Our 37 technology building blocks will help you to navigate the
technology maze and give a clear direction to your business.</p>
</div>
<div class="exp_article-header-expand">
**
<div class="exp_link exp_link--white exp_link--expand">
<button onclick="myFunction()" class="exp_link-label">EXPAND</button>
**
<span class="exp_button-arrow exp_button-arrow--down" id="expandDiv"
style="color: #000066; background-color: gainsboro;display: none;">I Got Expanded</span></div>
</div>
</div>
</div>
</body>
Javascript function:-
<script>
function myFunction() {
var x = document.getElementById('expandDiv');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
check on plnkr: https://plnkr.co/edit/MWKYxmV6Jk2eId3Owt2u?p=preview
where is ur form opening? if u're usingjquery, just target the form id and do .submit()
You're going to want to use the 'onsubmit' event listener, most likely with a preveninstead of a click event.
document.querySelector("#submit-button").addEventListener("submit", function(event) {
//your stuff here
event.preventDefault();
}, false);

Move input between divs

Trying to move user input from one div to another via a move button, back and forth. Even if there is multiple inputs one can move selected input from one to the other.
So far it moves all inputs in "field1" to "field2". Im trying to move only a single line back and forth.
Tried various stuff, still learning this. Any pointers on what i need to look at in order to achieve this?`
Any help appreciated.
var number = [];
function myNotes() {
var x = document.getElementById("field1");
number.push(document.getElementById("input").value);
x.innerHTML = number.join('<input type="button" value="move" onclick="move();"/><br/>');
}
function move() {
$('#field1').appendTo('#field2')
}
form {
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="input" type=text>
</form>
<input type=submit onclick="myNotes();" value="Send">
<br>
<span id='displaytitle'></span>
<h2>Field 1</h2>
<div id="field1"></div>
<h2>Field 2</h2>
<div id="field2"></div>
JSFIDDLE
You've got a mixture of javascript and jQuery going that's kind of hard to understand. I've whipped up an example of this using jQuery, since you seem to have it in your project anyway:
https://jsfiddle.net/j5mvq6L5/7/
HTML:
<form>
<input id="input" type=text>
</form>
<input type=submit id="btnSend" value="Send">
<br>
<span id='displaytitle'></span>
<h2>Field 1</h2>
<div id="field1" class="field"></div>
<h2>Field 2</h2>
<div id="field2" class="field"></div>
JS:
//listen for document ready
$(document).ready(function() {
//button click listener:
$("#btnSend").on("click", function(e) {
var $field1 = $("#field1"); //works like getElementById
//create a containing div for later
var $entry = $("<div></div>").addClass("entry");
//create a new button
var $btnMove = $("<input/>").attr("type", "button").attr("value", "move").addClass("btnMove");
//click listener for the new button
$btnMove.click(function(){
//find "sibling" field (I added a class to both), append this button's parent div
$(this).parents(".field").siblings(".field").append($(this).parent());
});
//append entry parts
$entry.append($("#input").val())
.append($btnMove);
//append entry to #field1
$field1.append($entry);
});
});
CSS:
form {
display: inline;
}
.btnMove {
margin-left: .5em;
}

hide a checkbox in function another and disabled all elements to the checkbox disabled

<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/

Javascript set value of class & hidden input in nested divs

I have a span class "checkbox" and an attribute "value" associated with a hidden input field, both of which are contained within nested divs.
By default the checkbox is unchecked but I would like to change the span class to "checkbox active" and the input value to "1" so that it is checked and rendered to reflect that change.
This code is generated by a Wordpress plugin and there are no ids.
What's the best method to set these two attributes?
<div class="field field-news_item" data-type="true_false" data-name="news_item" data-validator="">
<div class="cfs_true_false ready">
<span class="checkbox"></span>
<span>Is this a news item?</span>
<input type="hidden" name="cfs[input][6][value]" class="true_false" value="0">
</div>
</div>
As per your requirement.Why dont you set like this ??
$(document).ready(myfunc);
function myfunc()
{
$('.checkbox').addClass('checked');
$('.true_false').val('1');
}
if($('.checkbox').hasClass('checked'))
{
alert($('.true_false').val());
}
Click on the demo below to see that value 1 is getting set and checked class is getting set.
You can do this on click of a button or checking a checkbox.
Click Here
Try this:
Also for demo purpose, I have kept input as text instead of hidden.
Fiddle
(function(){
$(".checkbox").on("click",function(){
$(this).toggleClass("checked");
var val = 0;
val = $(this).hasClass("checked")?1:0;
$(this).parent().find(".true_false").val(val);
});
})()
.checked{
background: blue!important;
}
.checkbox{
width:20px;
background:#eee;
padding:5px;
border:1px solid black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="field field-news_item" data-type="true_false" data-name="news_item" data-validator="">
<div class="cfs_true_false ready">
<span class="checkbox"></span>
<span>Is this a news item?</span>
<input type="text" name="cfs[input][6][value]" class="true_false" value="0">
</div>
</div>
<div class="field field-news_item" data-type="true_false" data-name="news_item" data-validator="">
<div class="cfs_true_false ready">
<span class="checkbox"></span>
<span>Is this a news item?</span>
<input type="checkbox" id="checkbox" />
<input type="text" name="cfs[input][6][value]" class="true_false" value="0">
</div>
</div>
$(document).ready(function(){
$('#checkbox').change(function(){
var checkboxValue = $(this).is(':checked');
if(checkboxValue == true){
$(".true_false").val('1');
alert('1');
}else{
$(".true_false").val('0');
alert('0');
}
});
});

How to turn toggle button off automatically

I want to be toggle button automatically off and whatever I will select that product should be off. And when click on then it should be show that product.
HTML
<div class="heading" id="seamless" style="display: none;">
<center>PayPal now accepted! Make a sale and we'll email you to claim your funds. Easy!Your email: admin#example.com</center>
</div>
Toggle Button
<div id="normal-toggle-button">
<input name="open" value="1" type="checkbox" onchange="checkshowhidereverse(this.status, '#seamless');checkshowhidereverse(this.status, '#setup');" checked="checked" />
</div>
Javascript
$(document).ready(function () {
//* toggle buttons
toggle_buttons.init();
});
Javascript function
//* toggle buttons
toggle_buttons = {
init: function () {
$('#normal-toggle-button').toggleButtons();
}
};
I am not quite sure if i understood it well?
Initially DIV is hidden, checkbox unechecked ? if yes how about this
http://jsfiddle.net/8sCw8/
<div class="heading" id="seamless" style="display: none;">
<center>PayPal now accepted! Make a sale and we'll email you to claim your funds. Easy!Your email: admin#example.com</center>
</div>
<div id="normal-toggle-button">
<input id="checkBox" name="open" value="1" type="checkbox"/>
</div>
JS:
$('#checkBox').click(function() {
if( $(this).is(':checked')) {
$("#seamless").show();
} else {
$("#seamless").hide();
}
});

Categories