HTML Form into Javascript Variable - javascript

I'm reasonably new to Javascript so sorry if this has a simple answer.
I would like to make the name that a user inputs in a form into a javascript variable. For example, If the user inputs the name 'James' into the form, I would like the variable 'ans1' to be equal to the string 'James'. Heres my code...
<form>
Name:
<input type="text" id="username" />
<input type="submit" value="Submit" onClick="makeans1()" />
</form>
<script>
function makeans1() {
var ans1 = document.getElementById.value('username');
alert(ans1);
}
</script>
The reason I have added an alert is to check to see if the code has worked. Any help would be very much appreciated. Thanks

The correct code should be:
var ans1 = document.getElementById('username').value;
And always put your alert() 's at the beginning of the function. if you want to test function-hit :)

Just replace below line
var ans1 = document.getElementById.value('username');
with
var ans1 = document.getElementById('username').value

Change: var ans1 = document.getElementById.value('username');.
To: var ans1 = document.getElementById("username").value;.
function makeans1() {
var ans1 = document.getElementById("username").value;
alert(ans1);
}
<form>
Name:
<input type="text" id="username" />
<input type="submit" value="Submit" onClick="makeans1()" />
</form>

Related

JavaScript putting two variable's value into an array

i have two variables name and location which are provided by two <input type="text">. I need to get an outcome of Smith_California but I am getting an output of userName_userLoca in the console.
Any suggestions would help.
currently, I have:
HTML:
<form class="inputContainer" id="inputContainer" methed="post">
<label for="userNam">Your Name</label>
<input type="text" class="userNam" id="userNam" name="userNam" />
<label for="userLoca">Your Location</label>
<input type="text" class="userLoca" id="userLoca" name="userLoca" />
<button class="vButton" id="vButton" type="submit" onclick="testfun()">
Begin Test
</button>
</form>
Javascript:
var userName = document.getElementById('userNam');
var userLoca = document.getElementById('userLoca');
var userSID = ['userName', 'userLoca'];
console.log(userSID.join('_'));
Remove the quotes and use .value:
var userSID = [userName.value, userLoca.value];
You are accessing dom-element, using var userName = document.getElementById('userNam');.
Try with var userName = document.getElementById('userNam').value.
Also remove the quotes from var userSID = ['userName', 'userLoca']; and use it like below
var userSID = [userName, userLoca];

JavaScript Alert message not working

Below is the code that I have put together to validate 5 fields, of a form that has like 9 fields, that are to be required. I created the variables and placed them into an array. From there I have a function that loops through this array to see pop up an alert if that field is left blank.
The problem that I am coming across is that the alerts are not popping up when the button is clicked.
var uName=document.getElementByName('userName');
var pword=document.gelElementByName('password');
var verify=document.getElementByName('passwordVerify');
var fName=document.getElementByName('firstName');
var lName=document.getElementByName('lastName');
var field=[uName,pword,verify,fName,lName];
function validateForm(form) {
for(var i = 0; i < form.field.length; i++){
if(form.field[i].value.length == 0){
alert(form.field[i].name+' is required. Please populate');
form.field[i].focus();
return false;
}
} return true;
}
Not sure what I did wrong or what is causing the error. Any assistance is greatly appreciated.
function validateForm() {
var uName = document.getElementById('userName');
var pword = document.getElementById('password');
var verify = document.getElementById('passwordVerify');
var fName = document.getElementById('firstName');
var lName = document.getElementById('lastName');
var field = [uName, pword, verify, fName, lName];
for (var i = 0; i < field.length; i++) {
if (!field[i].value) {
alert(field[i].name + ' is required. Please populate');
field[i].focus();
return false;
}
}
return true;
}
<form>
<input type="text" id="userName" name="userName" /><br/>
<input type="text" id="password" name="password" /><br/>
<input type="text" id="passwordVerify" name="passwordVerify" /><br/>
<input type="text" id="firstName" name="firstName" /><br/>
<input type="text" id="lastName" name="lastName" /><br/>
<button onclick="validateForm();">Submit</button>
</form>
Now, here are the changes I made:
I changed getElementByName to getElementById throughout your code, for simplicity;
I removed the function's parameter, and changed form.field to field because... Well, the first one was just wrong.
I also changed the iterating test to !field[i].value, which is equivalent to testing if the value has a length, but seemed more appropriate to me.
That's about all I did, along with adding ID's to the form's elements.
P.S: That is my first detailed answer here, feedback would be greatly appreciated! :)

On keyup get each input values to php script

I'm trying to get each input value on keyup with comma separated. My code is working fine with onclick event but not with on keyup.
<input type="text" class="date" name="date[]" onkeyup="showHint(this.value)" />
This is part of my js function showhint where i'm defining the input value.
var DoB = [];
$(".date").each(function(){
DoB.push($(this).val());
});
var newDob = DoB.slice(0,-1);
xmlhttp.open("GET","validation.php?q="+newDob+",true);
Can anyone help me with this what is my mistake here?
Thanks in advance.
Are you sure the issue is the keyup? It seems to me the DoB.slice(0, -1) is causing your code not to work.
I replaced it with a DoB.join(','); to create the comma separated string.
function showHint(someValue) {
var DoB = [];
$(".date").each(function(){
//console.log($(this).val());
DoB.push($(this).val());
});
//var newDob = DoB.slice(0, -1);
var newDob = DoB.join(',');
document.getElementById("URL").value = "validation.php?q="+newDob;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="date" name="date[]" onkeyup="showHint(this.value)" />
<input type="text" class="date" name="date[]" onkeyup="showHint(this.value)" />
<br>URL : <input type="text" size="50" id="URL"/>
try this:
$( ".date" ).keyup(function() {
DoB.push($(this).val());
});
As per your code, you don't have to keep array DoB. as you have only one dob element. and you can directly get value of input.
following code will work for you
function showHint(){
var DoB = $(".date").val();
console.log(DoB);
xmlhttp.open("GET","validation.php?q="+DoB +",true);
}
I also had this happen to me before, when I used the onkeyup event in the script itself it works fine for me.
Here's an example:
document.getElementById("fname").onkeyup = function() {myFunction()};
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<p>Press a key inside the text field and release it to set the text to uppercase.</p>
Enter your name: <input type="text" id="fname">
</body>
</html>

javascript name value not working

so now I have a form with this...
<INPUT type="text" name="budget[unbudgeted_balance]" value="">
<INPUT TYPE="button" NAME="button2" Value="Get Funds Value" onClick="writeText(this.form)">
And some coffeescript as such...
window.writeText = (form) ->
form.budget[unbudgeted_balance].value = "frack"
translated to JS as such...
window.writeText = function(form) {
return form.budget[unbudgeted_balance].value = "frack";
};
If I do name="budget"...It works. BUT if I do name="budget[unbudgeted_balance]", it won't work, why is this. How do I fix?
The name of the field is budget[unbudgeted_balance]. Try:
form.elements["budget[unbudgeted_balance]"].value = "frack"
I don't know coffeescript so this is just a guess
window.writeText = (form) ->
form["budget[unbudgeted_balance]"].value = "frack"

Translate JavaScript to VBScript

I have this HTML:
<form name=tett>
<input type=text name=tf value="testing prompt" size=15>
</form>
And this JavaScript:
var df = prompt(" enter your name ");
document.tett.tf.value = df;
How can I do this in VBScript?
It should be something like this :
df = InputBox("enter your name");
form.tf.value = df;
.. but don't mind me asking: why do you want to do this in the first place?

Categories

Resources