We Keep Coding

Add anchor tag dynamically to page as pop up while onclick

Trying to add an <a> tag in the below <div> after submit button.
$("div#idSection").append('REPORT);
<div align="center" id="idSection">
<input type="text" id="first" placeholder="Enter id here..." maxlength="11" />
<input type="button" id="submit" value="Submit" />
</div>

You are trying to append an tag to a element after a submit button is clicked, and you are passing an argument dynamically to the href attribute of the tag. Your approach is almost correct, but there are a few issues with the syntax of the code you've provided:
The href attribute in the tag should be enclosed in quotation marks.
You are using ' onclick' instead of ' onClick'
You are trying to use the variable passed dynamically inside the single quotes of the window.open function, you should use it like this:
window.open(href=http://localhost/request+${argument})
Here's an updated version of the code:
$("div#idSection").append(`<a href="http://localhost/request+${argument}" onClick="window.open(href)" >REPORT</a>`);
This approach should work as long as the variable "argument" is defined and contains the correct value when the submit button is clicked.
Also, it's worth noting that, using window.open() might not be the best approach as it can be blocked by pop-up blockers and it may cause the browser to open the link in a new window or tab, which may not be desirable. You may consider using window.location.href or router.push() instead.
In summary, this approach is correct but needs some syntax and formatting changes.

Try this and see if this suits your requirement. Do run it on your machine as attribute "target" in anchor tag will not work on below code snippet.
$("#submit").click(function () {
var id = $("#first").val();
console.log(id);
var requestURL = "http://localhost/request?id=" + id;
console.log(requestURL);
var anchorTag = 'REPORT';
console.log(anchorTag);
$("div#idSection").append(anchorTag);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div align="center" id="idSection">
<input type="text" id="first" placeholder="Enter id here..." maxlength="11" />
<input type="button" id="submit" value="Submit" />
</div>

Your question is a bit vague. Where you have in your code "{argument passed dynamically after clicking on submit button}", I will assume you mean the contents of the text input with id "first" and when the appended <a> tag is clicked that the URL you specified needs to be appended with `?id=the-value-of-the-id-text-widget'.
When the <a> tag is clicked, there should be no need to use the JavaScript open function to go to the new URL; it's sufficient to have the URL specified as the href argument:
$( "#submit" ).click(function( event ) {
let id = $('#first').val();
let url = '<a id="a" href="http://localhost/request?id=' + id + '">REPORT</a>';
// Get rid of any previous <a> tag:
if ($('#a')) {
$('#a').remove();
}
$('#idSection').append($(url));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div align="center" id="idSection">
<input type="text" id="first" placeholder="Enter id here..." maxlength="11" />
<input type="button" id="submit" value="Submit" />
</div>

You can also achieve this requirement in a pure vanilla JavaScript.
Live Demo :
const sbmtBtn = document.getElementById('submit');
sbmtBtn.addEventListener("click", addLink);
function addLink() {
const inputVal = document.getElementById('first').value.trim();
const linkElement = document.getElementById('link');
if(linkElement) linkElement.remove();
if (inputVal) {
const anchorElement = `<a id="link" href="http://localhost/request?id=${inputVal}" target="_blank"> LINK </a>`;
document.getElementById("submit").insertAdjacentHTML("afterend", anchorElement);
} else {
alert('ID field is required');
}
}
<div align="center" id="idSection">
<input type="text" id="first" placeholder="Enter id here..." maxlength="11" />
<input type="button" id="submit" value="Submit" />
</div>

$("#submit").click(function () {
var id = $("#first").val();
console.log(id);
var requestURL = "https://localhost/request?id=" + id;
console.log(requestURL);
var anchorTag = 'REPORT';
console.log(anchorTag);
$("div#idSection").append(anchorTag);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div align="center" id="idSection">
<input type="text" id="first" placeholder="Enter id here..." maxlength="11" />
<input type="button" id="submit" value="Submit" />
</div>

function clicked() {
const id = document.getElementById('first').value;
console.log(id);
const requestURL = `https://localhost/request?id=${id}`;
console.log(requestURL);
const anchorTag = 'REPORT';
console.log(anchorTag);
document.getElementById('idSection').innerHTML += (anchorTag);
}
<div align="center" id="idSection">
<input type="text" id="first" placeholder="Enter id here..." maxlength="11" />
<input type="button" id="submit" value="Submit" onclick="clicked()" />
</div>

How can I pass value(contents) of HTML textbox to a javascript function on a button click?

I have a java script function
function findInthePage(str)
{
// code
}
How can I pass the contents of a HTML text box to the above function?
My button click code is
<input id="Text1" type="text" name="tb1" />
<input id="Button1" type="button" value="button" onclick="findInthePage(text1.value);" />

Try this:
var text = document.getElementById('Text1').value

The value property is used with Form elements, it gets or sets values to fields of the form.
To use "getElementById('id')" with form elements, they must have assigned an "id".
Here's a simple example that displays an Alert with the text written in a text box.
function test7() {
var val7 = document.getElementById("ex7").value;
alert(val7);
}
html
// input type="text" id="ex7"
// input type="button" value="Click" onclick="test7()"

You can do:
var textBox = document.getElementById("Text1");
findInthePage(textBox.value);

You can access input directly from the function like:
function findInthePage()
{
// code
var input = document.getElementById('Button1').value;
}
If you want your way:
<input id="Text1" type="text" name="tb1" />
<input id="Button1" type="button" value="button" onclick="findInthePage(document.getElementById('Button1').value);" />

Try this
var value = null;
document.getElementById("Button1").onclick = function(){
value = document.getElementById("Text1").value;
};

Try:
<input id="Button1" type="button" value="button" onClick="findInthePage(document.getElementById('Text1').value)" />

<input id="txtbox" type="text" name="tb1" />
<input id="Button1" type="button" value="button" onclick="clickme();"/>
script
function clickme() {
var aa = document.getElementById("txtbox").value;
alert(aa);
}

Show a javascript variable on html textbox

All I have to do is to show a number in a textbox and a button which add 10 every time I press it, here's my code (it doesn't work).
<head>
<script type="text/javascript">
var n=parseInt(ocument.forms["formNum"]["numero"].value);
document.getElementById("numero").value=n;
function sumar() {
n=document.forms["formNum"]["numero"].value+10;
document.forms["formNum"]["numero"].value=n;
}
function inicializar() {
n=document.forms["formNum"]["numero"].value=0;
}
</script>
</head>
<body>
<form name="formNum">
<p>
<input type="text" size="10" name="numero" id="numero" />
</p>
<p>
<input type="button" name="sumar" value="Sumar" onclick="sumar()" />
<input type="button" name="inicializar" value="Iniciar a 0" onclick="inicializar()" />
</p>
</form>
</body>

<body>
<script type="text/javascript">
function sumar(){
document.getElementById("numero").value = parseInt(document.getElementById("numero").value)+10;
}
function inicializar(){
document.getElementById("numero").value=0;
}
</script>
<form name="formNum">
<p>
<input type="text" size="10" name="numero" id="numero" value="0" />
</p>
<p>
<input type="button" value="Sumar" onclick="sumar()" />
<input type="button" value="Iniciar a 0" onclick="inicializar()" />
</p>
</form>
</body>
Five suggestions.
It is always better to give unique ids to your html elements.
Never name your HTML elements and javascript functions the same.
If you want to access the html element from javascript, if you know the id, use getElementById.
Use Firebug or Developer tools from the browser, to debug.
If you want to access your elements with the hierarchy, use elements in the form like this document.forms["formNum"].elements["numero"].value. Check this example
Demo: http://jsfiddle.net/DPJCR/

This code should work:
<input type="text" id="mytext">
<script type="text/javascript">
var elem = document.getElementById("mytext");
elem.value = "My default value";
</script>
See: Set the value of an input field
Maybe you are getting an exception from the parseInt that prevents the value from changing.

If it is an option to use jQuery, try this:
function sumar(){
$("#numero").attr("value", parseInt($("#numero").attr("value"), 10)+10);
}

Try this this will help you
var count=10;
$('#btnSumar').click(function(){
if($('#numero').val()=='')
{
$('#numero').val(count);
}else
$('#numero').val(eval($('#numero').val())+count);
});
$('#btnInc').click(function(){
$('#numero').val('');});
Fiddle here

How to clear text area with a button in html using javascript?

I have button in html
<input type="button" value="Clear">
<textarea id='output' rows=20 cols=90></textarea>
If I have an external javascript (.js) function, what should I write?

Change in your html with adding the function on the button click
<input type="button" value="Clear" onclick="javascript:eraseText();">
<textarea id='output' rows=20 cols=90></textarea>
Try this in your js file:
function eraseText() {
document.getElementById("output").value = "";
}

You need to attach a click event handler and clear the contents of the textarea from that handler.
HTML
<input type="button" value="Clear" id="clear">
<textarea id='output' rows=20 cols=90></textarea>
JS
var input = document.querySelector('#clear');
var textarea = document.querySelector('#output');
input.addEventListener('click', function () {
textarea.value = '';
}, false);
and here's the working demo.

Using the jQuery library, you can do:
<input type="button" value="Clear" onclick="javascript: functionName();" >
You just need to set the onclick event, call your desired function on this onclick event.
function functionName()
{
$("#output").val("");
}
Above function will set the value of text area to empty string.

Your Html
<input type="button" value="Clear" onclick="clearContent()">
<textarea id='output' rows=20 cols=90></textarea>
Your Javascript
function clearContent()
{
document.getElementById("output").value='';
}

You can simply use the ID attribute to the form and attach the <textarea> tag to the form like this:
<form name="commentform" action="#" method="post" target="_blank" id="1321">
<textarea name="forcom" cols="40" rows="5" form="1321" maxlength="188">
Enter your comment here...
</textarea>
<input type="submit" value="OK">
<input type="reset" value="Clear">
</form>

Putting specific element into variable

how can i get a specific element of a text input into a variable via javascript, in other words take the example below
<form id="123">
<input type="text" id="supply_qty" />
<input type="submit" name="submit" id="123" />
</form>
How do i get the element within the text input into a variable when the submit button is clicked, the problem i have is that i have multiple instances of the code above, with lots of text inputs, so i only want to get the element specific to the submit button clicked. Hopefully you will get what i mean. The reason i need this done via JavaScript and not php etc... is that i later want to use ajax with it, but for the moment i just need the variable.
Thanks

The most easiest way is to give and id to the element and user getElementById() method to grab the element on variable. Just like what you are doing right now
Simple Example:
var button = document.getElementyById("123");
button.onclick = function() {
var text = document.getElementById('supply_qty'); //now you got your element in varaiblle
};
Using jQuery make a slight change to your markup. I am just going to add some classes.
<form>
<input type="text" class="textbox" />
<input type="submit" class="submit" name="submit" />
</form>
then
$(".submit").click(function() {
var txtbox = $(this).parent("form").children(".textbox")[0];
});
Or, it might be better to bind to the submit handler of the form, on that case, give a common class to the form.
<form class="tinyforms">
<input type="text" class="textbox" />
<input type="submit" class="submit" name="submit" />
</form>
Then
$('.tinyforms').submit(function() {
var txtbox = $(this).children(".textbox")[0];
});

If you accept using jQuery you can do this:
DOM
<form class="form" action="false">
<input type="text" value="some input" name="textInput" />
<input type="text" value="some text" name="textInput2" />
<input type="submit" class="sumbit" value="Send" />
<div id="results"></div>
</form>​​​​​​​​​​​​​​​​​​​
And JavaScript
$(".form").submit( function(){
var inputs = $(this).serializeArray();
$.each(inputs , function(i, input){
$("#results").append(input.value + "<br />");
});
return false;
} );​
EDIT: Updated code and Fiddle: http://jsfiddle.net/65Xtp/4/