We Keep Coding

I want to add an button onclick function, to add several toasts in javascript

I have a form. And I want to write an onClick function which whenever is clicked, a toast including inputs value appears at the end of the page.
here I wrote a function that produce a toast just on the first click.
function Function1() {
var y = document.getElementsByTagName("select")[0].value;
var z = document.getElementsByTagName("input")[0].value;
var x = document.getElementById("toast1");
x.innerHTML = y + " has a " + z + "<span >×</span>";
x.className = "show";
}
<form class="needs-validation" novalidate>
<h5>Select the owner?</h5>
<div class="form-group col mx-auto" style="width: 80%;">
<label for="validationDefault01" class="sr-only">households</label>
<select
class="custom-select place-holder form-control form-control-lg OwnerName"
style="font-size: 15px;"
id="validationDefault01"
style="border-radius: 2px;"
required
>
<option value="" selected hidden>Choose...</option>
<option value="Jack London"> Jack London</option>
<option value="Sarah London"> Sarah London</option>
<option value="Mike"> Mike</option>
</select>
</div>
<br />
<h5>What is the brand?</h5>
<div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
<label for="validationCustom01" class="sr-only">Brand</label>
<input
class="form-control brand"
type="text"
required
id="validationCustom01"
style="font-size: 15px; height: 40px;"
placeholder="Brand"
/>
<div class="valid-feedback">correct</div>
</div>
<br />
<h5>What is the model year?</h5>
<div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
<label for="validationCustom01" class="sr-only">yyyy</label>
<input
class="form-control"
type="text"
required
id="validationCustom01"
style="font-size: 15px; height: 40px;"
onkeypress="return CheckNumeric()"
placeholder="yyyy"
/>
<div class="valid-feedback">correct</div>
</div>
<br />
<h5 class="mx-2">How much is worth?</h5>
<div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
<div class="input-group-prepend">
<div
class="input-group-text font-weight-bold"
style="
font-size: 15px;
background-color: rgba(50, 157, 105, 1);
color: white;
"
>
$
</div>
</div>
<label for="validationDefault01" class="sr-only">deposite</label>
<input
type="text"
class="form-control floatNumber"
id="validationDefault01"
style="font-size: 15px;"
onkeypress="return CheckNumeric()"
onkeyup="FormatCurrency(this)"
placeholder="example: 10000"
required
/>
</div>
<p id="demo"></p>
<br />
<div class="row">
<div class="col">
<button
class="quebtn1 mx-auto"
style="width: 130px;"
type="button"
onclick="Function1()"
>
Add Vehicle
</button>
</div>
</div>
<div class="row">
<div class="col-6">
<button class="quebtn1 float-right" type="button">Back</button>
</div>
<div class="col-6">
<button class="quebtn1" type="submit">Next</button>
<br />
</div>
<div class="row pt-0 mx-auto text-center">
<div
class="toast-body toast no-gutters"
data-autohide="false"
role="alert"
aria-live="assertive"
aria-atomic="true"
id="toast1"
></div>
</div>
</div>
</form>
But I want when user fill the form and click on "add vehicle" button to add another vehicle again and again, each time a toast including information of the previous vehicle user added, produce.

