Got an odd situation - when I change the "type" of my button from "button" to "image", it stops working. I have done this change 100 times on my site, and I've never come across this issue before.
The relevant code looks like this:
//working
<input type="button" value="Back" onClick="window.location='some/page.php'" />
//not working
<input type="image" src="/link/to/image.png" onClick="window.location='some/page.php'" />
I've tested it by using the first code and checking it transfers me to the desired page. Then I've simply changed the type over and replaced the "value" with the relevant "src". The button displays fine but when clicked, I simply land back on the page I was originally on.
What's really bugging me is that the second snippet of code is working absolutely fine across the rest of my site. It's just this page that it's not working on.
Really confused - anyone encountered this before or got any suggestions?
You need to return false from the event handler to prevent the default action as input type=image acts as a submit button.
You can use also use simple <img /> tag instead of <input />
You have probably put the image map in a form. When you click it you are submitting the form.
You should use a regular link instead. There is no need to use an image map or JavaScript here.
<a href="some/page.php">
<img src="/link/to/image.png" alt="appropriate alternative text goes here">
</a>
Related
The online HTML-form I want to fill out using MechanicalSoup has 2 submit buttons (so 1 form with 2 submit buttons). The first button (red in the picture "Toevoegen") is to upload a photo after choosing a file. The second button (not shown) submits the completed form. I have figured out how to address the different buttons using the form.choose_submit() function, so that's fine.
My question now is the following:
When I fill the form by hand, I noticed that after selecting the file and pressing the first (red) button, it takes some time (1-2 secs) for the file to upload. When I now fill out the form using mechanical soup, do I have to include this time (1-2 secs) for the photo to upload (for example using the time.sleep()) before I (make MechanicalSoup) fill out the rest of the form and submit it using the second submit button? Or will the form figure out that it has to upload the pic first and wait for that before executing the final submit order? So it's really a timing issue I have to coordinate the proper functioning of both buttons...
I hope this edit clarifies things a bit more.
Thanks for any suggestions!!
If it helps: this is what I found in the HTML form for the first submit button:
<div id="edit-submitted-file_add-ajax-wrapper">
<div class="form-item webform-component webform-component-file webform-component--file_add">
<label for="edit-submitted-file_add-upload">Add File</label>
<div class="form-managed-file">
<input type="file" id="edit-submitted-file_add-upload" name="files[submitted_file_add]" size="22" class="form-file" />
<input class="button form-submit" type="submit" id="edit-submitted-file_add-upload-button" name="submitted_file_add_upload_button" value="Toevoegen" />
<input type="hidden" name="submitted[file_add][fid]" value="0" />
</div>
</div>
</div>
When submitting a file, the file upload is part of the form submission. There's no point waiting before submitting, because this is not when the file upload happens. Unless the website is seriously broken, there's no point waiting after either, because the .sumbit() method call is blocking, i.e. it returns only after the form submission, hence the file upload, is completed.
However, it's hard to tell what you should do exactly in your case: it seems the first submission is done without reloading the page, hence using JavaScript. MechanicalSoup does not do JavaScript, so it may or may not work (in a perfect world, sites that work through JavaScript have a non-JavaScript fallback, but ...).
Probably the best for you is to try and see what works.
I need a simple html code so that a visitor to my website can type in a textfield what website they would like to visit next and click GO and they are taken there.
I can't seem to find how to do this anywhere. Can't even find any websites that have a similar code.
Here is a quick implementation that will set it based on the text field value. I would suggest putting in validation and much more.
function goToUrl(form){
window.location = form.url.value
}
<form onsubmit="goToUrl(this)">
<input type="text" id="url" />
<button type="submit">Go to URL</button>
</form>
I have a form with <input type="submit">. In Chrome submit doesn't do anything. On a Network tab in developer tools I see nothing. No errors in developer tools either. Meanwhile, if I do save a page and open a saved page, then after I press submit button, I see something appears in Network tab. This happens in Chrome and Firefox. This works as expected in IE.
Does anybody have a hindsight, what should I look at?
I don't need a direct answer, I only need to know, where should I look at. If someone posts a direction and that'll help me to solve my problem, I'll accept it as a correct answer.
Structure of a page looks like this:
html
head
body
div
div
form
form
form
form
form
input
input
table
table
tbody
tr..td..input type=submit
If you are not using any JavaScript for form validation then a simple layout for your form would look like this:
<form action="formHandler.php" method="post">
<input name="fname" id="fname" type="text" value="example" />
<input type="submit" value="submit" />
</form>
You need to ensure you have the submit button within the form element and an appropriate action attribute on the form element is present.
For a more direct answer, provide the code you are working with.
You may find the following of use: http://www.w3.org/TR/html401/interact/forms.html
Are you using HTML5? If so, check whether you have any <input type="hidden"> in your form with the property required. Remove that required property. Internet Explorer won't take this property, so it works but Chrome will.
I faced this problem today, and the issue was I was preventing event default action in document onclick:
document.onclick = function(e) {
e.preventDefault();
}
Document onclick usually is used for event delegation but it's wrong to prevent default for every event, you must do it only for required elements:
document.onclick = function(e) {
if (e.target instanceof HTMLAnchorElement) e.preventDefault();
}
Hello from the future.
For clarity, I just wanted to add (as this was pretty high up in google) - we can now use
<button type="submit">Upload Stuff</button>
And to reset a form
<button type="reset" value="Reset">Reset</button>
Check out button types
We can also attach buttons to submit forms like this:
<button type="submit" form="myform" value="Submit">Submit</button>
Check if you are using any sort of jquery/javascript validation on the page and try disabling it and see what happens. You can use your browser's developer tools to see if any javascript file with validate or validation is being loaded. You can also look for hidden form elements (ie. style set to display:none; or something like that) and make sure there isn't a hidden validation error on those that's not being rendered.
I ran into this on a friend's HTML code and in his case, he was missing quotes.
For example:
<form action="formHandler.php" name="yourForm" id="theForm" method="post">
<input type="text" name="fname" id="fname" style="width:90;font-size:10>
<input type="submit" value="submit"/>
</form>
In this example, a missing quote on the input text fname will simply render the submit button un-usable and the form will not submit.
Of course, this is a bad example because I should be using CSS in the first place ;) but anyways, check all your single and double quotes to see that they are closing properly.
Also, if you have any tags like center, move them out of the form.
<form action="formHandler.php" name="yourForm" id="theForm" method="post">
<center> <-- bad
As strange it may seems, it can have an impact.
You can't have a form element as a child (directly or indirectly) of another form element.
If the following does not return null then you need to remove the excess form elements:
document.querySelectorAll('form form');//Must return null to be valid.
check your form is outside the table
Short version:
How can I have my form's button label text differ from the value submitted to the server without using the <button> tag?
Long version:
I wanted to have the text that appeared in a button in a form to be different than the value submitted in the query string. So, I looked around, and came across this approach...
<button name="method" type="submit" value="repackage">Update Config</button>
...and that worked on IE9 on one of my laptops and I was happy. The user saw "Update Config" and the server received method=repackage in the query string.
Then I brought this app to work and ran it on a workstation, also with IE9. But something had gone wrong. The user still saw "Update Config", but the server now received method=Update%20Config in the query string.
So I investigated some more. I found that www.w3schools.com recommmended not using a <button> tag in a form. They say: "If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form" in this article. This seems to be what I am experiencing.
So I looked some more, and found lots of conflicting information about the right way to do this. For example here is a Stack Overflow post that asks exactly this question, but the accepted answer is to use the <button> tag. I can say from experience and research that this is not a reliable approach.
For newcomers: With some CSS this works like a charm as of September 2017:
<form>
<label style="padding:5px; cursor:pointer; border:solid 1px; border-color:#ccc">
<input style="display:none" type="submit" name="method" value="repackage">
<span>Update Config</span>
</label>
</form>
If there's no other way try this:
Use an image button, instead of button. An image button will work as ordinary submit button, but you create an image of the desired button text (no one can change your text then).
<input type="image" src="http://images.webestools.com/buttons.php?frm=2&btn_type=31&txt=Update+Config" name="method" value="repackage">
This works as well. Manipulate the appearance using the bootstrap button classes.
<label class="btn btn-primary">
<input class="d-none" type="submit" name="method" value="repackage">
Update Config
</label>
I came upon a revelation the other day. When attempting to create a submit button by using an image, I ran into a problem where the image was not displayed but the value text was. At the time, this is not what I wanted, but now, as I look back, I see some potential use for this.
If you need to send data to another page, but none of it requires user input, you can either send it in the link (or form) via GET or through a form via POST. The problem is that the former creates ugly URLs and the latter requires a submit button that looks out of place. Of course, I could come up with an image, but what if I just wanted selectable text.
So, I started playing around a bit and Firefox appears to render the following how I desire, as a clickable link that submits a form. All you have to do is remove the src attribute from the input type='image' tag:
<form action='some_page' method='post'>
<input type='hidden' name='email_address' value='test#test.com' />
<input type='image' value='E-mail User' />
</form>
Does this solution work on other browsers? What are the downsides to doing this (aside from the obvious fact that your link CSS isn't applied properly)?
There's no need to use an image input, why not just use a regular submit button and apply some heavy-handed styling to make it look like regular text?
<input type="submit" value="E-mail User" class="link">
<style>
input.link {
border: none;
background: none;
cursor: pointer;
/* etc */
}
</style>
I like a solution that uses an actual link (hidden) that gets exposed via javascript in conjunction with a button inside a noscript tag.
<form action="some_page" method="post">
<input type="hidden" name="email_address" value="test#test.com" />
E-mail User
<noscript>
<input type="submit" value="E-mail User" />
</noscript>
</form>
$('submit-link').click( function() {
$(this).closest('form').submit();
return false;
})
.show();
Using HTML 4.01 Strict it worked on FF3.5, but not on IE8 or Chrome. The link works, but there is no text just a blank spot for a missing image.
So, this would appear to be a bad idea, since it may only work on one browser. To me that is a pretty big downside, unless your only market is for Firefox browsers, then, go ahead, great idea. :)
As James Skidmore suggested, it is easy to do an onclick with javascript to submit it as a post.
I would suggest unobtrusive JS, so, if someone doesn't have JS on then it will work as a link, doing a GET submission, but if they have JS then it would change the behavior to be POST with no ugly url change.
Or, as was mentioned the background of the image can blend in with the form background.
You could instead submit the form dynamically via JS, or use a regular submit button with a transparent or white background.