We Keep Coding

Two ways to process jQuery submitted form

I have a form with button A and button B. It's sent by a jQuery function called clicking on one of the buttons. At the end of this long function which is checking prerequisites, the form is sent using this line:
$('#wlform').submit();
I want to adjust this code to send something to be able to distinguish which button was pressed. Something in JavaScript similar to <input type="submit" name="submitbutton1"/>

Provide us with some code?
I think you're talking about two buttons that both should have their own ID's. You could try and catch the ID attributes after you click them;
$(this).attr('id');
Or change 'id' into 'name' if you want to get that value.

I suppose you use a javascrit click event to execute your javascript functions.
In javascript, you can add a hidden input to your form :
$(...).click(function() {
... // Your code
var clicked_button = $(this);
$('#wlform').append($('<input type="hidden" name="clicked-button"/>').val(clicked_button.attr('id'));
$('#wlform').submit();
});
With that, the id of the clicked_button will be sent with the form.

Just give to the hidden input the value of the button id attribute. You could do something similar to this (before the submit statement):
$('input[type=hidden]').val($(this).attr('id'));
Where $(this) is the button clicked.

None of the answers worked, so I've put something together from these on my own. I've added a hidden input field, clicked-button as you suggested. Then when calling my precheck_submit function, I pass another parameter (c) for storing which has been clicked. In the precheck_submit function I added $('#clicked-button').val(c);. It works. Anyways, thanks for your efforts.

Always getting values from first form. What's wrong?

I have a webpage where there are several forms. It looks like .
When "Create" is clicked an ajax script checks the fields for illegal values in the first form, where the Create button belongs to. That's fine.
But when the "Save" button is clicked, it still checks fields from the first form, and not the form where the Save button belongs to.
My Ajax looks like this
$(document).ready(function(){
// $('form').submit(function() {
$('form').live('submit', function(){
var title = $('#title').val();
...
Is it here the problem could be? I have tried with the commented code, but that doesn't work either.
Any ideas where the problem could be?

$('#title').val(); means "Get the value of the one and only input that has the id title".
If you have violated the spec and have multiple elements with the same id, then browsers will generally recover from the error by returning the first such element.
You should probably change the id to something like: idOfForm_title (so that your <label> elements still work)
And then use: this.elements.title.value where title is the value of the name attribute (and this automatically resolves to the form on which the submit event fires).

I think you should give your forms a class, like class="create" for the first / create form and then class="edit" for the second / edit form.
Then you can amend your jQuery to look like
$(document).ready(function() {
// only work with the 'create' form
$('form.create').live('submit', function(e) {
e.preventDefault(); // stop the form's default action
// the rest of your code
});
// only work with the 'edit' form(s)
$('form.edit').live('submit', function(e) {
e.preventDefault(e); // stop the form's default action
// the rest of your code
});
});

How do you write strings to the middle of a web page?

I'm trying to have users enter info into a form (via radio buttons), manipulate the input data, and write resulting text onto the middle of a web page--beneath the radio buttoned form. So I have variables assigned to whenever a user selects a radio button, the onClick event calling a function something like:
function saveValue1(value) {
someVariable=value;<br>
}
And when users click a Submit button, a function works like it's supposed to, ultimately writing an output string. The problem is how to write the string value in the middle of the page. I have this [pseudo]code at the end of the function (pretend the string I want to write to the page is named aVariable):
document.getElementById('aPlace').innerHTML=aVariable;
And of course there's HTML in the displayed page like this:
<div id="aPlace"></div>
After a user pressed the form's Submit button the correct output variable is displayed very briefly, and then disappears. Why is this? And how should I be writing this code instead?
Thanks for helping a newbie, as always.

The form is probably submitted. put a "return false" at the end to stop it submitting the form

It seems that the browser is refreshing? How is the form data handled?
If the form is needed only to add the text to the page, I would add a button
<button onclick="saveValue1("+value+");")>
and avoid submitting the form.

How can I exclude HTML form radio button values from being submitted?

I need to submit just one input field value to a cgi script via a web form.
I've added a couple of extra form controls (a check box and radio buttons) which manipulate the input value depending on the states selected.
When the form is submitted, the extra form field values are submitted as well which breaks the cgi script (which I don't have access to). I removed the 'name' attribute from the check boxes so they are not submitted but cannot do this for the radio buttons as it breaks their grouping.
How can I prevent radio button values from being submitted?

You can add a disabled attribute to them in the submit handler, this will prevent them from being serialized, either by jQuery or a normal <form> submission. For example:
$("#myForm").submit(function() {
$(this).find(":radio, :checkbox").attr("disabled", true);
});
Or you can .serialize() only the elements you want, for example:
$.post("myPage.cgi", $("#myForm input[type=text]").serialize());

Make them "unsuccessful". There are several ways to achieve this:
http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2

It is also possible to have two different forms: one that has visible form elements and one that has a hidden input that represents the end result to be submitted. You can either attach onchange handlers to your visible form elements so that they call some JavaScript to update the invisible field, or you can run a function as part of the onsubmit handler to set the invisible value directly before it is submitted.
Here's a jsFiddle demonstrating the second approach (the onsubmit handler): http://jsfiddle.net/gtU4J/

Incuding "successful" buttons when calling form.submit()

I'm working on the Web GUI of an appliance-like product.
I have an HTML form that works fine: it shows a list of things with checkboxes, the user checks some of them and clicks the "remove" button which submits the form. The server gets the POST, removes the items, and refreshes the page. All fine.
There's a requirement to add an "are you sure?" confirmation to the form. If I add a call to
confirm("are you sure?");
as the onsubmit method in the FORM tag, or the onclick in the submit button tag, it works fine but uses the ugly browser-native confirm dialog.
Elsewhere in the product we have a nice custom CSS-styled confirm dialog I'd like to use, but it works like this: At the appropriate place, you put a call to
myConfirm("Confirm", "Are you sure", "Yes", "No", confirmCallback);
This puts up a clickmask, customizes a dialog, centers and displays it, and then returns FALSE and the form doesn't submit.
Later when the user decides, if they press "Yes", it calls the confirmCallback function. In the other, Ajax based pages of the product this gathers info, creates a postBody and uses Prototype's Ajax object to post it, and all is fine. (If "No", then the dialog and clickmask are removed and things continue.)
On this simpler page, with the pure HTML form, I have a confirmCallback function that looks like this:
var confirmCallback = function() {
document.myForm.submit();
}
and it fires OK, but when the form is submitted, the remove button has ALREADY been clicked, and the false returned by the custom confirm suppressed submission. Instead, this is considered a new submission, and the remove button was not actually clicked, so it is not considered "successful" in terms of W3.org's HTML 4 standard section 17.13.3. The server gets the data, no remove button, says "I got it but I dunno what you want me to do with it" and just does nothing but serve the next page.
If you're read this far, THANK YOU, and here is my actual question. How can I, in my confirmCallback javascript function, in a crossbrowser manner, cause the remove button to fire, become "successful" and submit along with the rest of the data?

Sounds like you're gonna need a hidden field to pretend to be the pressed button, and each button will require no name, but instead an onclick event to manipulate the value of the hidden field.
If the name of the buttons are all different, you might need to use DOM methods to add the hidden field because I don't think you can change the name of a field once it has been added to the DOM in all browsers.
If you require this solution to still work without JS, then you may need play around with the JS logic a little more (to do more modifications to your initial DOM tree) or modify the server code. You could even put the "Are you sure" behaviour into the response then...

Assuming that the remove button is the submit button for that form then probably the easiest solution is to give the form an id
<form id="submitForm"...
Then in your confirm call the form submit
document.getElementById("submitForm").submit()
I think that will do what you're asking but it seems like you were pretty much at that solution already so if you're asking something else let me know.

In your callback, remove the onclick handler for the button (causing the confirmation), then trigger a click on the button. This will cause the button click to submit the form and result in the button causing the submit to be posted back along with the form data.
var confirmCallback = function() {
$('submitButton').stopObserving('click');
$('submitButton').click();
}