I am building a registration form using parsley and I found that this code works:
<form data-validate="parsley" id="registration_form" action="register.php" method="POST">
<label>Full name:</label>
<input type="text" id="full_name" name="full_name" placeholder="FirstName LastName" data-required="true" data-trigger="keyup"
data-regexp="^[A-Za-z ]+$" autofocus="autofocus">
<label>Email address:</label>
<input type="email" id="email_addr" name="email_addr" data-required="true" data-type="email" data-trigger="keyup">
But when I put it into table, even a small part of it, it fails to work.
<table>
<tr><td>
<form data-validate="parsley" id="registration_form" action="register.php" method="POST">
<label>Full name:</label>
<input type="text" id="full_name" name="full_name" placeholder="FirstName LastName" data-required="true" data-trigger="keyup"
data-regexp="^[A-Za-z ]+$" autofocus="autofocus">
</td></tr></table>
No errors from browser.
But what I find out is that if I am doing:
<form data-validate="parsley" id="registration_form" action="register.php" method="POST">
before <table>, it work. However if I insert it (<form ...>) inside <td></td>, it fails.
As far as I know <form> tag is opened until </form> tag is given or until the end of document.
Is it terminated asap parent tag is terminated?
Can you explain what is my error?
Related
I have several forms synced to Salesforce currently running on a WordPress website using the Avada theme, but the client wants a new field added which will require adding an onload event in the body tag. I thought the easiest way to do this would be to go through the dashboard>Theme Options>Advanced>Code Fields but I don't see an option to add an event to the body tag. What's the best way to do this without editing the core template files (the forms are only on a few pages)?
Snippet of current code:
<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST"><input type=hidden name="oid" value="00DU0000000H99p">
<input type=hidden name="retURL" value="https://www.sablesys.com/thank-you/">
<input type="hidden" name="member_status" value="Sent"/>
<!-- Campaign id for Quote Campaign -->
<input type="hidden" name="Campaign_ID" value="7010B000001Eiz3QAC" />
<input type="hidden" id="lead_source" name="lead_source" value="Website">
<label for="first_name">First Name</label><input id="first_name" maxlength="40" name="first_name" size="20" type="text" required/><br>
<label for="last_name">Last Name</label><input id="last_name" maxlength="80" name="last_name" size="20" type="text" required/><br>
<label for="company">Company</label><input id="company" maxlength="40" name="company" size="20" type="text" required/><br>
<label for="email">Email</label><input id="email" maxlength="80" name="email" size="20" type="text" required/><br>
<label for="city">City</label><input id="city" maxlength="40" name="city" size="20" type="text" required/><br>
Notes:<br><textarea id="00NU0000003mN8A" name="00NU0000003mN8A" rows="25" type="text" wrap="soft" style="width: 100%"></textarea><br>
<input type="submit" name="submit">
</form>
New code the client requested be added:
A new field for the form:
<input type="hidden" id="URL" name="URL" value="" >
A new onload event:
<body onload="document.getElementById('URL').value = document.location.href">
Is there a way to do a window.onload inside a script instead? I admit I don't know javascript well. Please be descriptive in your replies. Thanks.
This line of code IS javascript.
document.getElementById('URL').value = document.location.href;
You just need a way to get it executed.
If any other javascript code is executing on your page, make it part of that.
You could add an "onsubmit" event to the form, like so:
<form onsubmit="FillInURL()">
<input id="URL" type=hidden>
</form>
function FillInURL() {document.getElementById('URL').value = document.location.href;}
I have tried several different things in javascript but nothing seems to work on my site. I'm trying to have an alert pop up when submitting a form. This is what I have
<form>
Name:<br>
<input type="text" name="name" required><br>
Email:<br>
<input type="email" name="email" required><br>
Phone (Format: 999-999-9999):<br>
<input type="tel" name="phone" required pattern="\d{3}[\-]\d{3}[\-]\d{4}"><br>
Nature of comment:<br>
<input type="checkbox" name="comment" value="Question"> Question
<input type="checkbox" name="comment" value="Business Inquiry"> Business Inquiry
<input type="checkbox" name="comment" value="Comment"> Comment
<input type="checkbox" name="comment" value="Other"> Other <br>
Comment:<br>
<textarea></textarea><br>
<input type="submit" value="Submit">
<form onsubmit="return confirm('Do you really want to submit the form?');">
</form>
This is the website: http://webpages.uncc.edu/~kjardine/MC_Portfolio/contact.html
You were almost there, the key is the code you have already has a <form> tag which starts on line 1, so you should add your onsubmit="" attribute into that one. Here is the revised code that should do the trick:
<form onsubmit="return confirm('Do you really want to submit the form?');">
Name:<br>
<input type="text" name="name" required><br>
Email:<br>
<input type="email" name="email" required><br>
Phone (Format: 999-999-9999):<br>
<input type="tel" name="phone" required pattern="\d{3}[\-]\d{3}[\-]\d{4}"><br>
Nature of comment:<br>
<input type="checkbox" name="comment" value="Question"> Question
<input type="checkbox" name="comment" value="Business Inquiry"> Business Inquiry
<input type="checkbox" name="comment" value="Comment"> Comment
<input type="checkbox" name="comment" value="Other"> Other <br>
Comment:<br>
<textarea></textarea><br>
<input type="submit" value="Submit">
</form>
The onsubmit should go in the form element at the top, like the commenter said. and the form element its in currently should be deleted.
That said, you could also have checked a "dont show any more popups" option once for that website, and now popups will be disabled until you enable the popups again, by clearing your chrome cache for instance.
<form onsubmit="return confirm('u sure?');">
<input>...
</form>
I also advise against using onsubmit as an HTML parameter, and instead writing a js handler in an actual <script></script block to do the confirm.
window.onload = function () {
document.getElementById("myForm").onsubmit = function onSubmit(form) {
return confirm('u sure?');
}
}
Remember to add id="myForm" to your form element in this case.
So I have a basic form that takes in Name, Email, Date of Arrival, Date of Departure and Comment with a big "Send" button. Here is the code for that:
<form class="form" id="form1" action="mailto:myemail#email.com" method="post">
<p class="name">
<input name="Name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
</p>
<p class="email">
<input name="Email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p class="email">
<input name="Date Of Arrival" type="date" class="validate feedback-input" id="date" placeholder="Date Of Arrival" />
</p>
<p class="email">
<input name="Date Of Departure" type="date2" class="validate feedback-input" id="date2" placeholder="Date Of Departure" />
</p>
<p class="text">
<textarea name="Text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
</p>
<div class="submit">
<input type="submit" value="SEND" id="button-blue"/>
<div class="ease"></div>
</div>
</form>
It successfully opens up my mail client with an email. The issue is that this is what is in the body of the email:
Name+%250D%250A+=Name+Test&Email+%250D%250A=test%40email.com&Date+Of+Arrival+%250D%250A=09%2F04%2F2015&Date+Of+Departure+%250D%250A=24%2F04%2F2015&Text=This+is+a+test+comment
How can I style this? I have looked online and can't figure it out.
For this example, this is how I would like the email body to look:
Name: Name Test
Email: test#email.com
Date of Arrival: 09/04/2015
Date of Departure: 24/04/2015
Message Body: This is a test comment.
I wouldn't mind having the subject field repopulated too with "booking request" or something.
Thanks!
It's quite easy. All you have to do is specify your Content Type (MIME). Change your form to:
<form class="form" id="form1" action="mailto:myemail#email.com" method="post" enctype="text/plain">
Define enctype in form tag:
<form class="form" id="form1" action="mailto:myemail#email.com" method="post" ENCTYPE="text/plain">
Unfortunately what you can do here in terms of formatting is very limited. I would suggest to have a look at this answer:
Mailto on submit button
So we're using an online service to handle webinars on our site.
I have full control of the HTML for the registration page but don't have control of the PHP file used in the registration. Currently, the registration form looks like this:
<form accept-charset="UTF-8" name="regform" id="regform" action="http://www.onlinemeetingnow.com/register/notify.php" class="infusion-form" method="POST">
<div class="infusion-field">
<label for="inf_field_FirstName">First Name *</label>
<input class="infusion-field-input-container" id="name" name="name" type="text" value="Your First Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-field">
<label for="inf_field_Email">Best Email *</label>
<input class="infusion-field-input-container" id="email" name="email" type="text" value="Your Best Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-submit">
<input type="submit" name="go" value="Sign Up for Webinar!" />
</div>
</form>
This submits the values from the form to "notify.php". notify.php apparently has code to force the iframe this code is hosted inside of, to redirect to another page. I don't want this to happen.
I want the form to submit, but then I want to send the user to my own ThankYou page. I'm thinking that the best way to do this is by "hijacking" the submission and sending them to the page I want.
I thought that maybe calling a custom javascript function using onsubmit might work. Here's what I have right now:
<form accept-charset="UTF-8" name="regform" id="regform" action="http://www.onlinemeetingnow.com/register/notify.php" class="infusion-form" method="POST" onsubmit="return doRedirect();">
<div class="infusion-field">
<label for="inf_field_FirstName">First Name *</label>
<input class="infusion-field-input-container" id="name" name="name" type="text" value="Your First Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-field">
<label for="inf_field_Email">Best Email *</label>
<input class="infusion-field-input-container" id="email" name="email" type="text" value="Your Best Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-submit">
<input type="submit" name="go" value="Sign Up for Webinar!" />
</div>
</form>
<script language="javascript" type="text/javascript">
function doRedirect()
{
window.location.replace("http://stackoverflow.com");
return true;
}
</script>
For some reason it's not working though. The iframe continues to redirect to the page I don't want, and the window itself isn't being redirected.
Am I doing this right or is there a better way of achieving this?
Thank you in advance for your help!
Jason
UPDATE: I've confirmed that the javascript is never executing. I added: window.alert("JAVASCRIPT EXECUTED"); and the pop-up never happens so this appears to be an issue with onSubmit rather than the javascript itself. Why won't the javascript execute in onSubmit? I tried changing it to onSubmit="JavaScript:doRedirect();" and that didn't work either.
This should do the trick:
<input type="submit" name="go" onclick="doRedirect();" value="Sign Up for Webinar!" />
If you are looking to completely remove the interaction with the php form, remove the action from the <form> tag
<form accept-charset="UTF-8" name="regform" id="regform" class="infusion-form" method="POST">
If you are willing to try AJAX:
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script>
jQuery(function($) {
$('#regform').submit( function(e){
$.ajax({
type: 'post',
data: $(this).serialize(),
url: $(this).attr("action")
})
.done(function (data){
$(location).attr('href', 'http://stackoverflow.com');
});
e.preventDefault();
});
});
</script>
<form accept-charset="UTF-8" name="regform" id="regform" action="http://www.onlinemeetingnow.com/register/notify.php" class="infusion-form" method="POST">
<div class="infusion-field">
<label for="inf_field_FirstName">First Name *</label>
<input class="infusion-field-input-container" id="name" name="name" type="text" value="Your First Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-field">
<label for="inf_field_Email">Best Email *</label>
<input class="infusion-field-input-container" id="email" name="email" type="text" value="Your Best Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-submit">
<input type="submit" name="go" value="Sign Up for Webinar!" />
</div>
</form>
I'm new to mobile development and I am trying to pass information from a form and I want to display it on another page. I have tried passing the info using cookies but with no success..
Here is my code for the form:
function submit_jobs_post(){
$.cookie('job_title', $('#job_title').val());
$.cookie('job_des', $('#job_des').val());
$.cookie('company_name', $('#company_name').val());
$.cookie('company_address', $('#company_address').val());
$.cookie('company_phone', $('#company_phone').val());
$.cookie('company_email', $('#company_email').val());
}
<form method="post" action="jobs_page.html" id="post_ads">
<label for="job_title">Job Title:</label>
<input type="text" name="job_title" id="job_title">
<label for="job_des">Job Description:</label>
<textarea name="job_des" id="job_des"></textarea>
<label for="company_name">Company Name:</label>
<input type="text" name="company_name" id="company_name">
<label for="company_address">Address:</label>
<input type="text" name="company_address" id="company_address">
<label for="company_phone">Phone:</label>
<input type="text" name="company_phone" id="company_phone">
<label for="company_email">Email:</label>
<input type="email" name="company_email" id="company_email" placeholder="Your email..">
<input type="submit" data-inline="true" value="Post Job" onClick='submit_jobs_post()'>
</form>
And here is my code for the page to receive the information. When I submit the form the data does not appear on this page.
window.onload = function()
{
$('#job_title_got').val($.cookie('job_title'));
$('#job_des_got').val($.cookie('job_des'));
$('#company_name_got').val($.cookie('company_name'));
$('#company_address_got').val($.cookie('company_address'));
$('#company_phone_got').val($.cookie('company_phone'));
$('#company_email_got').val($.cookie('company_email'));
};
<input type="text" name="job_title_got" id="job_title_got">
<textarea name="job_des_got" id="job_des_got"></textarea>
<input type="text" name="company_name_got" id="company_name_got">
<input type="text" name="company_address_got" id="company_address_got">
<input type="text" name="company_phone_got" id="company_phone_got">
<input type="email" name="company_email_got" id="company_email_got" >
Any help would be great, thanks in advance...