I have two forms on one page.
The first form is used to make a calculation (fieldvalue1 + fieldvalue2 = calculatedfield)
The second form is simply just to capture information (Name, Email, etc.)
The first form has no submit button, but the second form has a submit button. Currently, when the user fills in all the info and clicks submit, then only the second form's fields get sent to my admin email.
Is there a way to send calculatedfield along with the form fields sent to my email when clicking the submit button on the second form?
I would like to add a code snippet to command the calculatedfield to also be sent along with the fields of the second form. Not sure which code to use...
I would greatly appreciate any assistance.
Add a new hidden field (lets call it hiddenCalculatedField) to your second form.
In the first form, add a onChange hook to the calculatedfield, and copy the value to the hidden field. This will get submitted when the second form is submitted.
In this example, it assumes
$(document).ready(function() {
$("input[name='calculatedfield']").change(function() {
$("input[name='hiddenCalculatedField']").val($(this).val())
})
}
Related
all!
There is a form (not a contact form 7) with two inputs. When someone fills out this form and clicks on submit button I need the new form (CF7) to pop-up
with inputs already filled in with the values from the previous form and with more new inputs to fill out.
So, how can I send the variables from the first form to the second one? Any ideas?
Or maybe there is another solution?
You can catch the submit event.
Prevent default.
Get the data in the form elements.
Fill the data to DOM.
--or--
Just make a fake button writes submit on it.
Catch click event and do the same.
Create the new form with the new data.
Hello guys I need your advice on best solution to my problem....
So I have simple html form which has input boxes, selects and stuff...
One of my select field generates its options from database an when user selects any option 3 input fields are filler automatically, problem is if value does not exist I have option value to create new. If user select this option javascript redirects to a new page where new option can be created and saved to database, after that user is redirected back to form however all fields that input fields have been filled now are empty....
What is the best way to save all input values user have entered so I can navigate user to different page where he can add item to the database and redirect him back to same form and fill all fields back?
First thing that I thought to put all input values to array and using php function http_build_query() send via GET and on redirection back send same array back, but form has like 20 fields and i believe it is not best solution as sending data take server resources...
Second, Put everything to json temp file, save on the server redirect user and on redirection back get this json file and fill data back and delete file afterwards... (I like this idea most)
Third, to create hidden form (like lightbox) show this form if needed, but here comes problem on this form submit it has to redirect somewhere if I redirect to same or different page I still lose all data...
Any idea guys?
In this case will better to use popup box (lightbox). Fill it with additional form and add event handler to it on form submit. Try to use event.preventDefault() inside the handler, then attach jquery.post method:
$( "#additional_form" ).submit(function( event ) {
event.preventDefault();
$.post('post.php', $('#additional_form').serialize());
$(#lightbox).hide();
});
There's a lot of ways to do it, you can also just serialize it without sending. Or append it to your main form.
Use the given codes
$("#additional_form").submit(function(event) {
event.preventDefault();
$.post('post.php', $('#additional_form').serialize());
$(#lightbox).hide();
});
How do you validate a form but also get information from one form to the other using JavaScript?
I can get the information from a field using the getElementById, but i cannot seem to validate the form.
//Iam trying to build a drivers license renewal form
//This is my JavaScript code
//Iam retrieving from one form and showing it on a different form.
function validateForm(){ // i tried this code but it doesnt seem to work
var x = document.forms["licenceform"]["surname_value"].valueOf;
if (x == null || x == "") {
alert(" Surname name must be filled out");
return false;
}
}
How do you validate a form
Typically by adding a listener for the form's submit event, then checking that the values of form controls fit your validation criteria. You can also check values as they are entered or when focus moves off a control and it's been changed.
There is no need for getElementById, all form controls with a name are available as properties of the form and in the form's elements collection, so you just iterate over that and check values as you go.
but also get information from one form to the other using JavaScript?
If the second form is in the same page, you can get set the value of a form control based on the value of some other form control, either in the same form or another.
If the second form is in a different page, the easiest method is to submit the first form, read the value at the server and set it in the second form before sending it to the client.
Once you have made an attempt at the above, post some code here if you have further questions.
How can I get the data that is submitted from a form with jQuery?
I know I can bind the submit function to the form
$('form').bind('submit',function(){});
and I know I can serialize the data in the form:
$('form').serialize();
But how do I get the data that was actually submitted from the form? Like if there are two submit buttons, I want to know which one was pressed. If I handle the submission with PHP I can do that, but ideally I want to get a copy of the submitted data, then return true so that the form goes on to be processed by PHP normally.
Thanks!
The pressed submit button should be available in the serialized field list - and the other submit buttons shouldn't be in there.
However, apparently jQuery does not add submit buttons in there (testcase). See http://forum.jquery.com/topic/submit-event-serialize-and-submit-buttons-get-the-button-name for a workaround.
I'm trying to have users enter info into a form (via radio buttons), manipulate the input data, and write resulting text onto the middle of a web page--beneath the radio buttoned form. So I have variables assigned to whenever a user selects a radio button, the onClick event calling a function something like:
function saveValue1(value) {
someVariable=value;<br>
}
And when users click a Submit button, a function works like it's supposed to, ultimately writing an output string. The problem is how to write the string value in the middle of the page. I have this [pseudo]code at the end of the function (pretend the string I want to write to the page is named aVariable):
document.getElementById('aPlace').innerHTML=aVariable;
And of course there's HTML in the displayed page like this:
<div id="aPlace"></div>
After a user pressed the form's Submit button the correct output variable is displayed very briefly, and then disappears. Why is this? And how should I be writing this code instead?
Thanks for helping a newbie, as always.
The form is probably submitted. put a "return false" at the end to stop it submitting the form
It seems that the browser is refreshing? How is the form data handled?
If the form is needed only to add the text to the page, I would add a button
<button onclick="saveValue1("+value+");")>
and avoid submitting the form.