Passing form data to javascript - javascript

So I have a problem, im looking to pass very basic user input into a javascript function for javascript to then process that information, I am really only looking to pass strings, however I just want to learn the concept. Below is how I would (THINK) you'd do this, but it doesn't work and I am not sure why. Could someone show me how to do this simply and properly.
<body>
<form id="frm1">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction(fname, lname)" value="Submit">
</form>
<script>
function myFunction(fname, lname) {
console.log(fname);
console.log(lname);
}
</script>
</body>

Here is an alternative approach that might help:
You can see part of the following code in action at this link:
https://jsfiddle.net/m85yLoca/
<html>
<head></head>
<body>
<form id="frm1">
First name: <input type="text" name="fname" id="fname"><br>
Last name: <input type="text" name="lname" id="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<script>
function myFunction() {
let fname = document.querySelector('#fname').value;
let lname = document.querySelector('#lname').value;
console.log(fname);
console.log(lname);
}
</script>
</body>
I made sure to add id="" settings for the fname and lname form inputs. This can help us with individually specifying what input we want to access for later use.
This approach uses document.querySelector() to pinpoint which form input you are wanting to access. I get the value of the input via the .value part at the end of the document.querySelector() lines and then assign these to individual variables fname and lname.
Then, you can access the individual fname and lname variables in your function.

This can be done by the following step.
getting the all input DOM value by document.querySelectorAll(). I didn't add id in each of the input. Instead, I select them all
select each one of them and assign the value to a variable.
<form id="frm1">
First name: <input type="text" name="fname" ><br>
Last name: <input type="text" name="lname" ><br><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<script>
function myFunction() {
const inputValues = document.querySelectorAll('#frm1 input')
const fname = inputValues[0].value;
const lname = inputValues[1].value;
console.log(fname, lname);
}
</script>
If later on, you need to submit the data to server. Just add the onsumbit attribute.
<form onsubmit="sendData()">
//input and other structure
<input type="submit" value="Submit">
</form>
<script>
function sendData(){
//pack all your input value
//make the ajax call here
}
</script>

Related

Displaying user input from form using Javascript

I want to get the user filled form and display their output.
So I tried this:
<form name="testForm">
<input type="text" name="username" id="username">
<br>
<input type="text" name="password" id="password">
<br>
<input type="submit" value="Submit" onClick="myFunc()">
</form>
<div id="demo"></div>
<script>
function myFunc(){
var x = document.getElementById('username').value;
document.write(x);
}
</script>
This works as intended. Now, I just want to change the way it displays by making it display in the div with the id demo.
So this is what I tried:
<form name="testForm">
<input type="text" name="username" id="username">
<br>
<input type="text" name="password" id="password">
<br>
<input type="submit" value="Submit" onClick="myFunc()">
</form>
<div id="demo"></div>
<script>
function myFunc(){
var x = document.getElementById('username').value;
document.getElementById('demo').innerHTML =x;
}
</script>
Now as you can see, this doesn't work. It actually displays the results and then reloads a blank screen. I can't seem to understand why this is happening.
From my code, I can see that I've assigned x to the username value. So all I am doing is instead of using document.write (which worked), I am just wanting it to display in the div. However it displays and loads a blank screen.
Can someone please let me know what am I doing wrong? How can I display under the div demo of what the user typed in for username field. Is it a syntax error?
ps: I am self learning and practicing, so I just tried to play with username. Once I do that I will apply the same codes for password.
you can use preventDefault() to stop submit button from submitting.
<form name="testForm">
<input type="text" name="username" id="username">
<br>
<input type="text" name="password" id="password">
<br>
<input type="submit" value="Submit" onClick="myFunc(event)">
</form>
<div id="demo"></div>
<script>
function myFunc(event){
event.preventDefault();
var x = document.getElementById('username').value;
document.getElementById('demo').innerHTML =x;
}
</script>
You need to prevent form submission.
Change myFunc to:
function myFunc (evt) {
evt.preventDefault();
// everything else
}

How to transfer values from between input

