We Keep Coding

How do I submit data from a text field in HTML to a JavaScript variable?

I cannot figure out how to pass an HTML input to a JS variable.
<form id="form" target="_self">
<input type="text" id="task" placeholder="What's on the agenda?" onsubmit="getForm()">
</form>
My HTML form with the function being called as follows:
function getForm() {
var form = document.getElementById("task").value;
console.log(form);
}
However, when I press enter after typing into the input text, it just refreshes the page and changes the URL from index.html to index.html?task=foo and doesn't log anything in the console.

Try this:
<form id="form" onsubmit="getForm()" target="_self">
<input id="task" placeholder="What's on the agenda?" type="text">
</form>
and
function getForm(event) {
event.preventDefault();
var form = document.getElementById("task").value;
console.log(form);
}
…but keep in mind that you need at least a button or an input to submit the form.

There are two issues with the OP's code.
The getForm function will not execute because onsubmit is wired up against the input element instead of the form element. HTMLInputElement doesn't emit submit events.
The default action of a form is to submit the form to the server, so even if the getForm function were correctly wired up it would execute quickly and then the page would refresh. Likely you want to prevent that default action.
Generally speaking, it's good practice to wire up event listeners in your JavaScript code. Here's a snippet that demonstrates working code akin to what the OP is attempting.
'use strict';
const taskFrm = document.getElementById('taskFrm');
const taskTxt = document.getElementById('taskTxt');
taskFrm.addEventListener('submit', e => {
e.preventDefault();
console.log(taskTxt.value);
});
<form id="taskFrm">
<input id="taskTxt" placeholder="What's on the agenda?">
</form>
For the sake of completeness, if you want to wire up the onsubmit function in the HTML, here's how:
function getForm(e) {
var form = document.getElementById("task").value;
console.log(form);
e.preventDefault(); // Or return false.
}
<form id="form" target="_self" onsubmit="getForm(event)">
<input type="text" id="task" placeholder="What's on the agenda?">
</form>

TextBox and Button JS Onclick

I have a textbox. I wanted to use a JS onclick to append the input in the textbox to the "btnGO" button as below but it's not working:
document.getElementById('btnGo').onclick = function() {
var search = document.getElementById('dlrNum').value;
window.location.url = "http://consumerlending/app/indirect/dealerComments.aspx?dlrNum=" + search;
}
<input id="dlrNum" type="text" name="dlrNum" autocompletetype="disabled" class="ui-autocomplete-input" autocomplete="off">
<input id="btnGo" type="submit" value="GO" name="GO" runat="server">
What could I be missing?

You had several problems there:
1. Your <input> elements are probably part of a form, so when you click on the submit button - the form will submit, unless you prevent it.
2. You need to use window.location.href (and not .url).
Here is the fix to your code:
document.getElementById('btnGo').onclick = function(e) {
e.preventDefault()
var search = document.getElementById('dlrNum').value;
window.location.href = "http://consumerlending/app/indirect/dealerComments.aspx?dlrNum=" + search;
}
Note the e element inside the function(e) - it's there so we can use the event object to prevent the default behavior of the form submission.

Update window.location.url to window.location:
window.location = "http://consumerlending/app/indirect/dealerComments.aspx?dlrNum=" + search;

Form - submit POST request to multiple iframes

I know that it is possible to submit POST request to an iframe by using target attribute.
Is there any way to submit POST request from one form to multiple iframes at the same time?
Both HTML and JS solutions are acceptable.

A Javascript solution would be your best bet.
<form id="form">
<input type="text" name="xyz" value="random data" />
<button type="submit">Go</button>
</form>
In JS, you would attach an event listener to your form when it is submitted. The listener would trigger a function that could send the form data to multiple targets:
var form = document.getElementById("form");
if(form.attachEvent) {
form.attachEvent("submit", submitForm);
} else {
form.addEventListener("submit", submitForm);
}
function submitForm(e) {
if(e.preventDefault) {
e.preventDefault();
}
this.target = "first_iframe";
this.submit();
var secondForm = this.cloneNode();
secondForm.target = "second_iframe";
secondForm.submit();
}

I am testing to capture the submit button value on a form

I am trying to capture the value of a submit button so I can submit the form based on this button being used. The form name incidentform and the button name is updateincidentButton. Below is the code.
$(function(){
$$("#incidentform").submit(function(e){
var =$("#updateincidentButton").val();
if(var==="Update incident"){
alert(var);
e.preventDefault();
}
})
})
Here is the basic html of the form
<form id="incidentform" action="/" method="get">
<input type="submit" class="button" id="updateincidentButton" name="updateincidentButton" value="Update Incident"/>
</form>

var is a reserved keyword in javascript. You can't use it as the name of a variable.
Change this:
var =$("#updateincidentButton").val();
to something like this:
var var1 = $("#updateincidentButton").val();

