Web address autofill into a box on the page - javascript

How can I make the web address of the page the user is currently on autofill into a box on the page?
On my websites 404 page we have a form for the user to fill out with name, email, etc. I would like one of the form boxes to autopopulate with the page the user is currently on.
Here is the code I currently have:
<form id="contactForm" class="scaffold-form" action="https://mpex.com/contacts/index/post/" method="post">
<div class="fieldset">
<h2 class="legend">Contact Information</h2>
<p class="required">* Required Fields</p>
<ul class="form-list">
<li class="fields">
<div class="field"><label class="required" for="name"><em>*</em>Name</label>
<div class="input-box"><input id="name" class="input-text required-entry" title="Name" type="text" value="" name="name" /></div>
</div>
<div class="field"><label class="required" for="email"><em>*</em>Email</label>
<div class="input-box"><input id="email" class="input-text required-entry validate-email" spellcheck="false" title="Email" type="email" value="" name="email" /></div>
</div>
</li>
<li><label for="telephone">Telephone</label>
<div class="input-box"><input id="telephone" class="input-text" title="Telephone" type="tel" value="" name="telephone" /></div>
</li>
<li class="wide"><label class="required" for="comment"><em>*</em>Comment</label>
<div class="input-box"><textarea id="comment" class="required-entry input-text" title="Comment" name="comment" rows="3" cols="5"></textarea></div>
</li>
</ul>
</div>
<div class="buttons-set"><input id="hideit" style="display: none !important;" type="text" value="" name="hideit" /> <button class="button" title="Submit" type="submit"><span><span>Submit</span></span></button></div>
</form>

<form id="contactForm" class="scaffold-form" action="https://mpex.com/contacts/index/post/" method="post">
<div class="fieldset">
<h2 class="legend">Contact Information</h2>
<p class="required">* Required Fields</p>
<ul class="form-list">
<li class="fields">
<div class="field"><label class="required" for="name"><em>*</em>Name</label>
<div class="input-box"><input id="name" class="input-text required-entry" title="Name" type="text" value="" name="name" /></div>
</div>
<div class="field"><label class="required" for="email"><em>*</em>Email</label>
<div class="input-box"><input id="email" class="input-text required-entry validate-email" spellcheck="false" title="Email" type="email" value="" name="email" /></div>
</div>
</li>
<li><label for="telephone">Telephone</label>
<div class="input-box"><input id="telephone" class="input-text" title="Telephone" type="tel" value="" name="telephone" /></div>
</li>
<li class="wide"><label class="required" for="comment"><em>*</em>Comment</label>
<div class="input-box"><textarea id="comment" class="required-entry input-text" title="Comment" name="comment" rows="3" cols="5"></textarea></div>
</li>
</ul>
</div>
<div class="buttons-set"><input id="hideit" style="display: none !important;" type="text" value="" name="hideit" /> <button class="button" title="Submit" type="submit"><span><span>Submit</span></span></button></div>
</form>
<script type="text/javascript">
window.onload = function () {
document.getElementById('name').value = location.href;
}
</script>
You can add script after form tag like this

Related

Mailto in a form tag not opening in Gmail app

<form action="mailto:info#gmail.com" method="post" enctype="text/plain" target="_blank">
<div class="first-column">
<div class="first-row">
<label>First Name</label>
<input type="text" name="First Name" id="Name" class="inp-1 input-con" placeholder="Enter your first name" />
<label> Email Id</label>
<input type="email" name="Email" id="Email" class="inp-2 input-con" placeholder="Enter your email id " />
</div>
<div class="second-row">
<label>Last Name</label>
<input type="text" name="Last Name" id="First Name" class="inp-3 input-con" placeholder="Enter your last name" />
<label>Mobile No.</label>
<input type="number" name="Mobile No." id="Mobile NO." class="inp-4 input-con" placeholder="Enter your mobile no." />
</div>
</div>
<div class="big-inp">
<label>Department</label>
<input type="text" name="department" id="department" class="inp-5 input-con" placeholder="Select department" />
</div>
<div class="last-row">
<div class="last-column">
<label>Date</label>
<input type="date" name="date" id="date" class="inp-6 input-con" />
</div>
<div class="last-column">
<label>Time</label>
<input type="time" name="Time" id="Time" class="inp-7 input-con" />
</div>
</div>
<div class="submit">
<button type="submit" class="submit-btn">
Submit <i class="fa-solid fa-arrow-up sub-arrow"></i>
</button>
</div>
</form>
When I am using mailto in an anchor tag it's opening in gmail but in form tag it's not opening in gmail . My gmail is default stiil it's not opening and it's only happening in my phone in other phones it's opening . When I click on it it redirects me and then in chrome it shows that url -
mailto:info#gmail.com?body=First%20Name%3D%0D%0AEmail%3D%0D%0ALast%20Name%3D%0D%0AMobile%20No.%3D%0D%0Adepartment%3D%0D%0Adate%3D%0D%0ATime%3D%0D%0A%0D%0A
Chrome just stuck there and nothing opens . Someone help me . I don't know how to fix it