Before anyone marks this as a duplicate, I have looked at many sites and am currently using this one - jQuery - passing value from one input to another for guidance, yet no result... I am trying to pass a value from one input in one form to another input in a 'table'. I have put it in a table because of a very weird reason - it does not display a Sparql value when in a form only displays in a table so the input was placed in a table. My code is below:
Form
<form onclick="txtFullName.value = txtFirstName.value +'_'+ txtLastName.value">
First name : <input type="text" name="txtFirstName" value="#ViewBag.FirstName"/> <br><br>
Last name : <input type="text" name="txtLastName" value="#ViewBag.LastName" /> <br><br>
Full name : <input type="text" id="txtFullName" name="txtFullName"> <br><br />
<input id="submit12" type="button" value="Submit">
</form>
Table
<table id="results">
<Full name:
<br>
<input id="userInput" type="text" name="fullname" ${userJson.userId == ''?'': 'disabled'} value="#ViewBag.DisplayName">
<br>
<input id="submit" type="submit" value="Submit">
</table>
JQUERY
$('#submit12').on('click', function (e) { //Form submit
$('#userInput').change(function () {
$('txtFullName').val($(this).val());
});
});
I am trying to display the txtFullName into userInput input when pressing submit but right now only the `txtFullName' is displayed when pressing submit. Also the submit is the submit button in the FORM.
Anymore info needed let me know:)
You need to change the onclick to action on the form if you are trying to use submit button. The other way is to use input type button instead of submit:
So:
$(document).ready(function() {
$('#submit12').on('click', function (e) {
console.log('test');
$("#txtFullName").val($("#txtFirstName").val() + '_' + $("#txtLastName").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
First name : <input type="text" id="txtFirstName" value="First"/> <br><br>
Last name : <input type="text" id="txtLastName" value="Last" /> <br><br>
Full name : <input type="text" id="txtFullName" name="txtFullName"> <br><br />
<input id="submit12" type="button" value="Submit">
</form>
If you want to display txtFullName into userInput, simply do something like this:
$('#submit12').on('click', function (e) { //Form submit
$('#userInput').val($('#txtFullName').val());
});
And why do you need change function there , if yo need changes when click submit.
Edit your JQuery like this:
$('#submit12').on('click', function (e) { //Form submit
$('#userInput').change(function () {
$('#txtFullName').val($(this).val());
});
});
$('#submit').on('click', function () { //Form submit
$('#userInput').val($('#txtFullName').val());
});
I don't clearly understand why you do it but It can fix your code.
It is not entirely clear what the two buttons do, but the operation itself is really very simple. See comments inline for explanations:
// Wait until the DOM is loaded and all elements are avaialble
window.addEventListener("DOMContentLoaded", function(){
// Get references to the DOM elements you'll need
var theForm = document.getElementById("frmTest");
var txtFirstName = document.getElementById("txtFirstName");
var txtLasttName = document.getElementById("txtLastName");
var txtFulltName = document.getElementById("txtFullName");
var txtUserInput = document.getElementById("txtUserInput");
var btn1 = document.getElementById("btnSubmit1");
var btn2 = document.getElementById("btnSubmit2");
// Function to join names together
function combine(){
txtFullName.value = txtFirstName.value + '_' + txtLastName.value;
}
// Set event handlers
frmTest.addEventListener("click", combine);
btn1.addEventListener("click", combine);
});
<!-- Keep you JavaScript out of your HTML -->
<form id="frmTest">
First name : <input type="text" id="txtFirstName" name="txtFirstName" value="#ViewBag.FirstName">
<br><br>
Last name : <input type="text" id="txtLastName" name="txtLastName" value="#ViewBag.LastName" >
<br><br>
Full name : <input type="text" id="txtFullName" name="txtFullName"> <br><br />
<input id="btnSubmit1" type="button" value="Combine Names">
<table id="results">
<Full name:
<br>
<input id="txtUserInput" type="text" name="fullname" ${userJson.userId == ''?'': 'disabled'} value="#ViewBag.DisplayName">
<br>
<input id="btnSubmit2" type="submit" value="Submit">
</table>
</form>

Javascript filling input value

I have a textfield in HTML, where the value is predefined, e.g. "hello".
Now I change the value manually on my website from "hello" to "bye".
When I click on a button, that calls the same site again, my value of the input type should be "bye" now and not "hello". Here you can see my code :
<form method="POST" id="ReloadPage" name="ReloadPage" action="MyWebsite" onsubmit="getValue();">
<strong>word: </strong>
<input id="word" type="text" size="30" value="hello" name="WORD" />
<script type="text/javascript">
function getValue() {
document.getElementById("word").value="bye";
}
</script>
But somehow, the value will always be hello and doesn't change to bye.
Thanks a lot for help.
You can't use function as name of function.Change name of your function
<form method="POST" id="ReloadPage" name="ReloadPage" action="MyWebsite" onsubmit="return GetValue();">
<strong>word: </strong>
<input id="word" type="text" size="30" value="hello" name="WORD" />
function GetValue() {
document.getElementById("word").value="bye";
return false;
}
Also when you submit the form page will reload so it will show initial value again.

Adding argument to form action using input type hidden

How to add arguments in a form action using input type="hidden".
My HTML snippet...
<form id="form1">
<input type="text" name="txt"/>
<input type="hidden" name="usID" value=123/>
<input type="hidden" name="usname" value="name1"/>
<input type="submit" onclick="add()" value="ADD"/>
</form>
My JavaScript snippet...
function add()
{
document.getElementsByName('usID').value=789;
document.getElementsByName('usname').value="name2";
document.getElementById('form1').action = "/page";
document.getElementById('form1').submit();
}
After entering "text" in the textbox and pressing ADD, the link looks like this...
http://localhost:3000/page?txt=text&usID=123&usname=name1
Why hasn't the usID and usname changed to 789 and "name2" respectively?
Any other alternative if not this?
getElementsByName is going to return a collection of html elements (NodeList), not a single html element. meaning the return value doesnt have a value attribute that will change the input. you need to either give them an id and find them with getElementById and then change the value, or grab the first element of your collection
document.getElementsByName('usname')[0].value="name2";
or (preferred way)
<input type="hidden" name="usname" value="name1" id="usname"/>
function add(){
document.getElementById('usname').value="name2";
...
}
though i have to ask, is there a reason you're changing the hidden field element like this?
this help you :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function add()
{
var usID = document.forms["frm"]["usID"];
var usname = document.forms["frm"]["usname"];
usID.value=789;
usname.value="name2";
document.getElementById('form1').action = "/page";
document.getElementById('form1').submit();
}
</script>
<h3>Please select the <span>first letter</span> of your <span>last name</span>: </h3>
<form id="form1" name="frm">
<input type="text" name="txt"/>
<input type="hidden" name="usID" value=123/>
<input type="hidden" name="usname" value="name1"/>
<input type="submit" onclick="add()" value="ADD"/>
</form>
</body>
</html>

How to pass input field values as a url query string that will be opened on click of a submit button?

I would have to input fields like this
<form>
<input type="text" id="keyword" placeholder="XXX">
<input type="text" id="state" placeholder="XXX">
<button type="submit" id="submit">Submit</button>
</form>
On click of the submit I would like to send them to a new page with the value of the input appended to the url with query string.
http://www.link.com/page?keyword=XYXYX&state=XZXX
Here is my start thinking but was thinking .serialize() can handle this better than this example
var keywordVal = $("#keyword").val();
var stateVal = $("#state").val();
$( "form" ).on( "submit", function() {
event.preventDefault();
location.href='http://www.link.com/page?keyword=' + keywordVal + '&state=' + stateVal
});
let me know if i am approaching it the right way..
You don't need JavaScript to do this.
Simply add an action attribute with the URL and set the method attribute to GET (this will append the named field values as a query string).
<form action="<yourURL>" method="GET">
<input type="text" id="keyword" name="keyword" placeholder="XXX">
<input type="text" id="state" name="state" placeholder="XXX">
<button type="submit" id="submit">Submit</button>
</form>
NOTE: You'll need name attributes on your fields.
Fiddle: http://jsfiddle.net/pjh7wkj4/
No need any jQuery/javascript to do that, form tag is providing those functionality. Adding action and method (GET) attributes will give you the results what you expect.
<form action="<target_url>" method="GET">
<input type="text" id="keyword" name="keyword" placeholder="XXX">
<input type="text" id="state" name="state" placeholder="XXX">
<button type="submit" id="submit">Submit</button>
</form>

Categories

Resources