Are there any accessibility concerns with implementing multi-step forms as 1 big form (1 <form> tag) with multiple fields whose visibility that are handled via javascript logic as opposed to having multiple forms (multiple <form> tags) where the actual forms themselves are managed by javascript.
In short, would you rather:
METHOD 1
<form>
<div id="step-1">
<input />
<input />
</div>
<div id="step-2">
...
</div>
</form>
Another sub-question here if we do pick this method. Should the steps then be fieldset tags?
or
METHOD 2
<form id="form-1">
<div id="step-1">
<input />
<input />
</div>
</form>
<form id="form-2">
...
</form>
If we choose this way of doing it, is there anything that should be done to tell the user they are on the same form (through attributes or things of the sort)?
If it makes any difference, it may be worth noting that I am developing a single page application.
It's not very clear how you plan to move from one step to another. Anyway:
Fieldsets won't hurt, especially if you mark up real groups with them (such as radio groups or related checkboxes).
Make it clear that your user moves to a next step, like: add a Next Step (or Next>) button.
After your user presses the Next Step button, autofocus the first element of the next step, it greatly helps.
As for single form vs. multiple forms, it's up to you, but I would go for a single form, especially in an SPA.
Related
I try to make my checkout page more friendly and how to do this:
I have guest form`s and save button after them. And after guest info is saved (instead payment option) are show send my order button - this is from one module Cash on delivery, but instead to choice only this i move button to be showed directly.
BUT: Many clients are confused from this "save" button. I want to marge this two buttons in one.
How to do this? What is the best solution: to add some js when for save button or adding new button instead these 2?
You can see the problem page in my live shop here: http://bijutaniki.com/porychka (do not forget to add product like: http://bijutaniki.com/prysteni/8-prysten-na-nastroenieto.html - and shop is on bulgarian)
Now process looks like that:
What i want to do:
I try two times to add new button with js instead these to but without success. May be if use "save" button and add js to click on other "send order" button will be more easy because when "save" been clicked check fields above and if fields are valid show message.
What are you think, how to combine this buttons.
Thanks!
EDIT:
Save button and message:
{$HOOK_CREATE_ACCOUNT_FORM}
<p class="submit">
<input type="submit" class="exclusive button" name="submitGuestAccount" id="submitGuestAccount" value="{l s='Save'}" />
</p>
<p style="display: none;" id="opc_account_saved">
{l s='Account information saved successfully'}
</p>
<p class="required opc-required" style="clear: both;">
</p>
Send order button (with smile):
<div class="cod_cofirm">
<form action="{$link->getModuleLink('cashondelivery', 'validation', [], true)|escape:'html'}" method="post">
<input type="hidden" name="confirm" value="1" />
<p class="cart_navigation" id="cart_navigation">
<input type="submit" value="{l s='Send order' mod='cashondelivery'}" class="extraorderbutton" />
</p>
</form>
</div>
Because prestashop have controllers may be need to show code from some controller?
I guess there is no valid answer without showing us code, I'll try it anyway:
$('NEW_Send_Order_btn').click(function(e){
e.preventDefault();
$('Save_btn').trigger('click');
if($('Save_btn').hasClass('well_done')){
$('Send_my_order').trigger('click');
}
});
I have nested form tags like this
<form>
<h5>Main Form</h5>
<input type="text" />
<!-- Don't Show This Form -->
<form style="display:none">
<input type="text" />
<input type="text" />
</form>
<!-- Don't Show This Form -->
<form style="display:none">
<input type="text" />
<input type="text" />
</form>
</form>
The problem is the first form displaying although It's display none css inline
See the code in action http://jsfiddle.net/fZMKB/
I know I know, nested forms is against the rules But I have to use it this way for this reason
I need to reset bunch of inputs and form elements before jQuery event and I'm using this code
$('form').get(0).reset();
From this my earlier question How to reset forms elements (input,select,textarea,etc.) on events using jQuery
So the only reason I use form tag is I need to reset inputs and textarea, etc..
There's never a good reason to have nested forms. Instead, use proper HTML syntax and adjust your jQuery code accordingly. Here's some valid HTML markup:
HTML
<form>
<h5>Main Form</h5>
<input type="text">
<div class="one" style="display:none">
<input type="text">
<input type="text">
</div>
<div class="two" style="display:none">
<input type="text">
<input type="text">
</div>
</form>
Let's say you want to reset all text inputs, checkboxes, radio buttons, and select menus in the first subsection. This would only take two simple lines of jQuery:
$(".one input, .one select").val("");
$(".one textarea").html("");
If you want to restore default values, you should store the values in the HTML markup using the data attribute. Here's an example: http://jsfiddle.net/pgNrF/3/
You cannot have nested forms in HTML , you can have different forms but not nested
See this http://www.w3.org/TR/2011/WD-html5-20110525/forms.html#the-form-element
Content model
Flow content, but with no form element descendants.
No, nested forms are forbidden.
This is expressed in the HTML 4.01 DTDs as:
<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->
— http://www.w3.org/TR/html4/interact/forms.html#h-17.3
A FORM has a mandatory start tag, mandatory end tag and can contain anything in %block or SCRIPT, except other FORMs.
XML DTDs aren't as expressive as SGML DTDs so in XHTML this rule is specified only in the human readable text of the specification:
form must not contain other form elements.
— http://www.w3.org/TR/xhtml1/#prohibitions
HTML 5 isn't an SGML application and doesn't have an official machine readable description of the language. It also expresses this rule in text:
Content model:
Flow content, but with no form element descendants.
— http://www.w3.org/TR/html5/forms.html#the-form-element
Reference
I'm working on a single PHP file, which has 2 different forms.
Example:
<form action="index.php" method="POST">
<input type="checkbox" name="box1">
<input type="submit" value="submit1" name="submit">
</form>
<br>
<form action="index.php" method="POST">
<input type="checkbox" name="box2">
<input type="submit" value="submit2" name="submit">
</form>
My problem is, I want to make both of them work at the same time, independent from each other. For example, when I hit 'submit1', the whole index.php reloads since action is set to that page. The other checkbox might lose it's condition, if I set it to checked before submitting the first form. Might be confusing, I know.. Since I have PHP code behind, I can' really handle the whole thing between 1 form tag. That's why I'm asking if there's another option like javascript, or something. Thanks in advance!
You can use a javascript cookie. You could set it so the cookie will have the fields and values of everything in both forms, and then is saved/created upon submit. Then once the page is reloaded, javascript can split the cookie and refill the field values for the other form. You might need a hidden field in both forms so that you can identify which form was submitted. Here's a tutorial that might explain cookies to you in greater detail: http://www.tutorialspoint.com/javascript/javascript_cookies.htm
I have a ad banner that has a form and this is used by 3rd party site owners that grab this code and have this banner on there site.
Since some sites that use this banner have a <form> wrapping there entire site I have found that the banners form doesn't submit it rather submits the outer form.
Here is the code:
<form onSubmit="return alert('outer form submitted')">
<!-- only if i add this empty form it submits the inner -->
<form></form>
<!-- End Empty form -->
<!-- inner form -->
<form onSubmit="return alert('inner form submitted')" >
<input type="submit" />
</form>
<!--end inner form -->
</form>
As you can see only if I add a empty <form> before the inner <form> it alert (submits) the inner, otherwise it submits the outer.
What is the best way to code a banner ad for a site with a form?
Having a <form> inside a <form> is malformed HTML, and all bets are off how any browser/user-agent/javascript-engine/dom implementation is going to handle it. Expect wildly different or equal results between different visitors. Just don't have a <form> in a <form>. Period :)
Most likely scenario in your observed behavior: starting a <form> tag inside a form is probably 'discarded' as invalid, including any actions/events (but probably not <input>s), the first </form> closes the 'main' form.
I want to create a pop-up or Javascript item that allows users to accept the terms of completing an offer for me. Once they have accepted the terms, I would like that offer that they agreed to do to go under the account in a section or tabled labeled "Offers".
Please advise on how to code this.
You can use javascripts confirm. It will create a dialogue which will allow a user to press "Ok" or "Cancel". You can implement the following:
<html>
<head>
<script type="text/javascript">
<!--
function confirmation() {
var answer = confirm("Do you agree to the terms of Service?")
if (answer){
window.location = "http://yoursite.com/offers.html";
}
else{
alert("You must agree to continue")
}
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onclick="confirmation()" value="Continue">
</form>
</body>
</html>
If you want this dialogue to appear when the page loads you can put onLoad="confirmation()" in the body tag. And alternative to a javascript confirmation box would be something along the lines of the following, I know some people really don't like popups and confirmations:
<input type="button" onclick="window.location='http://yoursite.com/offers.html';" value="Agree">
<input type="button" onclick="alert('You must agree to the terms of service');" value="Disagree">
Instead of an intrusive pop-up, why not have a checkbox that the user has to check in order to continue? If the checkbox isn't checked, then the form either won't submit or an error message could appear, telling the user (s)he didn't accept the terms.
Unless there's a specific reason you need to use JavaScript, I would try to stay away from JavaScript for functionality like this, especially considering that users can just turn JavaScript off.
For example (using JavaScript to prevent the form from submitting):
<form name="offerForm" action="/offer" method="post" onsubmit="return this.elements['agreeTerms'].checked;">
<!-- the rest of your form goes here -->
<input type="checkbox" name="agreeTerms" id="agreeTerms" value="1" /> <label for="agreeTerms">I agree to the terms.</label><br />
<input type="submit" value="Submit Offer Form" />
</form>
On the server side, I'm assuming you have a relational database behind everything. Let's say you have a users table, an offers table, and a users_offers bridge table to denote which users have accepted which offers.
Using the example above, you would only add a new record to the users_offers bridge table if agreeTerms came back with a value of "1". If the checkbox isn't checked, then agreeTerms won't have a value.
If you could edit your question with specifics concerning your situation (server-side language you use, basic database table information, etc.), I'll be able to fill in some more details.