To understand why you aren't getting the results you're looking for, you have to understand the DOM. Currently, whenever the button is clicked, you are always changing the same DOM element.
var x = document.getElementById("toast1");
x.innerHTML = y + " has a " + z + "<span >×</span>";
x.className = "show";
See how you're selecting the element with the ID of toast1 and manipulating that element every time by setting its innerHTML and className?
What you want to do is create a new element, and place that new element underneath the element with the ID of toast1.
To create an new element, you would use createElement:
var newEl = document.createElement("p");
newEl.innerHTML = y + " has a " + z + "<span >×</span>";
newEl.className = "show";
And then to insert it use appendChild:
x.appendChild(newEl);
Here's the complete code:
function Function1() {
var y = document.getElementsByTagName("select")[0].value;
var z = document.getElementsByTagName("input")[0].value;
var x = document.getElementById("toast1");
var newEl = document.createElement("div");
newEl.innerHTML = y + " has a " + z + "<span >×</span>";
newEl.className = "show";
x.appendChild(newEl);
}
<form class="needs-validation" novalidate>
<h5>Select the owner?</h5>
<div class="form-group col mx-auto" style="width: 80%;">
<label for="validationDefault01" class="sr-only">households</label>
<select
class="custom-select place-holder form-control form-control-lg OwnerName"
style="font-size: 15px;"
id="validationDefault01"
style="border-radius: 2px;"
required
>
<option value="" selected hidden>Choose...</option>
<option value="Jack London"> Jack London</option>
<option value="Sarah London"> Sarah London</option>
<option value="Mike"> Mike</option>
</select>
</div>
<br />
<h5>What is the brand?</h5>
<div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
<label for="validationCustom01" class="sr-only">Brand</label>
<input
class="form-control brand"
type="text"
required
id="validationCustom01"
style="font-size: 15px; height: 40px;"
placeholder="Brand"
/>
<div class="valid-feedback">correct</div>
</div>
<br />
<h5>What is the model year?</h5>
<div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
<label for="validationCustom01" class="sr-only">yyyy</label>
<input
class="form-control"
type="text"
required
id="validationCustom01"
style="font-size: 15px; height: 40px;"
onkeypress="return CheckNumeric()"
placeholder="yyyy"
/>
<div class="valid-feedback">correct</div>
</div>
<br />
<h5 class="mx-2">How much is worth?</h5>
<div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
<div class="input-group-prepend">
<div
class="input-group-text font-weight-bold"
style="
font-size: 15px;
background-color: rgba(50, 157, 105, 1);
color: white;
"
>
$
</div>
</div>
<label for="validationDefault01" class="sr-only">deposite</label>
<input
type="text"
class="form-control floatNumber"
id="validationDefault01"
style="font-size: 15px;"
onkeypress="return CheckNumeric()"
onkeyup="FormatCurrency(this)"
placeholder="example: 10000"
required
/>
</div>
<p id="demo"></p>
<br />
<div class="row">
<div class="col">
<button
class="quebtn1 mx-auto"
style="width: 130px;"
type="button"
onclick="Function1()"
>
Add Vehicle
</button>
</div>
</div>
<div class="row">
<div class="col-6">
<button class="quebtn1 float-right" type="button">Back</button>
</div>
<div class="col-6">
<button class="quebtn1" type="submit">Next</button>
<br />
</div>
<div class="row pt-0 mx-auto text-center">
<div
class="toast-body toast no-gutters"
data-autohide="false"
role="alert"
aria-live="assertive"
aria-atomic="true"
id="toast1"
></div>
</div>
</div>
</form>
Also, here are some tips that aren't directly related to your question:
There's also querySelector instead of stuff like getElementsByTagName. It lets you basically use CSS selectors to select elements, which a lot of people find easy to use.
For this sort of DOM manipulation, you also might want to try using the jQuery library
It's good to learn how DOM manipulation works for educational purposes, but on real projects the field has moved towards UI libraries like React and Vue.
You named your function Function1. This works, but it's better if you could name it something more descriptive, like addVehicle. That way it's more clear what it's doing. With one function Function1 is probably fine, but imagine if you had 12 functions and had to think to yourself, "Wait, what is Function3 doing again? Did I want to use Function7?"
It's good to learn by doing, but it's also good to mix that with a more "bottom up" approach of reading books and stuff to give you the foundation you'll need for fun projects like this.

Calling JQuery Button Clicks/Form Submit in Firebase Functions and Hosting

I am trying to make a website using Firebase Functions and Hosting Feature. Everything works perfectly but for some reason when the user tries to fill the form, the website reloads. I am trying to place an onClick Listener on the button in the form or attach the onSubmit to the form. But nothing gets called. I don't know what I am doing wrong. Any help will be appreciated.
<form id="join-us-form" class="container" onsubmit="joinUsButtonCalled()">
<div class="form-row">
<div class="form-group col-sm-12">
<label for="joinUsFullName" class="sr-only">Full Name</label>
<div class="input-group mb-2 mb-sm-0" style="border: 1px solid white; border-radius: 5px">
<div class="input-group-addon" style="background-color: transparent">
<i class="fal fa-user" style="color: white;"></i>
</div>
<input type="text" class="form-control" id="joinUsFullName" placeholder="Your Name"
required style="background: transparent; color: white">
<div class="invalid-feedback">
Please provide us with your name.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-12">
<label for="joinUsEmailAddress" class="sr-only">Email Address</label>
<div class="input-group mb-2 mb-sm-0" style="border: 1px solid white; border-radius: 5px">
<div class="input-group-addon" style="background-color: transparent">
<i class="fal fa-envelope" style="color: white;"></i>
</div>
<input type="email" class="form-control" id="joinUsEmailAddress"
placeholder="Email Address"
required style="background: transparent; color: white">
<div class="invalid-feedback">
Please provide a valid email.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-12">
<label for="joinUsWorkAs" class="sr-only">Work as..</label>
<div class="input-group mb-2 mb-sm-0" style="border: 1px solid white; border-radius: 5px">
<div class="input-group-addon" style="background-color: transparent">
<i class="fal fa-tasks" style="color: white;"></i>
</div>
<input type="text" class="form-control" id="joinUsWorkAs"
placeholder="e.g: Designer, App Developer ..."
required style="background: transparent; color: white">
<div class="invalid-feedback">
Please provide a valid work as.
</div>
</div>
</div>
</div>
<button id="joinUsButton" class="btn btn-warning btn-rounded" type="submit" onClick="joinUsButtonCalled()">Get in Touch</button>
</form>
<script>
function joinUsButtonCalled(event){
$('#join-us-form').preventDefault();
console.log('I am being called here in Join Us ()');
event.preventDefault();
}
</script>

