I have this function here:
function nameSplit() {
var option_result = document.getElementById("fname").value;
var option_array=option_result.split(" ");
document.getElementById('first_name').value = option_array[0];
document.getElementById('last_name').value = option_array[1];
}
function myFunction() {
var option_result = document.getElementById("fname").value;
document.getElementById("demo").innerHTML = option_result.length;
document.getElementById("demo2").innerHTML = option_array.prototype.length;
}
<form>
<label>Name:</label>
<input type="text" id="fname">
<input type='button' onclick='nameSplit()' value='Change Text'/>
</form>
<br>
<input id="first_name" name="fid" value="" />
<input id="last_name" name="sid" value="" />
<br>
option_result: <p id="demo"></p>
option_array: <p id="demo2"></p>
<button onclick="myFunction()">Try it</button>
As you can see my option_array.prototype.length; is not returning anything. So I don't know the best way the explain this but in short I want to determine how many arrays are within the function and have that as the number that is being pulled at
document.getElementById('last_name').value = option_array[1];
I want it to work like this:
document.getElementById('last_name').value = option_array[(Number of total arrays)];
If you run the original function and type "John Doe" it will split it into "John" and "Doe", but if you change the input to "John Doe Jr." it will still return with "John" and "Doe". I want it to return "John" and "Doe Jr."
I have tried to create a script that runs option_array[1] + " " + option_array[2]; but if a person only uses two parts of the array, the third comes back undefined.
Any ideas?
Well I thought this function would be a great way to retrieve the information I needed but my boss stop by my desk and told me there was an easier way, and gave me some information to do research on, and so I went on to build a new one..
Here is the code for anyone interested:
function nameSplit() {
var first_name = document.getElementById("first_name");
var last_name = document.getElementById("last_name");
var fname = document.getElementById("fname");
var myfname = fname.value.trim();
if (myfname.indexOf(" ") < 0)
{
first_name.value = fname.value.trim();
last_name.value = "Undefined";
} else {
first_name.value = fname.value.substring(0, fname.value.indexOf(" "));
last_name.value = fname.value.substring((fname.value.indexOf(" ") + 1), fname.value.length);
}
}
<form>
<label>Name:</label>
<input type="text" id="fname">
<input type='button' onclick='nameSplit()' value='Submit'/>
</form>
<br>
<input id="first_name" value="" />
<input id="last_name" value="" />
Thanks for your help #jongware
Related
Please let me know why this doesn't work and how I can achieve this as simple as possible. my professor wants the simplicity to reflect 15 minutes or work. I just don't grasp it though. Thanks in advance!
<script language="JavaScript">
var obj = {
name = "",
address = "",
ccNumber = "",
}
function printObj() {
document.getElementById("display").innerHTML = obj.name + " " + obj.address + " " + obj.ccNumber;
}
function storeInput(user_input1, user_input2, user_input3) {
name = document.getElementById("myObject").form.user_input1;
address = document.getElementById("myObject").form.user_input2;
ccNumber = document.getElementById("myObject").form.user_input3;
}
</script>
<form>
<label><b>Enter full name</b></label>
<input type="text" name="message" id="user_input1">
</form>
<form>
<label><b>Enter billing address</b></label>
<input type="text" name="message" id="user_input2">
</form>
<form>
<label><b>Enter CC number</b></label>
<input type="text" name="message" id="user_input3">
</form>
<input type="submit" onclick="obj.storeInput(user_input1, user_input2, user_input3);obj.showInput()"><br />
<p id='display'></p>
Ok! You need your storeInput() to reference the declared object. Currently with your code as it is storeInput() is an independent function but for you event handler (onclick) to work. You need to redefine the storeInput() as
obj.storeInput() = function(user_input1, user_input2, user_input3) {.....};
This will get the job done. It will not store the values, but will display them.
<!DOCTYPE html>
<html>
<body>
<form>
<label><b>Enter full name</b></label>
<input type="text" name="message" id="user_input1">
<label><b>Enter billing address</b></label>
<input type="text" name="message" id="user_input2">
<label><b>Enter CC number</b></label>
<input type="text" name="message" id="user_input3">
</form>
<input type="submit" onclick="aFunction();"><br />
<p id='display'></p>
<script>
function aFunction(){
var x = document.querySelector('#user_input1').value; // gets value of user_input1 field
var y = document.querySelector('#user_input2').value; // gets value of user_input2 field
var z = document.querySelector('#user_input3').value; // gets value of user_input3 field
document.querySelector('#display').innerHTML = x + ' ' + y + ' ' + z; // puts the values in <p> with id of 'display'
}
</script>
</body>
</html>
Hope this helps you understand.
So i'm quite new to javascript and im wondering why the output wont show "Hello John, Your last name is Johnsen" when the button is clicked. I have tried several times with different code and it doesnt seem to work. I also get an error in the console where it says "Uncaught TypeError: name is not a function
at HTMLButtonElement.onclick"
Code and output picture: (i couldnt make it in a code box sorry)
Output
Code:
function Name() {
var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;
document.getElementById("demo").innerHTML = "Hello " + firstname + <br> + "Your lat name is: " + lastname;
}
<div>
First Name: <input type="text" id="fname" value=""><br><br>
Last Name: <input type="text" id="lname" value="">
<button onclick="Name()">Submit</button>
<p id="demo"></p>
</div>
Console error
<br> needs to be enclosed in ".
Check this.
function clicked() {
var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;
document.getElementById("demo").innerHTML = "Hello " + firstname + "<br>" + "Your lat name is: " + lastname;
}
<div>
First Name: <input type="text" id="fname" value=""><br><br>
Last Name: <input type="text" id="lname" value="">
<button onclick="clicked()">Submit</button>
<p id="demo"></p>
</div>
var fname = document.getElementById('fname');
var lname = document.getElementById('lname');
var res = document.getElementById('demo')
function fullName(){
res.innerHTML = `Firstname : ${fname.value} <br/> lastname : ${lname.value}`;
}
<div>
First Name: <input type="text" id="fname" value=""><br><br>
Last Name: <input type="text" id="lname" value="">
<button onclick="fullName()">Submit</button>
<p id="demo"></p>
</div>
I have a form on a webpage that I want a user to be able to fill out, hit submit, and it displays something like "User: [name] has a [event] event at [location] with details [description]" in a comment section below. So multiple entries will just load under each other. Right now when I hit submit, it will only submit the description text and nothing else. My function getInfo() should be displaying multiple values but is not. How can I remedy this. Full code linked below
https://github.com/tayrembos/Nav/blob/master/back.html
<script type="text/javascript">
function getInfo() {
text = name.value;
text = words.value;
document.getElementById("para").innerHTML += '<p>'+ text
document.getElementById("words").value = "Enter comment"
document.getElementById('name').value = "Enter name"
}
</script>
<form method="POST" name='myform'>
<p>Enter your name:
<textarea id='name' rows="1" cols="20">Enter name</textarea>
<textarea id='name' rows="1" cols="20">Enter name</textarea>
<textarea id='words' rows="10" cols="20">Enter comment</textarea>
<input type="button" onclick="getInfo()" value="Submit!" /> <br>
<p id="para"></p>
i use append from jquery(vote if it really solves your problem).
function myFunction() {
var x = document.getElementById("product");
var txt = "";
var all = {};
var i;
for (i = 0; i<x.length-1; i++) {
//txt = txt + x.elements[i].value + "<br>";
all[x.elements[i].name]= x.elements[i].value;
}
$("p").append(JSON.stringify(all, null, 2));
//var myObj = { "name":"John", "age":31, "city":"New York" };
//document.getElementById("demothree").innerHTML = myObj;
//var myJSON = JSON.stringify(all);
//window.location = "server.php?x=" + myJSON;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<form id="product">
Expire: <input type="text" name="pexpire" value="3:45"><br>
Old Price: <input type="text" name="poldprice" value="30"><br>
Price: <input type="text" name="pprice" value="28"><br>
Category: <input type="text" name="pcategory" value="Ενδύματα"><br>
Variaty: <input type="text" name="pvariaty" value="Τζιν"><br>
City: <input type="text" name="pcity" value="Δράμα"><br>
Store: <input type="text" name="pstore" value="Groove"><br>
Picture: <input type="text" name="ppicture" value="aaa"><br>
</form>
<button onclick="myFunction()">Submit</button>
<p id="list"></p>
A user is filling in a form:
fname : Firstname
mname : middlename
lname : lastname
fullname : Complete naam
Before the user is entering field4 I would like to give already the values fname & mname & lname as a start in fullname. I found out that this should be done as below.
I already made this but something is wrong... I have almost no Javascript experience...
<!DOCTYPE html>
<html>
<body>
First name: <input type="text" id="fname"><br>
Middle name: <input type="text" id="mname"><br>
Last name: <input type="text" id="lname"><br>
Fullname: <input type="text" id="fullname" onfocus="myFunction()"><br>
<script>
function myFunction() {
document.getElementById("fullname").style.background = "yellow";
document.getElementById("fullname").value = document.getElementsByTagName("fname").value + document.getElementsByTagName("mname").value + document.getElementsByTagName("lname").value;
}
</script>
</body>
</html>
You are using the getElementsByTagName method, but the value you are passing to it is the id of an element, not the tag name (which would be "input").
Use getElementById to get an element by its id.
Either you could access using getElementById like this:
First name:
<input type="text" id="fname">
<br>Middle name:
<input type="text" id="mname">
<br>Last name:
<input type="text" id="lname">
<br>Fullname:
<input type="text" id="fullname" onfocus="myFunction()">
<br>
<script>
function myFunction() {
document.getElementById("fullname").style.background = "yellow";
document.getElementById("fullname").value = document.getElementById("fname").value + document.getElementById("mname").value + document.getElementById("lname").value;
}
</script>
OR
Stick to use getElementsByTagName.
First name:
<input type="text" id="fname">
<br>Middle name:
<input type="text" id="mname">
<br>Last name:
<input type="text" id="lname">
<br>Fullname:
<input type="text" id="fullname" onfocus="myFunction()">
<br>
<script>
function myFunction() {
var inputArr = document.getElementsByTagName("input");
document.getElementById("fullname").style.background = "yellow";
inputArr[3].value = inputArr[0].value + inputArr[1].value + inputArr[2].value;
}
</script>
Sounds good!
I am attempting to build a string of a user's "interests" that they indicate by checking off radio boxes. When I return the result, there is always an "undefined" prepended to the string of interests. I know that I can get rid of this issue by initializing var interest as an empty string, like so:
var interests ="";
But am unsure if this is the proper way to solve the issue. is there a more optimal data structure for this?
var controlIndex;
var element;
var interests;
var numberOfControls = document.form1.length;
for (controlIndex = 0; controlIndex < numberOfControls; controlIndex++)
{
element = document.form1[controlIndex];
if (element.type == "radio")
{
if (element.checked == true)
{
interests += document.form1[controlIndex].value+"\n";
console.log(interests);
document.getElementById("interests").innerHTML= interests
}
}
}
}
}
<form action="" name="form1">
<h1>Personal Details</h1>
Please enter the following details:
<br>
<p>
First Name:
<br />
<input type="text" name="txtName" onchange="txtName_onchange()"/>
</p>
<p>
Age:
<br />
<input type="text" name="txtAge" size="3" maxlength="3" onchange="textAge_onblur()" />
</p>
<p>
My interest is:
<p>Sports
<input type="radio" name="sports" value="sports"/>
</p>
<p>Politics
<input type="radio" name="politics" value="politics" />
</p>
<p>Magazines
<input type="radio" name="magazines" value="magazines">
</p>
<p>
<input type="button" value="Submit Registration" name="btnCheckForm" onclick="btnCheckForm_onclick()" >
<input type = "button" value = "Clear Details" name="btnClear" onclick="btnClear_onclick()">
</p>
</form>
</div>
I would turn your "interests" variable into an array.
var interests = [];
then I would just push into it, like so. When you want to print it out, just join it.
interests.push(document.form1[controlIndex].value);
console.log(interests.join(""));
But am unsure if this is the proper way to solve the issue ...
Yes, initialising the variable as a string is the proper way to resolve this issue.
Basically, whenever you initialise your variable like this:
var interests;
The variable type is implicitly set to undefined, so when you apply += onto it, JavaScript changes the type to string with a value of "undefined". Setting the initial value prevents that:
var interests = '';
I have tried to put same thing mentioned in above answers in code snippet for better understanding. In my opinion array suits here
function btnCheckForm_onclick (){
var controlIndex;
var element;
//Case with '' intitlization
var interests = '';
//Case with [] intitlization
var interests = [];
var numberOfControls = document.form1.length;
for (controlIndex = 1; controlIndex < numberOfControls; controlIndex++)
{
element = document.form1[controlIndex];
if (element.type == "radio")
{
if (element.checked == true)
{
// Case with []
//interests.push(document.form1[controlIndex].value);
//console.log(interests.join(" "));
//Case with ''
interests += document.form1[controlIndex].value+"\n";
console.log(interests);
}
}
}
document.getElementById("interests").innerHTML= interests
}
<form action="" name="form1">
<h1>Personal Details</h1>
Please enter the following details:
<br>
<p>
First Name:
<br />
<input type="text" name="txtName" onchange="txtName_onchange()"/>
</p>
<p>
Age:
<br />
<input type="text" name="txtAge" size="3" maxlength="3" onchange="textAge_onblur()" />
</p>
<p>
My interest is:
<p>Sports
<input type="radio" name="sports" value="sports"/>
</p>
<p>Politics
<input type="radio" name="politics" value="politics" />
</p>
<p>Magazines
<input type="radio" name="magazines" value="magazines">
</p>
<p>
<input type="button" value="Submit Registration" name="btnCheckForm" onclick="btnCheckForm_onclick()" >
<input type = "button" value = "Clear Details" name="btnClear" onclick="btnClear_onclick()">
</p>
<div id="interests"></div>