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>
Related
Please I have these two forms below. The first is the form that submit it's data to my database after my customer buys my product and were redirected to the registration page where the form is, while the second form is the form that submit it's data to my getresponse autoresponder campaign.
Now only the first form is what I wanted to be visible, I don't want the second form to be visible and I want to use one button to submit the two forms at one time, please how will I do that?
Thanks!
<!--====================================================================
Form that submit to my database and register my customers after purchase
======================================================================-->
<form class="form-horizontal templatemo-contact-form-1" role="form" action="sold.php" method="post">
<input type="text" class="form-control" id="name" placeholder="Enter Your First Name Here..." name="fname" required><br>
<input type="text" name="lname" class="form-control" id="name" placeholder="Enter Your Last Name Here..." required><br>
<input type="email" name="email" class="form-control" id="email" placeholder="Enter Your Email Here..." required><br>
<input type="text" name="phone" class="form-control" id="name" placeholder="Enter Your Phone Number Here..." required><br>
<input type="password" name="pword" class="form-control" id="website" placeholder="Enter Your Password Here..." required><br>
<input type="password" name="cpword" class="form-control" id="subject" placeholder="Re-enter Your Password Here..." required><br>
<input type="text" name="addrss" class="form-control" id="name" placeholder="Enter Your Address Here..." required><br>
<input type="submit" value="Register" class="btn btn-success pull-right">
</form>
<!--======================================================
Form that submit to my getresponse autoresponder campaign
========================================================-->
<form action="https://app.getresponse.com/add_subscriber.html" accept-charset="utf-8" method="post">
<input type="text" name="name" value="Enter your name here..." type=text style="width: 100%">
<input type="text" name="email" value="Enter your email here..." type=text style="width: 100%">
<!-- Get the token at: https://app.getresponse.com/campaign_list.html -->
<input type="hidden" name="campaign_token" value="ljqOk" />
<!-- Thank you page (optional) -->
<input type="hidden" name="thankyou_url" value="https://www.moneycreativesecret.com/spages/smf-sp1/"/>
<!-- Add subscriber to the follow-up sequence with a specified day (optional) -->
<input type="hidden" name="start_day" value="0" />
<!-- Forward form data to your page (optional) -->
<input type="hidden" name="forward_data" value="post" />
<input type="submit" value="100% Free Access" class="btn btn-success pull-right">
</form>
*** My Registration form code
function validation1() {
var password1 = document.getElementById('password1').value;
var password2 = document.getElementById('password2').value;
if (password1 == password2) {
return true;
} else {
alert("password must be same!");
return false;
}
}
<div class="container4" id="myForm1">
<form action="Home.html" id="myForm1" class="form-container1" method="post" onsubmit="return validation1();">
<?php include('errors.php'); ?>
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="email" placeholder="Enter Email" id="email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" id="password1" name="password1" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" id="password2" name="password2" required>
<hr>
<p>By creating an account you agree to our Terms & Privacy.</p>
<button type="submit" class="btn2">Register</button><br><br>
<button type="button" class="btn cancel" onclick="closeForm1()">Close</button>
</form>
</div>
I have a similar login pop-up for the same page. It does the validation correctly but for registration form the - "return true" value doesn't work.
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 am stuck at here, i'm trying to validate multiple textfield with same name, but it validates only the first input text and the rest nothing shows.
<form id = "frm_org_id">
<input type="text" name="email_address[]" placeholder="Email address" class="email_address">
<input type="text" name="email_address[]" placeholder="Email address" class="email_address">
<input type="text" name="email_address[]" placeholder="Email address" class="email_address">
<input type="text" name="email_address[]" placeholder="Email address" class="email_address">
</form>
js
$('#frm_org_id').bootstrapValidator({
fields:{
'email_address[]':{
validators:{
notEmpty:{
message: ' required'
},
emailAddress:{
message: 'Invalid email address'
}
}
}
}
});
How do i validate independently each of the field when typing?
You should put input tag in div with class="form-group".
t.e.:
<form id = "frm_org_id">
<div class="form-group">
<input type="text" name="email_address[]" placeholder="Email address" class="email_address">
</div>
<div class="form-group">
<input type="text" name="email_address[]" placeholder="Email address" class="email_address">
</div>
<div class="form-group">
<input type="text" name="email_address[]" placeholder="Email address" class="email_address">
</div>
<div class="form-group">
<input type="text" name="email_address[]" placeholder="Email address" class="email_address">
</div>
</form>
for working example see :
https://github.com/nghuuphuoc/bootstrapvalidator/blob/master/demo/multiple.html