First off, you don't need two "$$".
Is the name "updateincidentButton" or the id? If it is currently the name, change it to the id:
<button id="incidentform">Click Me</button>
Same thing with the form. The hashtag that is passed into $ represents an id of an element.

First, you have to define your form somewhere...give it an ID:
<form id="aspnetForm">
....
<input type="button" id="updateincidentButton" value="Update incident"/>
</form>
Next, change your JavaScript:
$("#updateincidentButton").click(function(e){
if ($(this).val() == "Update incident"){
$("aspnetForm").submit();
}
e.preventDefault();
return false;
});

Make sure the type of the button is 'button'.
$(document).on('click', '#updateincidentButton', function () {
var value = $('#updateincidentButton').val();
if (value == 'Update incident') {
alert(value);
}
});
Then you won't even have to prevent default. Then submit form using AJAX. Posting to a URL dependent on the value of the button when clicked.

Intercept a form submit in JavaScript and prevent normal submission

There seems to be lots of info on how to submit a form using javascript, but I am looking for a solution to capture when a form has been submitted and intercept it in javascript.
HTML
<form>
<input type="text" name="in" value="some data" />
<button type="submit">Go</button>
</form>
When a user presses the submit button, I do not want the form to be submitted, but instead I would like a JavaScript function to be called.
function captureForm() {
// do some stuff with the values in the form
// stop form from being submitted
}
A quick hack would be to add an onclick function to the button but I do not like this solution... there are many ways to submit a form... e.g. pressing return while on an input, which this does not account for.
Ty

<form id="my-form">
<input type="text" name="in" value="some data" />
<button type="submit">Go</button>
</form>
In JS:
function processForm(e) {
if (e.preventDefault) e.preventDefault();
/* do what you want with the form */
// You must return false to prevent the default form behavior
return false;
}
var form = document.getElementById('my-form');
if (form.attachEvent) {
form.attachEvent("submit", processForm);
} else {
form.addEventListener("submit", processForm);
}
Edit: in my opinion, this approach is better than setting the onSubmit attribute on the form since it maintains separation of mark-up and functionality. But that's just my two cents.
Edit2: Updated my example to include preventDefault()

You cannot attach events before the elements you attach them to has loaded
It is recommended to use eventListeners - here one when the page loads and another when the form is submitted
This works since IE9:
Plain/Vanilla JS
// Should only be triggered on first page load
console.log('ho');
window.addEventListener("DOMContentLoaded", function() {
document.getElementById('my-form').addEventListener("submit", function(e) {
e.preventDefault(); // before the code
/* do what you want with the form */
// Should be triggered on form submit
console.log('hi');
})
});
<form id="my-form">
<input type="text" name="in" value="some data" />
<button type="submit">Go</button>
</form>
jQuery
// Should only be triggered on first page load
console.log('ho');
$(function() {
$('#my-form').on("submit", function(e) {
e.preventDefault(); // cancel the actual submit
/* do what you want with the form */
// Should be triggered on form submit
console.log('hi');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="my-form">
<input type="text" name="in" value="some data" />
<button type="submit">Go</button>
</form>
Not recommended but will work
If you do not need more than one event handler, you can use onload and onsubmit
// Should only be triggered on first page load
console.log('ho');
window.onload = function() {
document.getElementById('my-form').onsubmit = function() {
/* do what you want with the form */
// Should be triggered on form submit
console.log('hi');
// You must return false to prevent the default form behavior
return false;
}
}
<form id="my-form">
<input type="text" name="in" value="some data" />
<button type="submit">Go</button>
</form>

<form onSubmit="return captureForm()">
that should do. Make sure that your captureForm() method returns false.

Another option to handle all requests I used in my practice for cases when onload can't help is to handle javascript submit, html submit, ajax requests.
These code should be added in the top of body element to create listener before any form rendered and submitted.
In example I set hidden field to any form on page on its submission even if it happens before page load.
//Handles jquery, dojo, etc. ajax requests
(function (send) {
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
XMLHttpRequest.prototype.send = function (data) {
if (isNotEmptyString(token) && isNotEmptyString(header)) {
this.setRequestHeader(header, token);
}
send.call(this, data);
};
})(XMLHttpRequest.prototype.send);
//Handles javascript submit
(function (submit) {
HTMLFormElement.prototype.submit = function (data) {
var token = $("meta[name='_csrf']").attr("content");
var paramName = $("meta[name='_csrf_parameterName']").attr("content");
$('<input>').attr({
type: 'hidden',
name: paramName,
value: token
}).appendTo(this);
submit.call(this, data);
};
})(HTMLFormElement.prototype.submit);
//Handles html submit
document.body.addEventListener('submit', function (event) {
var token = $("meta[name='_csrf']").attr("content");
var paramName = $("meta[name='_csrf_parameterName']").attr("content");
$('<input>').attr({
type: 'hidden',
name: paramName,
value: token
}).appendTo(event.target);
}, false);

Use #Kristian Antonsen's answer, or you can use:
$('button').click(function() {
preventDefault();
captureForm();
});