How can 2 Html forms share 1 hidden field? - javascript

I have a page with 2 forms and a hidden field that is outside of both of the forms.
How can the hidden field be submitted with either of the forms?
I thought about doing something like this with jQuery:
<script type="text/javascript">
$(function() {
$('form').submit(function() {
// do something to move or copy the
// hidden field to the submitting form
});
});
</script>
Will this work? Any other ideas?
EDIT
The hidden field stores a serialized object graph that doesn't change. Both server methods require the object. The serialized object string can get pretty hefty, so I don't want this thing sent down from the server 2 times.

You can simply inject a copy of the element into each form right before submission.
This way, you can have the option of having different information for each hidden form field without affecting the other.
Something like this:
<script type="text/javascript">
$(function() {
$('form').submit(function() {
$("#hidden_element").clone().appendTo(this);
});
});
</script>
If you want to use the exact same element for both forms without creating a fresh copy, just don't use clone()
See documentation for clone() and for appendTo()
EDIT:
If you don't want to send the hidden element with every request the form sends. Consider storing it in the database for that user for that time. You can submit its content once, and once only for every page reload, and then just send the database id of the hidden element with each form post.
On page load, something like this:
$.post("page.php", { reallyBigObject : $("#hiddenfield").val() }, function(insertedID){
$("#hiddenfield").val(insertedID);
});
Then, in the server side code:
//insert $_POST["reallyBigObject"] into databse
//get the just inserted id (in php it's done with mysql_insert_id())
//echo, or print the just inserted id, and exit
This way your js gets the callback.
Now, you can submit the form as you would, but this time, you're only sending the id (integer number) to the server.
You can then simply delete the object from your server (run a cron to do it after X amount of time, or send another request to delete it.
Honestly, though, unless you object is HUGE(!!), I think storing it by submitting it only once is a lot more complex to execute than to simply send two requests to the server.
Let me know if you have any other questions...

With HTML5, you can include a "form" attribute with an input element. The value of the form attribute is the id of the form(s) the field belongs to. To include the field in more than one form, include all form ids in a space-delimited list. Unfortunately, the form attribute is not supported in IE at all (as of IE 9). FF and Chrome support start in version 4 and 10 respectively.

Append the field to both forms at page load:
$(function() {
$('#form1, #form2').append($('input[name=fieldName]'));
});

Assuming you are doing a non ajax submit you could just append the field into the form being submitted. However if you need this info in both forms is it not better to store this value server side in a session store. This way any non js clients will also work!
$(function() {
$('form').submit(function() {
$('input.yourhiddenSubmit').appendTo(this);
});
});

The only way to pass the variable to the next form is to have that variable in the data that is passed when the form is submitted (either GET or POST), unless you want to use AJAX. Assuming you want to have the hidden variable outside of the actual form for a "good reason", I would recommend using jQuery to include the hidden input field into the form just before submission, like so:
<script type="text/javascript">
$(function() {
$('form').submit(function() {
$(this).append("<input type='hidden' name='hiddenField' value='"+$("#hiddenField").val()+"' />");
return true;
});
});
</script>
Replace all the instances of "hiddenField" with the ID of your hidden field outside the form. This will create a new input inside of the form just before it is submitted with the value of the hidden field that is elsewhere on the page.
Beyond that, you'd have to be a bit more specific about what your exact problem was (and why the field isn't being included in the form) for me to help.
Note that the above code should work in theory, but I didn't have a chance to actually test it out myself.

Related

jquery validate plugin, validating form fields of only current screen

