Develop Reference

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

How to reset HTML5 form validation errors when click back button

Im having an issue clearing the HTML5 oninvalid red border around inputs. If a user clicks the submit button without correctly filling out the form, the HTML5 setCustomValidity errors will show and the default red outline will appear around any required input fields that were left blank...this all works great. Problem is, if a user clicks the back button, then comes back to this form or another section of the form within this form, the form will still display all invalid form elements with the red outline.
What i would like to happen, is if this forms "go back" button is clicked, that will reset/clear the form so that all form elements are reset and none will display the red outline unless the form was once again submitted and has empty/incorrect form information.
Here is a snippet of my code:
<form class="login-form" aria-label="Login" action="" method="post">
<div class="login-A">
<h4>Are you a client?</h4>
<div>
<button class="lx-button lx-button--small lx-button--primary" id="client-yes" type=button>
Yes
</button>
<button class="lx-button lx-button--small lx-button--primary" id="client-no" type=button>
No
</button>
</div>
</div>
<div class="login-B">
<h4>Existing client information</h4>
<button class="lx-button lx-button--small lx-button--tertiary back" id="olb-back-btn-2" type=button>
Go back
</button>
<p>Enter your online ID and Password</p>
<div>
<div>
<label for="olb-user-id">User ID</label>
<input id="olb-user-id" name="olbuserid" maxlength="20" type="text" required="required" oninvalid="setCustomValidity('User ID is required.')" oninput="setCustomValidity('')">
</div>
<div>
<label for="olb-password">Password</label>
<input id="olb-password" name="olbpassword" maxlength="28" value="" type="password" required="required" oninvalid="setCustomValidity('Password is required.')" oninput="setCustomValidity('')">
</div>
</div>
<button class="lx-button lx-button--small lx-button--primary" id="login-button" type=submit>
Continue
</button>
</div><!-- login-B -->
<div class="login-C">
<h4 class="text">New client</h4>
<button class="lx-button lx-button--small lx-button--tertiary back" id="olb-back-btn-3" type=button>
Go back
</button>
<label for="login-state">Select your state to view your account options.</label>
<div class="login-state-container">
<select id="login-state" name="login-state" required="required" oninvalid="setCustomValidity('State is required.')" oninput="setCustomValidity('')">
<option value="" selected="selected">State</option>
<option value="AL">AL</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="IN">IN</option>
<option value="WV">WV</option>
<option value="DC">Washington, DC</option>
</select>
</div>
</div>
</form>
Ive searched for days trying to figure out how to solve this issue. I have tried:
function clearValidity(){
document.getElementById('olb-user-id').setCustomValidity('');
document.getElementById('olb-password').setCustomValidity('');
document.getElementById('login-state').setCustomValidity('');
}
document.getElementById( 'olb-back-btn-2' ).onclick = function() {clearValidity()};
document.getElementById( 'olb-back-btn-3' ).onclick = function() {clearValidity()};
also tried:
$('.login-form').trigger("reset");
Along with many other trials from posts i have read but nothing seems to work. Please help! Thank you!

The back button is a save of how the last page ended. The only way to do this, is to change the form to post the data using Javascript.
Use javascript collect the data and HttpXML to post it
First collect the data with JavaScript
Then clear all the fields using javascript
Post the data using javascript a HttpXML request
Upon return (xml repsonse) Redirect if required or show an error for them to re complete the form (the form will now be blank and ready to start again)
If using this method be sure to disable the submit button until the response has been returned from the XML post to stop the user submitting multiple times

Prevent loading image from appearing until form is complete

I'm building a site which requires the client clicking a submit button. This site includes HTML select menu's and input fields.
This information is then submit to a php file which then passes the data onto a MySQL database.
I've added some code to enable a loading image when the submit button is clicked. But currently, the user can click submit without filling in the form and the loading message appears as well as a message telling the user to enter data into the missing fields.
What I would like, is for the loading message to ONLY appear once the form has been filled out and when the data is being passed the PHP file.
I've crudely mocked this up in a JSFiddle below to better explain what I'm saying:
Link
JSFiddle throws up a POST error obviously, but on my site obviously the data is posted and that error doesn't exist, so ignore it.
HTML:
<form onsubmit="myButton.disabled = true; return true;">
<label for='name'>
Please Enter Your Name:
</label><br>
<input class="label" type="text" name="name" placeholder="Click/Tap here..." required><br><br>
<label for='urgency'>Urgency</label><br>
<select type="select" name="urgency" select id="urgency" required>
<option value="" disabled selected hidden>Please specify an urgency...</option>
<option value="1">1 - Least Urgent</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br><br>
<span>
<button type="submit" name='myButton' value="submit" id="submit">Submit</button>
<button type="reset" value="Reset">Reset</button><br>
</span>
<div id="loader" style="display:none;"><br>
<label>
Please Wait...
</label>
<img src="ajax-loader.gif" alt="Loading" />
</div>
</form>
JQuery:
$('#submit').click(function(e){
$('#loader').toggle();
});

