We Keep Coding

Copy input value text and paste/add to another input value text?

I want to copy this input from page A and paste to page B
Let say this is Page A :
<input type="text" class="Name" id="cName" Value="Hey" readonly/>
<input type="number" class="Qty" id="cQty" Value="1" readonly/>
<input type="text" class="Price" id="cPrice" Value="10" readonly/><button class="" id="copy">Copy/?Add to Page B?</button>
This is Page B:
<ol><button class="" id="add">Add</button>
<li>
<input type="text" class="Name" id="pName" Value="" readonly/>
<input type="number" class="Qty" id="pQty" Value="" />
<input type="text" class="Price" id="pPrice" Value="" readonly/><button class="" id="cancel">Cancel</button>
</li><input type="text" class="Name" id="" Value="" readonly/>
<input type="number" class="Qty" id="tQty" Value="Total Quantity" readonly/>
<input type="text" class="Price" id="tPrice" Value="Total Price" readonly/></ol>
I read that I can't copy and paste, so is there another way of it? like adding Page A input text straight to Page B input text, like "add to shopping carts?"
Thanks for all the expert here.

If you have no option to use server-side programming, such as PHP, you could use the query string, or GET parameters.
In the form, add a method="GET" attribute:
<form action="b.html" method="GET">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
When they submit this form, the user will be directed to an address which includes the serialNumber (for example) value as a parameter. Something like:
http://www.example.com/display.html?serialNumber=XYZ
You should then be able to parse the query string - which will contain the serialNumber parameter value - from JavaScript, using the window.location.search value:
// from b.html
document.getElementById("write").innerHTML = window.location.search; // you will have to parse
// the query string to extract the
// parameter you need
See also JavaScript query string.
The alternative is to store the values in cookies when the form is submit and read them out of the cookies again once the b.html page loads.
See also How to use JavaScript to fill a form on another page.

You can take this value either by form post method or use browser cookies and very easy to implement.
And the methods varies as per your programming language.

Hiding and showing Divs with form validation

Upon submit I am trying to have "quiz" hide and have "thanks" be shown. All was working correct until I added a JavaScript form validation code, and now it just reloads the first div "welcome" I thought adding "#thanks" to the action upon submit would solve the issue, but it did not. Then trying to add an "if true" statement to my form validation ended up breaking the form validation. I am using jquery.validate to validate my form as suggested. With the current code it skips the validation and just shows "thanks" If anyone has any suggestions it would be greatly appreciated.
<div id="quiz">
<form class="cmxform" id="commentForm" method="get" action="" onSubmit="showHide(); return false;">
<label for="cname">Name</label>
<input id="cname" name="name" size="20" class="required" minlength="2" />
</p>
<p>
<label for="ccompany">Company Title</label>
<input id="ccompany" name="company" size="20" class="required company" minlength="2" />
</p>
<p>
<label for="cnumber">Phone Number</label>
<input id="cnumber" name="number" size="20" class="required number" />
</p>
<p>
<label for="cemail">Email</label>
<input id="cemail" name="email" size="20" class="required email" />
<p></p>
<input class="submit" type="submit" value="Submit" align="center"/>
</form>
</div>
<div id="thanks"><h2>Thank you.</h2>
You will receive an email momentarily
</div>
<script>
$("#begin").click(function(){
$("#quiz").show();
$("#welcome").hide();
});
function showHide(){
$("#thanks").show();
$("#quiz").hide();
};
</script>

All I can say is that you are doing it wrong.... While the form validation that you are doing can work there are a lot of good form validation jquery plugins that would both simplify your life and add a much richer user experience. jquery.validate is probably the most widely used library and would be well worth using.

jQuery selector for selecting an input field with a class

I have
<input type="text" class="required" value="XXX" name="abc">
<input type="hidden" class="required" value="XXX" name="abcd">
<input type="text" class="required" value="XXX" name="abcef">
i have many input fields like this.
i need a jQuery selector where i can select a text field whose class is required
right now to select textfield i use $(':input[type="text"]')
how do i also put a condition to select class="required."
EDIT
so say now i have the following input fields
<div id="validate_info">
<input type="text" class="required" value="XXX" name="abc">
<input type="hidden" class="required" value="XXX" name="abcd">
<input type="text" class="required" value="XXX" name="abcef">
<input type="password" class="required" value="XXX" name="abcefg">
<input type="text" value="XXX" name="abcefgsa">
<input type="password" value="XXX" name="abcsaefg">
</div>
i need one selector that can select all type="text", type="password" which has class="required"
i tried
$('#validate_info $("input.required").filter("[type="password"],[type="text"]")');
but this doesnt seem to work.

$(':input.required[type="text"]')
EDIT:
This will be slightly faster:
$('input.required[type="text"]')
Note:
:input will get all form elements (<select>, <textarea>, etc.)
input will only get <input> elements, and is slightly faster.

$('.required:input[type="text"]')
(also $('input.required[type="text"]'))

$(':input[type="text"][class="required"]')
That should work
http://jsfiddle.net/ck8wt/
Edit
lol ... I couldn't see the forest through the trees. :P I'll leave mine up too though just as an illustration of how many ways this can be done. XD

