I have a food menu written in html, css and javascript that allows the user to click on a food item and a form appears in order to let them customize their order. I set the form div's visibility to hidden until the user clicks on that particular food item in the menu, and then a JavaScript function will enable the user to see the form and customize their order. The function also updates the users shopping cart. When the user is done filling out the form they exit the form and this triggers a JavaScript function that sets the visibility of the div back to hidden.
The issue is that it also hides and deletes the information that should be in their shopping cart, and I am not sure why. The shopping cart is not within the same div as the hidden form, and I explicitly set the shopping carts visibility to visible. So i'm not 100% sure why the data disappears when I close the form. It should remain within the shopping cart. Here is an example of my html code:
<div class="hidden-order" id="orderId>"
<form method="post" id="orderForm">
<div class="hidden-flex">
<div class="hidden-text">
<h2>header</h2>
<p>food description
</p>
</div>
<input class="img-btn" type="image" src="exit-icon.png" name="img" width="30"
height="30" onclick="closeWindow('idOfWindowClosed')"/>
</div>
<img src="foodImg.png">
<h4>Shell Choice</h4>
<input type="radio" name="choice" value="choice1">
Choice1<br>
<input type="radio" name="choice" value="choice2">
Choice2<br>
<input type="radio" name="choice" value=choice3>Choice3<br>
<h4>Taco Preperation</h4>
<input type="radio" name="fooPrep" value="regular">Regular
<p> <input class="add-price" type="radio" name="fooPrep" value="supreme">
Supreme (+$0.70)</p><br>
<h4>Extra Instructions</h4>
<textarea class="t-area" rows="5" cols="50" name="extraInstructions">Allergies, Extra, Spicy ect.</textarea>
<label for="quantity">Quantity</label>
<input type="number" name="quantity" min="1" max="20"/>
<input type="hidden" value="$2.10" name="price">
<input type="hidden" value="Name Of Food Item" name="itemName">
<input type="button" value="Add" id="submit-btn" onclick="addToCartClicked('doritos-locos-form')"/>
So when the user clicks on the button associated with the form above, the data is sent to the shopping cart at the bottom of my html page. Here is the basic shopping cart:
<div id="shoppingCart"></div>
Here is the css code associated with my hodden-order class. As you can see, I set the visibility to hidden initially so that the form only displays as an when the user clicks on the div associated with that food item:
.hidden-order {display: block;
visibility: hidden; /*make the element hidden here */
position: fixed;
bottom: 1em;
border-radius: .2em;
border-stype: solid;
border-width: 1em;
border-color: gray;
top: 1em;
z-index-9;
background-color: #fff;
margin: auto;
max-width: 33.33%;
overflow-y: scroll;
padding: 1em;
}
Next, the here is html code and the JavaScript code that makes the form overlay visible once that div is pressed:
<div class="food-item this-food-item" id="item-1" onclick="alertUser('item-1')">
JavaScript:
function alertUser(id){
var foodItem = document.getElementById(id);
foodItem.style.visibility = "visible";
}
And then once the user fills out the now visible form it should render the data to the shopping cart because of this function:
function addToCartClicked(id){
var cartItem = document.getElementById(id);
var theCart = document.getElementById('shoppingCart');
var title = document.getElementById('title');
var itemName = cartItem.itemName.value;
htmlString += "<p>Item: " + itemName + "</p>";
theCart.innerHTML = htmlString;
}
Now the data displays for the user within my shopping cart. Recall that my shopping cart is in a separate div than the form and it's visibility is explicitly set to visible, so it shouldn't disappear when the user exits the form:
#shoppingCart { display: block;
visibility: visible;
}
And lastly, here is the function that sets the overlay back to hidden when the user presses the exit button on my form:
function closeWindow(id){
document.getElementById(id).style.visibility = "hidden";
var theCart = document.getElementById('shoppingCart');
theCart.style.visibility = "visible";
}
Just to make sure the shopping cart would remain visible I explicitly set it's visibility to visible again within the function above. Below are some images of what I am attempting to do:
In the first image the user goes to the menu page and clicks on an item. The shopping cart is empty. In the second image they fill out the form that displays as an overlay and their selection is added to the shopping cart. When they exit out of the overlay form the shopping cart information is completely lost. I want that information to remain even after they exit the overlay.
That's because <input type="image" /> behaves like a submit button. From docs
The element is a replaced element (an element whose content isn't generated or directly managed by the CSS layer), behaving in much the same way as a regular element, but with the capabilities of a submit button.
So, you'll have to prevent the default behaviour by using event.preventDefault().
I've faked your form to demonstrate the solution.
function closeWindow(event) {
event.preventDefault();
}
<form>
<input type="image" src="https://dummyimage.com/50x50/000/fff&text=C" onclick="closeWindow(event)"/>
<input />
</form>
Related
I have POS system with cheque payments. when the cashier input the number of cheque according to the input the cheque detail form should generated.
Eg : if he enter Number 5, the same form should be display five times How can i do this with jquery.
I have attached up to what i have done so far !!
Thanks in Advance
This is the user input
<input type="number" class="form-control" id="numberOfChq" >
<a id="come" class="btn btn-primary">Submit</a>
This is the div to be repeated
<div id="chk_list" hidden></div>
This is the jquery i tried its displaying only once, i want to diplay as many user input
$("#come").click(function(){
var chqNumebr = $("#numberOfChq").val();
var i;
for (i= 1; i <= chqNumebr; i++ ){
var chqSh = $("#chk_list").slideDown("slow");
}
});
Try the below.
First we need something to add the new divs into, so I created <div id="output"></div> for that.
After pressing submit, you'll see the new divs get added according the number the user entered. But we have to make sure that we empty #output every time the function runs otherwise the newly created divs would just keep adding onto the existing ones.
Secondly, if we are going to have multiple instances of #chk_list then it shouldn't have an ID as all ID's should be unique. Instead, we'll use a class.
$("#come").on('click', function() {
var chqNumebr = $("#numberOfChq").val();
//empty divs that are currently inside of #output
$('#output').empty();
for (var i = 0; i < chqNumebr; i++) {
$('#output').append('<div class="chk_list"></div>')
}
});
.chk_list {
width: 50px;
height: 30px;
background: red;
margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" class="form-control" id="numberOfChq">
<a id="come" class="btn btn-primary">Submit</a>
<div id="output"></div>
I'm trying to make a dropdown suggestion box.
In that case I wish to hide the box whenever the input field AND dropdown box is no longer in focus.
This is my HTML code:
<input type="text" id="user_address">
<div id="user_address_sg">SUGGESTION</div>
<div id="another element">Pressing another element on the page should hide the suggestion box</div>
I have tried the following:
$('[id=user_address][id=user_address_sg]').focusout(function (){
$('#user_address_sg').hide();
});
How come the user_address_sg doesn't hide whenever I select another input field or other elements on the page?
Images (1st: When I write a name, 2nd: When I select another form while suggestions appear)
First image: suggestion box should be displayed and clickable
Second image: When doing this the suggestion box should disappear
UPDATED: CSS alternative:
function suggest(key) {
document.getElementById('user_address').value = document.getElementById(key).innerHTML;
}
#user_address_sg {
vertical-align: top;
text-decoration: none;
display: none;
color:black;
}
#user_address_sg:focus, #user_address_sg:active {
display: inline-block;
color:black;
}
#user_address:focus ~ #user_address_sg {
display: inline-block;
}
<input type="text" id="user_address">
<a href=# id="user_address_sg">
<span id=a1 onClick="suggest('a1')">SUGGESTION 1</span><br>
<span id=a2 onClick="suggest('a2')">SUGGESTION 2</span><br>
<span id=a3 onClick="suggest('a3')">SUGGESTION 3</span><br>
<span id=a4 onClick="suggest('a4')">SUGGESTION 4</span>
</a>
You may need blur and separate the selectors with commas, because one single element with two different ids doesn't exist, but two different elements with different ids yes. So separate them:
$('[id=user_address],[id=user_address_sg]').blur(function (){
$('#user_address_sg').hide();
});
Better with on() method
$('[id=user_address],[id=user_address_sg]').on('blur', function (){
$('#user_address_sg').hide();
});
blur event will fire when a focused element loses the focus. So I think that's what you need.
My issue is that I am using custom images for my radio buttons, so I have them set to display:none; but doing this means they are no longer being called out as required.
Is there a simple solution for this? The radio buttons MUST be images.
-Thanks
<label for="topsides">Top Sides</label>
<form action="" id="TopSideYearCubics_id">
<input class="radio" id="topsidescubicsides" type="radio" name="properties[Top Sides]" value="Cubic Sides" required="required">
<a id="topsidescubicsides_button" href="javascript:set_radio('topsidescubicsides');" class="radio-picture-150x150" style="background: url(http://www.xxxx.com/_Store/_images2015/customring_buttons/button_CA01test_topsides_cubics.gif) no-repeat scroll 0 0;"> </a>
<input class="radio" id="topsidesyearsides" type="radio" name="properties[Top Sides]" value="Year Sides">
<a id="topsidesyearsides_button" href="javascript:set_radio('topsidesyearsides');" class="radio-picture-150x150" style="background: url(http://www.xxxx.com/_Store/_images2015/customring_buttons/button_CA01test_topsides_years.gif) no-repeat scroll 0 0;"> </a>
</form>
<br />
<script>
<!-- //## Sets the Image to the Radio Button ##//-->
function set_radio($inputid) {
$("input#" + $inputid).click();
}
$(document).ready(function() {
$("a.radio-picture-150x150").click(function(){
var $id = $(this).attr('id');
$("a.radio-picture-150x150").removeClass('selected-border');
$("a#" + $id).addClass('selected-border');
});
});
</script>
<style>
input[type=radio], input[type=checkbox] {
display:none;
}
</style>
In my CSS, I just gave the input[type="radio"] a style of opacity:0; to get rid of the stock button, but still show the browser's "Please select one of these options" validation tool-tip when one of my custom radio images wasn't chosen.
I have a form with a textbox and then another form with three textboxes.
The text I enter in the first textbox (id="logoName") should be visible in the other three (ids v1 - v3) when i click the button. I tried the following, but when I click the button, the text in the first box disappers instead of showing in the others as well... what did I do wrong? Thanks a lot for your help!!!
JS
var logoName = document.getElementById("logoName");
var v1 = document.getElementById("v1");
var v2 = document.getElementById("v2");
var v3 = document.getElementById("v3");
var button = document.getElementById("button");
function sync() {
v1.value = logoName.value;
v2.value = logoName.value;
v3.value = logoName.value;
}
button.onclick = sync();
CSS
p {
font-size: 2em;
float: left;
margin-right: 2em;
}
.clear {
clear: both;
}
.overview {
margin-top: 2em;
}
input[type="text"] {
font-size: 2em;
width: 200px;
}
HTML
<form>
<label>Logo-Name</label>
<input id="logoName" type="text"/>
<button id="button">synchronise</button>
</form>
<form class="overview">
<input id="v1" type="text" /> <input id="v2" type="text" /> <input id="v3" type="text" />
</form>
You are experiencing 2 basic errors there:
1- you are not preventing the default action of the submit button and
2- you are not assigning properly the sync function to the button
Like this:
button.onclick = function() {sync();return false;}
you have some options:
you can set type="button" to your button so it doesn't submit your form, because this reload the full page and you are starting from 0, that is way the text disappears.
you can put your button out of the form tag.
and you are passing the result of sync() to the button.onclick, not the function. So, you can try
button.onclick = sync
happy codding
First, your JS code is calling the function as it is loaded:
button.onclick = sync();
should be
button.onclick = sync;
(you assign the function code to the event, not the function execution)
Second, when using the button tag inside the form, it seems to be automatically interpreted as a "submit" button. When clicking it, your form is "posted" to nowhere, so the value disappears. Try replacing the button tag with an input tag with type button.
Fiddle for you
http://jsfiddle.net/tn91aou1/3/
Ideally, I want to have 2 toggler. When click the fieldset toggler, the fieldset shows up with a div inside being hidden. When an event happened or When click the div toggler, the div show up.
I can only manage one of the 2 toggler working.
This is the html
click here
<fieldset class="fieldset" style="display:none">
<input>//first inputs
<input> 2nd input
<input id="edit-text" name="custom-text" type="checkbox value=""/>
<div id="wrapper">include several fields that initially hidden</div>
</fieldset>
This is the toggler for the fieldset:
$("a.fieldset-toggle-trigger").click(function() {
$(".fieldset").toggle();
}
The div toggler is inside another groups of code:
var e_fields = $("div#wrapper");
//fadein/fadeout with an event:
function bindEditTextClick(){
$("input#edit-text").click( function() {
if ($(this).attr('checked')) {
e_fields.fadeIn(750);
} else {
e_fields.fadeOut(750, function() {
});
}
});
}
//toggle as a part of another live click fuunction:
if (e_fields.is(':visible')) {
e_fields.fadeOut(500);
}
If I let the fieldset initially loaded as visible, the inside toggle works fine. This inside toggle is connected to other events, not easy to modify. How can I modify the fieldset toggler to allow inside toggle continue working?
If I get you correct you want to toggle main section and then toggle inner section depends on checkbox state. Is so, code and working solutions are below:
html
click here
<fieldset class="fieldset">
<input /><br />
<input /><br />
<input id="edit-text" name="custom-text" type="checkbox" value=""/>
<div id="wrapper">include several fields that initially hidden</div>
</fieldset>
css
fieldset { display:none; }
#wrapper { display:none; }
js
$(function() {
$(".fieldset-toogler-trigger").click(function() {
$(".fieldset").toggle();
});
$("#edit-text").change(function() {
var action = 'fadeOut';
if ($(this).is(':checked')) {
action = 'fadeIn';
}
$('#wrapper')[action](750);
});
});
jsfiddle
http://jsfiddle.net/y7PKk/
Got the solution for toggle the entire fieldset without messing up the inside toggle:
Initially move away the fieldset instead of hide the fieldset:
.moveaway{
position:absolute;left:-999em;
}
Then, use the fieldset toggler to toggle the moveaway class on/off.