Develop Reference

how to make clicked text appear on form field?

I'm beginner of javascript and I need to do a simple code for my needs.
I have a javascript function dene1() creates text when clicked a button and it appears here
But I can't use this line in below which says DIV CODES
<input name="gonder" type="button" value="TL" onclick="dene1()" tabindex="6" style="height: 27px" />
Irsaliyeli fatura ? <input name="Checkbox1" type="checkbox" value="İrsaliye yerine geçer." tabindex="9"><br>
<br> </div>
<script>
function myFunct(the_text) {
document.getElementById('yaziyaz').value = the_text;
}
</script>
My second problem when
When I clicked button this function works myFunct and add text into below text area but it deletes all data there... I just want to make it appear after the line
<textarea id="yaziyaz" name="textarea1" style="height: 210px; width: 528px" tabindex="12" rows="1">TUTAR YAZI İLE: (AFTER CLICK TL, TEXT SHOULD APPEAR HERE)
►DÖVİZ KURU: €=<%=EditCurrency(Round(EURS)*1/10000)%>TL $=<%=EditCurrency(Round(USDS)*1/10000)%>TL
►VADE: PEŞİN.
►TESLİM ŞEKLİ: DEPOMUZ.
►BANKA BİLGİMİZ : COMPANY NAME
IBAN No (TL) : TR9245613213465461321
</textarea>
My third challange is when I click checkbox here it should also add the value to the text area without deleting data there.
I would very appreciate if experts help me.
Thanks in advance

Note
You are not provide the "dene1" function, so I write a simple code inside.
Just use '+=' instead of '=' for append.
I added border and height to show the clickable area.
<input name="gonder" type="button" value="TL" onclick="dene1()" tabindex="6" style="height: 27px" /> Irsaliyeli fatura ?
<input name="Checkbox1" type="checkbox" value="İrsaliye yerine geçer." tabindex="9"><br>
<br>
<a href="#" onclick="myFunct('DIV CODES\n')">
<!-- I added border and height to show the clickable area -->
<div id="yazi" style="width: 700px; height: 100px; border: 1px solid #000;"></div>
</a>
<script>
function dene1() {
document.getElementById('yaziyaz').value += "You aren't provide this function, so I make a example.\n";
}
function myFunct(the_text) {
// Just use '+=' instead of '=' for append.
document.getElementById('yaziyaz').value += the_text;
}
</script>
<textarea id="yaziyaz" name="textarea1" style="height: 210px; width: 528px" tabindex="12" rows="1">
Original words here.
</textarea>

JavaScript update dissapears when overlay is set to hidden

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>

How to click radio by clicking on div?

Why is my code not working? i need to simulate click on radio button. Radio button has click event.
$(".form-group").click(function() {
alert("clicked")
$(this).closest(".hotelObj", function() {
$(this).trigger("click");
})
});
.form-group {
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="male" style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>

Given the markup you've provided, javascript isn't necessary for this task, unless there's some other requirement you've left out.
Since the label contains all the area that you want the click handler to affect, it should just work as is (clicking anywhere in the pink box will cause the radio button to become selected).
.form-group {
background-color: pink;
}
<div class="form-group">
<label style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>

Your code is not working because you are using .closest() jquery method which will look for element starting from itself and then up in DOM tree.
This way element with class.hotelObj is never found.
You need to use .find() method to find .hotelObj, because it's inside .form-group.
$(".form-group").click(function() {
$(this)
.find(".hotelObj")
.trigger("click");
});

Try onClickHandled property
<input type="checkbox" onclick="onClickHandler()" id="box" />
<script>
function onClickHandler(){
var chk=document.getElementById("box").value;
//use this value
}
</script>

Replacing checkboxes with images?

I am trying to replace three check boxes within an html form with three different images. The idea being that the user can select the pictures by clicking on them rather than clicking on a check box. I've been putting togther some code but can't figure out how to make all the checkboxes selectable. At the moment only the first images works when it is clicked on. Can anyone help me? I'm a real novice with javascript I'm afraid. See fiddle here
The form
<form id="form1" action="" method="GET" name="form1">
<div class="col-md-3">
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr"><input type="checkbox" id="imgCheck" name="pic1" value=9></div><div class="col-md-3">
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr"><input type="checkbox" id="imgCheck" name="pic2" value=12></div><div class="col-md-3">
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr"><input type="checkbox" id="imgCheck" name="pic3" value=7></div>
<input type="submit" name="submit" value="Add" />
</div>
</form>
The javascript
$('#blr').on('click', function(){
var $$ = $(this)
if( !$$.is('.checked')){
$$.addClass('checked');
$('#imgCheck').prop('checked', true);
} else {
$$.removeClass('checked');
$('#imgCheck').prop('checked', false);
}
})

Why use JavaScript at all? You can do this with CSS, the :checked attribute and a label element.
input[type=checkbox] {
display: none;
}
:checked+img {
border: 2px solid red;
}
<label>
<input type="checkbox" name="checkbox" value="value">
<img src="http://lorempixel.com/50/50/" alt="Check me">
</label>

This is happening because you're using the same ID more than one. IDs should be unique. Instead of using id="blr", try using class="blr". I updated the fiddle:
http://jsfiddle.net/0rznu4ks/1/

First, as Amar said, id should be unique. Use classes for multiple elements.
Also pay attention for semicolons and closing html tags.
To your question:
use the function .siblings() to get the relevant checkbox element.
$('.blr').on('click', function () {
var $$ = $(this);
if (!$$.is('.checked')) {
$$.addClass('checked');
$$.siblings('input.imgCheck').prop('checked', true);
} else {
$$.removeClass('checked');
$$.siblings('input.imgCheck').prop('checked', false);
}
});
See demo here:
http://jsfiddle.net/yd5oq032/1/
Good luck!

toggle does not remain close, i have to click on the button for the toggle to close up

<script type="text/javascript">
$(document).ready(function(){
$("#click").click(function () {
$("#info").slideToggle('slow');
});
});
</script>
this is the html code
<h4 class="rsvpTitle">
<span class="arrow"></span>RSVP
</h4>
<div id="info" class="expandContent">
<form id="formmail method="post" action="form_handler.php">
<label class="response" for="response">Will you be joining us?</label><br>
<span style="margin-left:121px;">
<input type="radio" name="response" value="I'll be there with bells on!" id="response">I'll be there with bells on!</span>
<br>
I have this code for a toggle effect. However, the toggle does not remain close, I want the toggle to remain close until someone clicks on the button to release the toggle. any ideas? is the code well written?

u have to add display: none; to #info and e.preventDefault() to your js
examples:
http://jsbin.com/oxuqus/2/ OR
http://jsfiddle.net/kB2fc/
CSS:
#info {
display: none;
}
JS:
$(document).ready(function(){
$("#click").on("click", function(e) {
$("#info").slideToggle('slow');
e.preventDefault();
});
});

Just add this in your CSS
#info {
display : none;
}

Working Example
(jsFiddle)
Explanation
The element is not hidden at the document load event. You must hide it with display:none; in your CSS to ensure it is not visible without user interaction.
Solution
Add the following to your CSS:
#info
{
display:none;
}
NOTE
You are not closing your input and span elements ! Add the closing tags:
<input type="radio" name="response" value="I'll be there with bells on!" id="response">I'll be there with bells on!
</input>
</span>