We Keep Coding

Change or update the visible part of query string in the browser address bar using JS or jQuery?

I am wondering is there any solution to change or update the URL's query string part (visible in the browser's address bar) with some new values by clicking on some checkboxes through JavaScript or Jquery. I want to do this without any jQuery plugin.
When the user will click on any checkbox in a group then the data will be fetched from the database based on the user's selected value of checkbox. Along with it, the query string of URL will also be changed with new updated value. Note that the page will never be reloaded in this whole procedure. We can run through AJAX when checkbox is checked. How we can achieve this? A demo will be very much appreciated.

Yeah, this is a very common thing to do. window.replaceState is the function you're looking for. Alternatively you could also use pushState if you want to allow the user to be able to go back to the previous state of checkboxes, but that's more work and not always expected.
Then again, you actually need something to change one URL into another. Manipulating the URL as string is counter productive, so instead you can use a library like URI.js.

Use window.history like so :
window.history.pushState('page2', 'Title', '/new-uri');
For your case , you will have 2 nested functions: Event Listener which contains AJAX call + Callback of this ajax call :
$('[input]').change(function(){
if(this.checked){
//AJAX
$.get("URL",{},function(data){
//AJAX - Callback
window.history.pushState('page2', data.title, data.url);
});
}
});

Automatically updating a PHP variable when a radio button or dropdown menu item is selected

My classmates and I are building a small submission form in which a user submits shipping and billing information for their order.
The two main factors that effect the order price are the type of shipping the user selects ( $shippingType ) and the price of the item ( $initialPrice ). The variable $totalPrice is then defined which adds $shippingPrice and $initialPrice.
What we are working towards is having $totalPrice update when $shippingPrice is changed without the user having to resubmit the form. Can this be solved using php? Or would we have to use a jquery event to update the page in realtime.

You'll want to use some sort of jQuery as mentioned above. It's important to understand that PHP is only used either in AJAX, or before the page has loaded. Meaning you cannot use PHP on a page that has already been loaded. To change elements after it's loaded you would need to use javascript/jquery of some sort. I've attached a quick fiddle to illustrate an example of what I think you're looking for.
The gist of it is that you would bind a change event so that when the elements you want to use for mathing are changed you can update the other items.
$('#shipping').bind('focus, change', function() {
//Get the inital value of the #cost input
var initial_val = parseInt($("#cost").val());
//Value from the #shipping input
var additional = parseInt($("#shipping").val());
//Parsed ints because '+' is used for concatination as well, so making the vars ints will make '+' go back to math.
$("#cost").val(initial_val + additional);
});
No it's not the prettiest, but it works.
Here's the Fiddle:
http://jsfiddle.net/Lb486ck8/2/

You will have to use Javascript to accomplish this behavior. Furthermore, you will need to use AJAX (Asynchronous Javascript And XML) to make it work. AJAX is a way for Javascript to send requests to a web page "behind the scenes" while your page stays in the foreground.
http://api.jquery.com/jQuery.post/

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 can 2 Html forms share 1 hidden field?

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.