Since you are using JQUERY I would try something like this:
$('#join-us-form').submit(function(ev) {
ev.preventDefault(); //to stop the form from submitting
//do your validation stuff
this.submit(); // If all the validations succeeded
});
$('#joinUsButton').on('click', function(ev){
ev.preventDefault(); //to stop the form from submitting
//do your validation stuff
$('#join-us-form').submit();// If all the validations succeeded
});
The problem with your script was that "event" was actually "undefined" cause "onSubmit" doesn't pass any argument to the function "joinUsButtonCalled".
Same for "$('#join-us-form').preventDefault();" cause preventDefault() is not a method of a generic JQUERY object, it belong to the EventObject, like the ones fired by a user click.
I guess your console was full of "undefined" error.
Finally you can get rid of the "onSumbit" and "onClick" attribute:
<form id="join-us-form" class="container">
...
<button id="joinUsButton" class="btn btn-warning btn-rounded" type="submit">Get in Touch</button>
</form>

Why does type="email" break my buttons?

When I have my email field on a form defined this way:
<div style="padding-top: 1em">
<div class="fieldLabel">
<legend>Email Address</legend>
</div>
<input [(ngModel)]="surveyFormData.email" type="email" style="width: 20em;" name="email" />
</div>
Buttons further down the page stop getting click events when the users touches or fills out the email field. If I remove the type="email" from my <input /> tag the buttons continue to work but leaving the type="email" in there breaks my buttons.
Here is the code for my button:
<input type="button" value=" + " (click)="onPlusElectedPosition()">
This is all code from an existing Angular app that I am taking over. And I am new to Angular so I have no doubt that I am missing something simple.
Amy asked for code for my button, so here it is:
onPlusElectedPosition() {
var newPosition:AlumniRole = new AlumniRole();
if(isNullOrUndefined(this.surveyFormData.electedPositions)) {
this.surveyFormData.electedPositions = new Array(0);
}
this.surveyFormData.electedPositions.push(newPosition);
}
So the form I am working on is rather long which is why I did not post the whole thing initially. Keep reading for my full source code:
<div class="wrap">
<h1>
Community Outreach
</h1>
<p>
<span class="carolinaBlue">Purpose:</span> To quantify the UNC School of Law's <span class="carolinaBlue">
Legacy
of Leadership
</span> via Carolina Law alumni's stories of service, volunteerism, and leadership across the state
and nation. Information gathered will be utilized in a variety of Carolina Law communnications/marketing pieces (for instance,
an online presence with interactive maps) designed to illustrate Carolina Law alumni's leadership in the communities
where they live and work.
</p>
<form #ofd="ngForm">
<h2>Personal Information</h2>
<fieldset>
<div style="display: inline-block;">
<div style="display: inline-block; padding-right: 1em;">
<legend>First Name</legend><input [(ngModel)]="surveyFormData.firstName" name="firstName" type="text" style="width: 20em;" />
</div>
<div style="display: inline-block; padding-right: 1em;"><legend>Middle Name</legend><input [(ngModel)]="surveyFormData.middleInitial" name="middleInitial" type="text" style="display: inline-block; width: 20em; " /></div>
<div style="display: inline-block; padding-right: 1em;"><legend>Last Name</legend><input [(ngModel)]="surveyFormData.lastName" name="lastName" type="text" style=" display: inline-block; width: 20em;" /></div>
</div>
<div style="padding-top: 1em" >
<div class="fieldLabel">
<legend>UNC Law Class Year</legend>
</div>
<input type="number" [(ngModel)]="surveyFormData.classYear" name="GraduationYear" min="1960" max="2019" style="width: 6em;" placeholder="YYYY" />
</div>
<div style="padding-top: 1em"><div class="fieldLabel"><legend>Home Address</legend></div><input [(ngModel)]="surveyFormData.streetAddress" name="streetAddress" type="text" style="width:30em;" /> </div>
<div style="display: inline-block; padding-top: 1em">
<div style="display: inline-block; padding-left: 12em; padding-right: 1em;">
<legend>City</legend><input [(ngModel)]="surveyFormData.city" name="City" style="width: 14em;" />
</div>
<div style="display: inline-block; padding-right: 1em;">
<legend>State</legend><input [(ngModel)]="surveyFormData.state" name="State" style="width: 10em;" />
</div>
<div style="display: inline-block; padding-right: 1em;">
<legend>ZIP Code</legend><input [(ngModel)]="surveyFormData.postalCode" name="postalCode" style="width: 7em;" />
</div>
</div>
<!-- leaving this next line as is causes my problems, removing the type="email" "fixes" my problem but removes the validation rules -->
<div style="padding-top: 1em"><div class="fieldLabel"><legend>Email Address</legend></div><input [(ngModel)]="surveyFormData.email" type="email" style="width: 20em;" name="email" /></div>
<div style="padding-top: 1em"><div class="fieldLabel"><legend>Employer Name, Title</legend></div><input [(ngModel)]="surveyFormData.employerName" name="employerName" type="text" style="width: 24em;" /></div>
<div style="padding-top: 1em"><div class="fieldLabel"><legend>Practice Area(s)</legend></div><input [(ngModel)]="surveyFormData.practiceArea" name="practiceArea" type="text" style="width: 24em;" /></div>
<!-- </div> -->
</fieldset>
<h2>Volunteer Leadership Roles</h2>
<p>Please share your commitment to community leadership by noting all organizations you have voluntarily served below.</p>
<div *ngFor="let eachRole of surveyFormData.leadershipRoles; let i=index">
<leadership-role [idx]="i" [role]="eachRole" (deletePosition)="deleteLeadershipRole($event)" #role></leadership-role>
</div>
<input type="button" value=" + " (click)="onPlusLeadershipRole()">
<!-- <h2>Elected Office</h2>
<p>Please share your commitment to public service by noting all elected positions you have held below.</p> -->
<h2>Public Service Roles</h2>
<p>Please share all elected and/or nonelected public service positions you have held, including military service, below.</p>
<div *ngFor="let eachPosition of surveyFormData.electedPositions; let i=index">
<elected-position [idx]="i" [role]="eachPosition" (deletePosition)="deleteElectedPosition($event)" #role></elected-position>
</div>
<input type="button" value=" + " (click)="onPlusElectedPosition()">
<h2>Pro Bono Legal Services</h2>
<p>Please share your commitment to Pro Bono service by noting the hours you commit, and the clients you serve annually.</p>
<fieldset>
<input [(ngModel)]="surveyFormData.proBonoHours" type="radio" name="probono" value="0-25">1-25 hrs<br>
<input [(ngModel)]="surveyFormData.proBonoHours" type="radio" name="probono" value="26-50">26-50 hrs<br>
<input [(ngModel)]="surveyFormData.proBonoHours" type="radio" name="probono" value="51-100">51-100 hrs<br>
<input [(ngModel)]="surveyFormData.proBonoHours" type="radio" name="probono" value="gt100">>100 hrs
<p class="extraSpace">Please provide a description of the type(s) of pro bono service you engaged in</p>
<textarea [(ngModel)]="surveyFormData.proBonoDescription" name="proBonoDescription" rows="8" cols="60"></textarea>
</fieldset>
<h2>Talking to Students About Community Leadership and Public Service</h2>
<fieldset>
<p>
<input [(ngModel)]="surveyFormData.checkedTalkToStudents" type="checkbox" name="mentoring">
Please check this box if you are willing to speak to Carolina Law 3L students about how to get
involved in public service and what it means to be a leader in your community.
</p>
</fieldset>
<!-- removed per Matt Marvin and Adam Stiffler on 9/14/2017
<h2>Other Information and/or Feedback</h2>
<p>Please share any other information and/or provide feedback you wish to share with the Carolina Law Advancement Office</p>
<textarea [(ngModel)]="surveyFormData.feedback" name="feedback" rows="8" cols="60"></textarea>
-->
<div><button class="extraSpace" type="button" value="Send" (click)="onProcessForm()">Send</button></div>
</form>
</div>

