I'm working on the ASP.NET MVC4 Mobile Application.
Problem is that background code behaves different when application is tested on mobile based web browsers and windows or mac based web browsers. Here are the details:
I have 4 buttons:
<input type="submit" name="actionButton" value="START" id="a1" />
<input type="submit" name="actionButton" value="BACK" id="a2" />
<input type="submit" name="actionButton" value="NEXT" id="a3" />
<input type="submit" name="actionButton" value="FINISH" id="a4" />
And in my controller i have this:
[HttpPost]
public ActionResult Index(SurveyModel model, string actionButton)
When i test this on the windows or mac based browsers it works fine. START, BACK, NEXT, FINISH values are passed to the actionButton parameter when FORM is submitted and i can handle them without any problems.
When i test this on the iPhone, and submit the form by clicking on the one of the buttons above, sometimes the actionButton parameter is empty. Anyone had a same experience?
Related
I am using a simple form that was taken from one of the Netlify related docs:
<form name="contact" action="/" method="post" data-netlify="true">
<div className="field">
<label htmlFor="name">Name</label>
<input type="text" name="name" id="name" value="dave"/>
</div>
<div className="field">
<label htmlFor="email">Email</label>
<input type="text" name="email" id="email" value="email#email.com" />
</div>
<div className="field">
<label htmlFor="message">Message</label>
<textarea name="message" id="message" rows="6"></textarea>
</div>
<input type="submit" value="Send Message" className="" />
</form>
In using gatsby develop and working with/submitting the form, things seem to work fine. I get no errors and get redirected to the home page as expected.
After deploying the site with Netlify and trying to submit the form, I get the following page error:
In my Netlify backend, the form appears in the console but I cannot/do not receive submissions.
I am using a barebones gatsby-config.js, only incorporating gatsby-source-wordpress and gatsby-plugin-google-analytics.
I also tried adding /no-cache=1 to form action.
Can anybody advise?
It might also be worth noting that I have coded my form as a component and am importing it into my footer as such. In that way, it may be imported multiple times on different pages as mentioned in point 3 of this StackOverflow answer.
Thanks.
I learned that because I'm using Gatsbyjs, and Gatsby + Netlify = javascript forms, I needed to add another input type="hidden" to my form:
<form name="my-form" ... >
<input type="hidden" name="form-name" value="my-form" />
The documentation for this wasn't immediately clear but below are some links that address this:
Here's a link to an article that pointed me to the answer: How to
Integrate Netlify’s Form Handling in a React App
Here's another one if you're building in Vue: How to Integrate
Netlify Forms in a Vue App
And all about Netlify Forms
If you are using any redirect method then you have to add _redirects file in your root folder and add paths to it so that redirect can work.
It's may be confusing but you can visit this link for more help.
I'm new to the Ionic framework, and I'm using Ionic 3.
Even though I use a form in my app, I'm still getting this warning in the browser:
[DOM] Password field is not contained in a form:
Why is that, and how can I fix it?
What is it?*
Chromium project (mostly Google Chrome) wants to change the world and make all passwords, as well as all form data autosaved and autofilled by default. The people behind this decision claim that will make the web safer†. While Firefox also promotes autosaved and autofilled form data, Chrome goes further admonishing web developers to comply with form element scoping that's more convenient for the browser.
At the same time, Google Chrome uses heuristics to determine what a "form" is on the web page and doesn't actually need individual form elements to be wrapped in a <form> element.
Additionally, Google Chrome treats all web pages, all forms and all form fields as if they are filled by the end user, where password is user's own password. A use-case where e.g. company administrator fills in new joiner's initial password is not supported.
The shortened URL in the form takes you to Create Amazing Password Forms page the the Chromium projects. Today the text there is very patronising, thus I'll omit the link.
†I neither claim to agree with Chrome/Chromium, nor claim that Google is in the position to profit from autofill via lock-in or access to user data; that's out of scope.
How can I fix it?
Simple: ignore it.
It's only a notice in developer tools in one of the major browsers.
Solution 1:
I think you are using Chrome browser. If you will try on Mozilla, it will not give the error. Please refer to this link for more details:
https://github.com/aws-amplify/amplify-js/issues/165
Here is the example:
<div className="myform" onSubmit={this.validateLogin()}>
<div className="myformgroup">
<label>Email</label>
<input type="text" placeholder="Email" id="email"></input>
</div>
<div className="myformgroup">
<label>Password</label>
<input type="password" placeholder="Enter the Password" id="mypassword" value=""/>
</div>
<div className="myformgroup">
<button type="submit" id="loginButton">Login</button>
</div>
</div>
Is returning the password field is not contained in a form.
Solution 1:
After changing the master div tag to a form as I have in the following:
<form className="myform" onSubmit={this.validateLogin()}>
<div className="myformgroup">
<label>Email</label>
<input type="text" placeholder="Email" id="email"></input>
</div>
<div className="myformgroup">
<label>Password</label>
<input type="password" placeholder="Enter the Password" id="mypassword" value=""/>
</div>
<div className="myformgroup">
<button type="submit" id="loginButton">Login</button>
</div>
</form>
it will not return the warning.
Solution 2:
Install aws-amplify in your project directory as explained in https://github.com/aws-amplify/amplify-js.
Welcome to episode 32,342,343 of "Why does Internet Explorer Suck So Much?"...
I've seen lots of reports that IE9 does a crappy job uploading files. Apparently it has lots of caveats about when it will or won't work (If someone has a definitive list I'd love to see it). However, most of the problems/solutions I see have found are related to javascript, usually the jQuery form plugin or something similar.
My form is not submitted via AJAX and the the file input field is not hidden or obscured with css. Yet, I get several support tickets per day from users on IE9 trying to submit the form and "nothing happens" (=the form submits. No errors, but the file is not uploaded.) I haven't gotten a single complaint with a different browser, and IE8 even seems to work (as well as it ever does).
Here's the top of my form. Am I missing something?
<form action="http://mysite.dev/account-settings/?open=resume" method="post" class="wpjb-form" enctype="multipart/form-data">
<input type="hidden" name="resume_form" value="resume_form" />
<fieldset class="wpjb-fieldset-default">
<input id="firstname" name="firstname" type="hidden" class="regular-text " value="John" />
<input id="lastname" name="lastname" type="hidden" class="regular-text " value="Henry" />
<input id="email" name="email" type="hidden" class="regular-text " value="john.henry#johnhenry.com" />
<div class="wpjb-element-input-checkbox wpjb-element-name-is_active">
<label class="wpjb-label">Show resume? </label>
<div class="wpjb-field">
<label for="is_active_1"><input type="checkbox" class="" name="is_active" id="is_active_1" value="1" checked="checked" /> Yes <small style="display:inline;">(Uncheck to hide your resume)</small></label>
</div>
</div>
<div class="wpjb-element-input-select-one wpjb-element-name-file">
<label class="wpjb-label">Upload a <i>new</i> resume file</label>
<div class="wpjb-field">
<input style="line-height:1em;" id="file" name="file" type="file" class="regular-text " />
<small class="wpjb-hint">Accepted file types: doc, docx, odf, pdf, rtf</small>
</div>
</div>
</fieldset>
...
It goes on like this with a couple more <fieldset>s then ends like this:
....
<p class="submit">
<input type="submit" name="Submit" id="wpjb_submit" value="Save Changes" />
</p>
</form>
Update
I'm happy for everyone who has never experienced this problem but it's not just me:
http://answers.microsoft.com/en-us/ie/forum/ie9-windows_vista/cannot-upload-files-using-internet-explorer-9/5724d921-ae71-e011-8dfc-68b599b31bf5
Update2
I'm seeing a lot of suggestions to add a meta tag to force the user agent to IE8...
<meta http-equiv="X-UA-Compatible" content="IE=8" />
I don't want to do this because although I do support IE8, many of the elements on my site render differently in IE8 vs. IE9. This would create a rather sloppy user experience as any IE users would experience I temporary "time warp" back to IE8 on that specific page.
I was able to fix this nightmare of a problem by wrapping a jQuery form submit in a setTimeout:
$('#complete_profile input[type="submit"]').click(function(){
setTimeout(function() {
$('#complete_profile form').submit();
}, 0);
});
This may cause duplicate submission when the form DOES submit, however, so be careful.
As Graham does, I think that this might more be a server issue - also I have never had issues with fileuploads in IE9 (or newer) - I guess you don't want to post the code of the PHP Script that handles the upload?
if any data is not being sent, You could check the post data by your hidden input on your server side script. For example if you're using php it would be something like
<? if($_POST['resume_form']=='resume_form'){
//Do something
} ?>
Or you could also use meta compatible tags for IE to render the page like IE8
<meta http-equiv="X-UA-Compatible" content="IE=8" />
I suggest setting the X-UA-Compatible meta tag value and seeing whether that makes any difference.
See this question for possible values: What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?
It may also be that the page is triggering a non-standards mode in IE9. I suggest opening the page in IE9, opening the developer tools, and seeing which browser/document modes are selected. That may give you a clue. Note that the "enctype" form attribute was not supported prior to IE8, so if the browser is using an older doc mode, that attribute is not being recognized.
OK I'd rather leave a comment not an answer but I don't have the points for that yet!
Are the users in quirks mode? Most IE users are unaware of the quirks mode and may have accidentally clicked it when trying to refresh the page (instead of pressing F5). If it is intermittent this could be the reason why.
following on from above.. On the server side how are you checking for empty fields? I'm more on the lines of JS here where you often look for "", null and undefined I'm just thinking that perhaps the quirks mode is sending some fuzzy data that your server side error checking is missing because you aren't looking for it and hence reports all is OK.
This is a really strange issue that I cannot seem to solve. On a WordPress site, I have several forms (login, registration, and other) outputted on a site via short codes. When the forms are submitted, their data is processed via an "init" hook that listens for the $_POST data.
Note, the site is running WordPress, but I have deemed this to not be a WordPress issue, which is why I'm posting here.
When the forms are submitted in IE 9, all fields are cleared of the values when clicking submit. For example, let's say there is an input field with a name of "username", and the field's value is set to "johndoe"; when submitting the form through any browser besides IE 9 (include 7 and 8), the data comes in like this:
$_POST['username'] = 'johndoe'
Exactly as expected.
However, when the form is submitted with IE9, it comes out like this:
$_POST['username'] = ''
As far as I can tell, it happens with every form on the site.
The custom login form I've built, for example, looks like this:
<form id="re_login_form" class="re_login_form" action="" method="post">
<fieldset>
<label for="re_user_Login"><?php _e('Username', 're'); ?></label>
<input name="re_user_login" id="re_user_login" class="required" type="text" title="<?php _e('Username', 're'); ?>"/>
</fieldset>
<fieldset>
<label for="re_user_pass"><?php _e('Password', 're'); ?></label>
<input name="re_user_pass" id="re_user_pass" class="password required" type="password"/>
</fieldset>
<fieldset class="form-action">
<input type="hidden" name="refalf_redirect" value="<?php echo $redirect; ?>"/>
<input type="hidden" name="re_login_nonce" value="<?php echo wp_create_nonce('re-login-nonce'); ?>"/>
<input id="re_login_submit" type="submit" class="button re_submit" value="<?php _e('Log In', 're'); ?>"/>
<p class="forgot-password"><?php _e('Lost Password?', 're'); ?></p>
</fieldset>
</form>
One of the things that is extra interesting is that the fields are visibly cleared of their values when clicking submit in IE9. It's also as though the submit button is triggering something in IE9 that clears the fields.
Anyone have any ideas?
I was able to solve this by giving each input field a placeholder attribute. I still don't know why that made it work, but when the placeholder was present, everything worked fine.
You're not alone..
See for instance http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/afda3def-b0be-431d-a9fc-c40dd7cb2fa4
Easiest test is at http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_form_mail
I just experienced a bit similar case: IE9 posted back a form only partially; some values were cleared upon submit. I tested submitting form with IE9, IE10, IE11, Chrome36, FF31 and all others worked fine except IE9.
So I checked the markup and there was another form nested inside the main form page which actually did not have any input fields or submit buttons it had been created by some automated template/editor software.
After I removed those extra form nodes, IE9 started to submit all fields. I worked with ASP.NET 4.5 MVC4.
I got a weird error I hope you guys can help with.
Sometimes when the user tries to submit a form the file upload field image just clears and nothing happens. I doesn't seems like the form get submitted at all.
Then the day after everything works fine. The error occurs on random days/times.
First I thought it was a problem with the users computer but this happens on two different computers the customer has. One of the computers has Windows 7 professional & Internet Explorer 9. I don't have the setup on the other one.
I have tried with Google Chrome, Firefox 6.0.2, Internet Explorer 9, 8 (browser compatibility mode), 7 (browser compatibility mode) on windows 7 home with no problems at all on my computer.
Here is the form:
<form action="/user/image" method="post" accept-charset="utf-8" class="form_default" enctype="multipart/form-data">
<fieldset>
<ol>
<li>
<button type="submit" name="save" value="submit" class="button">Save</button>
</li>
<li>
<label for="image">Profile image</label><input type="file" id="image" name="image" />
</li>
<li>
<button type="submit" name="save" value="submit" class="button">Save</button>
</li>
</ol>
</fieldset>
</form>
There should be only 1 submit button per form.
So keep 1 save button as type="submit" ,change another to type="button"
Try using input instead of button, good luck!
ex
<input type="submit" name="mysubmit" value="Click!" />
you should use:
<input type="button" onclick="customFunction" />
write what you want to do in customFunction(javascript)
There is no clever workarounds for this, IE9 does not allow a file to be tampered with via JavaScript probably for security reasons.
First of all, pls let us see your php coding to send this form....
Usually form submission errors such as this have server-side coding errors..
Maybe you should check out your PHP coding and see what happens in your
$_POST['save']
area....
Hope this helps... :)