Develop Reference

How can I add a div around two elements yourself using JQuery? [duplicate]

How would I go about using wrap() to wrap multiple elements (with different classes) inside a <div>?
For example, on the form I'm working on there is a big list of checkbox inputs and labels in the form of:
<input>
<label>
<input>
<label>
etc
I'm wanting to wrap a <div> around the input and label, so the result would be:
<div>
<input>
<label>
</div>
<div>
<input>
<label>
</div>
Thanks!

You can use the .wrapAll() method.
$('form > input').each(function(){
$(this).next('label').andSelf().wrapAll('<div class="test"/>');
});
If your markup has always the exact same order, I'd prefer to use:
var $set = $('form').children();
for(var i=0, len = $set.length; i < len; i+=2){
$set.slice(i, i+2).wrapAll('<div class="test"/>');
}
Should be significant faster.
Ref.: .wrapAll(), .andSelf(), .slice()

$('input+label').each(function(){
$(this).prev().andSelf().wrapAll('<div>');
});​

If you have something like this:
<input id="input1">
<label id="label1">
<input id="input2">
<label id="label2">
Then you can use jQuery:
jQuery("#input1").next().andSelf().wrapAll('<div id="newDiv" />');
jQuery("#input2").next().andSelf().wrapAll('<div id="newDiv" />');
and get this:
<div id="newDiv">
<input id="input1">
<label id="label1">
</div>
<div id="newDiv">
<input id="input2">
<label id="label2">
</div>
Worked for me :-)

jQuery function wrapAll allows you to wrap multiple elements but if you have a DOM like you wrote then it won't work too well as you can't easily match a part of label and input with a selector. I suggest adding some classes to each part and then using wrapAll.
<input class="i1"/>
<label class="i1"/>
<input class="i2"/>
<label class="i2"/>
$('.i1').wrapAll('<div/>');
$('.i2').wrapAll('<div/>');
This will give you
<div>
<input class="i1"/>
<label class="i1"/>
</div>
<div>
<input class="i2"/>
<label class="i2"/>
<div>

Removing novalidate to a particular field

How can i remove the property of required to the Second Element "Second Name" ?
Here is my Code :
<form action="#" novalidate>
First Name:
<input type="text" name="first" required>
Second Name :
<input type="text" name="second" required>
<input type="submit">
</form>

You can set required property to false
$("input[name=class]").prop("required", false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Name: <input type="text" name="name" required>
Class: <input type="text" name="class" required>
<input type="submit">
</form>

Using jQuery you can do:
$('input[name=second]').prop('required', false);
Example

Try using .removeAttr().
$('input[name="class"]').removeAttr('required')

Try this:
$('input[type="text"][name="second"]').prop('required', false);
it just removes the required property on the target element which has the name "second".

you can use the
removeAttribute command:
First set ID's for the inputs.
I set it to the same value as the name.
Next removeAttribute
document.getElementById("class").removeAttribute("required");
This should do the trick ;)
Here, have a fiddle:
Fiddle

Set Ng-model data with math

I have a problem with AngularJS. In my form I have a couple of input's. I have to do some math with the data, and then save it. But because I use Angularfire I have to assign the result to a ng-model, and that's where i'm stuck. How can i do this?
Here's my code:
<label>First</label>
<input name="firstmatch" ng-model="project.firstmatch">
<label>Second</label>
<input name="secondmatch" ng-model="project.secondmatch">
<label>Third</label>
<input name="thirdmatch" ng-model="project.thirdmatch">
<label>Fourth</label>
<input name="fourth" ng-model="project.fourthmatch">
<label>Fifth</label>
<input name="fifthmatch" ng-model="project.fifthmatch">
<!-- The math part-->
<textarea name="points" ng-model="project.points"> {{ project.firstmatch--project.secondmatch--project.thirdmatch--project.fourthmatch--project.fifthmatch }} </textarea>
Thanks!

