We Keep Coding

how can i store value from toggle button

how can i get value in PHP code using bootstrap toggle button and after that i want to add hidden field also for edit page in which toggle button remember status (Locked/Unlocked). My code is:
<input type="checkbox" id="toggle-one">
<script>
(function() {
$('#toggle-one').bootstrapToggle({
on: 'Locked',
off: 'Unlocked'
});
})
</script>

You need to pass the value(s) to a PHP script/page, a very convenient way is to make an AJAX call to a PHP page, giving it the values you want via GET or POST.
Then on the PHP page you can retrieve those values with $_POST[] or $_GET[].
Don't forget that JS/JQuery are on client side, while PHP is on server side.

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.

Form submission string concat/modify

So not sure if this is possible but I have a pretty complex form. With multiple levels of processing ie: If you click a radio button 'x' amount options so up in a drop down etc etc.
Well the problem I have is all the form fields need a name, and went I submit the form I'm sending alot of junk. IE Url could be '?meat=3434?fruit=34495?salad=034943' you get the idea. But in the end all I'm looking to is pull the 'salad' value into the url without all the other byproducts. IE: '?salad=034943'
I've tried a few things, pulling all the inputs radios etc out of the form and placing them in a div. The making a form with just a hidden value so I can pull through Mootools (But that made conflicts because I'm using Mootools Form.Validator so then that fails) Then I tired to make two forms, One that would just be all show, then I would pull the value I want into the processing form. Which I thought would work but apparently it still will process both forms.
Any ideas/techniques of how to accomplish this would be greatly appreciated! (because I'm losing my mind)

Disable any form field you don't want sent and it won't show up in the URL.
In HTML it's:
<INPUT type="text" name="foo" DISABLED>
In javascript set document.forms[...].elements[....].disabled = true.
If you hide the field with CSS it will still be sent like normal.

the elegant way you do this is mount your GET url to submit by yourself..
this way you can send only what you want..
dont send any junk.. you can have problems in the future with a variable that you didnt know you were sending..
you can use this util function of jQuery
var params = { width:1680, height:1050 };
var str = jQuery.param(params);
// str is "width=1680&height=1050"

Submit form values to a script without loading a new page

I have an issue regarding sending form values to a script. I have a form set up, and upon the user pressing a button I want the values in the form to display on another part of the page. I can easily do this with php or another web scripting language, but all I know is how to do this by sending it to the script in a form of
http://www.example.com/myScript.pbp?value1=VALUE
is there a way to do this without loading a new page? Like just show a loading overlay on the page until the script completes and displays the value on the page?
I'm guessing this would be accomplished using Javascript or Ajax or something like that.
If anyone could help me out, or even just say where I should start to look, I'd really appreciate it!

Indeed. Just attach an onsubmit event listener to your form that always returns false to prevent actual sending of your form via the usual GET or POST request.
In your event listener you can send the form values using XMLHttpRequest and let the callback function update the relevant part(s) of your page.
But remember to always create a fallback option (with the usual GET or POST request of the form) to handle your form in case JavaScript is not available (e.g., turned off, blocked, etc.).

Yes AJAX would be exactly how you would do it. Have a look at the tutorial over at Tizag: http://www.tizag.com/ajaxTutorial/index.php
That will get you started in no time at all.

If you just want the values in the form to display on the page again without any interaction with the server then something like jQuery would be the best approach.
Jquery has a nice form plugin that you can do the following:
var form_values = $('#form_name').formHash();
the form_values will then be a hashed array of your form values in the system i.e.
<form id="test">
<input id="test1" name="test1" type="text" value="Test Text"/>
</form>
So form_values['test1'] would hold the value Test Text in it
Once you have the values you could then use some other jquery functions to display them on the page i.e.
<div id="displayDiv"></div>
then your javascript could be
for (key in form_values) {
$('div#displayDiv').append('<div>Key: ' + key + ' Value: ' + form_values[key] + '</div>');
}
This would put your values in the display div

Here is a simple javascript ajax object. You can use without loading any library.

How do I take input/output from a form and store it in a JS variable?

I am creating the UI of a web app, and haven't done any back-end work yet.
For testing purposes, I want my forms to be able to work, so I want to take the input they have received and store it in javascript variables so I can access them, using jQuery.
Everything I have looked at, tells me how to pass js variables into the form, not the other way around.
Any ideas?
Thanks.

var variable = $('#myInput').val(). Or if your form is submitting using GET, you may want to look at the jQuery URL Parsing plugin to get access to the variables on the new page.
Edit:
Sample form (should be a simple text box):
<html>
<body>
<form action="#">
<input type="text" id="myInput" name="myInput"/>
</form>
</body>
</html>
With that form you can use the above sample code. Incidentally, you can use the .val() method on any jQuery selector that returns form elements, e.g. $('input:text').val() will get you the value of all text input fields (as an array if there are multiple values).

I ran across this pretty awesome question on how to serialize a form to JSON with jQuery which would be a good start.
You can also take a look at the jQuery Form plugin which provides the formSerialize method that
Serializes the form into a query string. This method will return a string in the format: name1=value1&name2=value2
as well as a fieldSerialize method which
Serializes field elements into a query string. This is handy when you need to serialize only part of a form. This method will return a string in the format: name1=value1&name2=value2