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.
Related
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.
I'm creating a huge form wizard with many input fields. The fields are inside sections that have display: none; and by clicking a button I'm walking through the sections and at the end I'm submitting the form. Inside one section there is another form to upload an image via ajax. To use ajax I need to prevent the form from being submitted with event.preventDefault();
But this causes submitting the parental form. How can I prevent the parental form from being submitted, too? The html structure looks like this:
<form action="" id="wizard">
<section id="sec1"></section>
<section id="sec2">
<form id="ajaxform">
<input type="file" id="ajaxfile">
<input type="submit" value="upload">
</form>
</section>
<section id="sec3"></section>
<button type="button">Back</button>
<button type="button">Next</button>
</form>
The jQuery looks like this:
$(document).ready(function() {
$('#ajaxform').submit(function(e) {
e.preventDefault();
$.ajax({stuff...});
});
});
event.preventDefault() prevents the default behaviour of the event but does not stop it from bubbling up to other elements. Use event.stopPropagation():
Prevents further propagation of the current event in the capturing and
bubbling phases.
Forms should not be nested. The behaviour of such invalid markup is not specified. You should fix the markup.
If, for some reason, you cannot alter the markup then you could use the submit event for the outer form and check for the presence of some value(s) to allow, or disallow, the submission. For example, have a hidden value in the last section that you only change when they reach the section (when it is shown).
I'm getting the error, "Invalid URL Exception" on submit of a button. I am assuming that this issue is coming from three form tags I have in the web page.
In the body, the first form tag is for "post" of the fields and redirection. The second one, which is inside of the first form tag, is for the search bar as part of company header.
The third one is a form class for the input fields, which is also inside the first form tag.
I tried placing an end form tag in the first line of my code, it closes the form tag which now looks like this:
<form method = "post" action="/sample/sampleweb.nsf/myForm?OpenForm&Seq=1" enctype="multipart/form-data" name=_myForm">
<input type="hidden" name="__Click" value="0">
</form>
Then the search form tag comes in after as also part of body. Upon clicking the submit button, I'm getting such error. When I tried searching by clicking the search, search functionality working as expected.
When I tried removing the form tag and end form tag for the search, and I click on Submit, it's working as expected.
I notice that domino is still creating end form tag at the last part of the page, right before the end of body tag. Could it be because of this?
To give you a better idea, here is the structure of it:
<html>
<body>
<form method = "post" action="/sample/sampleweb.nsf/myForm?OpenForm&Seq=1" enctype="multipart/form-data" name=_myForm">
<input type="hidden" name="__Click" value="0">
</form> //This comes out when I add end form tag in the first line of code.
<form class="searchbox">
<input id="searchtxt" class="searchbox-submit">
<input type="submit" class="searchbox-submit">
</form>
<form class="form-horizontal">
//Rest of the code go here having the input fields.
<button type="submit" onclick="return validatefields(event)">Submit</button>
</form>
</form> //This part is the generated form tag.
</body>
</html>
Any help would be appreciated.
Domino creates the form tags for you because it assumes you are doing data entry if the form is in edit mode. To prevent this use the setting on the form properties second tab (propeller head) for "On Web Access" "HTML". With that you can do anything you want in HTML but as Richard suggested you need to define where to go when the form is submitted.
Once created this way you need to use the ?ReadFrom url parameter rather than the ?OpenForm parameter
I need to create a webpage that on first visiting it asks you to put just your name, then once they click login my jQuery will slide away that panel and they will be in the main part of the website. The next time they visit the web page it will go straight to the "main part" rather than ask their name again.
I've never made cookies before how, possible is this?
Also I've created my login form but when i click my submit button it refreshes the page, i want the submit button to be the thing that activates the jQuery.
<div class="login-page">
<div class="form">
<form class="login-form" method="POST" action="">
<!-- user inputs -->
<p class="name">Name:</p><input type="text" name="username" placeholder="Enter Your name Here" />
<!-- your submit button -->
<input class="login" type="submit" name="submit" value="login">
</div>
</div>
I need it to be an input form because that data is going to be saved onto a database by someone else.
In JS, creating a cookie is as simple as document.cookie = "username=John Doe";
And then reading cookies is var cookies = document.cookie; which will give you a semi-colon delimited string of cookies.
As for the second problem, you are using an HTML submit button, which submits the HTML Form. You have to instead capture the click event and prevent the default action. Something like this:
$('.login').click(function(event){
event.preventDefault();
//Do more stuff
})
I'm trying to essentially have the submit button of search.htm be able to create a pop up with a text area which the users are required to enter a comment describing their actions and click the submit button in the pop up to effectively submit both forms to the same processing page. Both the forms in search.htm and frm_comment.htm will submit both sets of data back to search.htm which calls cfinclude on the server processing logic (server.htm).
In the below code I'm having the the "createPeriod" button submit everything that is in the "srch" form. It is also creating a pop up window which has a html textarea that allows the user to enter a comment. There is a reason that I need to split up the main form from the comment form (frm_comment.htm) but it's very specific to the task I'm trying to accomplish.
search.htm is structured roughly as such:
//include the template here to process the forms
<cfinclude template="../server.htm">
<cfform method = "post" action = "search.htm" name="srch" format="html">
<table>
//bunch of form fields here
.
.
.
.
//bunch of form fields here
<cfinput type="submit" name="createPeriod" value="Create"
onClick="ColdFusion.Window.create('comment', 'CommentBox',
'frm_comment.htm', {center:true,modal:true})">
</table>
</cfform>
I've tried to change the submit button in search.htm to just a cfinput type="button" because keeping it as a submit will make it so that the comment box will appear for a brief moment while the page reloads and disappear as soon as the page reloads. However, I was unable to preserve the form data from search.htm when changing the submit button to a regular button.
I've also tried to have my comment form's submit button's onClick function call a javascript function to submit both forms (to no avail) like so:
submitForms = function(){
document.forms["srch"].submit();
document.forms["srch1"].submit();
}
<cfinput type="button" name="submitComment" value="Submit" onClick="submitForms()"/>
Please advise on the best way to accomplish this task, sorry about the messy code.
This a very basic example, on how to have your 2 forms in one. The JavaScript will just show the comment form when the user clicks on "Search".
<!DOCTYPE html>
<html>
<head>
<style>
#hiddenStuff {
display: none;
}
</style>
</head>
<body>
<form action="...">
// search fields here
<input type="button" value="Search" onclick="document.getElementById('hiddenStuff').style.display='block';">
<div id="hiddenStuff">
// comment form stuff here
<input type="submit" value="Submit">
</div>
</form>
</body>
</html>
I also made a fiddle, if you want to see the result in action.
Sorry I'm not familiar with ColdFusion, but it shouldn't be too hard for you to translate :)