How to send js variables to values of contact form 7? - javascript

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.

Related

Command external field value to be sent with form

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())
})
}

html form save temp 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();
});

Cancel form submission when entries are invalid

I am working on a form with multiple fields and of course, a submit button.
How do I cancel the form submission if some fields are empty?
I tried putting a validation of javascript, input type="submit" onclick="check()" on the submit button.
But what I actually want is that, the page won't load so that, all other information in the text fields won't go away.
Like, what if the form has 100 fields and the user forgot to input one field and click the submit, it will show him an error message and all other fields will be cleared so he has to type it again.
I'm trying to prevent that.
I have multiple options to create this effect but I am currently trying to find a way on doing this.
Any other ways would be appreciated (like disabling the button when all mandatory fields are not filled, then enabling it at when everything is complete)
if the condition will be false click(event) returns false and nothing will happend
function check(){
if(validate === false)
return false;
}
Enjoy :)
You can simply return false from inside your check function to prevent the form from submitting.

How do I get the data submitted from a form with JQuery?

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.

How do you write strings to the middle of a web page?

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.

Categories