Do not wire up the submit button. Instead use the submit event
do not use submit as id or name
use the id of the button if needed
$('#formID').on("submit",function(e){
var empty = false;
$("input:required",this).each(function() {
if (!$.trim($(this).val())) {
empty=true;
return false; // leave
}
});
if (empty) {
e.preventDefault();
}
else {
$('#loader').toggle();
$("#myButton").attr("disabled",true);
}
});

You could handle the toggling of loading images on the submit event (which is probably where you do your AJAX'ing):
$('form').on('submit',function(){
$('#loader').toggle();
});
The submit event won't fire until the form fields are valid.
You will have to toggle it "off" somewhere else, fx. the "success" and "error" callbacks of the AJAX-function.
Hope it helps.

Redirecting after form submission in Javascript

I hope someone can assist with this. I dont have access to the website backend, so I cant change the js script uploaded there. What I am trying to achieve is make a simple form to submit an issue report and then display a "Thank you" popup and redirect back to main page of the account on our page.
So I can make a form no problem. I copied one of the functioning forms by going to Edit link and clicking on Show Source in Page Body. But I can't stop the default behavior of it going to another page after Submit button is pressed. I suspect it is in js script on the back end. I'll copy code below.
<center>
<b>App Issues Report Form</b>
<br>
</center>
<form action="/Modules/SendForm" method="post" class="form" id="NewForm">
<input name="formFields" value="CONTACTID,AgentName,Notes" type="hidden">
<input name="formLabels" value="Contact ID:,Agent Name:,Notes:" type="hidden">
<input name="fromAddress" value="no-reply#callcenter.com" type="hidden">
<input name="toAddress" value="name#CallCenter.com" type="hidden">
<input name="subject" value="A new message about app" type="hidden">
<input name="emailMsg" value="The following data has been collected:" type="hidden">
<input name="CONTACTID" value="##CONTACTID##" type="hidden">
<input name="companyId" value="##COMPANY_ID##" type="hidden">
<div class="clearfix">
<label>Agent Name:</label>
<div class="input"><input id="AgentName" name="AgentName"
class="validate[required] xlarge" value="##LOGGEDIN_AGENT_FIRST_NAME##
##LOGGEDIN_AGENT_LAST_NAME##" type="text">
</div>
</div>
<div class="clearfix">
<label>Notes:</label>
<div class="input"><textarea id="Notes" name="Notes"
class="validate[required] xxlarge"></textarea>
</div>
</div>
<div class="clearfix grey-highlight">
<div class="input no-label">
<input class="button blue" value="Submit" type="submit">
<input class="button grey" value="Reset" type="reset">
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("NewForm").click(function( event ) {
alert( "Thank you for your feedback" );
event.preventDefault();
});
});
</script>
It used to have only this at the end when I copied the code:
<script type="text/javascript">
$(document).ready(function () {
new setupAjaxForm('NewForm'); });
</script>
I tried searching and suggestions here didnt seem to work:
How to redirect user to another page after Ajax form submission
How to redirect user to another page after Ajax form submission?
http://learn.jquery.com/about-jquery/how-jquery-works/

The first thing you have to look at is action="/Modules/SendForm" - this is what does the redirection. If you don't want to redirect, set this to the name of the page you have the form. Obviously there is a whole lot more to forms and redirection (and some other js code might influence this too, nonetheless we don't see what the function setupAjaxForm is supposed to do here), but this is really the first thing to check / get right.
EDIT: I think I understand it more now: basically if you don't have access to the /Modules/SendForm page (where most probably, among others, like form validation, the redirection also happens, then you can't do much to change the redirection.

html form trying to http get when a button is pressed

Ive got a html form with a few select lists and a text box in it. I also have a submit button which is outside of the form. The reason for this is I want to construct the parameters myself, as I dont want the content of all of the select lists. The problem I am having is, that when I press my submit button,The form automaticly trys to redirect to the same page, but with a ? at the end with all the contents of the form. I am also having problems where window.location.href is not working inside the submit() javascript method, but I am not sure if this is caused by the form issue or not. Example code:
<form>
<input name="cName" type="text" class="input-xlarge" id="input01" placeholder=
"Enter title" />
<div class="control-group">
<hr />
<label class="control-label" for="select01">Select box 1</label>
<div class="controls">
<select id="select01" name="type" onChange="reportModification(this.value)">
<option>One</option>
</select>
</div>
</div>
</form>
<button class="btn btn-primary" onClick="next()">Next</button>
This is not the exact code from the page, just a replica.So it might not be valid html in some places. Thanks for the help :)

The reason you get parameters in the url is that a get request is used instead of a post request. you should use:
<form method="POST" action="">
Also why is your button outside the form? you could have this instead:
</div>
<input class="btn btn-primary" type="submit" value="Next" onClick="next()" />
</form>

I think your button has to be inside the form element. You could use an onsubmit in the form element to intercept the form before it gets sent to the server. Here you could manipulate the values before they go. You would also need an action attribute in the form. If your function returns true, the data will be submitted, false and it won't.