I have 5 6 fields that whom data I need to get in below 6 fields as well. The problem here is some of the values are not copying in the appropriate text fields.
I am posting my html as well. It's small form.
My html with js in it as well.
<input class="width_367" type="text" name="fname" id="email" required>
<input class="width_367" type="text" name="mname" id="pass" required>
<input class="width_367" type="text" name="lname" id="email" required>
<input class="width_367" type="text" name="address" id="address" required>
<input class="width_367" type="text" name="city" id="city" required>
The checkbox:
<p align="left" style="width: 425px !important;">
<input type="checkbox" name="chkOption" value="yes">
Check here if Recipient Address is the same as Billing Address </p>
<input class="width_367" type="text" name="rfname" id="email" />
<input class="width_367" type="text" name="rmname" id="pass" />
<input class="width_367" type="text" name="rlname" id="email" />
<input class="width_367" type="text" name="raddress" id="address" />
<input class="width_367" type="text" name="rcity" id="city" />
onclick="javascript: if (chkOption.checked){
rfname.value=fname.value;
rmname.value=mname.value;
rlname.value=lname.value;
raddress.value=address.value;
rcity.value=city.value;
rstate.value=state.value;
recstate.value=usestate.value;
rCountry.value=Country.value;
rzip.value=zip.value;
remail.value=email.value;
}else{
rfname.value = '';
rmname.value = '';
rlname.value = '';
raddress.value = '';
rcity.value = '';
rstate.value = '';
recstate.value = '';
rCountry.value = '';
rzip.value = '';
remail.value = '';
}"
Related
I have a problem with a bit of my javascript code.
I am trying to get my #showAddress to display: block when the deliverservice radio button is clicked/checked.
I've tried looking at some Stack Overflow posts but a lot of them are too advanced for my current level (I just started JavaScript).
<label>Delivery Type</label>
<input type="radio" name="delivery" value="Pickup" id="pickupService">Pickup
<input type="radio" name="delivery" value="Deliver" id="deliverService">Deliver
</p>
<div id="showAddress">
<p>
<label for="deliveryAddress">Delivery Address</label><br>
<input type="text" name="deliveryAddress" id="deliveryAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="deliverySuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="deliveryPostcode" placeholder="Enter your postcode"><br>
Billing address same as Above
</div>
<p>
<label for="billingAddress">Billing Address</label><br>
<input type="text" name="deliveryAddress" id="billingAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="billingSuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="billingPostcode" placeholder="Enter your postcode"><br>
</p>
<p>
I believe the error is happening in my JavaScript, however it's only two functions. The first two lines are my initialise function, which is calling my second function down below.
var showDelivery = document.getElementById("deliverService");
showDelivery.onclick = showAddress;
function showAddress() {
document.getElementById("showAddress").style.display= 'block';
}
#additionalInformation, #showAddress {
display: none;
}
You should change this line
showDelivery.onclick = showAddress;
to something like this:
showDelivery.onclick = function(){showAddress();};
Alternatively, you can set the onclick listener on the input element itself (in the html), to directly call the javascript function from the HTML element, rather than cluttering your JavaScript
<input type="radio" name="delivery" value="Deliver" id="deliverService" onclick="showAddress()">Deliver
function showAddress() {
document.getElementById("showAddress").style.display= 'block';
}
#additionalInformation, #showAddress {
display: none;
}
<label>Delivery Type</label>
<input type="radio" name="delivery" value="Pickup" id="pickupService">Pickup
<input type="radio" name="delivery" value="Deliver" id="deliverService" onclick="showAddress()">Deliver
<div id="showAddress">
<p>
<label for="deliveryAddress">Delivery Address</label><br>
<input type="text" name="deliveryAddress" id="deliveryAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="deliverySuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="deliveryPostcode" placeholder="Enter your postcode"><br>
Billing address same as Above
</p>
</div>
<p>
<label for="billingAddress">Billing Address</label><br>
<input type="text" name="deliveryAddress" id="billingAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="billingSuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="billingPostcode" placeholder="Enter your postcode"><br>
</p>
EDIT: An example of using addEventListener
document.getElementById("deliverService").addEventListener("click", function() {
document.getElementById("showAddress").style.display= 'block';
});
document.getElementById("deliverService").addEventListener("click", function() {
document.getElementById("showAddress").style.display= 'block';
});
#additionalInformation, #showAddress {
display: none;
}
<label>Delivery Type</label>
<input type="radio" name="delivery" value="Pickup" id="pickupService">Pickup
<input type="radio" name="delivery" value="Deliver" id="deliverService">Deliver
<div id="showAddress">
<p>
<label for="deliveryAddress">Delivery Address</label><br>
<input type="text" name="deliveryAddress" id="deliveryAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="deliverySuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="deliveryPostcode" placeholder="Enter your postcode"><br>
Billing address same as Above
</p>
</div>
<p>
<label for="billingAddress">Billing Address</label><br>
<input type="text" name="deliveryAddress" id="billingAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="billingSuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="billingPostcode" placeholder="Enter your postcode"><br>
</p>
I have 2 forms in which want to send the user input from new form to old form. Im trying to find the most dynamic way to accomplish that.
I tried the for loop and Jquery each function but gets confused
<form class="new-form">
<input type="text" placeholder="Name" name="new-name" class="new-name">
<input type="tel" placeholder="phone" class="new-phone" name="new-phone">
<input type="email" placeholder="email" class="new-email" name="new-email">
</form>
<form class="old-form hidden">
<input type="text" placeholder="Name" name="name" class="name">
<input type="tel" placeholder="phone" class="phone" name="phone">
<input type="email" placeholder="email" class="email" name="email">
</form>
You could do something like this:
$('.new-form input').keyup(function() {
var p = $(this).attr("placeholder");
var v = $(this).val();
$('.old-form input[placeholder=' + p + ']').val(v)
});
Assuming that the placeholder is the same, it uses the placeholder to identify the same element in the old form and then copies the value to that on .keyup() event
Demo
$('.new-form input').keyup(function() {
var p = $(this).attr("placeholder");
var v = $(this).val();
$('.old-form input[placeholder=' + p + ']').val(v)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="new-form">
<input type="text" placeholder="Name" name="new-name" class="new-name">
<input type="tel" placeholder="phone" class="new-phone" name="new-phone">
<input type="email" placeholder="email" class="new-email" name="new-email">
</form>
<form class="old-form hidden">
<input type="text" placeholder="Name" name="name" class="name">
<input type="tel" placeholder="phone" class="phone" name="phone">
<input type="email" placeholder="email" class="email" name="email">
</form>
You can use keyup to set values as you type
$('.new-name').keyup(function(){
$('.name').val($(this).val())
})
$('.new-phone').keyup(function(){
$('.phone').val($(this).val())
})
$('.new-email').keyup(function(){
$('.email').val($(this).val())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="new-form">
<input type="text" placeholder="Name" name="new-name" class="new-name">
<input type="tel" placeholder="phone" class="new-phone" name="new-phone">
<input type="email" placeholder="email" class="new-email" name="new-email">
</form>
<form class="old-form hidden">
<input type="text" placeholder="Name" name="name" class="name">
<input type="tel" placeholder="phone" class="phone" name="phone">
<input type="email" placeholder="email" class="email" name="email">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="new-form">
<input type="text" placeholder="Name" name="new-name" class="new-name" onkeyup="$('#name').val(this.value)">
<input type="tel" placeholder="phone" class="new-phone" name="new-phone" onkeyup="$('#phone').val(this.value)">
<input type="email" placeholder="email" class="new-email" name="new-email" onkeyup="$('#email').val(this.value)">
</form>
<form class="old-form hidden">
<input type="text" placeholder="Name" name="name" class="name" id="name">
<input type="tel" placeholder="phone" class="phone" name="phone" id="phone">
<input type="email" placeholder="email" class="email" name="email" id="email">
</form>
this is my form
<form method="post" action="{{url('/vpage')}}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<label>First Name</label>
<input type="text" name="firstname" placeholder="First Name" value="{{$user->firstname}}" >
<label>Email Address</label>
<input type="text" name="email" placeholder="Email Address" value="{{$user->email}}" >
<label>Phone Number <span> (optional)</span></label>
<input type="text" name="phone" placeholder="(888) 888-888" value="{{$user->phone}}" >
<button id="hitme" class="submitBTN getstart" type="submit" onclick='return false;'> Get Started </button>
</form>
this is div outside the form
<div class="vgasRit">
<p>SUMMARY</p>
<div class="sfieldz w100">
<label>Name:</label>
<input type="text" placeholder="John Smith" value="{{$user->firstname}}">
</div>
<div class="w100">
<label>Email Address:</label>
<input type="text" placeholder="johnsmith#gmail.com" value="{{$user->email}}" >
</div>
<div class="w100">
<label>Phone Number:</label>
<input type="text" placeholder="(888) 888-888" value="{{$user->phone}}">
</div>
</div>
I want to access the value of the "fistname" , "lastname" and "phone" as user submit the form,so that i can display it in summary div.
Note: i have tried compact function of php in my controller so that i can send the whole database object in my view but this solution not working , after using compact function i was access the object like this
<input type="text" placeholder="John Smith" value="<?= (!empty($group_data)) ? $group_data->firstname : '';?>">
Any ideas regarding this ? i am new to laravel. I have served several hours on internet but nothing found out.
Assuming everything is on the same page, give your form's inputs an id:
<form id="form" method="post" action="{{url('/vpage')}}">
<label>First Name</label>
<input id="firstname" type="text" name="firstname" placeholder="First Name" value="{{$user->firstname}}" >
<label>Email Address</label>
<input id="email" type="text" name="email" placeholder="Email Address" value="{{$user->email}}" >
<label>Phone Number <span> (optional)</span></label>
<input id="phone" type="text" name="phone" placeholder="(888) 888-888" value="{{$user->phone}}" >
Give your summary div inputs an id too:
<p>SUMMARY</p>
<div class="sfieldz w100">
<label>Name:</label>
<input id="firstname2" type="text" placeholder="John Smith" value="{{$user->firstname}}">
</div>
<div class="w100">
<label>Email Address:</label>
<input id="email2" type="text" placeholder="johnsmith#gmail.com" value="{{$user->email}}" >
</div>
<div class="w100">
<label>Phone Number:</label>
<input id="phone2" type="text" placeholder="(888) 888-888" value="{{$user->phone}}">
</div>
Then, use jquery to get those values when the user submits the form:
$('#form').submit(function() {
// set our summary div inputs values with our form values
$('firstname2').val($('firstname').val());
$('email2').val($('email').val());
$('phone2').val($('phone').val());
});
That should be it.
Your view (I assumed that form and summery div in same view):
<form method="post" action="{{url('/vpage')}}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<label>First Name</label>
<input type="text" name="firstname" placeholder="First Name" value="{{$user->firstname}}">
<label>Email Address</label>
<input type="text" name="email" placeholder="Email Address" value="{{$user->email}}">
<label>Phone Number <span> (optional)</span></label>
<input type="text" name="phone" placeholder="(888) 888-888" value="{{$user->phone}}">
<button id="hitme" class="submitBTN getstart" type="submit" onclick='return false;'> Get Started</button>
</form>
#if($Data->input('firstname'))
<p>SUMMARY</p>
<div class="sfieldz w100">
<label>Name:</label>
<input id="firstname2" type="text" placeholder="John Smith" value="{{$Data->input('firstname')}}">
</div>
<div class="w100">
<label>Email Address:</label>
<input id="email2" type="text" placeholder="johnsmith#gmail.com" value="{{$Data->input('email')}}" >
</div>
<div class="w100">
<label>Phone Number:</label>
<input id="phone2" type="text" placeholder="(888) 888-888" value="{{$Data->input('phone')}}">
</div>
#endif
Contoroller
function vpageController(Request $r){
return view("path.to.view",['Data'=>$r]);
}
Route:
Route::Route::match(['POST', 'GET'],'/vpage', 'ControllerName#vpageController');
I want to pass in different element IDs with the same function
function validate(idname, spnname) {
var getId = document.getElementById(idname);
if(getId === null || getId === undefined || getId === "") {
var getSpn = document.getElementById(spnname).innerHTML = "Required Field";
}
}
validate('firstname', 'spnfirstname');
<body>
<h1>SUBSCRIBE</h1>
<form id="frml" method="get" >
<input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname"/><span id="spnfirstname"></span><br />
<input type="text" name="lname" placeholder="Last Name" s="textbox" id="lastname"/><span id="spnlastname"></span><br />
<input type="date" name="Birthday" value="" class="textbox" id="birthday"/>
<span id="spnbirthday"></span><br />
<input type="email" name="" placeholder="someone#example.com" class="textbox" id="email"/><span id="spnemail"></span><br />
<input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep"/><span id="spnhomep"></span><br />
<input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp"/><span id="spncellp"></span><br />
//is there another way to do this onClick event in javascript that may help?
<input id ="btn" type="button" value="Submit" onClick = "return validate()"/>
</form>
</div>
I am receiving an error for my second var and my html onClick. My question is different because there is no answer here responding to this issue correctly. I have tried everything. I have no idea why I am getting this error message.
Two things:
1.- Use the 'value' property to get the actual value from the input:
var getId = document.getElementById(idname).value;
2.-Set the function to the 'click' event, addEventListener can be useful if you want to use plain javaScript, just right after the form:
<script>
document.getElementById('btn').addEventListener('click', function(){validate('firstname', 'spnfirstname');});
</script>
This is how i get it work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validate(idname, spnname){
var getId = document.getElementById(idname).value;
console.log(getId);
if(getId === null || getId === undefined || getId === ""){
var getSpn = document.getElementById(spnname).innerHTML = "Required Field";
}
}
</script>
</head>
<body>
<h1>SUBSCRIBE</h1>
<form id="frml" method="get">
<input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname"/><span id="spnfirstname"></span><br/>
<input type="text" name="lname" placeholder="Last Name" class="textbox" id="lastname"/><span id="spnlastname"></span><br/>
<input type="date" name="Birthday" value="" class="textbox" id="birthday"/>
<span id="spnbirthday"></span><br/>
<input type="email" name="" placeholder="someone#example.com" class="textbox" id="email"/><span id="spnemail"></span><br/>
<input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep"/><span id="spnhomep"></span><br/>
<input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp"/><span id="spncellp"></span><br/>
//is there another way to do this onClick event in javascript that may help
<input id ="btn" type="button" value="Submit"/>
</form>
<script>
document.getElementById('btn').addEventListener('click', function(){validate('firstname', 'spnfirstname');});
</script>
</body
</html>
If you are trying to validate all your elements on submit click.
You can select all using querySelector and and then check each element for its value. If value is "" then change the innerHTML of sibling span element.
var submit = document.querySelector("#btn")
submit.addEventListener("click", function() {
var elements = document.querySelectorAll("input");
for (var i = 0; i < elements.length; i++) {
if (elements[i].value === "") {
elements[i].nextElementSibling.innerHTML = "Required Field";
}
}
});
<body>
<h1>SUBSCRIBE</h1>
<form id="frml" method="get">
<input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname" /><span id="spnfirstname"></span>
<br />
<input type="text" name="lname" placeholder="Last Name" class="textbox" id="lastname" /><span id="spnlastname"></span>
<br />
<input type="date" name="Birthday" value="" class="textbox" id="birthday" />
<span id="spnbirthday"></span>
<br />
<input type="email" name="" placeholder="someone#example.com" class="textbox" id="email" /><span id="spnemail"></span>
<br />
<input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep" /><span id="spnhomep"></span>
<br />
<input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp" /><span id="spncellp"></span>
<br />
<input id="btn" type="button" value="Submit" />
</form>
</div>
I have written the following code but on submit it doesn't match password with confirm password..?
what should i do ?
please help..?
<script>
function myFunction(){
var x = document.getElementsByName("pass").value;
var y = document.getElementsByName("pass2").value;
var ok = true;
if(x !== y)
{
alert("Passwords do not match");
}
return ok;
}
</script>
<h1>Hello ! user, Please register here</h1>
<form name="f1" action="redirect.jsp" method="POST" onsubmit="return myFunction()">
First_Name : <input type="text" name="fname" value="" required="" />
<br>
<br>
Last_Name : <input type="text" name="lname" value="" required=""/>
<br>
<br>
Email : <input type="email" name="email" value="" required=""/>
<br>
<br>
Date of birth : <input type="date" name="date" value="" required="" />
<br>
<br>
Password : <input type="password" name="pass" value="" />
<br>
<br>
Confirm Password : <input type="password" name="pass2" value="" />
<br>
<br>
Address :
<br>
<br>
Street_No : <input type="text" name="street" value="" size="15" required=""/>
Near Landmark(if any) : <input type="text" name="landmark" value="" size="20" />
<br>
<br>
City : <input type="text" name="city" value="" required="" />
State : <select name="state" required="" >
<option>Select</option>
<option>Andhra Pradesh</option>
<option>Chattisgarh</option>
<option>Dehradun</option>
<option>Delhi</option>
<option>Uttar Pradesh</option>
<option>Punjab</option>
</select>
Code : <input type="number" name="code" value="" required=""/>
<br>
<br>
Mobile number : <input type="text" name="mobile" value="" size="11" required="" />
<br>
<br>
<input type="submit" value="submit" name="s1" />
<input type="reset" value="reset" />
</form>
</body>
This is my registration page. I would like to match the password and password confirmation fields with javascript, but it's not working.
What should I do?
The getElementsByName returns an array, so you need to grab the first element:
document.getElementsByName("pass")[0].value;
Better if you add ids to your inputs and use getElementById.