I am using jquery validate plugin to validate form fields . I am also using jqtree . on click of every child node a section of form is visible to user, which is supposed to be filled with values.For every child there is a form content to be filled. Entire tree content is declared within one form only. I have a button in the form which on click generates json file. I am calling the function below to validate form
$("myform").validate();
....
if($("#my-form).valid())
generate the json file
but this is not validating the entire form. suppose I am on childNode1 it validates only form section defined for childNode1. As far as I have understood jquery validate plugin should validate entire form when correct form id is specified. But can anyone tell me what has gone wrong in my approach?
The .validate() method does not "validate the form". It only initializes the plugin on the form. .valid() will programmatically trigger a validation test.
Your code:
$("myform").validate();
....
if($("#my-form).valid())
generate the json file
$("myform") - Is that supposed to be an id, class, or name? As you've written it, it's looking for a <myform></myform> element.
$("#myform") // id="myform"
$(".myform") // class="myform"
$("[name='myform']") // name="myform"
Is your form element called myform or my-form? If it's the same <form> element, then the two jQuery selectors would be the same.
$("#my-form) is missing the closing quotation mark.
If the id of the <form> element is "myform", then your code should be...
$("#myform").validate(); // <- initialize the plugin
....
if ($("#myform").valid()) { // <- test the form's validity
// generate the json file
....
}
OP Title: jquery validate plugin, validating form fields of only current screen
Your question does not seem to have anything to do with the title. There is only one form described in your OP, and since this is JavaScript, only the page that's loaded in the browser is relevant. Not sure what you mean by "current screen".
but this is not validating the entire form. suppose I am on childNode1 it validates only form section defined for childNode1. As far as I have understood jquery validate plugin should validate entire form when correct form id is specified.
By default, the plugin will not validate any form fields that are hidden. You would manipulate the ignore option to over-ride this behavior. Setting ignore to [] will tell the plugin to ignore nothing and validate all fields including the hidden ones.

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

Wanted to hide the parameters on javascript form submit?

My URL looks like the below format:
http://hostname:8080/search/?N=4294967292&Ntt=abcdef&add=1&Nr=AND(OR(a:abc,a:def,a:ghi),OR(b:abc,b:def,b:ghi));
I am submitting a form through javascript submit. I wanted to hide the Nr parameter value while submit the form.
My piece of code below:
$(".apply-btn").click(function(){
var nr=loadQuery();
var submitUrl = window.location.href;
submitUrl=submitUrl+nr;
$('#myForm').attr('action',submitUrl);
$('#myForm').submit();
});
any help on this..?
You can't.
You are asking the user's browser to send data to a server. The user can inspect that data.
The closest you could come would be to make a POST request instead (by submitting the form with the data in actual form fields instead of generating a custom action via JS). The information would still be visible in the Net tab of the developer tools that come as standard in most browsers these days.
create a hidden field in the form with the name Nr
set the value of the hidden field to the value of nr (instead of appending nr to the URL)
set the method attribute of the form to POST
set the action attribute of the form to the value of window.location.href
submit the form
Well you could use a POST request plus SSL to encryp your requests. As Quentin said, this also would not stop the user from seeing your request with the developers tool bar, but during the submission it is encrypted.

How to set a hidden field value on a page from other page?

I have one page(suppose first page) where I have a hidden Field control. Now from this page I need to go to another page(second page), but I am not using window.open method instead of that I am using document.form.submit() method. Now from second page I need to set the value of hidden Field which is on first page.
Because I am not using window.open() method so I can not use parent.window.opener for setting the value of hidden field.
So is there any way I can set the hidden field value from second page to first page.
(Again I am using document.form.submit() method from second page to go to first page).
Thanks.
You should use server side code to get the values submitted from previous page.
The form values automatically send the values in the form
OR
If you use get method, with the help of javascript you can get and assign the values
Check this
By Using SERVER Side Scripting Language like PHP, ASP, JSP etc.
Below is the example of PHP scripting language.
<form action="first.php"> ... </form>
In first.php:
<?php
echo $_GET['your input textbox name']; // if you define the **METHOD** as **GET** of form html element
or
echo $_POST['your input textbox name']; // if you define the **METHOD** as **POST** of form html element
or
even you can use like this: echo $_REQUEST['your input textbox name']; // it works for both **POST** or **GET**
?>
Form2 writes data to cookie or local db.
Start a timer on form1 after you open form2, check the data continuously.

Simple form that redirects with query string from field

I am brushing up on my HTML while in the process of learning django and am wanting to create a form (single field and button). The button, when pushed should redirect to a page with the value in the form as a query string. For example, if the user types in "test", then pushes the button, they should be redirected to "webpage.com?test".
Am I correct in thinking the best way to do this is with javascript? If so, would anyone mind providing an example?
Thanks!
document.forms[0].addEventListener('submit', function() {
window.location.href = 'webpage.com?fieldname='
+ document.getElementById('yourfieldid').value;
}, false);
since you haven't posted any code i just took the first form on the page and found a fictitious field to use as the query string parameter.
You can do the redirection directly with javascript:
location.href = "webpage.com?" + your_variable
Or make a form that is targeted at webpage.com which has an input area named test. in this way, when it is submitted the test value will automatically be added to the url.
When you click on the button change that value and submit the form:
$('#button').click(function() {
$('#your_test_field').val(your_variable);
$('#your_form').submit();
}
window.location.href="mypage.php?arg="+variable

Categories