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>

Trying to create a form that would give a print window containg form data

As my title suggests, I'm trying to create a form that would take some user input like Name, Age, Gender, Hobbies, Contact details & Photo etc. (basically I'm thinking of making a simple local html based application that would create RESUME), and after taking user input, supposedly after clicking on the submit button it should create a new print window where every entered data should be arranged in a resume like format including photo.
This is what I'm trying for my input page...(ps: it's incomplete!!! most of my script part is just Ctrl+C & Ctrl+V 🤣
<!DOCTYPE html>
<html>
<head>
<title>Resume maker</title>
</head>
<body>
<div id="BMain" class="body">
<h1>Please enter your resume data!</h1>
<form action="#">
<p>Name</p>
<input type"text" id="name" name="name">
<p>Mother's name</p>
<input type"text" id="mName" name="mName">
<p>Father's name</p>
<input type"text" id="fName" name="fName">
<p>Gender</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<div class="container" id"dobPick">
<p>Date of Birth</p>
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'L'
});
});
</script>
</div>
</div>
<label for="myfile">Upload your photo:</label>
<input type="file" id="myPic" name="myPic"><br><br>
<input type="submit">
</form>
After clicking on the submit button I'm expecting a print window with predefined background image like some vector art or some stamp like image or some pattern, well that's post work.
This is how my print window should be looking...
Print window
Any help on this mates..... at this stage scripts looks too messy to me. I'm excited to try this on my browser.
My question is how can I make it happen or rather I say what should I do or add into my input page to get the desired output I'm expecting? My above code was just a conceptual example.

The easiest way to do this would be to add a second div element to the page outside of your form. Once the form is validated and submitted, it can be hidden and the second div can be populated with that information. You can then use CSS media queries (there are print-specific queries) and trigger the print() method in Javascript. You would need to include the following in your html file:
<link rel = "stylesheet" type = "text/css" media = "print" href = "mystyle.css">
Then, if your markup were to look like this:
<div id="resumeform">
<input id="name" type="text" />
<input id="age" type="text" />
<input id="address" type="text" />
<input id="height" type="text" />
<input id="btnSubmit" type="button" value="Submit Info"/>
</div>
<div id="result">
<span id="r_name"></span>
<span id="r_age"></span>
<span id="r_address"></span>
<span id="r_height"></span>
</div>
Your JS could look like this:
var btn = document.getElementById("btnSubmit");
btn.addEventListener("click", btnHandler);
function btnHandler(el){
var resumeform = document.getElementById("resumeform");
var result = document.getElementById("result");
var name = document.getElementById("name");
var age = document.getElementById("age");
var address = document.getElementById("address");
var height = document.getElementById("height");
var r_name = document.getElementById("r_name");
var r_age = document.getElementById("r_age");
var r_address = document.getElementById("r_address");
var r_height = document.getElementById("r_height");
r_name.innerHTML = name.value;
r_age.innerHTML = age.value;
r_address.innerHTML = address.value;
r_height.innerHTML = height.value;
resumeform.style.display = "none";
result.style.display = "block";
window.print();
}
And your CSS could look like this:
#resumeform {
display: block;
}
#result {
display: none;
}
input {
width: 200px;
display: block;
margin: 10px;
}
#media print {
span {
/* Your CSS rules would go here */
}
}
Working Fiddle:
https://jsfiddle.net/9apfwjxz/

How to handle events in dynamic elements?