optimize a large angularjs table

Here is the case, I am trying to optimize a table that is used to calculate financial report(a little bit similar to excel). The terrible thing is the whole table structure is stored on server including even rowspan and td colspan. So it produces like 3000 cells, and once one binds with watchers. We test it with IE 10 on a 4GB Memory, i3 processor laptop, you know what happened then. I tried to replace some binding with one-time binding as much as I could, I wrote a directive to dynamically create minimal cell content and I tried to avoid using isolated-scope directives. All those methods don't help much. Can give some suggestion that what else I can do with it? Many Thanks!
<table id="main_table_{{uitab.id}}"
class="table_new_style table table-new-border"
style="table-layout: fixed; margin-bottom: 0;"
ng-style="{'width':uitab.table.width?uitab.table.width+'px':'100%'}">
<thead>
<tr ng-repeat="uiheadrow in uitab.table.thead.headRows" style = "height:0px;">
<th ng-repeat="uiheadcell in uiheadrow.headCells"
ng-hide="uiheadcell.hide"
ng-attr-rowspan="{{uiheadcell.rowspan}}"
ng-attr-colspan="{{uiheadcell.colspan}}"
style="padding:0;border:0;height:0px;"
ng-style="{'width':uiheadcell.width+'%'}">
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="uirow in uitab.table.tbody.rows |filter:uitab.table.filterChoose"
ng-init="rowIndex = $index+1;"
ng-hide="uirow.del||uirow.hide" ng-post-repeat-directive
>
<!-- style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
'nowrap':uicell.nowrap,
-->
<td
ng-class="{'invalide':uicell.invalide}"
ng-repeat="uicell in uirow.cells"
ng-hide="uicell.hide"
ng-style="{'text-align':uicell.align}"
ng-attr-colspan="{{uicell.colspan}}"
ng-attr-rowspan="{{uicell.rowspan}}"
ng-dblclick="editTextArea(uicell)"
>
<input type="checkbox" ng-if="uicell.dataType=='checkbox'"
ng-model="uirow.checked"> <!-- <div class="checkbox" ng-if="uicell.dataType=='checkbox'">
<label>
<input type="checkbox" ng-checked="uicell.checked">{{uicell.label}}
</label>
</div> --> <!-- ng-disabled="uirow.id" --> <select
style="width: 100%;position: relative;z-index: 1;"
onchange="window.changeflag=true"
ng-class="{'font-bold-row':uicell.font.bold}"
ng-focus="inputFocus(uicell)"
ng-blur="uicell.validate();exeFuncs(uitab)"
ng-if="(uicell.dataType=='select'&&!uicell.custom&&!uirow.id)"
ng-model="uicell.value"
ng-options="option.value as option.name for option in uicell.options">
</select> <input
id="{{'select_'+uitab.id+'_'+uirow.rowIndex+'_'+uicell.colIndex}}"
ng-if="(uicell.dataType=='select'&&uicell.custom&&!uirow.id)||uicell.writeable"
ng-class="{'font-bold-row':uicell.font.bold}"
onchange="window.changeflag=true"
ng-focus="inputFocus(uicell)"
ng-blur="uicell.validate();exeFuncs(uitab)" placeholder="请选择"
style="width: 100%;" type="text" ng-select
ng-select-topoffset="{{uimodule.tabs.length==1?30:0}}"
ng-select-cell="uicell" ng-model="uicell.selectname" /> <span
ng-if="(uicell.dataType=='select'&&uirow.id)&&!uicell.writeable"
ng-class="{'font-bold-row':uicell.font.bold}"
ng-repeat="option in uicell.options|filter:uicell.value">{{option.name}}</span>
<span ng-if="uicell.dataType=='label'"
ng-class="{'font-bold-row':uicell.font.bold}">{{uicell.value}}{{uicell.serial?rowIndex:''}}</span>
<a
ng-href="/download.sword?ctrl=DemoCtrl_downloadallfile&mbpath={{uicell.value}}{{getAuditParams()}}"
ng-class="{'font-bold-row':uicell.font.bold}"
ng-if="uicell.dataType=='href'&&uicell.value"
style="font-weight: bold;" target="_blank">{{uirow.data[uicell.labelProperty]}}</a>
<span ng-if="uicell.dataType=='href'&&!uicell.value"
ng-class="{'font-bold-row':uicell.font.bold}">{{uirow.data[uicell.labelProperty]}}</span>
<a
href="javascript:;"
ng-class="{'font-bold-row':uicell.font.bold}"
ng-click="showDialog(uicell, uirow)"
ng-if="((uicell.dataType=='dialog'&&(uirow.data[uicell.dataSource])) || ((uicell.dataType=='TAB') && uicell.href != '' && uicell.href != '/'))"
style="font-weight: bold;">{{uirow.data[uicell.labelProperty]}}</a>
<span ng-if="((uicell.dataType=='dialog'&&!(uirow.data[uicell.dataSource])) || ((uicell.dataType=='TAB') && (uicell.href == '' || uicell.href == '/')))"
ng-class="{'font-bold-row':uicell.font.bold}">{{uirow.data[uicell.labelProperty]}}</span>
<input ng-if="uicell.dataType=='text'"
ng-class="{'font-bold-row':uicell.font.bold}"
ng-focus="inputFocus(uicell)"
ng-blur="uicell.validate();exeFuncs(uitab)"
onchange="window.changeflag=true"
ng-paste-text ng-paste-cell='uicell' ng-paste-row='uirow' ng-paste-table="uitab.table.tbody" ng-paste-tab="uitab"
style="width: 100%;" type="text" ng-model="uicell.value" /> <!-- ng-click="editTextArea(uicell.value)" -->
<div ng-if="uicell.dataType=='disable'">
<span ng-if="uicell.value">{{uicell.value}}</span> <span
ng-if="!uicell.value">---</span>
</div>
<!-- ng-autotextarea -->
<div ng-if="uicell.dataType=='textarea'" ng-attr-id="{{uitab.id+'_'+uirow.rowIndex+'_'+uicell.colIndex}}"
ng-class="{'font-bold-row':uicell.font.bold}"
style="outline:none;position: relative;z-index: 1;margin: 3px;min-height:16px;white-space:normal;word-break:break-all;word-wrap:break-word; "
ng-bind-html="getTextareaDivText(uicell.value)"
ng-paste-text ng-paste-cell='uicell' ng-paste-row='uirow' ng-paste-table="uitab.table.tbody" ng-paste-tab="uitab"
contenteditable="true" ng-model="uicell.value"
>
</div>
<!-- <div
ng-if="uicell.dataType=='textarea'"
style="margin: 3px;"
>
<textarea
ng-focus="inputFocus(uicell)"
ng-class="{'font-bold-row':uicell.font.bold}"
ng-blur="uicell.validate()"
ng-click="editTextArea(uicell)"
onchange="window.changeflag=true"
readonly="readonly"
ng-style="{'height':getTextAreaHeight(uirow)+'px'}"
style="width:100%;resize: none;overflow: hidden;"
ng-model="uicell.value"></textarea>
</div> -->
<!-- <div ng-if="uicell.dataType=='textarea2'">
<div style="margin-top: 6px; float: right; width: 30px;"
ng-if="uicell.showEditBtn">
<a ng-click="editTextArea(uicell)"
ng-class="{'font-bold-row':uicell.font.bold}"
href="javascript:;"><i class="primary icon-zoom-in"></i></a>
</div>
<div
style="width: auto;">
<textarea ng-focus="inputFocus(uicell)"
ng-class="{'font-bold-row':uicell.font.bold}"
ng-blur="uicell.validate()"
ng-dblclick="editTextArea(uicell)"
onchange="window.changeflag=true"
ng-style="{'overflow-y':uicell.height>16?'auto':'hidden','height':uicell.height+'px'}"
style="width:100%;resize: none;overflow: hidden;"
ng-style="{'height':getTextAreaHeight(uicell)+'px'}"
ng-change="resetTextAreaHeight(uicell)"
ng-model="uicell.value"></textarea>
ng-keyup="resetTextAreaHeightOnKeyup($event,uicell)"
ng-style="{'height':uicell.height+'px'}"
<textarea ng-focus="inputFocus(uicell)"
ng-class="{'font-bold-row':uicell.font.bold}"
ng-blur="uicell.validate()"
ng-dblclick="editTextArea(uicell)"
onchange="window.changeflag=true"
ng-autotextarea
readonly="readonly"
onpaste="myFunction(event)"
style="width:100%;resize: none;overflow: hidden;height:16px;"
ng-model="uicell.value"></textarea>
<div
ng-blur="uicell.validate()"
ng-dblclick="editTextArea(uicell)"
class="test_box"
readonly="readonly"
oninput="window.changeflag=true;"
ng-model="uicell.value"
>{{uicell.value}}</div>
</div>
</div> -->
<div ng-if="uicell.dataType=='upload'&&uirow.id&&uicell.haveCjmbFlag&&uitab.id!='10101-1'&&uitab.id!='10101-2'
&&uitab.id!='10101-3'&&uitab.id!='10201-1'&&uitab.id!='10201-2'&&uitab.id!='10201-3'&&uitab.id!='10201-3'&&uitab.id!='10301-1'">
<a ng-show="uicell.ftjlURL"
href="javascript:;"
ng-click="openFtjl(uicell.ftjlURL)">访谈</a>
<a href="javascript:;"
ng-fileupload-url="{{uicell.uploadUrl}}"
ng-fileupload-param='{"xmid":"{{xmid}}","cjbddm":"{{cjbddm}}","cjbgdm":"{{uitab.id}}","cjmxdm":"{{uirow.data.cjmxdm}}"}'
ng-fileupload-cell='uicell' ng-fileupload-row='uirow'
ng-fileupload-template='{{uirow.data[uicell.templateProperty]}}'
ng-fileupload>上传</a> <a ng-show="uicell.value"
href="javascript:;"
ng-click="viewFile(uirow.data.cjmxdm,uicell.isRefXm)">预览({{uirow.data.fjsl}})</a>
<a ng-show="uicell.value" href="javascript:;"
ng-click="delFile(uirow.data.cjmxdm,uicell,uirow)">删除</a>
</div>
<div ng-if="uicell.dataType=='upload'&&uirow.id&&!uicell.haveCjmbFlag">
<a href="javascript:;"
ng-fileupload-url="{{uicell.uploadUrl}}"
ng-fileupload-param='{"xmid":"{{xmid}}","cjbddm":"{{cjbddm}}","cjbgdm":"{{uitab.id}}","cjmxdm":"{{uirow.data.cjmxdm}}"}'
ng-fileupload-cell='uicell' ng-fileupload-row='uirow'
ng-fileupload-template='{{uirow.data[uicell.templateProperty]}}'
ng-fileupload>上传</a> <a ng-show="uicell.value"
href="javascript:;" ng-click="viewFile(uirow.data.cjmxdm,uicell.isRefXm)">预览({{uirow.data.fjsl}})</a>
<a ng-show="uicell.value" href="javascript:;"
ng-click="delFile(uirow.data.cjmxdm,uicell,uirow)">删除</a>
</div>
<div ng-if="uicell.dataType=='upload'&&uirow.id&&uicell.haveCjmbFlag&&(uitab.id=='10101-1'||uitab.id=='10101-2'
||uitab.id=='10101-3'||uitab.id=='10201-1'||uitab.id=='10201-2'||uitab.id=='10201-3'||uitab.id=='10201-3'||uitab.id=='10301-1')">
<a href="javascript:;"
ng-fileupload-url="{{uicell.uploadUrl}}"
ng-fileupload-param='{"xmid":"{{xmid}}","cjbddm":"{{cjbddm}}","cjbgdm":"{{uitab.id}}","cjmxdm":"{{uirow.data.cjmxdm}}"}'
ng-fileupload-cell='uicell' ng-fileupload-row='uirow'
ng-fileupload-template='{{uirow.data[uicell.templateProperty]}}'
ng-fileupload>上传</a> <a ng-show="uicell.value"
href="javascript:;"
ng-click="viewFile(uirow.data.cjmxdm,uicell.isRefXm)">预览({{uirow.data.fjsl}})</a>
<a ng-show="uicell.value" href="javascript:;"
ng-click="delFile(uirow.data.cjmxdm,uicell)">删除</a>
<a ng-href="/download.sword?ctrl=DemoCtrl_downloadallfile&mbpath={{uicell.cjmbFileUrl}}{{getAuditParams()}}"
target="_blank">模板</a>
</div>
<div ng-if="uicell.dataType=='upload'&&!uirow.id">
保存
</div>
<div ng-if="uicell.dataType=='fileselect'">
获取
<a ng-show="uicell.value" href="javascript:;"
ng-click="viewFile(uirow.id)">预览</a>
</div> <input ng-if="uicell.dataType=='number'"
onchange="window.changeflag=true"
ng-class="{'font-bold-row':uicell.font.bold}"
ng-init="numberCellChange(uitab,$index);numberInit(uicell);"
ng-focus="inputFocus(uicell)"
ng-paste-text ng-paste-cell='uicell' ng-paste-row='uirow' ng-paste-table="uitab.table.tbody" ng-paste-tab="uitab"
ng-blur="uicell.validate();exeFuncs(uitab,uicell,uirow.rowIndex,$index);sumRowRefresh(uitab);changeReport(uitab)"
style="width: 100%; text-align: right;" type="text"
ng-model="uicell.value" /> <!-- ng-class="{'font-bold-row',uitab.table.fontBoldRows&&uitab.table.fontBoldRows.indexOf($index)>=0}" -->
<input ng-if="uicell.dataType=='datetime'"
onchange="window.changeflag=true"
ng-focus="inputFocus(uicell)"
ng-blur="uicell.validate();exeFuncs(uitab)"
ng-class="{'font-bold-row':uicell.font.bold}"
ng-format="{{uicell.format}}" type="text" ng-datetimepicker
ng-timepicker="{{uicell.timepicker}}"
style="width: 100%;" ng-model="uicell.value"
class="l_member_date"
ng-paste-text ng-paste-cell="uicell" ng-paste-row="uirow" ng-paste-table="uitab.table.tbody" ng-paste-tab="uitab">
</td>
</tr>
<tr ng-if="uitab.table.sumRow"
style="height: 28px; color: #858585;">
<td style="padding: 10px 9px; font-size: 14px;"
ng-repeat="col in uitab.table.columns" ng-hide="col.hide"
ng-style="{'text-align':col.align}"><span
ng-if="$index==0">合计</span> <span
ng-if="$index!=0&&!col.sumCol">――</span> <span
ng-if="$index!=0&&col.sumCol">{{col.sum}}</span></td>
</tr>
</tbody>
</table>

