We Keep Coding

How to get form input to appear as query params when div is click instead of button

I have an html form that is more or less the following
<form action="/results">
<input name="q" type="text">
<div>See results</div>
</form>
If I type something into the form, such as "my search" and press "enter" I'll be taken to the Results page with something like this: mywebsite.com/results?q=my+search. My problem is that I would like to get the same behavior when someone clicks "See results," which currently takes them to the Results page but without the params. I know using <button> instead of <div> would get me the results I need, but in this situation using <button> is not practical due to how all of the templates have been written.

Concatenate ?q=searchstring to the URL when assigning to window.location.
document.querySelector("#results").addEventListener("click", function() {
let param = document.querySelector([name=q]).value;
let url = `/results?q=${encodeURIComponent(param)}`;
window.location = url;
}
<form action="/results">
<input name="q" type="text">
<div id="results">See results</div>
</form>

If you can use input type submit, try wrapping the it in the div as in this way:
<form action="/results">
<input name="q" type="text">
<div><input type="submit" value="See results" /></div>
</form>
If this not works for you, alternatively you can handle it using javascript as #Barmar answered above.

How to reference an html document with a form to another html document to create a table out of that?

I need a little bit of help. I'm stuck at making the form information I have on my first html document show up on the tables in the second html document.
Any help would really feel good right now.

I'm not sure exactly what your question means, but if you are asking about including an html inside another html, check this link: include html in another html
Edit:
If you have no option to use server-side programming, you could use the query string.
In the form, add a method="GET" attribute:
<form action="display.html" method="GET">
<input type="text" name="name" />
<input type="text" name="phone" />
<input type="submit" value="Submit" />
</form>
When they submit this form, the user will be directed to an address which includes the name, phone value as a parameter. like:
http://www.example.com/display.html?name=XYZ&phone=98745654
You should then be able to parse the query string - which will contain the parameters value - from JavaScript, using the window.location.search value:
// from display.html
<p id= 'hi' ></p>
<script>
document.getElementById("hi").innerHTML = window.location.search;
</script>
this should help you to start what you are trying to do.

How to create a form with a variable number of inputs?

Take this code for example:
var add = function() {
var added = document.createElement("div");
document.getElementById("ID").appendChild(added);
added.setAttribute("id", "Task " + document.getElementById("ID").childElementCount);
added.appendChild(document.createElement("input"));
added.appendChild(document.createElement("br"));
};
<form id="ID">
Name:
<br>
<input type="text" name="name">
<br>
</form>
<button onclick="add()">Add</button>
Every time you click the button, a new input is created for the form.
Is this the best way of making the number of form elements dynamic?
I looked into using HTML templates, but it didn't seem like there was a way to edit the ID of each individual additional element, which would be necessary for my applications.
Also, a subquestion: I'm using AngularJS and can't figure out how to add the bs-datepicker directive to my elements with JavaScript. How can I do that?
Here's an example of bs-datepicker which I know works:
<input type="text" class="form-control"
ng-model="options.fromDate"
max-date="{{options.toDate}}"
start-date="{{options.currentDateValue.toString()}}"
start-week="1" placeholder="From" bs-datepicker>

Manipulate via DOM

I want to remove some html as I don't actually have access to the HTML file. This is because it is a CMS so would it be possible to manipulate code via DOM?
Here is a code sample I have just written, how do I remove the frmMain [first form tag] but keep second from tag via DOM?
I know you cannot nest a <form> within a <form>.
<form id="frmMain" >
<form class="2ndform"></form>
</form>

You can save the reference of the second form:
var second_form = $( '.2ndform' ).remove()
Then remove the first form
$( '#frmMain' ).remove()
and finally reappend the second form wherever you want
$( '.other_wrapper' ).append( second_form );
As a last notes:
you CAN'T have html classes starting with a number.
See this
you CAN'T have nested form. See this

As already mentioned, you cannot have a form inside a form. When the browser parses the HTML, it will fix it to the best of its ability. This behavior is unspecified and is not necessarily the same cross-browser. Because I was curious, I made this:
<form id="frmMainA">
<form class="2ndForm">
</form>
</form>
<form id="frmMainB">
<form class="2ndForm">
<input type="text"/>
</form>
</form>
<form id="frmMainC">
<input type="text"/>
<form class="2ndForm">
<input type="text"/>
</form>
</form>
When run in Chrome, it spits out this:
<form id="frmMainA">
</form>
<form id="frmMainB">
<input type="text">
</form>
<form id="frmMainC">
<input type="text">
<input type="text">
</form>
It did the same thing in FF and IE10. This means that when JS is running in modern browsers, you will only have #frmMain and there won't be any .2ndForm to unwrap. If you need the form to have the class .2ndForm, you can add it to #frmMain.
var form = document.getElementById('frmMain');
form.className = form.className + ' 2ndForm');
Or
$('#frmMain').addClass('2ndForm');

Use .unwrap:
$('.2ndform').unwrap();
Docs
Or plain JavaScript:
var el = document.getElementById('frmMain');
var newcontent = el.outerHTML.replace(el.outerHTML, el.innerHTML);
document.body.innerHTML = newcontent;

Empty input onload even if it is saved in the navigator

I would like to clear all the input in my website even if the parameters for logging have been saved by the navigator.
I've tried to do that using that on the concerned input
<input type="text" name="login" placeholder="Adresse E-mail" onload="this.value=''">
Is there an other way for doing that?

What you might want to try use is the autocomplete=off parameter in your input fields.
<input type="text" name="login" placeholder="Adresse E-mail" autocomplete="off" >
This parameter can also be added to the actual <form> element -
<form name="myForm" id="myForm" method="post" autocomplete="off" >

To handle it in generic way, instead of tagging every field, use readystate change event of document and get all input elements by tag name using getElementsByTagName. Check the type of each element and then set the appropriate value.