I want to create a dynamic questionnaire, loading the next question dynamically, but when I load the second question, the event of the button next2 doesn't respond as if there were no event.
I think it's because I load the input with a JavaScript function. What do I have to do to make it work?
$(document).ready(function() {
var question2 = `
<form>
<input type="number" id="age" placeholder="age">
<input type="submit" id="next2">
</form>
`;
var question3 = `
<form>
<input type = "email" id="email" placeholder="email">
<input type="submit" id="next3">
</form>
`;
$('#next').click(function(e) {
e.preventDefault();
console.log(1);
$(".questions").html(question2);
});
$("#next2").click(function(e) {
e.preventDefault();
$(".questions").html(question3);
});
$("#next3").click(function() {
alert('Cool');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="questions">
<form>
<input type="text" id="name" placeholder="Name">
<button type="submit" value="Next" id="next">Next</button>
</form>
</div>
</html>

You should use $(document). It is a function trigger for any click event in the document. Then inside you can use the jquery on("click","#idname",somefunction), where the second argument specifies which specific element to target. In this case every element inside the body.
$(document).on('click', '#next', function(e) {
e.preventDefault();
$(".questions").html(question2);
});

You only need one event handler for all this, not multiple.
You are inserting the HTML into the element with the class questions with $(".questions").html. Given that you should hook the event handlers to that element with the questions class to be as close to the element as possible (not make it traverse the entire DOM looking for things in the events.
Here I took the CURRENT html and saved it to myApp which I created to hold stuff and not pollute the global namespace; Then I cycle back to it on the last. Odd that you have both button and input type submit but I also handle that. Since these are submit buttons in a form, I added the submit event in case that is how it gets triggered.
$(function() {
let myApp = {};
myApp.question2 = ` <form>I am 2
<input type="number" id="age" placeholder="age">
<input type="submit" id="next2" data-nextthing="question3">
</form>
`;
myApp.question3 = ` <form>I am 3
<input type = "email" id="email" placeholder="email">
<input type="submit" id="next3" data-nextthing="question1">
</form>
`;
myApp.question1 = $(".questions").html(); // just to store it
$(".questions")
.on('click submit', 'form, button[type="submit"], input[type="submit"]', function(event) {
event.preventDefault()
let d = $(this).data('nextthing');
$(event.delegateTarget).html(myApp[d]);
return false;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="questions">
<form>
<input type="text" id="name" placeholder="Name">
<button type="submit" value="Next" id="next" data-nextthing="question2">Next</button>
</form>
</div>

How do I make a form box and button disappear upon clicking a button?

I'm coding a form on HTML with JS that asks for the user to enter their name and displays it. I would like the form and the button to disappear when they hit submit.
<form>
<br/>What is your name: <input type="text" id="name" />
<input type="button" value="done" onclick="write_name();" />
</form>
<h4 id=welcome></h4>
The script is below:
function write_name() {
var welcome_parra = document.getElementById('welcome');
var name = document.getElementById('name');
welcome_parra.innerHTML = "Welcome " + name.value + "!";
}

Jquery Code
$(document).ready(function () {
$("#btn_sbumit").click(function () {
$(this).next().text($("#name").val());
$("#name").hide();
$(this).hide();
});
});
HTML Code
<input type="text" id="name" value="" />
<input type="button" id="btn_sbumit" value="Submit" />
<span></span>

HTML button not hiding with Javascript

I have 2 buttons on my page:
<button name="showLoginDiv" onclick="toggleLoginButton('button1','button2')" id="button1">Login</button><br>
<button name="showCreateDiv" onclick="toggleCreateButton('button1','button2')" id="button2">Create Account</button><br>
And these Javascript functions at the top of the page:
function toggleLoginButton(id1, id2) {
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
// show login form
var LoginForm = document.getElementById('loginForm');
LoginForm.style.display = 'block';
}
function toggleCreateButton(id1, id2) {
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
// show create account form
var CreateForm = document.getElementById('createForm');
CreateForm.style.display = 'block';
}
When I click either of the buttons, I want them both to disappear, and a form to show. The first button disappears correctly, but the second button doesn't, the form appears afterwards so it is not getting stuck on that line. Both buttons should disappear and a form then appears. Something is wrong with one of the style.display = 'none' lines.
edit: before and after clicking button screenshots:

Ditto to #Gilad Artzi's comment, your code seems to work (https://jsfiddle.net). I combined both of your functions and hard-coded the button ID's. Does this altered HTML work for you?
<!-- Buttons -->
<button name="showLoginDiv" onclick="showForm('loginForm')" id="button1">Login</button>
<br>
<button name="showCreateDiv" onclick="showForm('createForm')" id="button2">Create Account</button>
<br>
<!-- Forms -->
<form id="loginForm">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" />
</div>
<div>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_mail" />
</div>
<button name="login">Login</button>
</form>
<form id="createForm">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" />
</div>
<div>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_mail" />
</div>
<button name="create">Create Account</button>
</form>
<script>
function showForm(formID) {
document.getElementById("button1").style.display = 'none';
document.getElementById("button2").style.display = 'none';
var form = document.getElementById(formID);
form.style.display = 'block';
}
</script>

Fixed it, the problem was (for some reason) the box shadow of the buttons was being left behind. I've changed that on button click as well and it works fine now