Logging into website failure

I did look into tutorials obviously but the html I have is different and I tried a lot of things (the code I will post is the last thing I tried). I will provide you with the html too.
WebBrowser1.Navigate("THE_WEBSITE")
WebBrowser1.Document.GetElementById("tbtLoginID").SetAttribute("onfocus", "javascript:$(this).val('ID_GOES_HERE');$('#wrong_password_board').css('display','none');")
WebBrowser1.Document.GetElementById("tbtPassword").SetAttribute("value", "PASS_PROBABLY_GOES_HERE")
WebBrowser1.Document.GetElementById("div_123").SetAttribute("onpress", "rockLogin($('#loginform'))")'
And this is the HTML (I think it's everything that matters, the website is
www.microvolts.com anyway)
<form id="loginform" action="/Account/login" method="POST">
<div class="left1"> </div>
<div class="login_info1">
<div class="icon_rh">
</div>
<div class="floatleft" style="margin-bottom: 2px;">
<input id="tbtLoginID" width="110px" maxlength="25" height="17px" class="text_box" value="Login ID" tabindex="1" onfocus="javascript:$(this).val('');$('#wrong_password_board').css('display','none'); ">
</div>
<div class="floatleft">
<div id="loginLoginIdDiv1">
<input type="text" onfocus="javascript:$(this).val('');$('#wrong_password_board').css('display','none'); " value="Password" tabindex="2" class="text_box" name="passwordFaked" size="20" width="110px" style="display: none;">
<div id="loginPasswordDiv2" style="">
<input id="tbtPassword" width="110px" type="password" tabindex="2" maxlength="25" height="17px" class="text_box">
</div>
</div>
<div id="wrong_password_board" class="wrong_password wrong_passwordid ErrorMsg" style="display: none;">
<div class="topleft"></div>
<div class="topmiddle">Invalid Login ID and/or Password.</div>
<div class="topright"></div>
</div>
</div>
</div>
<div class="login_info2">
<div class="row1">
<span class="left"></span><span class="middle">Login</span><span class="right"></span>
</div>
<div class="row1" style="width: 80px">
<span style="float: left; margin-right: 3px;">
<div id="div_123" class="toplogin RockButton" style="width: 60px; height: 19px;">
<div id="123" onclick="rockLogin($('#loginform'))" style="width: 100%; height: 100%;" class="rbtdiv">
<div class="text">
Login</div>
</div>
<div class="rbtmask" style="z-index: 100; position: absolute; display: none; background: grey;
opacity: 0.2; cursor: default; width: 100%; height: 100%; top: 0px; left: 0px;">
</div>
</div>
</span>
<div class="btn_question forgetPasswordButton ">
<div id="ifClickThisBtn" style=" display:none;" data-ifclick="false"></div>
</div>
<div id="forgetPassword" class="tip_forgot_password">
<div class="ajaxLoadingMask">
<img src="/images/ajaxLoading2.gif" style="margin-left: 150px; margin-top: 9px; position: absolute; display: block;" class="ajaxLoading" alt="">
</div>
<div class="lefttfp">
<div class="l1l"></div>
<div class="l1r"></div>
</div>
<div class="middletfp">
<div class="closetfp"></div>
<div class="title">Forgot Password or Login ID</div>
<div class="email_form">
<input type="text" value="Enter registered email" name="emailAddress" class="password_recovery_textbox">
<div class="wbtn1 formSubmitBtn" onclick="javascript:forgetPassword();return false;" style="float: left; margin: 2px 0px 0px 5px; cursor: pointer;">
<span class="wbtn1_left"></span><span class="wbtn1_middle" style="padding-left: 10px;
padding-right: 10px;">Submit</span><span class="wbtn1_right"></span></div>
<div class="wrong_email"></div>
</div>
<div id="invalideEmailAddress" style="display:none;"> Please enter a valid email address.</div>
</div>
<div class="righttfp"></div>
</div>
</div>
</div>
<div class="right1"> </div>
</form>
The login form has javascript elements so I figured I could just write it with the right login into it, but nah.
When I run it I get an error from the first line: System.NullRefferenceException, all my codes gave that.
I have to admit I probably didn't do all the research I could but I need to do this fast and this is the last thing that may help me.