how can i hide recaptcha overflow-y

Can someone please help me with recaptcha that have overflow-y visible, I use netlify form.
here its how its look like:
https://gyazo.com/76ae4df1ed119162bcda5566b956ce63
<form action="POST" data-netlify="true">
<div class="fields">
<div class="field half">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="field half">
<input type="email" name="email" id="email" placeholder="Email" />
</div>
<div class="field">
<input type="subject" name="subject" id="subject" placeholder="Subject" />
</div>
<div class="field">
<textarea name="message" id="message" placeholder="Message" rows="7"></textarea>
</div>
<div class="field">
<div class="recaptcha" data-netlify-recaptcha="true" ></div>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" class="button primary" /></li>
</ul>
</form>

Send data of form to div on submitting , outside the form using jQuery, laravel 5.3

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');

Post Values to an alert box after been validated

I have this form that has a lot of validation in place.
What i'm struggling with is, when all fields have been filled out correctly I want the values of the fields to be displayed in an alert box.
Here is my code
<form method="post" name="form" id="form" class="form" action="">
<div class="info align-right"><span class="error">*</span> Required</div>
<fieldset>
<div class="group">
<label for="name">Name</label>
<input id="name" name="name" type="text" required />
</div>
<div class="group">
<label for="UserEmail">Email <span class="req">*</span></label>
<input type="text" name="UserEmail" id="UserEmail" value="" size="32" />
</div>
<div class="group">
<label>Password: <span class="req">*</span></label>
<input type="password" name="password" id="password" value="" size="32" />
</div>
<div class="group">
<label>Confirm Password: <span class="req">*</span></label>
<input type="password" name="password-check" id="password-check" value="" size="32" />
</div>
</fieldset>
<fieldset class="clearfix">
<div class="group options">
<legend>Country</legend>
<div class="group--left">
<input id="usa" name="country" type="radio">
<label for="usa">United States</label>
<input id="argentina" name="country" type="radio">
<label for="argentina">Argentina</label>
</div>
</div>
<div class="group">
<label>Phone Number</label>
<div class="group--left">
<input id="phone" name="phone" class="phone" type="tel" />
<em>Example: <span id="example">123-456-7890</span></em>
</div>
</div>
</fieldset>
<div class="group--right">
<input type="submit" value="Submit" id="submit" class="right" />
<input type="reset" value="Clear" id="clear" class="left" />
</div>
</form>
My HTML is
<form method="post" name="form" id="form" class="form" action="">
<div class="info align-right"><span class="error">*</span> Required</div>
<fieldset>
<div class="group">
<label for="name">Name</label>
<input id="name" name="name" type="text" required />
</div>
<div class="group">
<label for="UserEmail">Email <span class="req">*</span></label>
<input type="text" name="UserEmail" id="UserEmail" value="" size="32" />
</div>
<div class="group">
<label>Password: <span class="req">*</span></label>
<input type="password" name="password" id="password" value="" size="32" />
</div>
<div class="group">
<label>Confirm Password: <span class="req">*</span></label>
<input type="password" name="password-check" id="password-check" value="" size="32" />
</div>
</fieldset>
<fieldset class="clearfix">
<div class="group options">
<legend>Country</legend>
<div class="group--left">
<input id="usa" name="country" type="radio">
<label for="usa">United States</label>
<input id="argentina" name="country" type="radio">
<label for="argentina">Argentina</label>
</div>
</div>
<div class="group">
<label>Phone Number</label>
<div class="group--left">
<input id="phone" name="phone" class="phone" type="tel" />
<em>Example: <span id="example">123-456-7890</span></em>
</div>
</div>
</fieldset>
<div class="group--right">
<input type="submit" value="Submit" id="submit" class="right" />
<input type="reset" value="Clear" id="clear" class="left" />
</div>
</form>
I have also provided a Fiddle - http://jsfiddle.net/barrycorrigan/vzdp64m4/
Any help is greatly appreciated
try something like this,
$("#form").submit(function(){
var x = $(this).serializeArray();
$.each(x, function(i, field){
alert(field.name + " : " + field.value);
});
});
demo in FIDDLE

using document.innerHTML to dynamically generate form within div tag

