We Keep Coding

getElementById changes not going through on form submit

Ok, so this is a continuation of my How to hide the default value of a form field? question. I've got a form where I sometimes need to change one of the values before submitting it to another website. I used getElementById to do this, and it seemed to have worked, but then when the submission actually goes through the change hasn't been made. Here's the code I used:
function changeAmount() {
document.getElementById("amount").value = 50;
form=document.getElementById('myform');
form.target='_blank';
form.action='http://www.example.com';
form.submit();
}
I also tried taking out the submission code and putting the website in the action for the original form tag. No dice.
So what's stopping the change from going through?
Thanks in advance!

The HTML (in the question you link to) doesn't have any element with the ID amount, it has an element with the ID Amount. Identifiers are case sensitive.
(You have another issue in that you actually have three elements with that ID and IDs must be unique in a document).

Loading HTML forms through php then using JQuery to submit forms

I have a dilema which I'm unsure how to approach right now. I know that JQuery needs to have a unique set of ID's to be called in the document ready function. I go through PHP and read my mysql table to print out these HTML forms and with each form is a button that will add a new item to this table.
The issue here is that I cannot have an idea of how many forms there will be so I would like to write the JQuery code so that it can dynamically read anytime that the button is clicked, but know which button was clicked so that the proper ID's can pass.
I've seen some examples but they have more to do with CSS styling, are there any ideas or thoughts as to how this problem could be remedied?

If you are writing out the forms in a for loop with php you can assign each submit button an id using the iterator, like submit_1, submit_2 etc and then you can have an on click handler in jquery using a selector contains, something like:
$(document).on('click', 'input[id*="submit_"]', function() {
//code goes here
alert( $(this).prop('id') );
});

Is it possible to show and hide sub form onclick in a Zend form

Just wondering whether is it possible to show and hide a subform within a zend form on either a radio check event or button onclick event. As I have a form with user field elements and now I want a sub form with password elements which will give the user the ability to optionally change their password. However I only want to show the password elements on request (ie: click a radio button 'Change Password' and the change password elements appear).
Is this possible with Zend\Form or would I need to use client side javascript to show and hide the elements?