As already mention above in the comment's by #Visual Vincent you need to add the DocumentCompleted event. This event is raised when the document has finished loading.
Private docCompleted As Boolean = False 'put this at class level
Private Sub WebBrowser1_DocumentCompleted(sender As Object, e As WebBrowserDocumentCompletedEventArgs) Handles WebBrowser1.DocumentCompleted
If docCompleted Then Exit Sub
If WebBrowser1.Document.GetElementById("tbtLoginID") IsNot Nothing Then
WebBrowser1.Document.GetElementById("tbtLoginID").SetAttribute("value", "YOURUSERNAME")
End If
If WebBrowser1.Document.GetElementById("tbtPassword") IsNot Nothing Then
WebBrowser1.Document.GetElementById("tbtPassword").SetAttribute("value", "YOURPASSWORD")
End If
If WebBrowser1.Document.GetElementById("div_123") IsNot Nothing Then
WebBrowser1.Document.InvokeScript("rockLogin")
End If
docCompleted = True
End Sub
The code above check's each element to ensure it not nothing and if it's not then we can set the attributes we would need. Also we can InvokeScript of the document for example: rockLogin, this script does the login. The docCompleted prevents the page from doing postback's as when it's finished and you set the attributes it want's to reload the page etc... it's not required but it prevented multiple postbacks when I tried.
On another note you didn't mention if you were doing this in a click event or what, if so set the docCompleted to false before navigating to your page so the variable is reset each time...
Note: Tried and Tested - please don't post your login credentials either on a public forum...