We Keep Coding

Change form parameter based on form selection

I have 3 different forms on a single page where the user can switch between using JS. The forms represent different information and only one can be submitted at a time where the user is then redirected to a different page based on the form they selected. The issue is that I have 2 input fields that are common to these forms so they are outside the forms. I am able to submit them alongside a form if I set the :
<input id="default" form="form1">
value.
So I figured it would be a simple thing to just add a function in each script where I hide/show the forms to also change that parameter to the form I want submitted however it doesn't seem to work.
function form2Search() {
$('#form2Section').show();
var input1 = document.getElementById('default');
input1.form = "form2";
}
I have something like this but it doesn't change the form parameter.

You need to actually give your input an ID of default so you can target it:
<input form="form1" id="default">

use setAttribute
function form2Search() {
$('#form2Section').show();
var input1 = document.getElementById('default');
input1.setAttribute("form", "form2");
console.log(input1.getAttribute("form"))
}
form2Search();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="default" form="form1">

Using a merged array in another function

Not sure exactly how to word this but hopefully you'll get my drift. I'm trying to use my If statement to merger the contents of my images array into another array, there is then a function that uses that array to do a picture slide show.
I feel that I should mention that this is a school assignment, so I'd like to not change the chgSlide function if I don't have too.
I think my problem is that when i have var myPix=[] it clears the merger. But i'm not sure really what the solution is, i've tried just doing myPix=redCarsPic but it didn't work.
Also, within the code i commented out that ways i had merged the array, i'm not sure if a certain approach is better than an other, i'm sort of partial to the jquery and would like to be able to keep that approach if i can.
Heres my script block:
function radioCheck(){
if (document.getElementById("redCars").checked){
//alert("red"); Array.prototype.push.apply(myPix,redCarsPic);
//alert("red"); myPix.push.apply(myPix, redCarsPic);
$.merge(myPix,redCarsPic)
alert(redCarsPic+" r2");
};
if (document.getElementById("blueCars").checked){
alert("blue"); myPix.push.apply(myPix, blueCarsPic);
};
if (document.getElementById("greenCars").checked){
alert("green"); myPix.push.apply(myPix, greenCarsPic);
};
}
var myPix=[];
thisPic=0;
imgCt=myPix.length-1;
alert(myPix+"mpixalt")
function chgSlide(direction){
if(document.images){
thisPic=thisPic+direction
if(thisPic>imgCt){
thisPic=0
}
if(thisPic<0){
thisPic-imgct
}
document.myPicture.src=myPix[thisPic]
}
}
var redCarsPic =["images/redCarsA.jpg","images/redCarsB.jpg","images/redCarsC.jpg","images/redCarsD.jpg","images/redCarsE.jpg"];
var blueCarsPic =["images/blueCarsA.jpg","images/blueCarsB.jpg","images/blueCarsC.jpg","images/blueCarsD.jpg","images/blueCarsE.jpg"];
var greenCarsPic =["images/greenCarsA.jpg","images/greenCarsB.jpg","images/greenCarsC.jpg","images/greenCarsD.jpg","images/greenCarsE.jpg"];
Heres the entire code if needed:
http://pastebin.com/YLtWFciE

When you press the submit button in your form, it tries to submit your form which causes the page to be reloaded, thus reinitializing all your state back to a new page which is an empty array.
You can stop the form from submitting either by changing the button to be just a normal button, not a submit button or by block the default action of the form submission.
The simplest change is to just change this:
<input type="submit" id="submitButton" value="Go!" onclick="radioCheck()"/>
to this:
<input type="button" id="submitButton" value="Go!" onclick="radioCheck()"/>
With no submit button, the form will not be submitted and the page will not reload.
Working demo: http://jsfiddle.net/jfriend00/4bx35hjy/
FYI, it is also possible to cancel the form submission in your radioCheck() function before it occurs, but since you never want to submit the form, it seems better to just not ever have a submit button in the first place.

How can I change the form on clicking "Save", and then submit the final version of the form?