If you just add the class to your selector, it should do what you are looking for.
$('.required:input[type="text"]')

Form submit fails to generate query parameters if input element's are in multple div's

If I have a form element as given below, then calling the form's submit will automatically generate the request body/query parameters in the url-encoded form as "username={username}&password={password}&submit=submit" where values in {} are taken from the corresponding input element's text boxes.
<form action="/action.php" method="POST">
<input id="username" type="text" />
<input id="password" type="password" />
<input type="submit" id="submit" value="submit" />
</form>
But if I am going to place my input elements in multiple levels of div's, then the form submit will fail to generate the request body/query parameters.
<form action="/action.php" method="POST">
<div id="inside_formdiv">
<div id="userdiv">
<input id="username" type="text" />
</div>
<div id="passworddiv">
<input id="password" type="password" />
</div>
<div id="submit_div">
<input type="submit" id="submit" value="submit" />
</div>
</div>
</form>
Can anyone tell me the reason why it is like that? The specification doesn't mention that the input elements should be immediate children of Form element. I was wondering a proper reason for this behavior.
The values will be populated to the elements and you can check the values also if you edit the changes as given below
<script type="text/javascript">
function logincheck() {
alert ('hi ' + document.getElementById('username').value);
alert ('hi ' + document.getElementById('password').value);
}
</script>
<form action="/action.php" method="POST">
<div id="inside_formdiv">
<div id="userdiv">
<input id="username" type="text" />
</div>
<div id="passworddiv">
<input id="password" type="password" />
</div>
<div id="submit_div">
<input type="submit" onclick="logincheck()" />
</div>
</div>
</form>

A bit more detail:
I am assuming you are using PHP for the rest of this, you can substitute any other server side language.
You are missing the name attribute on your inputs. Unless you are actually using the id attributes for something you can get rid of them. Form data is listed by the name attribute - for instance the PHP $_GET, $_POST, and $_REQUEST arrays which will be keyed by names of your inputs. No name and the data is ignored.
You can also create an array of inputs by using a pair of brackets after matching names.
Example:
<input name="answers[]" type="text" id="answer1" />
<input name="answers[]" type="text" id="answer2" />
This will create one GET/POST entry that is an array. It will have the key answers with two elements inside the array.
For checkboxes, you will only get a value in the GET/POST when they are checked. You will not get a result if it isn't checked. Important to know. If someone, for instance, turns something "off" you will need to know the list of original inputs to compare against.

The first thing I notice is that your inputs are missing the "name" attribute. It's not required by the HTML spec afaik, but I think this is why the values are not sent with the request.
<form action="/action.php" method="POST">
<div id="inside_formdiv">
<div id="userdiv">
<input id="username" name="username" type="text" />
</div>
<div id="passworddiv">
<input id="password" name="password" type="password" />
</div>
<div id="submit_div">
<input type="submit" onclick="logincheck()" />
</div>
</div>
</form>
This should do the trick

The input elements don't have to be directly inside the form element! they can be inside divs tables etc... How about trying to use names along with the ids in the text fields, like the following:
<input type="text" id="username" name="username" />
note the name="username" in the previous example -
to all input elements.

Handling of two forms in one webpage

I have a webpage with a div area. In this area, there can be two different forms.
It looks like this:
Form 1:
<div id="data" ...>
<form action="/action1" method="post">
<label for="label1">ID</label>
<input type="text" name="id" id="label1" value="" />
<label for="label2">Name</label>
<input type="text" name="name" id="label2" value="" />
<label for="label3">Description</label>
<input type="text" name="desc" id="label3" value="" />
<label for="label4">Address</label>
<input type="text" name="address" id="label4" value="" />
</form>
</div>
Form 2:
<div id="data" ...>
<form action="/action2" method="post">
<label for="label1">ID</label>
<input type="text" name="id" id="label1" value="" />
<label for="label2">Firstname</label>
<input type="text" name="first" id="label2" value="" />
<label for="label3">Lastname</label>
<input type="text" name="last" id="label3" value="" />
<label for="label4">Address</label>
<input type="text" name="address" id="label4" value="" />
<label for="label5">eMail</label>
<input type="text" name="mail" id="label5" value="" />
</form>
</div>
So there are two different forms. The values will be set with jQuery (Ajax call to the backend).
What is the best way to handle these two forms? Should I create two files with only the form and the load the form when they are needed? (Form 1 is needed if some clicks on button 1, form 2 is needed if someoe clicks on button 2 - the events are handled on client-side).
Or should I place both form into the single HTML file and enable or disable the form?

There's nothing stopping you have both forms in the HTML and conditionally hiding/showing the one that you want active. You're best bet is to give each form (or its containing div) a unique ID, and using this to show/hide using jQuery.

I think you should keep both the forms in the same page. And show/hide the required form as per the requirement.
Because if you keep the forms in separate HTML files, and user clicks on any button, then you'll have to make a XMLHttpRequest to get the HTML of form, whereas you can easily avoid this extra HTML request by including the HTML of the form in the same page.
I don't know if your website audience is so large or not. But saving a single HttpRequest should be very helpful.
See the article Minimize HTTP Requests by Yahoo developers. They clearly suggest to minimize HTTP requests.