Develop Reference

Display element next to another from different parts of the DOM tree

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>

Move data from on input field to another and submit form

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

jQuery Trigger Reset Only Resetting Some Forms

I have many forms on my page that are DYNAMICALLY added and I have a button that I want to trigger a reset to all the forms on the page except one.
An example of a dynamically added form is:
<form>
<label for="code">Question code:</label>
<input type="text" id="code" name="code" maxlength="25" class="used"/>
<div class="clear"></div>
<label for="title">Question:</label>
<input type="text" name="titl" name="title" maxlength="255" class="used"/>
<div class="clear"></div>
<label for="hint">Hint:</label>
<input type="text"id="hint" name="hint" class="used"/>
<div class="clear"></div>
<input type="hidden" name="type" value="tapper" class="used">
<input type="hidden" name="optionsType" value="none" class="used">
<input type="reset" value="Cancel" class="delete-button">
<input type="button" value="Add" class="action-button" onclick="pushQuestion(this);">
</form>
Also, after each form is dynamically added, I call:
$('form').on('submit', function (e) {e.preventDefault()});
Now, when I want to reset the forms, I call the following:
$('form').trigger('reset');
When entering this into the console, I get an array back with all the DOM forms. Some forms get reset, but others are unaffected. There are no errors being reported. Does anyone have any thoughts as to why some get reset while others do not?
EDIT Thanks for the help, but the issue has been resolved. See the problem in the comments below

After a few hours of tinkering, it was discovered that the issue was the result of the way the forms were cloned.
I was doing a deep clone of the existing forms which was yielding an odd state of the form which means that when .trigger('reset') was "triggered", it would reset the form to the default state of the clone which may or may not have included some original data yielding a reset that did not appear to be doing anything.
A workaround was to first fire a loop over all the inputs with .attr(value,'') to clear the attribute value after cloning. Then the .trigger('reset') functioned as expected.

I've noticed some inconsistencies with form handling among the various browsers. One gotcha is that the less standards-compliant browsers require an input or button with type=submit for some things to function correctly. I know this is that case at least with submitting a form by pressing the enter key in any text field.
Maybe try adding an <input type='submit'/>?

How do I access $valid on an Angular Form inside an ng-repeat?

Edit:
As demonstrated in the plunker by Wayne Ellery, the second code sample does actually work. The error was somewhere else in the page.
http://plnkr.co/edit/rtmwOzhiWn0695OGwS9b?p=preview
Original
I'm trying to disable the 'submit' button on a form using AngularJS, however I run into trouble if the form is inside an ng-repeat.
This following code works fine:
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid">Save</button>
</form>
however this doesn't, even if there's only one item in the array:
<div ng-repeat="item in data.Items">
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid">Save</button>
</form>
<div>
Presumably this is because the name of the form is somehow altered by the repeat. I saw a post which suggest adding {{$index}} to the form name
AngularJs dynamic name for a form inside ng-repeat
But if I do this I'm not sure how to then access the form name within the ng-disabled tag - obviously this won't work:
<div ng-repeat="item in data.items" ng-init="formName = 'myForm' + $index">
<form name="{{formName}}">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="{{formName}}.$invalid">Save</button>
</form>
</div>
How do I access the correct form to check the validation of the current form?

I'm not sure what the error in my code actually was, but after deleting the ng-repeat and then re-typing the whole thing it now just works as expected, so I'll put an answer here for clarity.
As pointed out by pankajparkar and WayneEllery in the comments, the correct syntax for accessing $valid inside an ng-repeat is simply:
<div ng-repeat="item in data.Items">
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid">Save</button>
</form>
<div>

How do I post values obtained from an html form to an URL using javascript?

I'm new to html and JS and I have a form with a few fields that I need posted to a URL.
<form>
<div>
<label style="font-size:16px" for="title">Title:</label>
<input type="text" id="title" maxlength="128"/>
</div>
<div>
<label style="font-size:16px" for="description">Description:</label>
<textarea id="description" maxlength="1999"></textarea>
</div>
<div>
<label style="font-size:16px" for="idnumber">IDNumber:</label>
<input type="number" id="idnumber"/>
</div>
</form>
I need the values entered into this form to be posted to a URL that already knows how to process the input. I'm sure this is easy to do but I'm new and I'm having trouble finding a solution. Apologies for any incorrect terminology. Thanks!

You can use the action attribute:
<form action="some/url" method="post">
<!-- ... -->
<input type="submit" value="Submit" /> <!-- Submit button -->
</form>

You have to add an action to your form tag that points to a server side script.
<form action="myscript.php" method="post">
Alternatively, you can use JavaScript to post it as an AJAX request which submits the request without a page refresh.

I'd say you're on the right track. This would be perfectly easy using basic HTML: Add an action="mySubmitPage.php" to the form element. It sounds like you want to do it without refreshing/changing the page, though (at least, that's how it sounds by "with Javascript")
That will involve an "asynchronous" submit. The fancy term is "AJAX". That part can be a lot easier using some form of Javascript framework, especially if you want to support all browser quirks. Here's an example of doing it using JQuery, for instance:
jQuery - Send a form asynchronously