This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Multiple submit buttons in an HTML form
I have web form with multiple submit buttons. To determine which button was pressed, each has a different name, like so:
<input type="submit" name="foo" value="Foo Foo">
On the form there are also normal links that act as submit buttons, like so:
<a href="" onclick="parentNode.submit();return false;">
Bar
</a>
How do I also distinguish between the links being used as submit buttons?
I am not sure if this is relevant:
Here is the start of the form
<form action="foobar" method="post" enctype="multipart/form-data">
I am using Flask (a micro-framework based on Werkzeug) which uses Python (2.6 in this case).
My first question would be to ask if you need that many distinct ways to submit the same form? This sounds like your design should be changed up to make it more simplistic for the user, which will in turn solve your issue.
If you absolutely HAVE to have all the different submit buttons/links and need to know which one was pressed, use something like:
<input type="hidden" id="submitClicked" />
<input type="submit" onclick="javascript:document.getElementById('submitClicked').value='linkName';return true;" id="linkName">Submit</input>
NOTE: I didn't test this code, it was just off the top of my head, and thus some modification may be needed.
You can create a hidden input called submitSource, and set the value of that as you wish from the link or button onclick event handlers. Then you can check that value server-side.
Another solution you should consider: Use <ìnput type="submit"> for "submit links" just like the normal submit buttons and use CSS to style them to look like links.
This has the two huge advantages that it will (a) work with out any extra code that could potentiality break and will (b) work on every single browser on this world.
RedFilter's answer is certainly a solid way to go, but here's another option for you:
I normally use one name for all my submit buttons ("command" or similar), since of course only one of them is ever sent. Then my server-side code just looks at the value of that field to figure out what to do.
Your submit links could append a "command" parameter to the form's action, e.g.:
<a href="" onclick="parentNode.action += "?command=bar"; parentNode.submit(); return false;">
Even if you don't want to use just one name, the concept still holds, e.g.:
<a href="" onclick="parentNode.action += "?bar=bar+bar"; parentNode.submit(); return false;">
Of course, if you do either of the above and your form uses POST rather than GET (as most forms do), then whether you get the parameter value from the same source on the server will depend on what server-side mechanism you're using. For instance, Java's ServletRequest#getParameter method doesn't care, it looks in both the GET and POST data, whereas with some other technologies more of a distinction is drawn. Not a problem, you just have to be sure you're getting from the right place.
I would recommend instead of using onclick="parentNode.submit();return false;" that you create a js function that all links call to perform the submit. Then you could use a hidden field or get variable or whatever to transfer the link's id.
function submitMe(linkID)
{
document.getElementById("hfWhichButtonSubmittedMe").value = linkID;
document.getElementById(linkID).parentNode.submit();
return false;
}
...
blah blah
Related
I'm relatively new to programming, but understand the basics of HTML, CSS, and Javascript (including jQuery). Due to my greenness, I'd appreciate it if answers contained both a simple solution and a reason as to why the solution works. Thanks!
So I've got a form, with a text input and a submit button:
<form>
<input type="text">
<button type="submit">Submit</button>
</form>
When the user types data into the text field and clicks submit, how do I gain access to this data? If a user inputs their name, how do I grab that information? I don't intend to store it or write it anywhere, just to hold onto it as a variable in javascript, which I'll assign to a jQuery cookie.
So how do I access the data that the user has submitted, preferably using only Javascript (with jQuery)? Thanks for the help!
You access the data on the server side (in PHP via $_POST['username'] for example). The form sends data to your sever for any named input, so you would probably have to change the input to:
<input type=text name=username>
If you want to access it on the client side (with JavaScript), you can do that too, but you have to prevent the form from submitting:
$("form").on('submit', function (e) {
$.cookie('username', $(this).find('[name=username]').val());
//stop form from submitting
e.preventDefault();
});
say you had an html input tag such as:
<input id="textfield" type="text">
using javascript, you can store the value of that field in a variable like this:
var inputvalue = $('#textfield').val();
of course, you'll need something to run the script.
the reason this works is that the the textfield is an object. you might think of it as a tree trunk with different branches coming out. one of these "branches" is the value contained inside of it. since you know jquery, you know that $('#textfield') gets the element by a selector. the period says we're getting one of the branches, and "value" says we want the branch that tells what's in the textfield.
hope this helps.
There is a commandButton on my jsf page, and when user clicks on it, I am showing an ice:panelConfirmation to confirm before sending data to actionListern of that commandButton.
Now, I want to disable this button when user selects cancel on my ice:panelConfirmation.
I think I have to do something to call a JavaScript function when user selects cancel.
How can I do that?
Here is a sample of how this taglib works : ICEfaces Showcase. But the generated code is not really nice.
<input class="iceCmdBtn" id="j_idt3344:j_idt3347" name="j_idt3344:j_idt3347" onblur="setFocus('');" onclick="new Ice.PanelConfirmation(this,event,'j_idt3344:genConfirm',true,false,false,'/xmlhttp/blank',function(event){iceSubmit(form,this,event);return false;});return false;" onfocus="setFocus(this.id);" type="submit" value="Generate a Random Number">
It seems to be hard to handle event on these generated components, because of generated ids. I will recommend you to use Jquery-ui. It is very easy to use and very powerfull.
It seems bit tricky, or some times it depends on other requirements/necessity.
at last I found ace:confirmationDialog where I could use action listeners on both 'accept' and 'reject' button. :)
A submit button allows to send it's name and value attributes along with the rest of request, when it is clicked, allowing to remember which one of submit buttons was used to send the form data. However, the value sent must be the same text that is displayed on the button. Is there any way for a submit button to send an arbitrary value instead of button text, preferably the way that does not rely on user having JavaScript enabled? Also, is the answer to this question somehow different for XHTML and HTML5?
Use a button instead of an input:
<button id="butter" type="submit" value="go">Let's do it</button>
Example: http://jsfiddle.net/duySv/
That way the label and value are separate.
https://developer.mozilla.org/en/HTML/Element/button
Try using a button element.
<form method="post">
<button name="abutton" value="abc">foo</button>
</form>
http://jsfiddle.net/54DfJ/
I have a textbox somewhat like the main google search textbox. When you start typing, the javascript triggers a php script that offers suggestions that you can click on . That part works fine. However, I also want the user to be able to enter text and then just submit it--analagous to rejecting Google's hints and typin in your own search term. Right now, I am trying to do this in html and it is not working. Here is my code:
<form action="mail.php" method="post"><input type="text" name="maddress" size="30" onkeyup="showResult(this.value)"><input type="submit" name="submit" value="Email"></form>
Basically, the javascript within the onkeyup works fine. However, the form is not posting the value in the textbox" to the php script. Perhaps I have a typo somewhat but I can't find it. or maybe the onkeyup is preventing the form from posting...
Would appreciate any suggestions.
showResult() should explicitly return true (or in any case, something non-falsy). Returning false (or a falsy value) from an event handler prevents the default action, in this case, posting the form.
I dont know if this is what you're looking for but if you use the concept of this:
<script type="text/javascript">
function insertText(val,e){
document.getElementById(e).innerHTML+=val;
}
</script>
<textarea id="textIns"></textarea><br />
Insert 'Hello'<br />Insert 'GoodBye'
You can change the 'hello' and 'goodbye' with vars from your php script or where ever you get the items from and it should insert it and allow you to post it.
So just insert this into your function and then it should work. I tested it by adding the textarea in the code to a form and echoing it int he php and i got exactly what was added by the javascript... hope it works. Sorry if it wasn't exactly what you were looking for. The question wasn't to easy to understand because I couldn't see the rest of your source.
i cannot seem to find the answer to this. i uploaded code to pastebin (so wouldnt clutter up the post):
http://pastebin.com/BhnNTnJM
but the action only changes for the delete form (id=form-horse-delete) and not the other 2 forms located on the page. i am at my wits end trying to figure out why it doesn't work for the 2 forms, yet will work for the 1 form.
in IE, if i try and change the action of the 2 forms, it gives a javascript error. but if i take out the change, it works fine with no javascript error.
You have an input field called action in the form-horse-update and form-horse-add forms. e.g.
<input type="hidden" name="action" value="add" />
action is kind of a reserved word, as having an input field with that name changes the behaviour of the form. Normally in JavaScript (let alone jQuery) a reference to something like:
document.myform.action
refers to the action attribute of the form. The minute you add an input field called action then instead the above would refer to the input element called action and there is no longer a way to access the form's action attribute.
The best solution is to rename your action input fields to something else (but probably best not to rename it to submit! ;) )