Dynamic Form Input Value not updating Javascript Object - javascript

new coder here. I've spent a week trying to get this to work and really need help. I have a form with one input field. I can query it and get the new name values.
Problem is when I use the same query in a object literal key/value pair , it doesnt show the updated values when you change the values. It only shows the original values when I console.log. Any help would be greatly appreciated.
HTML
<form id="nameForm" class="nameForm" action="#">
<label id="nameLabel" for="nameInput">Enter Your Name:</label>
<input type="text" id="nameInput" class="nameInput" required>
<button id="next" type="button">Next</button>
</form>
JavaScript
let salonOwner = {
name: document.querySelector(#nameInput).value
}

You need for your button an onclick-event, which calls your new function update. So everytime it is pressed your object will be updated.
<form id="nameForm" class="nameForm" action="#">
<label id="nameLabel" for="nameInput">Enter Your Name:</label>
<input type="text" id="nameInput" class="nameInput" required>
<button id="next" type="button" onclick="update();">Next</button>
</form>
<script>
function update() {
let salonOwner = {
name: document.querySelector("#nameInput").value
}
console.log(salonOwner);
}
</script>

So basically javascript file run only once so you need to add EventListener to listen when you submit the form and update salonOwner through it
<form id="nameForm" class="nameForm" action="#">
<label id="nameLabel" for="nameInput">Enter Your Name:</label>
<input type="text" id="nameInput" class="nameInput" required>
<button id="next" type="submit">Next</button>
</form>
let salonOwner = {
name: ""
}
//Initilize Dom Element
let form = document.querySelector("#nameForm")
//Add EventListener to Update The salonOwner Object
form.addEventListener("submit" , (e)=>{
let name = document.querySelector("#nameInput").value;
salonOwner.name = name;
})

Related

Grabbing the input of 3 fields and putting them into an array which would then be used for an API call

I'm working on a project that requires me to grab user input from 3 fields. After submission, these would then be placed into an array which could be used to generate an API call based of these parameters.
<h2>ENTER YOUR INGREDIENTS</h2>
<div class="left"></div>
<div class="right">
<form class="search-form">
<input type="text" class="field" id = "form1" placeholder="First Ingredient">
<input type="text" class="field" id = "form2" placeholder="Second Ingredient">
<input type="text" class="field" id = "form3" placeholder="Third Ingredient">
<input type="button" id="btn" value="Submit">Search</button>
</form>
</div>
This is the HTMl - currently im stuck on actually getting the forms to all submit at once at be placed into an array - i have little JS to show as i've been stuck.
Any help would be great.
First of all, there is an error in your HTML, it should be:
<input type="button" id="btn" value="Search"></input>
or
<button id="btn">Search</button>
On to the Javascript
// grab the form elements
const ingredient1 = document.getElementById('form1');
const ingredient2 = document.getElementById('form2');
const ingredient3 = document.getElementById('form3');
const submitButton = document.getElementById('btn');
const ingredientsArray = [];
// a function that pushes the values to the array
function createIngredientsArray(){
ingredientsArray.push(ingredient1.value);
ingredientsArray.push(ingredient2.value);
ingredientsArray.push(ingredient3.value);
alert(ingredientsArray);
}
// add eventlistener
submitButton.addEventListener('click',createIngredientsArray);
Here is a copepen

how can I make this submit?

Trying to get my form to submit to no avail. Totally new to javascript and HTML so any help would be much appreciated!
<form class="form" id="MyForm" onsubmit="submit(get('name').value, get('email').value, get('information').value); return false;">
I assume that you have an input element with type="submit" attribute.
If you want to keep the input values while submitting. You could use "this.[name].value" as a onsubmit function parameter.
So that, an example form should be like this:
function myFunction(name, email, information) {
alert("name" + value);
alert("email" + value);
alert("information" + value);
}
<p>Example form that returns input value as an alert.</p>
<form onsubmit="myFunction(this.name.value, this.email.value, this.information.value)">
name: <input type="text" name="name"><br>
email: <input type="text" name="email"><br>
information: <input type="text" name="information"><br>
<input type="submit" value="Submit">
</form>
try this
<form onsubmit="myFunction()">
Enter name: <input id="name" name="name" type="text">
Enter email: <input id="email" name="email" type="text">
<!--And more inputs...-->
<input type="submit" value="Submit">
</form>
add this code below your form
<script type="text/javascript">
function myFunction() {
// My Example code (I think you want get input value, True??)
var Name = document.getElementById("name").value;
var Email = document.getElementById("email").value;
// Or put your code in here
}
</script>
I hope its works, good luck.

AutoClear input field after submit with Js

Would like your help resolving this piece of code.
Trying to clear inputs after submit but not able to.
Can someone give me a hint??
Thank you so much.
<script>
var list = document;
function process(idTable)
{
var newRow = list.createElement('tr');
newRow.insertCell(0).innerHTML = list.getElementsByName('name')[0].value;
newRow.insertCell(1).innerHTML = list.getElementsByName('surname')[0].value;
newRow.insertCell(2).innerHTML = list.getElementsByName('email')[0].value;
list.getElementById(idTable).appendChild(newRow);
return false;
list.getElemntsByName('form')[0].value="";
}
</script>
<section>
<form name="form" method="post" id="myForm" onsubmit=" return process('myTable')" >
<p> <label>Name:</label> <input type="text" name="name" placeholder = "Your first name" required> </p>
<p> <label>Surname:</label> <input type="text" name="surname" placeholder = "Your last name" required> </p>
<p> <label>Email:</label> <input type="e-mail" name="email" placeholder = "xpto#example.com" required> </p>
<p> <input type="submit" value="Add"> <input type="reset" value="Reset"> </p>
</form>
</section>
Two points:
You exited the function before assign value to the form
Better use list.getElemntsByName('form')[0].reset();
So your code will be like this:
<script>
var list = document;
function process(idTable)
{
var newRow = list.createElement('tr');
newRow.insertCell(0).innerHTML = list.getElementsByName('name')[0].value;
newRow.insertCell(1).innerHTML = list.getElementsByName('surname')[0].value;
newRow.insertCell(2).innerHTML = list.getElementsByName('email')[0].value;
list.getElementById(idTable).appendChild(newRow);
list.getElemntsByName('form')[0].reset();
return false;
}
</script>
Why don't you use button tag for your 'submit' and 'reset', then in that use clientclick event, have reset function that clears the input tag.
Use $('#id of input element ').val(' ') inside process function . Also write this code above return false statement

Issue with javascript retrieve form data for url

I am kind of new to javascript however I have created a submit form that I want to redirect me to a url based on form input. Here is my current code...
The issue I'm running into however is that the form is sending me the initial value rather than the updated form value (It is using "whatevs" no matter what).
HTML
<form id="Search-Form" onClick="genURL()"><label>Value: </label>
<input type="text" id="search" placeholder="Enter Value"></input>
<div id="search-buttons">
<input id="searchSubmit" value="whatevs" type="submit" tabindex="1" />
</div>
</form>
Javascript
function genURL() {
var searchSubmit = document.getElementById("searchSubmit").value;
window.location = "randomsite/view" + searchSubmit;
}
Add return and use onsubmit:
<form id="Search-Form" onsubmit="return genURL()"><label>Value: </label>
<input type="text" id="search" placeholder="Enter Value"></input>
<div id="search-buttons">
<input id="searchSubmit" value="whatevs" type="submit" tabindex="1" />
</div>
</form>
Revise function like so:
function genURL()
{
location.href = "randomsite/view" + document.getElementById("search").value;
return false;
}
If you were to use onclick, it would go on the button, not the form.

Why is not my HTML form sending the data to my JS file?

I am working on a simple ASP.NET project. I have HTML and a JS file. I am trying to send the values of the form inputs to the JS file, but it seems to be broken for some reason.
My form looks like:
<div class="set-the-clock">
<form name="settheclock">
<span>Hours: </span><input type="text" id="fhours" value=""><br>
<span>Minutes: </span><input type="text" id="fminutes" value=""><br>
<span>Seconds: </span><input type="text" id="fseconds" value=""><br>
<input type="button" id="send" value="Enter">
</form>
and my JS is:
var setHour = document.getElementById("fhours").value;
var setMinute = document.getElementById("fminutes").value;
var setSecond = document.getElementById("fseconds").value;
and the function that meant to use it:
function setTheClockByButton() {
setTheClock(setHour, setMinute, setSecond);
alert(setHour);
}
If I put a number to the value in the HTML form it works fine(like this)
<span>Hours: </span><input type="text" id="fhours" value="3"><br>
but it not accepting any data from the keyboard.
And of course I have the onclick function associated to the form:
document.getElementById("send").onclick = setTheClockByButton;
(otherwise it'd make no sense).
Move those assignment statements inside the function:
function setTheClockByButton() {
var setHour = document.getElementById("fhours").value;
var setMinute = document.getElementById("fminutes").value;
var setSecond = document.getElementById("fseconds").value;
setTheClock(setHour, setMinute, setSecond);
alert(setHour);
}
Now each time the button is clicked (and note that I'm assuming that part works, since you say it does), the values of the input fields will be fetched so that the clock update function is working with up-to-date values.
You need an onclick event:
<div class="set-the-clock">
<form name="settheclock">
<span>Hours: </span><input type="text" id="fhours" value=""><br>
<span>Minutes: </span><input type="text" id="fminutes" value=""><br>
<span>Seconds: </span><input type="text" id="fseconds" value=""><br>
<input type="button" id="send" value="Enter" onclick="setTheClockByButton()">
</form>
</div>
<script>
function setTheClockByButton() {
var setHour = document.getElementById("fhours").value;
var setMinute = document.getElementById("fminutes").value;
var setSecond = document.getElementById("fseconds").value;
alert(setHour);
}
</script>

Categories