I have a form with a variable number of textboxes, and when I click Save (the submit button), I want it to remove the empty ones and then save the form without the empty boxes.
But it's only half-working. When I click Save, the empty boxes are visually removed. Moreover, usually there's a validation error when boxes are left empty, but with removeEmptyBoxes() there is no validation error so I know the boxes are somehow successfully removed before submit. But when the page refreshes, the empty boxes reappear. On the other hand, if I divide it into two buttons and use one button to removeEmptyBoxes() and then click the other button to Save, that works fine and the deleted boxes stay deleted.
I'm sure I can get round this in a completely different way, but it's frustrating that it doesn't work the way I want it to. Is there any way to do this?
My form is made using Ajax.BeginForm. My button looks like this:
<input name="xiSubmit" type="submit" value="Save" onclick="removeEmptyBoxes()" />
function removeEmptyBoxes() {
$('div.box').each(function () {
var content = $(this).find('.box-content').val();
if (content == '') {
removeElement(this);
}
});
return true;
}
solution: my removeElement() function consisted of a slideUp to hide the box nicely and then removing the box completely. I removed the slideUp bit and it all worked fine. Not sure why it didn't work with the slideUp.

For a form with id myForm:
$('#myForm').submit(function(ev){
ev.preventDefault(); // prevent the original form submit
// do your thang
$(this).submit(); // submit form with your changes
});

Given this simple form:
<form id="theForm" method="post">
<div class="box">
<div class="box-content">
Test
</div>
</div>
<input name="xiSubmit" type="submit" value="Save" />
</form>
You can add javascript like this:
$(function() {
$("#theForm").submit(function() {
$('.box-content',$('div.box')).remove();
});
});​
The above submit handler is executed before the form is actually submitted, so you can do any pre-processing you'd like.
Here's a JSFiddle you can play around with: http://jsfiddle.net/cTwMW/. Notice I added return false at the end of the fiddle javascript so the form doesn't submit (allowing you to see the jquery remove the element).

html required not working with onclick

I have the following which I use for submitting forms on my site:
<a onclick="document.forms['REGform'].submit(); return false;" class="button" href="javascript:;">Register</a>
I have inputs within the form with the required tag but this does not seem to fire them? Meaning doesn't stop empty inputs being submitted.
If I use a normal submit button it works fine by the way - is onclick not a recognised way to submit a form within html5?

The problem is the submit() method, not the use of onclick (although you can't avoid the former if you want to submit using JS instead of HTML).
Submitting using JS causes the form's validation steps to be skipped (although you can re-implement them in JS (with checkValidity()).
The submit() method, when invoked, must submit the form element from the form element itself, with the scripted-submit flag set.
— http://www.w3.org/TR/html5/forms.html#dom-form-submit
If the scripted-submit flag is not set, and the submitter element's no-validate state is false, then interactively validate the constraints of form and examine the result: if the result is negative (the constraint validation concluded that there were invalid fields and probably informed the user of this) then abort these steps.
— http://www.w3.org/TR/html5/association-of-controls-and-forms.html#form-submission-algorithm

Here is how you can do
<a onclick="CheckValidation();" class="button" href="javascript:;">Register</a>
function CheckValidation()
{
var isValidForm = document.forms['REGform'].checkValidity();
if (isValidForm)
{
document.forms['REGform'].submit();
}
else
{
return false;
}
}

<a class="button" href="javascript:document.forms['REGform'].submit(); return false;">Register</a>
or
<a onclick="document.forms['REGform'].submit(); return false;" class="button">Register</a>

Adding submit event on form prevents submit parameter from being included in HTTP POST

Just what the question title says. I'm using SpringMVC, but that's irrelevant really. I just need to be able to pass the submit button name=value along with the rest of the form parameters for validation and control purposes. Example below for clarification:
The HTML I'm using:
<form action='somepage.htm' method='post'>
<input name='somename' value='bob' />
<input type='submit' name='mybutton' value='click me' />
</form>
The JavaScript (with jQuery) I'm using:
$('form').submit(function() {
$('input[type="submit"]', this).attr('disabled','disabled');
return true;
}
And so the HTTP POST request looks like this without the JavaScript event binding:
somepage.htm?somename=bob&mybutton=click%20me
And with the bound event, it excludes the button parameter as such:
somepage.htm?somename=bob
I need to be able to disable the buttons and still send the button value to the server for processing.
Thanks!
SOLUTION:
The code I actually used to solve this problem is:
$(document).ready(function() {
$('input[type="submit"]').click(function() {
var clone = $(this).clone();
$(clone).attr("type","hidden");
$(this).attr('disabled','disabled');
$(clone).appendTo($(this).parents('form')[0]);
return true;
});
});
And in case anyone was wondering, pressing Enter on a field in the form does in fact trigger the click event on the first submit button in the form!

Disabled inputs cannot be submitted.
http://www.w3.org/TR/html4/interact/forms.html#h-17.12
So maybe the way to go is to add a hidden element <input type='hidden' value='foo' name='bar'/> to stimulate the validation methods on the other end.

I think, if the submit button is clicked, then it's values will also be submitted, like rest of the form.