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>

Change the URL with a GET method

is there a way to submit some selected fields to the URL with a GET method ?
by clicking on a button, I want to put a string on the URL, but using a GET method.
expected result:
test.html?test=11,13,21,34&somewords=1,2,3&demo=2

A simple form would most likely do
<form action="test.html" method="GET">
<input type="text" name="test">
<input type="text" name="somewords">
<input type="text" name="2">
<input type="submit">
</form>

Yes! Example :
function submit() {
var test = document.getElementById('test').value;
var demo = document.getElementById('demo').value;
var somewords = document.getElementById('somewords').value;
var url = 'test.html?test=' +test + '&somewords=' + somewords + '&demo=' + demo;
console.log(url); // test.html?test=1,2,3,4&somewords=noting&demo=2
// Code for get request
}
HTML
<input type="text" value="1,2,3,4" id="test">
<input type="text" value="noting" id="somewords">
<input type="text" value="noting" id="dummy">
<input type="text" value="2" id="demo">
<button onclick="submit()">Submit</button>
Live example : https://jsbin.com/cayude/edit?html,js,console,output
Hope this helps. Thanks !

If you are only interested in changing the displayed URL, use History#pushState.
history.pushState(null, null, formatURL(query));
If you actually want to navigate to a different page,
window.location.href = formatURL(query);
Assuming formatURL is a small helper utility that formats a querystring URL like what you've provided.

Dynamic URL from user input to search

What I am trying to accomplish: When a user inputs dates, number of adults ect it would dynamically add the info via javascript to the URL within the url variables. This is what I have so far: ( I am a Noob but trying to make it work )
<script type="text/javascript">
$(function () {
$('#submit').click(function() {
$('#button').click(function(e) {
var checkInDate = document.getElementById('checkInDate').value;
var checkInMonthYear = document.getElementById('checkInMonthYear').value;
var checkOutDate = document.getElementById('checkOutDate').value;
var checkOutMonthYear = document.getElementById('checkOutMonthYear').value;
var numberOfAdults = document.getElementById('numberOfAdults').value;
var rateCode = document.getElementById('rateCode').value
window.location.replace("http://www.Link.com/redirect?path=hd&brandCode=cv&localeCode=en&regionCode=1&hotelCode=DISCV&checkInDate=27&checkInMonthYear=002016&checkOutDate=28&checkOutMonthYear=002016&numberOfAdults=2&rateCode=11223");
window.location = url;
});
});

Ok, so first things first: You probably don't need to do this at all. If you create a form and add a name attribute to each input, then the submission automatically creates the URL for you. Fixed value fields can be set to type="hidden".
For this to work you need to use the "GET" method.
<form action="http://www.Link.com/redirect" method="GET">
<input type="hidden" name="path" value="hd"><br>
<input type="hidden" name="brandCode" value="cv"><br>
<input type="hidden" name="localeCode" value="en"><br>
<input type="hidden" name="regionCode" value="1"><br>
<input type="hidden" name="hotelCode" value="DISCV"><br>
<input type="text" name="checkInDate"><br>
<input type="text" name="checkInMonthYear"><br>
<input type="text" name="checkOutDate"><br>
<input type="text" name="checkOutMonthYear"><br>
<input type="text" name="numberOfAdults"><br>
<input type="text" name="rateCode"><br>
<input type="submit">
</form>
Clicking "Submit" changes the URL to the desired one.
If this does not suit your needs, you can replace parameters in the URL by following the advice in this SO answer: Answer Link
This is much better than trying to re-implement URL manipulation on your own.

Javascript to open a URL + the text input by user

Is this possible?
I have input box and a submit button.
The user will input their "reference number" (example: "hello123")
user will click the submit button.
after clicking the submit button, the javascript will open url link in a New browser Tab with a url link (which i assigned) plus the input of the user (which is hello123)
Assigned url is: www.mywebsite.com/
after clicking the submit button, the url to open by javascript is: www.mywebsite.com/print/hello123/

Check the demo: http://jsfiddle.net/Gv5bq/
HTML:
<input type="text" id="text" />
<input type="button" id="btn" value="Submit" />
jQuery:
$("#btn").click( function() {
var url = "http://www.mywebsite.com/print/" + $("#text").val();
window.open(url);
});
UPDATED: (simple JS version)
http://jsfiddle.net/Gv5bq/1/
<input type="text" id="text" />
<input type="button" id="btn" value="Submit" onClick="javascript: window.open('http://www.mywebsite.com/print/' + document.getElementById('text').value);" />

If you do not want to use jQuery for that here is an approach in pure js.
Define your html-form:
<form action="http://www.mywebsite.com/" method="get" target="_blank" id="my-form">
<input type="text" name="reference-number" id="reference-number" value="" />
<input type="submit" value="submit" />
</form>
Define and attach the handler for submission:
<script type="text/javascript">
var form = document.querySelector('#my-form'),
text_field = document.querySelector('#reference-number');
function submitHandler(){
// build the new url and open a new window
var url = form.action + 'print/' + text_field.value;
window.open(url);
// prevent form from being submitted because we already
// called the request in a new window
return false;
}
// attach custom submit handler
form.onsubmit = submitHandler;
</script>

<input type="text" value="" id="id"/>
<button type="button" id="go">GO</button>
$('#go').click(function(){
var id=$('#id').val();
var url="http://www.mywebsite.com/hello";
var new_url= url+id;
window.open(new_url);
});
Fiddle

Javascript Output results with input data

I am a newbie to javascript, I am making a simple script which will show appended link with the data entered in input field, Basically it should get the data from input field and generate link with data being submitted in input field.
Similar to the example below
Input: tony#mail.com ...> after clicking Send button
processing....
Output link: www.domain.com/route.php?email=tony#mail.com
I found this code similar to mine but it wont works like i am looking for.
<p>Enter your email or User ID
<input type="text" name="foo" id="foosite" value="" />
<a href="#"
onclick="this.href = ('http://' + document.getElementById('foosite').value + 'www.domain.com/route.php?email=')"
target="_blank">send</a>
Is that possible in javascript to make a script like this which will generate output without reloading the page?

You have the getelement in the wrong place. It should be like this if you want to do it that way.
<input type="text" name="foo" id="foosite1" value="" />
send
<input type="text" name="foo" id="foosite2" value="" />
send
http://jsfiddle.net/bowenac/J2Mc5/3/

Split your JS logic from your HTML
HTML
<p>Enter your email or User ID
<input type="text" name="foo" id="foosite" value="" />
</p>
send
<div id="url_value"></div>
JS
var a = document.getElementById('link')
a.onclick = function(e){
e.preventDefault();
var value = document.getElementById('foosite').value;
var route = "http://www.domain.com/route.php?email=" + value + ', ';
var data = "http://www.domain.com/data.php?email=" + value + ', ';
var form = "http://www.domain.com/form.php?email=" + value;
document.getElementById('url_value').innerHTML = route + data + form
}
DEMO

You can add form to your html code and send data to server using form submit, in this case you can change the action of the form before submit to custom link.
<form name="form1" action="" onSubmit="onsubmit(this)">
<p>
Enter your email or User ID
<input type="text" name="foo" id="foosite" value="" />
<input type="submit" value="send" />
</p>
</form>
<script>
function onsubmit(form)
{
//change the action of the form to your link.
form.submit();
}
</script>