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>
Related
This is my custom build HTML form
<form id="i-recaptcha" action="#" method="POST">
<input class="first_name_popup" id="first_name" maxlength="40" name="first_name" size="20" type="text" placeholder="First Name" required="required">
<input class="last_name_popup" id="last_name" maxlength="80" name="last_name" size="20" type="text" placeholder="Last Name" required="required">
<input class="email_popup" id="email" maxlength="80" name="email" size="20" type="text" placeholder="Your Email" required="required">
<input class="submit_button_popup" id="submit_button" type="submit" name="submit" value="GET A FREE CONSULTATION!">
</form>
how can i make this work on IOS? right now im getting so many blank forms submitted.
Thank you.
I'm trying to create a simple sign in/sign up form that sends an alert to the user once they've hit the submit button. The alert will show the user all the info they have put in (name, email, password). When I run the app the alert comes up as "undefined".
Here's my code:
HTML:
<form>
<h2>Sign In</h2>
<label>User Name:</label>
<input type="text" placeholder="Enter Username" name="username" required>
<label>Password:</label>
<input type="password" placeholder="Enter Password" name="password" required>
<input type="submit" class="submit-button si-submit" value="Sign In">
<div id="remember"><input type="checkbox" checked="checked"><span>Remember me</span></div>
</form>
</div>
<div class="sign-up">
<form>
<h2>Sign Up</h2>
<label>Name:</label>
<input type="text" placeholder="Enter your name" value="" id="name" required>
<label>Email:</label>
<input type="email" name="email" id="email" required placeholder="Enter a valid email address">
<label>Password:</label>
<input type="password" placeholder="Enter your password" name="password" id="password" required>
<input class="submit-button su-submit" type="submit" id="myButton">
</form>
JS:
var userInfo = document.getElementById("name");
document.getElementById("myButton").addEventListener("click", function() {
alert(userInfo.value);
});
Your code seems to work...
var userName = document.getElementById("name"),
userEmail = document.getElementById("email"),
userPassword = document.getElementById("password");
document.getElementById("myButton").addEventListener("click", function() {
alert(userName.value);
alert(userEmail.value);
alert(userPassword.value);
});
<div class="sign-up">
<form>
<h2>Sign Up</h2>
<label>Name:</label>
<input type="text" placeholder="Enter your name" value="" id="name" required>
<label>Email:</label>
<input type="email" name="email" id="email" required placeholder="Enter a valid email address">
<label>Password:</label>
<input type="password" placeholder="Enter your password" name="password" id="password" required>
<input class="submit-button su-submit" type="submit" id="myButton">
</form>
</div>
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');
Since adding a contact form to my website, when I refresh the page it constantly scrolls the page to where the form is.
I don't know what could provoke this, so I came to ask. I searched for similar issues but couldn't find any.
Thanks for all.
Form from site:
<form method="post" action="contact.php">
<input type="text" id="name" name="name" value="" placeholder="Nom prénom" required="required" autofocus="autofocus" />
<input type="email" id="email" name="email" value="" placeholder="email#example.com" required="required" />
<input type="phone" id="phone" name="phone" value="" placeholder="00.00.00.00.00" />
<textarea id="message" name="message" placeholder="Bonjour,..." required="required"></textarea>
<button type="submit" value="Envoyer!" id="submit-button" >Envoyer</button>
</form>
Corrected form :
<form method="post" action="contact.php">
<input type="text" id="name" name="name" value="" placeholder="Nom prénom" required="required" />
<input type="email" id="email" name="email" value="" placeholder="email#example.com" required="required" />
<input type="phone" id="phone" name="phone" value="" placeholder="00.00.00.00.00" />
<textarea id="message" name="message" placeholder="Bonjour,..." required="required"></textarea>
<button type="submit" value="Envoyer!" id="submit-button" >Envoyer</button>
</form>
When you copy an old form, be sure to properly read each line (my biggest error there).
There was an autofocus attribute in my form and that's what caused the problem.
Your problem seems to be with the 'autofocus' attribute.
http://www.w3schools.com/tags/att_input_autofocus.asp
You should remove it from the following form like so:
<form method="post" action="contact.php">
<input type="text" id="name" name="name" value="" placeholder="Maamar Miloud" required="required" />
<input type="email" id="email" name="email" value="" placeholder="contact.maamar#gmail.com" required="required" />
<input type="phone" id="phone" name="phone" value="" placeholder="06.15.73.0x.0x" />
<textarea id="message" name="message" placeholder="Bonjour,..." required="required"></textarea>
<button type="submit" value="Envoyer!" id="submit-button" >Envoyer</button>
</form>
Here's a fiddle showing an extreme example: http://jsfiddle.net/xefq9t0z/1/
It's much easier to help you when you provide snippets of code so we don't have to dig through your entire site! You're very lucky that I'm very bored!
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 = '';
}"