Why do you print the result in a textarea? Textareas don't accept code by default. Just try printing the result in a div or span.
If you by any means want the result to be editable then print it in another input and don't do the calculation inside it. Do the logic in the controller, like this:
<label>First</label>
<input name="firstmatch" ng-model="project.firstmatch">
<label>Second</label>
<input name="secondmatch" ng-model="project.secondmatch">
<label>Third</label>
<input name="thirdmatch" ng-model="project.thirdmatch">
<label>Fourth</label>
<input name="fourth" ng-model="project.fourthmatch">
<label>Fifth</label>
<input name="fifthmatch" ng-model="project.fifthmatch">
<!-- The math part-->
<input type="text" name="points" ng-model="project.points" />
And than in the controller write:
$scope.project.points = $scope.project.firstmatch - $scope.project.secondmatch - $scope.project.thirdmatch - $scope.project.fourthmatch - $scope.project.fifthmatch;

Data manipulation with div classes and forms

How to take content from a div class one by one and then load it into array? Then I need to insert these one by one to some other div class.
Basically, I have 2 forms, one of which is dummy and this dummy gets its content from CMS. The dummy form is hidden, while real form is shown, but empty at first.
I need to use jquery to take dummy text from form and insert it to real form.
Something like this:
<form name="real" method="post" action="">
<input type="text" name="first" id="a"/>
<input type="text" name="second" id="b"/>
<input type="text" name="third" id="c"/>
<input type="text" name="fourth" id="d"/>
<input type="submit" value="submit"/>
</form>
<form name="extract" style="display:none;">
<div class="generic">data_1</div>
<div class="generic">data_2</div>
<div class="generic">data_3</div>
<div class="generic">data_4</div>
</form>
must become something like this:
<form name="real" method="post" action="">
data_1 <input type="text" name="first" id="a"/>
data_2 <input type="text" name="second" id="b"/>
data_3 <input type="text" name="third" id="c"/>
data_4 <input type="text" name="fourth" id="d"/>
<input type="submit" value="submit"/>
</form>
Is there a way to do this?
Thanks!

There are many ways to do this. For example:
$('[name=extract] div').each(function(index){
$('[name=real] input:eq('+index+')').before($(this).text());
});
http://jsfiddle.net/seeSv/
edit: here are the api pages to the methods used:
http://api.jquery.com/attribute-equals-selector/
http://api.jquery.com/each/
http://api.jquery.com/eq-selector/
http://api.jquery.com/before/

You may want to check out the jQuery DataLink Plugin

I'll offer this version:
$('.generic').each(
function(i){
$('input:text').eq(i).val($(this).text());
});
JS Fiddle demo.
Assumptions:
a 1:1 ratio between div.generic:input[type=text]
References:
each(),
:text pseudo-selector
eq().

jQuery serialize function with multple forms

I'm using the jQuery .serialize function and can't get it to serialize the proper form on submit.
my js code:
function getquerystring(form) {
return $("form").serialize();
}
my forms:
<div class="leave_message_box">
<form name="leave_message_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="leave_message" />
<input value="Leave Message" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "leave_message_form")'></p>
</form>
</div>
<div class="outside_job_box">
<form name="outside_job_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="ouside_job" />
<input value="Outside Job" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "outside_job_form")'></p>
</form>
</div>
I must be doing something wrong in passing the variable. the full code # pastie. The function I have does work, however, its always the last form that gets submitted.

Using this code:
$("form")
will find all the <form> elements in your document.
Given that form is a string containing the name of the form, what you want instead is this:
$("form[name='" + form + "']")
Looking at your supplied code, I have this suggestion. Instead of passing the form name to your function, why not just pass the form itself?
<button onclick="xmlhttpPost('blah', this.form)">
You also don't need to put javascript: in the onclick, onfocus, onwhatever properties.

I would suggest putting an ID attribute on the form and then using that ID as an explicit selector for jQuery:
<div class="outside_job_box">
<form id="outside_job_form" name="outside_job_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="ouside_job" />
<input value="Outside Job" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "outside_job_form")'></p>
</form>
</div>
Then you would select and serialize it like this;
var f = $("#outside_job_form").serialize();
Not only making your code more effecient but more readable, in my opinion.

If the sole purpose is to encode simple text into URL format then use encodeURIComponent().