I have html textboxes, but for somme reason when I hit submit it doesn't show both neither of the 3
<script type="text/javascript">
function readBox() {
var phone = document.getElementById('phone').value;
var email = document.getElementById('email').value;
alert("You typed " + email, + age, + tShirt);
}
</script>
any ideas why this isn't working?
<form name="readBox" action="/">
<label>Age:</label>
<input type="text" id="age" name="age">
<label>T-Shirt Size:</label>
<input type="text" id="tShirt" name="tShirt">
<label>Email Address:</label>
<input type="text" id="email" name="email">
<br />
<input type="submit" style="display: inline-block;" onClick="readBox()">
Assuming you are only getting value of "You typed " + email
alert("You typed " + email + age + tShirt);
You had many commas. Also, you don't have any element with ID phone, and tShirt variable is not defined.
I think it won't go to the function readBox only. Your form name and function name to be executed onclick are same. That's why it's creating problem.
Change your form name and it should go to that function.
Here I have something which worked for me:-
HTML
<form action="/">
<label>Age:</label>
<input type="text" id="age" name="age">
<label>T-Shirt Size:</label>
<input type="text" id="tShirt" name="tShirt">
<label>Email Address:</label>
<input type="text" id="email" name="email">
<br />
<input type="submit" style="display: inline-block;" onclick="readBox()">
</form>
Javascript
function readBox() {
var age = document.getElementById('age').value;
var email = document.getElementById('email').value;
alert("You typed " + email +" "+ age);
}
you must remove comma in alert.
remove action in form
change function name of script
function read(){
var email = document.getElementById('email').value;
var age = document.getElementById('age').value;
var tShirt = document.getElementById('tShirt').value;
alert("You typed " + email +","+ age+"," + tShirt);
}
`
<form name="readBox">
<label>Age:</label>
<input type="text" id="age" name="age">
<label>T-Shirt Size:</label>
<input type="text" id="tShirt" name="tShirt">
<label>Email Address:</label>
<input type="text" id="email" name="email">
<br />
<input type="button" style="display: inline-block;" onClick="read()" value="submit">
Related
function myFunc() {
console.log("entered");
document.write('Submitted Data');
var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;
document.writeln("Your full name is:" + firstname + lastname);
}
<form>
<label> Firstname </label>
<input type="text" name="firstname" id="fname" size="15" /> <br> <br>
<label> Lastname</label>
<input type="text" name="lastname" id="lname" size="15" /> <br> <br>
<label>
Gender :
</label><br>
<input type="radio" name="male" /> Male <br>
<input type="radio" name="female" /> Female
<br>
<br>
<input type="button" value="Submit" onclick="myFunc()" />
</form>
After clicking on submit, it is not getting first name and showing an error as value null in the console. Can anyone please help? This entire code is saved in one HTML page
That is because of this line document.write('Submitted Data');. document.write delete the existing html so in the next line where you are using document.getELementById is not able to find the dom element
function myFunc() {
var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;
document.writeln("Your full name is:" + firstname + lastname);
}
<body bgcolor="Lightskyblue">
<br>
<br>
<form>
<label> Firstname </label>
<input type="text" name="firstname" id="fname" size="15" /> <br> <br>
<label> Lastname</label>
<input type="text" name="lastname" id="lname" size="15" /> <br> <br>
<label>
Gender :
</label><br>
<input type="radio" name="male" /> Male <br>
<input type="radio" name="female" /> Female
<br>
<br>
<input type="button" value="Submit" onclick="myFunc()" />
</form>
</body>
I want to validate my form using JavaScript.
For this I have created a function validate which should work when I click the submit button.
The message should be shown using the alert function but it is not showing any alert when I run it.
function validate() {
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
var cpassword = document.getElementById('cpassword').value;
var firstname = document.getElementById('firstname').value;
var lastname = document.getElementById('lastname').value;
var cpasswordRGEX = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,8}$/i;
var passwordRGEX = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,8}$/i;
var emailRGEX = /^\w+#[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
var firstnameRGEX = /^[a-z ,.'-]+$/i;
var lastnameRGEX = /^[a-z ,.'-]+$/i;
var firstnameresult = firstnameRGEX.test(firstname);
var lastnameresult = lastnameRGEX.test(lastname);
var passwordResult = passwordRGEX.test(password);
var emailResult = emailRGEX.test(email);
var cpasswordresult = cpasswordRGEX.test(cpassword);
alert("Email:" + emailResult + ", password:" + passwordResult + ", cpassword: "+ cpasswordresult + "firstname: " + firstnameresult + ",lastname:" + lastnameresult);
return false;
}
<form onsubmit="validate()">
<center>
<h1>Dashboard</h1>
<br>
<label>First Name:</label>
<input type="text" name="fname" placeholder="First Name" class="email" id="firstname" />
<br>
<label>Last Name:</label>
<input type="text" name="lname" placeholder="Last Name" class="email" id="lastname" />
<br>
<label>Username:</label>
<input type="text" name="username" placeholder="Username" class="email" />
<br>
<label>Gender:</label>
<select name="" id="" class="email">
<option>Male</option>
<option>Female</option>
</select>
<br>
<label>Age:</label>
<input type="number" name="age" value="" placeholder="18" class="email">
<br>
<label>Blood Group:</label>
<select name="bloodgroup" id="" class="email">
<option>A</option>
<option>A-</option>
<option>B+</option>
<option>B-</option>
<option>O+</option>
<option>O-</option>
<option>AB+</option>
<option>AB-</option>
</select>
<br>
<label>Email:</label>
<input type="text" name="email" value="email" onFocus="field_focus(this, 'email');" onblur="field_blur(this,
'email');" class="email" id="email" />
<br>
<label>Password:</label>
<input type="password" name="password" value="email" onFocus="field_focus(this, 'email');" onblur="field_blur(this,
'email');" class="email" id="password" />
<br>
<label>Confirm Password:</label>
<input type="password" name="cpassword" value="email" onFocus="field_focus(this, 'email');" onblur="field_blur(this,
'email');" class="email" id="cpassword" />
<a href="#">
<div id="btn2">Sign Up</div>
</a>
<!-- End Btn2 -->
<input type="submit">
</form>
I have a form where inputs are dynamically generated two input fields with the same id, same name and same value.
User can then change any value in one of these two similar inputs (ie for example firstname).
How can i check if the values in the two input fields are the same, if they are same then just submit the first input and if not the same then submit the changed value.
so final submit will have only
firstname:test and lastname:testtwo
how ever if a value is changed for firstname to david than final submit will be
firstname:david and lastname:testtwo
<form id="myform" name="myform">
<input type="text" name="firstname" id="firstname" value="test" />
<input type="text" name="firstname" id="firstname" value="test"/>
<input type="text" name="lastname" id="lastname" value="testtwo" />
</form>
Try this:
$(document).ready(function(){
$("#submit").click(function(){
var first_name = $("#firstname").val()
var last_name = $("#firstname_verification").val()
if(first_name!=last_name){
console.log("please varify your name")
// do something here
} else{
console.log("name varified")
// do something here
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" name="myform">
<input type="text" name="firstname" id="firstname" value="test" />
<input type="text" id="firstname_verification" value="test"/>
<input type="text" name="lastname" id="lastname" value="testtwo" />
</form>
<button id="submit">Submit</button>
In addition:
$(document).ready(function(){
$("#submit").click(function(){
$("form").each(function(){
var $arr = $(this).find(':input')
//get key/value pair
var values = {};
$arr.each(function() {
values[this.name] = $(this).val();
});
console.log(values)
//get only values in a single array
var val_arr = []
$arr.each(function() {
val_arr.push($(this).val());
});
console.log(val_arr)
//
if(val_arr[0] === val_arr[1]){
console.log("name varified")
} else {
console.log("please varify your name")
}
});
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" name="myform">
<input type="text" name="firstname" id="firstname" value="test" />
<input type="text" id="firstname_verification" value="test"/>
<input type="text" name="lastname" id="lastname" value="testtwo" />
</form>
<button id="submit">Submit</button>
Change your html
HTML
<form id="myform" name="myform">
<input class="person" type="text" name="firstname" id="firstname" value="test" />
<input class="person" type="text" name="firstname" id="secondname" value="test"/>
<input class="person" type="text" name="lastname" id="lastname" value="testtwo" />
</form>
SCRIPT
var elements = document.getElementByClass('person');
console.log(elements[0].value) // print test.
https://jsfiddle.net/es9ff4c4/2/
I stated in the initial comments with many others, don't ever use an id for more than one element. In this case, since it is a form we don't need a name for the second box. It's just verifying an element we are already submitting. For an ID I decided to call it, aptly, "firstname_verification"
HTML
<form id="myform" name="myform">
<input type="text" name="firstname" id="firstname" value="test" />
<input type="text" id="firstname_verification" value="test"/>
<input type="text" name="lastname" id="lastname" value="testtwo" />
</form>
JavaScript/JQuery
$("#myform").on("submit", function(e) {
let $box1val = $("#firstname").val();
let $box2val = $("#firstname_verification").val();
if($box1val != $box2val) {
alert('Please Verify First Name');
e.preventDefault();
}
});
Please see demo here:
https://jsfiddle.net/es9ff4c4/2/
This question already has answers here:
JavaScript get element by name [duplicate]
(8 answers)
Closed 6 years ago.
I tried to get the input first and last name from the user, but I'm getting I'm undefined results for the both of them.
function getTextField() {
var fname = document.getElementsByClassName("fname").value;
var lname = document.getElementsByClassName("lname").value;
var message = fname + "\n" + lname;
document.getElementsByClassName("get")[0].innerHTML = message;
}
<form name="cost" autocomplete="on">
First Name:
<br>
<input type="text" name="fname" required placeholder="Enter the first name" pattern="[A-Za-z\-]+" maxlength="25">
<br>Last Name:
<br>
<input type="text" name="lname" required placeholder="Enter the last name" pattern="[A-Za-z\-]+" maxlength="25">
<br>
<br>
<input type="button" onClick="getTextField()" value="Place Order!" />
<br>
<br> <span class="get"></span>
</form>
You're looking for the name fields by class rather than the name attribute.
Use getElementsByName instead of getElementsByClassName
function getTextField() {
var fname = document.getElementsByName("fname")[0].value;
var lname = document.getElementsByName("lname")[0].value;
var message = fname + "\n" + lname;
document.getElementsByClassName("get")[0].innerHTML = message;
}
<form name="cost" autocomplete="on">
First Name:
<br>
<input type="text" name="fname" required placeholder="Enter the first name" pattern="[A-Za-z\-]+" maxlength="25">
<br>Last Name:
<br>
<input type="text" name="lname" required placeholder="Enter the last name" pattern="[A-Za-z\-]+" maxlength="25">
<br>
<br>
<input type="button" onClick="getTextField()" value="Place Order!" />
<br>
<br> <span class="get"></span>
</form>
I have created a form that is submitting the form in its entirety and preventing the page from reloading locally.
As soon as it is posted to the website and we try and plug in the handler (SalesForce). The form still submits but the page reloads and we cant have that. As there is data that reveals once the "submit" button is clicked. The button is controlling multiple JS and functions.
Can anyone look at the code and see where the problem lies?
<div>
<div class="columns medium-6">
<script type="text/javascript">
function randomnumber() {
document.forms[0].Code.value=(Math.round(Math.random()*999999+1)); }
onload=randomnumber
</script>
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" class="form-control" name="first_name" id="firstname" aria-describedby="firstname" placeholder="First Name">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" name="last_name" id="lastname" aria-describedby="lastname" placeholder="Last Name">
<label for="email">Email address</label>
<input type="text" class="form-control" name="email" id="email" aria-describedby="email" placeholder="Email">
<label for="phone">Phone</label>
<input type="text" class="form-control" name="phone" id="phone" aria-describedby="phone" placeholder="Phone">
<!--<input type="hidden" name="Owner" value="00G1a000001I7EA"> -->
<input type="hidden" name="form_type" value="CSF">
<input type="hidden" name="visitor_type" value="NEW-CUST">
<input type="hidden" name="party_size" value="1">
<input type="hidden" name="source" value="Love Happens Here">
<input type="hidden" name="webtoleadstoreid" value="a0C1a00000BJhea">
<input type="hidden" name="company" value="New Guest">
<input type="hidden" name="reason_visit" value="other">
<button type="submit" id="randomNumber" onclick="javascript:toggle(); return false;" class="btn btn-primary" value="Generate Code">Submit</button>
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("randomNumber");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "Submit";
}
}
function showdiv() {
var error = false;
//validate your form.
if(error == true){ return true;}
else
{
//show div
return false;
}
}
</script>
<div id="toggleText" style="display: none">
<label for="code">Code</label>
<input type="text" name="Code" readonly id="Code" aria-describedby="code" placeholder="code">
<p> Check your email for the coupon code and details. Thanks again for your participation in our Share & Win contest, winners will be announced on <strong>February 14th.</strong></p>
</div>
</div>
</form>
</div>
</div>
Like I said, you can use Ajax to achieve what you want.
Here are a few links that will help you in that direction
Ajax
Ajax
If they don't really help you, try googling Ajax, you will definitely find a site that will explain everything to you.