I think I have found an interesting problem (at least to me). I have a form that uses a click on a div inside the form to submit. I have used "document.forms.form.submit()" to make the div clickable to submit as suggested here this.form.submit() not working after clicking div element in form (thanks David Hedlund!)
However the form was working fine in chrome, ff. But for some unknown reason, running the form in localhost on chrome is not working now. ff is working fine. What makes the problem interesting is when I uploaded the form to a web-server it works in chrome! Any Idea why this is happening in local machine? I am using Xampp.
Here is the form-
<form name="form" action="login_process.php" method="POST">
<div>
Username: <input style="width:100px;" name="login_client[]" type="text" />
Password: <input style="width:100px;" name="login_client[]" type="password" />
</div>
<div align="right" class="whitearial12" style="position:absolute; font-size:10px; width:360px; height:17px; right:110px; top:35px;">
Forgotten your password, or need to register?
</div>
<!-- this is the div !-->
<div onClick="document.forms.form.submit()" align="center" class="whitearial12" style="cursor: pointer; position:absolute; padding-top:3px; padding-bottom:-3px; width:80px; height:17px; right:20px; top:10px; background-image: url(Images/button_blank.png); background-repeat:no-repeat">
Log In
</div>
</form>
Update: Let me add what I noticed further. This form is included in index.php file from another php file named header.php. I have tried running only the header.php. The form works alright in that case in chrome. But including it in index.php does not work.
I would suggest including jQuery and reworking to resemble this
<form id="MyForm" action="login_process.php" method="post">
<span onclick="javascript:$('#MyForm').submit();">Magical ponies await</span>
</form>
Using jquery can help with cross-browser issues a lot, but if you can't do that, how about
<form id="XX" action="login_process.php" method="post">
<span onclick="javascript:document.getElementById('XX').submit();">AVAST</span>
</form>
Related
We implemented a simple nuxt app with a basic form and deployed it to netlify.
When pressing the "Submit" Button of the Form, we receive a 404.
Here you can find the link to the deployed netlify app:
EDIT -> Removed Link
After looking through the troubleshoot guide, they listed that the added "netlify" or "data-netlify="true" attributes should not be visible if netlify recognized your form, but they are.
Plus the form can't be found in the "form" configuration tab of the netlify backend.
Nuxt config:
SPA
Tailwind
We tried to add the necessary attributes for netlify:
netlify or
data-netlify="true" & netlify-honeypot="bot-field"
We also added a "pre-render" library called prerender-spa-plugin.
Here you can find the contact.vue page content.
Simple form with "name" attributes set according to netlify documentation.
<template>
<div>
<form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field">
<p class="hidden">
<label
>Don’t fill this out if you're human: <input name="bot-field"
/></label>
</p>
<p>
<label
>Name
<input
type="text"
name="name"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white;"
/></label>
</p>
<p>
<label
>Email
<input
type="email"
name="email"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white;"
/></label>
</p>
<p>
<button
type="submit"
name="submit"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
>
Send
</button>
</p>
</form>
</div>
</template>
<script>
export default {};
</script>
<style>
.hidden {
display: none;
}
</style>
It would be great if we can manage to fix this, so that netlify finally recognizes our form.
Netlify comes with built-in form handling. Our build bots do it by parsing your HTML files directly at deploy time, so there’s no need for you to make an API call or include extra JavaScript on your site.
The form is required to be in the rendered files at deploy time. The problem with SPA mode is that none of your pages are actually rendered as HTML. You can check this by right clicking the page, and clicking "View Page Source". You won't be able to find the form.
Netlify addresses this problem here in their docs.
They have a specific post for fixing this for a Vue app here
A little more digging on the the issue and we find a Nuxt solution here:
Place the following in static/form-dummy/index.html:
<form name="MYFORM" action="/form/success" netlify>
<!-- form controls here -->
</form>
Place the following in pages/form/index.vue (Or whenever you've named your Vue file)
<form name="MYFORM" action="/form/success" method="post">
<input type="hidden" name="form-name" value="MYFORM" />
<!-- form controls here -->
</form>
From the post:
You just need to make sure you add that hidden in the Vue component so that Netlify recognises the form submission as associated with the form called MYFORM. I think you also need to ensure all the inputs you want to receive data for are on both forms.
I have a client that uses hubspot for their tracking and thank you pages. I have created a landing page using bootstrap and within the page I have two forms. Both forms are the same and I want them to go to the same thank you page. The client has provided me with an embedd code but I am not sure how I can bridge the gap. Below I have listed my form code and the embed code. I basically want the user fields to be submitted into hubspot and for it to trigger the thank you page but I am not entirely sure this is possible. Any help would be appreciated.
<div class="col-lg-12 contact-form">
<div class="container">
<div class="formContainer">
<form role="form">
<div class="form-group">
<div class="col-sm-6 left-field">
<input type="text" class="bottom-form" id="firstname" placeholder="First Name">
</div>
<div class="col-sm-6 right-field">
<input type="text" class="bottom-form right-field" id="lastname" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" class="bottom-form email" id="email" placeholder="email">
</div>
<div class="col-sm-12">
<button type="submit" class="submit bottom-submit">Download Now</button>
</div>
</div>
</form>
</div>
</div>
</div>
Here is the hubspot embedd code.
<!--[if lte IE 8]>
hbspt.forms.create({
css: '',
portalId: '2030148',
formId: 'd9005302-a859-4a39-9d47-74d8a1d25fb0'
});
Are you just looking to set the redirect with the embed code? If so, here is the addition to the embed code:
portalId: 'xxxxxx',
redirectUrl: 'url goes here',
formId: 'd9005302-a859-4a39-9d47-74d8a1d25fb0'
I actually figured out a proper solution without having to do any redirects or hairy coding.
First I setup a local host, which was my biggest issue, this helps with getting the actual hubspot form to show within my page (using a local show the embedd code does not appear, although obvious to others, it took me a sec). Oh, I should mention that the code is not necessary.
Once you have it showing you basically inspect the element and then add to the classes that hubspot spits out get it to look that way you want too.
I'm using ASP.NET web forms and i need to post data to an iframe, the problem is that in web forms I have the main form tag(form1), so i need another form tag(form2), to post data to the iframe that is in the main form1.
Basically i have this:
<form method="post" id="form2" action="http://localhost:58903/WebForm1.aspx" target="webApp">
<input type="hidden" name="ValidationUserName" value="david" />
<input type="hidden" name="ValidationTokenId" value="13123132132" />
<button type="submit">Send info to inner iframe</button>
</form>
<form id="form1" runat="server">
<iframe id="webApp" name="webApp" src="http://localhost:58903/WebForm1.aspx" style="width: 800px; height: 800px;"></iframe>
</form>
With this approach in open a new tab, if i put the iframe outside it works ok, but if i do this the layout is changed and i don't want this.
Is this possible?
If all the forms are in the same domain you should not work with iframes.
What exactly are you trying to get here? didn't realize completely
Done it, it was missing the "name" attribute in the <form> tags.
On my Wordpress website, I have an input field where the user types their email address and then clicks "Submit" to submit their email to my google spreadsheet (using a google form on Google Drive).
I also have a button that opens a popup when the button is clicked (I'm using the SimpModal plugin for Wordpress).
Is there a way to integrate both functions, so that I will only have 1 button that accomplishes both results? (i.e. When the user fills out their email address and then clicks the submit button, it will submit their email address to the google form, and also open the popup window?)
Here's my code:
<!--This gets rid of the google confirmation page-->
<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none; width:0px; height:0px;" onload="if(submitted){window.location='#';}"></iframe>
<form action="https://docs.google.com/forms/d/XXXXX/formResponse" method="POST" id="ss-form" onsubmit="" target="hidden_iframe">
<input type="text" name="entry.2005577686" value="" id="entry_2005577686">
<input type="submit" name="submit" value="Submit" >
<div id="button-to-open-popup"><a href="#">
<img src="/landing-pg-button-black.png" alt="" /></a>
</div>
</form>
Thanks in advance!!!
Really simple! If you don't have jQuery, please import it somewhere in your code:
<script src="http://code.jquery.com/jquery-latest.js"></script>
And then change the onsubmit in the form tag...
<form ... onsubmit="$('#button-to-open-popup').click();return true;" ...>
Tada!
I'm working with a Classic ASP site and having a bit of a conundrum... my form works perfectly in IE, but in Chrome, Opera, and Firefox I can't click anything within the form - I can't type or even get a cursor to show up in the input fields, the link isn't clickable and neither is the button. The mouse pointer doesn't even change on mouseover of any of those elements.
The doctype is HTML 4.01 Strict, and I have validated it with the W3 validator. The links in the page's header and footer are clickable as normal.
<form name="esi" method="post" action="employeehome.asp">
<p>
<label for="empid" class="achtung">Employee ID:</label><br>
<input type="text" name="empid" size="20" maxlength="30">
</p>
<p>
<label for="emppw" class="achtung">Password:</label><br>
<input type="password" name="emppw" size="20" maxlength="20"><br>
Password Recovery
</p>
<p>
<input type="hidden" name="empstatus" value="1">
</p>
<p class="submitbuttonspace">
<input type="submit" value="Sign In">
</p>
</form>
There is nothing wrong with this form example. I just tested it on my server. No errors and nothing to disable anything.
You must have something else crashing your browser.