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>

Turn buttons to able to be clicked with middle mouse buttons

I want to turn buttons like the following to be clickable by the middle mouse button so it will be possible to open them in new tabs.
These buttons are on Aliexpress' orders page:
<button button_action="confirmOrderReceived" orderid="87428853391079" type="button" data-order-status="WAIT_BUYER_ACCEPT_GOODS" data-order-biztype="AE_COMMON" class="ui-button ui-button-normal button-confirmOrderReceived">
Confirm Goods Received
</button>
I tried to turn them into a but then they don't work.
These don't work either: Fiddle (note that the buttons on AE don't have a link).
Is there another way to inject a script that will turn all the buttons on a page to be tab clickable?

Try following code might help
Reference
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
var whichButton = function (e) {
// Handle different event models
var e = e || window.event;
var btnCode = e.button;
if (btnCode === 1) {
console.log('Middle button');
}
}
<button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">Click With
Middle Button</button>

You can wrap your button in an anchor tag and add the target="_blank" to force the window to open in new tab.
<a href="link" target="_blank"><button button_action="confirmOrderReceived" orderid="87428853391079" type="button" data-order-status="WAIT_BUYER_ACCEPT_GOODS" data-order-biztype="AE_COMMON" class="ui-button ui-button-normal button-confirmOrderReceived">
Confirm Goods Received
</button></a>

You can simply write mousedown event instead of onclick like this
check updated fiddle : https://jsfiddle.net/1gd8m9y4/3/
<form action="http://google.com">
<input type="submit" value="Go to Google" href="google.com" onmousedown="window.open('http://www.gooogle.com/')" />
</form>
<input type="button" onmousedown="window.open('http://www.gooogle.com/')" value="Go to Google" />
Simple solution for detection of mouse middle click event
$('.test').mousedown(function(event) {
if(event.which == "2")
alert("middle click");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://google.com">
<input type="submit" value="Go to Google" href="google.com" />
</form>
<input type="button" class="test" value="Go to Google" />

If you are using anchor tag use attribute target="_blank" to open a new tab and use href to add the link

I suppose that code snippet should solve your problem
.btn {
background-color: grey;
padding: 5px;
margin: 5px;
height: 15px;
width: 90px;
}
.btn-link {
text-decoration: none;
font-weight: normal;
display: inline-block;
color: #000000;
}
<a class="btn btn-link" rel="details" href="http://google.com" target="_blank">Go to Google</a>

jquery textfield: show end of text when not in focus

I see that whenever there is more text than the size of the text field, start of the text gets shown when not on focus. In the picture below, i want to show the end of the text like 1, but when text field is not in focus automatically start of the text is shown. I tried right align (bootstrap text-right) as shown in 3 but that didn't help
Code chunk related to this:
<div class="form-group">
<label for="" class="control-label col-xs-3">Work Space:</label>
<div class="col-xs-6">
<input type="text" class="form-control text-right" id="workspace" placeholder="">
</div>
<div class="col-xs-2">
<button type="button" id="load_files" class="btn btn-info">Load Files</button>
</div>
</div>
Edit:
Just tried this in Mozilla firefox, it works just as i want it to, but doesn't work in chrome

Set the direction CSS property to match the direction of the text you want. rtl or ltr.
input {
direction: rtl;
}
input:focus,
input:active {
direction: ltr;
}
Here's a fiddle demo for you to review. http://jsfiddle.net/yongchuc/on91y1hr/

Make radio button required, when using a custom image radio button

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.

TextBox Get clear when div show/hide using jquery

I am working on a project in which I have two DIVs (DIV1, DIV2), both have no. of text boxes which are creating dynamically.
I have to hide one of the DIV. On another DIV click event I am showing these DIVs accordingly and enter some text in those textboxes of DIV1. When I hide this div1 and show the DIV2 and enter some text in some textboxes of the DIV2 and hide it. When I show the DIV1 the textboxes are empty. I want these textboxes to retain their values that I entered before I hide it. The same occurs with DIV2 as well.
All these operations are doing by jquery and I need help in jquery.
Can any body help me please.
Thanks in Advance.

You should be hiding your divs by using .css('display', 'none'), or by .toggle().
It seems you're deleting them, and then adding new ones to the DOM.
Can you show us your code?

Try code similar as below:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<style>
.container{
border:1px solid gray;
margin:10px;
}
p,input{margin:10px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#p1").click(function(){ $("#div2").toggle();});
$("#p2").click(function(){ $("#div1").toggle();});
});
</script>
</head>
<body>
<div class="container">
<p id="p1">Text in block2</p>
<div id="div1">
<input type="text" value="Some text in div 1" class="c1" />
<input type="text" value="Some text in div 1" class="c1" />
</div>
</div>
<div class="container">
<p id="p2">Text in block1</p>
<div id="div2">
<input type="text" value="Some text in div 2" class="c2" size="20"/>
<input type="text" value="" class="Some text in div 2" size="20"/>
</div>
</div>
</body>
</html>