It is possible but that kind of thing is client side so you need to use javascript in order to do it. Personnaly, I like to use jQuery for that kind of stuff, it makes it a lot easier. Here is an example on how you could do it.
class My_Form extends Zend_Form {
$field = $this->createElement('select', 'myselect');
$field->setLabel('Choose to display the form or not');
$field->setMultiOptions(array('1'='Display', '2'=>'Do not display'));
$this->addElement($field);
$field = $this->createElement('text', 'optionaltext');
$field->setLabel('This is an optional field');
$this->addElement($fiel);
}
Now, in your layout, you should include jQuery library:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
And finally, you should include another .js file (or simply embed the code in <script> tags on your page).
$(document).ready(function() {
$(function() {
//Function triggered when changing the value in the drop down
$('#myselect').change(function(event) {
if($('#myselect').val() == 1) {
//Show elements
$('#optionaltext').show();
//The following line shows/hides all the dd/dt wrappers as well
$('[id*=optionaltext]).show();
} else {
//Hide elements
$('#optionaltext').hide();
//The following line shows/hides all the dd/dt wrappers as well
$('[id*=optionaltext]).hide();
}
});
});
});
Now please keep in mind that I haven't tested the code and I just wrote that on top of my head before I actually finished my first coffee of the day so... it might have a few bugs. This being said, it should be a good start for what you want to do. Please just ask your questions here if there is something missing or if there is a bug you can't find. Hope this helps !

Possible to manipulate javascript generated elements?

I have a page dynamically generated with javascript and it contains several input fields and a button. When I click the button, nothing happens...Is it because it is a javascript object and not a "real" dom object? If so, is there a way to interact with the object?
I just wrote a simple alert to see if the button is even working.
jQuery("#button").click(function() {
alert("yes it's working");
});
On first page load this works...I believe on first page load it is PHP generated and when I click to another section, this same button will show up BUT the page does not refresh so this leads me to believe when I click on to another section, it is dynamically re-generated with JS.
Now if I click the button, nothing happens...no errors or no alerts...

You need to use .live because at the point in time when you assign the handler the element doesn't exist.
$('#button').live('click', function() {
});
You should also look into delegate if you're doing this with multiple elements for efficiency purposes.

I think I get what you're saying.
When you run jQuery('#button'), it searches for the elements then and there. The event is attached to the button itself, not to the query string #button.
jQuery does, however, offer the behavior you want.
jQuery('#button').live('click', function () { /* on click event */ });
live attaches to the query string, not the elements, so it will apply to any #button ever generated in the future.

How can 2 Html forms share 1 hidden field?

I have a page with 2 forms and a hidden field that is outside of both of the forms.
How can the hidden field be submitted with either of the forms?
I thought about doing something like this with jQuery:
<script type="text/javascript">
$(function() {
$('form').submit(function() {
// do something to move or copy the
// hidden field to the submitting form
});
});
</script>
Will this work? Any other ideas?
EDIT
The hidden field stores a serialized object graph that doesn't change. Both server methods require the object. The serialized object string can get pretty hefty, so I don't want this thing sent down from the server 2 times.

You can simply inject a copy of the element into each form right before submission.
This way, you can have the option of having different information for each hidden form field without affecting the other.
Something like this:
<script type="text/javascript">
$(function() {
$('form').submit(function() {
$("#hidden_element").clone().appendTo(this);
});
});
</script>
If you want to use the exact same element for both forms without creating a fresh copy, just don't use clone()
See documentation for clone() and for appendTo()
EDIT:
If you don't want to send the hidden element with every request the form sends. Consider storing it in the database for that user for that time. You can submit its content once, and once only for every page reload, and then just send the database id of the hidden element with each form post.
On page load, something like this:
$.post("page.php", { reallyBigObject : $("#hiddenfield").val() }, function(insertedID){
$("#hiddenfield").val(insertedID);
});
Then, in the server side code:
//insert $_POST["reallyBigObject"] into databse
//get the just inserted id (in php it's done with mysql_insert_id())
//echo, or print the just inserted id, and exit
This way your js gets the callback.
Now, you can submit the form as you would, but this time, you're only sending the id (integer number) to the server.
You can then simply delete the object from your server (run a cron to do it after X amount of time, or send another request to delete it.
Honestly, though, unless you object is HUGE(!!), I think storing it by submitting it only once is a lot more complex to execute than to simply send two requests to the server.
Let me know if you have any other questions...

With HTML5, you can include a "form" attribute with an input element. The value of the form attribute is the id of the form(s) the field belongs to. To include the field in more than one form, include all form ids in a space-delimited list. Unfortunately, the form attribute is not supported in IE at all (as of IE 9). FF and Chrome support start in version 4 and 10 respectively.

Append the field to both forms at page load:
$(function() {
$('#form1, #form2').append($('input[name=fieldName]'));
});

Assuming you are doing a non ajax submit you could just append the field into the form being submitted. However if you need this info in both forms is it not better to store this value server side in a session store. This way any non js clients will also work!
$(function() {
$('form').submit(function() {
$('input.yourhiddenSubmit').appendTo(this);
});
});

The only way to pass the variable to the next form is to have that variable in the data that is passed when the form is submitted (either GET or POST), unless you want to use AJAX. Assuming you want to have the hidden variable outside of the actual form for a "good reason", I would recommend using jQuery to include the hidden input field into the form just before submission, like so:
<script type="text/javascript">
$(function() {
$('form').submit(function() {
$(this).append("<input type='hidden' name='hiddenField' value='"+$("#hiddenField").val()+"' />");
return true;
});
});
</script>
Replace all the instances of "hiddenField" with the ID of your hidden field outside the form. This will create a new input inside of the form just before it is submitted with the value of the hidden field that is elsewhere on the page.
Beyond that, you'd have to be a bit more specific about what your exact problem was (and why the field isn't being included in the form) for me to help.
Note that the above code should work in theory, but I didn't have a chance to actually test it out myself.