There is a div tag with a form inside of it on my website as follows:
<div class="col-1">
<h4>Login</h4>
<form id="login-form" action="https://mydomain.com/customer/account/loginPost/" method="post">
<fieldset>
<p>Already registered? Please log in below:</p>
<ul class="form-list">
<li>
<label for="login-email">Email Address</label>
<div class="input-box">
<input type="text" class="input-text required-entry validate-email" id="login-email" name="login[username]" value="" />
</div>
</li>
<li>
<label for="login-password">Password</label>
<div class="input-box">
<input type="password" class="input-text validate-password required-entry" id="login-password" name="login[password]" />
</div>
</li>
</ul>
</fieldset>
<div class="buttons-set form-buttons btn-only">
<button type="button" class="button" onclick="loginForm.submit()"><span><span>Login</span></span></button>
Forgot your password?
</div>
</form>
</div>
The form submission functions fine, until I attempt to generate the exact same content within the div tag using .innerHTML on the "col-1" div tag. I use .innerHTML to replace the HTML in "col-1" with the following:
<h4>Login</h4>
<form id="login-form" action="https://mydomain.com/customer/account/loginPost/" method="post">
<fieldset><p>Already registered? Please log in below:</p>
<ul class="form-list">
<li>
<label for="login-email">Email Address</label>
<div class="input-box">
<input class="input-text required-entry validate-email" id="login-email" name="login[username]" value="" type="text">
</div>
</li>
<li>
<label for="login-password">Password</label>
<div class="input-box">
<input class="input-text validate-password required-entry" id="login-password" name="login[password]" type="password">
</div>
</li>
</ul>
</fieldset>
<div class="buttons-set form-buttons btn-only">
<button type="button" class="button" onclick="loginForm.submit()">
<span><span>Login</span></span>
</button>
Forgot your password?
</div>
</form>
Why does the submit button (or pressing enter for that matter) not submit the form when it is generated from .innerHTML? I checked the generated HTML in Firefox and it is exactly the same as the original HTML (as it should be), but will not submit...
Just for reference, this is the actual call to .innerHTML to replace the HTML within the "col-1" div tag:
loginFormDivTag.innerHTML='<h4>Login</h4><form id="login-form" action="https://mydomain.com/customer/account/loginPost/" method="post"><fieldset><p>Already registered? Please log in below:</p><ul class="form-list"><li><label for="login-email">Email Address</label><div class="input-box"><input type="text" class="input-text required-entry validate-email" id="login-email" name="login[username]" value="" /></div></li><li><label for="login-password">Password</label><div class="input-box"><input type="password" class="input-text validate-password required-entry" id="login-password" name="login[password]" /></div></li></ul></fieldset><div class="buttons-set form-buttons btn-only"><button type="button" class="button" onclick="loginForm.submit()"><span><span>Login</span></span></button>Forgot your password?</div></form>';
My ultimate goal is to add an "onsubmit" method to the form, is there an easier way to do that? Perhaps with jQuery?
loginForm, from your button's onclick, isn't defined here so I'm assuming it's defined before you replace the innerHTML.
Because you're replacing the structure, loginForm is now referencing a dead form. Try:
<button ... onclick="this.form.submit();">
As for why enter isn't working, you need a submit button (<input type="submit">), not a <button>
I think there's an error with button's onClick call, I would change that innerHTML text to
loginFormDivTag.innerHTML='<h4>Login</h4><form id="login-form" action="https://mydomain.com/customer/account/loginPost/" method="post"><fieldset><p>Already registered? Please log in below:</p><ul class="form-list"><li><label for="login-email">Email Address</label><div class="input-box"><input type="text" class="input-text required-entry validate-email" id="login-email" name="login[username]" value="" /></div></li><li><label for="login-password">Password</label><div class="input-box"><input type="password" class="input-text validate-password required-entry" id="login-password" name="login[password]" /></div></li></ul></fieldset><div class="buttons-set form-buttons btn-only"><button type="button" class="button" onclick="document.forms.login-form.submit()"><span><span>Login</span></span></button>Forgot your password?</div></form>';
Using jQuery I'd do something like this
The HTML
<!-- I'd grab form text from here -->
<div id="div-form-content" style="display:none">
<h4>Login</h4>
<form id="login-form" name="login-form" action="https://mydomain.com/customer/account/loginPost/" method="post">
<fieldset>
<p>Already registered? Please log in below:</p>
<ul class="form-list">
<li>
<label for="login-email">Email Address</label>
<div class="input-box">
<input type="text" class="input-text required-entry validate-email" id="login-email" name="login[username]" value="" />
</div>
</li>
<li>
<label for="login-password">Password</label>
<div class="input-box">
<input type="password" class="input-text validate-password required-entry" id="login-password" name="login[password]" />
</div>
</li>
</ul>
</fieldset>
<div class="buttons-set form-buttons btn-only">
<button type="button" class="button" onclick="$('#login-form').submit()"><span><span>Login</span></span></button>
Forgot your password?
</div>
</form>
And, here' the script, that goes on your head section of the page
<script type="text/javascript">
$(document).ready(function(){
// get the the innerHTML from #div-form-content and add it to .col-1
$('.col-1').html($('#div-form-content').html());
//remove innerHTML from #div-form-content, we don't want two forms with same ID in the same page
$('#div-form-content').html('');
});
</script>
Not exactly sure, if it makes any easier but, I hope it helps. cheers

Categories

Resources