I have two forms, one larger and one smaller. I would like to display the smaller form next to a specific input of the larger form. It's not valid html to embed one form within another in the DOM, but is there a way to display one form over / inside another form next to a specific input using CSS or JS?
<!-- Main Form -->
<form action="action1" method="post">
Name <input type="text" name="name" value="">
Job Title <input type="text" name="job_title" value="">
Cell Number <input type="tel" name="mobile" value=""> <!-- SMALLER FORM SHOULD DISPLAY NEXT TO CELL # INPUT -->
Favorite Sport <input type="text" name="favorite_sport" value="">
Hobbies <input type="text" name="hobbies" value="">
<input type="submit" value="Save">
</form>
<!-- Smaller form loaded via js -->
<form id="optin_js_loaded_form"></form>
<!-- js -->
<script src="external_js_library.js"></script>
<script>
// js code to load form into #optin_js_loaded_form using external_js_library.js
</script>
NOTES
The forms need to be separate because the smaller form is created via an external js library from a marketing service.
I know I could make the data from the larger form submit via ajax, but I'm hoping I can save some work by just changing where the smaller form displays.
EDIT 2020-02-05 14:40
Found a webpage that suggests some possible solutions, but doesn't give much direction on how to implement them. https://discourse.wicg.io/t/position-an-element-relatively-to-another-element-from-anywhere-in-the-dom/968
You could make use of the form attribute to avoid the nesting of form elements. You move the controls from the main form outside of that form element, and add the form attribute to all of them.
Now you can place the small form at its desired position, without violating the HTML rule that form elements should not be nested.
You would still need to apply some CSS on that small form element, so it does not flow to the left. Something like display: inline-block or similar could be useful.
Here is the suggested HTML part:
<form id="mainform" action="action1" method="post"></form>
<div>
Name <input type="text" name="name" form="mainform" value="">
Job Title <input type="text" name="job_title" form="mainform" value="">
Cell Number <input type="tel" name="mobile" form="mainform" value="">
<!-- Smaller form loaded via js -->
<form id="optin_js_loaded_form">
</form>
Favorite Sport <input type="text" name="favorite_sport" form="mainform" value="">
Hobbies <input type="text" name="hobbies" form="mainform" value="">
<input type="submit" form="mainform" value="Save">
</div>
Related
I'm building two forms which will live on a single page on a Kentico website. kentico websites are wrapped in one single form field so I can't create individual form elements for each form on the page. The problem is parsleyJS will only allow you to pass a form to initialise it e.g. $("#form").parsley(); and I need to validate the forms independent of each other. Has anyone had this issue before? Can anyone recommend a workaround.
$("#form").parsley();
input{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.1/parsley.min.js"></script>
<form action="" id="form">
<div class="form1">
<label for="fname">First Name</label>
<input type="text" name="fname" required>
<label for="lname">Last Name</label>
<input type="text" name="lname" required>
<input type="submit" value="submit">
</div>
<div class="form2">
<input type="text" name="anotherInput" required>
<input type="submit" value="submit">
</div>
</form>
You may be able to get the results you want using the group option to validate only part of the fields in your form. This is used in this example of a multi step form.
Initialize the forms independent of one another by using the class selector.
$(".form1").parsley();
$(".form2").parsley();
I am trying to get one input field that is higher up the page, move it's content to a form field at the bottom of the page and submit the form.
Please see what I have done here (doesn't work):
$('#move_down').click(function() {
$('#input_1').val($('#input_2').val())
});
<input type="text" id="input_1" value="">
<br>
<button id="move_down">Click Here</button>
<br>
<input type="text" id="input_2" value="">
<script src="//code.jquery.com/jquery-3.2.0.js"></script>
Moving the data is just the first part, I am also trying to get it to take the user down to the main form and submit it - is this possible with jQuery?
Updated the question to fix my silly error of omitting the ID selectors. Just need to figure out how to submit the form now.
You are right; just correct your query selector:
$('#move_down').click(function() {
$('#input_2').val($('#input_1').val())
});
http://jsfiddle.net/82x28ryr/4/
Missing the # prefix for id selector
Works fine doing
$('#move_down').click(function() {
$('#input_2').val($('#input_1').val())
});
<input type="text" id="input_1" value="">
<br>
<button id="move_down">Click Here</button>
<br>
<input type="text" id="input_2" value="">
<script src="//code.jquery.com/jquery-3.2.0.js"></script>
As for "moving down" you have only provided html in demo for 2 inputs. You need to update question with all relevant html in order to implement additional features
I want to simulate he old habit of a DOS programm input in a HTML from.
Think of it as an order form.
First I have bunch of form fields for entering names, addresses and so on.
After that I have several product groups.
Each group has only two fields. One for the product and another for the quantity.
Now, tabbing through the form I want to have a NEW set of two input fields for the specific group if the product field its NOT empty.
If you enter a product, you get the chance to enter another one. Entering non, you quickly tab yourself in the next group.
Now I'm thinking about and searching for the most efficient solution that offers the fastest way of entering data without using the mouse when inside this form.
I'm totally free using jquery, html5 or whatever. But I definitely want this way of input, that Turbo Pascal gave to me with a little loop and some ReadLn commands.
All suggestions are welcome
--edit
started coding:
Basic form will look like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Testform for a DOS-like behavior</title>
</head>
<body>
<pre>
<?php print_r($_POST); ?>
</pre>
<form action="testform.php" method="post" id="formmail">
<fieldset id="person">
<legend>Person</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="">
<br>
<label for="email">E-Mail:</label>
<input type="text" name="email" id="email" value="">
<br>
<label for="phone">Phone:</label>
<input type="text" name="phone" id="phone" value="">
</fieldset>
<fieldset id="productgroup1">
<legend>Product Group 1</legend>
Product: <input type="text" name="product[1][]">
Qty: <input type="text" name="qty[1][]">
</fieldset>
<input class="button" type="submit" value="Submit">
</form>
</body>
</html>
* Update
Discovering the powers of fiddle I made this: http://jsfiddle.net/zarquon42/HcbfH/
And it is basically what I want. That surprises me. Now I'm going to take a look if it works also in the context with several groups of input fields.
* Next Update
Much shorter with some jquery: http://jsfiddle.net/zarquon42/NdD7v/
perhaps you could use the JQuery terminal emulator plugin?
http://terminal.jcubic.pl/
Hope this helps!
I have a simple form. On submit (the submit action is a google docs form submission), it takes to a new page with focus on that page. I want to keep the focus on the current page.
What are my options?
This is the code (also present here )
<html><body>
<form action="https://docs.google.com/a/rangde.org/spreadsheet/formResponse?formkey=dFlSZkt0TzZTWHJyblBiQlNrcmZvZGc6MQ" method="POST" id="ss-form" target="_blank" onsubmit="submitted=true;">
<br>
<input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0" placeholder="Your Name">
<br>
<input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1" placeholder="E-mail Address">
<br>
<input type="text" name="entry.2.single" value="" class="ss-q-short" id="entry_2" placeholder="Pledge Amount">
<br>
<input type="submit" name="submit" value="Submit"></form>
</body>
</html>
Depending on what you're trying to do with the resulting form, (and if you're not comfortable relying js do all the lifting) you could also create a hidden iframe on the page, give it a name, and set the form target to the name of the iframe. This is only if you have no interest in having the user ever see the google page itself.
Try AjaxForm, as found at http://jquery.malsup.com/form/, if you're using jQuery
A form's action parameter will always take you to that page.
Here is an example:
POST without Form Method (PHP)
jQuery, when i use it to create a modal window which contains form elemets,
it takes out those elements when i submit the form.
example of the form:
<form enctype="multipart/form-data" action="/system/article/add/" class="from" method="post">
<label for="article_title" class="required">Title:</label>
<input class="formfield" id="article_title" name="article_title" value="" type="text">
<label for="url" class="required">Url:</label>
<input class="formfield" id="url" name="url" value="" type="text">
<div id="add_photo" style="width: auto;" class="ui-dialog-content ui-widget-content" title="Add Photo">
<label for="photo_title" class="optional">Photo title:</label>
<input class="formfield" id="photo_title" name="photo_title" value="" type="text">
<label for="photot" class="optional">Photo thumb:</label>
<input type="file" name="photot" id="photot" class="formfield">
<label for="photo_checkbox" class="optional">Include lighbox?</label>
<input name="photo_checkbox" value="0" type="hidden">
<input class="checkbox" id="photo_checkbox" name="photo_checkbox" value="1" type="checkbox">
<label for="photo_big" class="optional">Photo:</label>
<input type="file" name="photo_big" id="photo_big" class="formfield">
</div>
</form>
exaple of JS:
<script>
$(document).ready(function(){
$("#add_photo").dialog({
autoOpen: false,
buttons: {
"Ok": function() {
$(this).dialog("close");
}
}
});
});
So what i nocited during the inspetion via firebug, is that jquery actually removes my form elements within #add_photo and puts them outside the form in DOM, so even tough in html the modal dialog is within my form, in DOM it isn't ....
An this is the reason why i'm having the issue!
Have anyone encountered simmilar problem?
Any solution?! Thank you very much!
I just had the same problem. I solved it by adding another
<div id="beforesubmit" style="display:none"></div>
at the end (but inside) of the form and then you have to add this to jQuery:
$("form").submit(function() {
$("#add_photo").prependTo("#beforesubmit");
});
This will make sure that before the form is submit your dialog div will be put back in between the form tags. Thanks to arnorhs I came to this solution.
Cheers!
I'm not sure what dialog box plugin you're using, but I would suspect that the dialog box plugin is pulling the DIV out of the form and placing it into the body of the page, so It can bring the box in front of the page, outside of the form element.
So to rephrase, in order for the dialog box plugin to make your dialog appear in front of all the content on your page, it needs to remove it from whatever element it is sitting in, no matter if it's a form or anything else.
The form needs to be inside the div. That's how it is in all the Dialog examples. Not sure how you're going to do that with the title and url inputs not being on the dialog. Couldn't you put them on it too?
This wouldn't have the problem:
<div id="add_photo" style="width: auto;" class="ui-dialog-content ui-widget-content" title="Add Photo">
<form enctype="multipart/form-data" action="/system/article/add/" class="from" method="post">
<label for="article_title" class="required">Title:</label>
<input class="formfield" id="article_title" name="article_title" value="" type="text">
<label for="url" class="required">Url:</label>
<input class="formfield" id="url" name="url" value="" type="text">
<label for="photo_title" class="optional">Photo title:</label>
<input class="formfield" id="photo_title" name="photo_title" value="" type="text">
<label for="photot" class="optional">Photo thumb:</label>
<input type="file" name="photot" id="photot" class="formfield">
<label for="photo_checkbox" class="optional">Include lighbox?</label>
<input name="photo_checkbox" value="0" type="hidden">
<input class="checkbox" id="photo_checkbox" name="photo_checkbox" value="1" type="checkbox">
<label for="photo_big" class="optional">Photo:</label>
<input type="file" name="photo_big" id="photo_big" class="formfield">
</form>
</div>
This article describes how to solve your problem:
You’ll see that the content we had mid-way through our page has been marked up with additional classes and, most importantly, placed at the bottom of the page immediately before the closing tag. Why is this important? Because it also means that any ASP.Net controls you place within this dialog will also appear at the bottom of the page, outside of the page’s tag. This means you won’t be able to get a handle to them on postback.
What’s the solution? Well, there are two options:
Move the elements back to the form, and manually submit when the button is clicked
Clone the elements when you create the dialog, then clone the values back, trigger click on the original button (or, if you only have one or two values to post back, simply assign the values to an ASP.Net hidden field control).
From http://blog.coreycoogan.com/2010/12/01/jquerys-dialog-and-form-problems/
Tie it to the form by doing $("mydialog").parent().appendTo($("form:first")).
Note that you have to this call after you already called $("mydialog").dialog()
As seen in the answer for this question, jQuery dialog has a field appendTo, that can be used to configure where to put your dialog (div-wise) on initialization.
This seems to be the least ninja-workaround version to tackle the problem.