We Keep Coding

How to wrap price in span regexp?

I'm trying to wrap the price of an item in a span. Right now the RegExp wraps the numbers but not the $ (dollar sign). I need a regex that wraps the entire price.
HTML
<fieldset>
<label>
<input>Thing $4.99</input>
</label>
</fieldset>
JQUERY
var rxp = new RegExp("([0-9]+\.?[0-9]+)", "gm");
$( "fieldset label" ).each(function() {
var $this = $(this);
var content = $this.html();
console.log($(this).html());
$this.html(content.replace(rxp, "<span>$1</span>"));
});

This is not the correct way to do it. html() method will return you html markup, but changing it will not change the DOM. Instead you should empty your parent and append new span in it. Also you are using input tag in a wrong way, it can't have children, you should set value to value attr:
// HTML
<fieldset>
<label>
<input value="Thing $4.99" />
</label>
</fieldset>
// JavaScript
var priceRegExp = /^.*(\$[0-9](\.[0-9]{2})?).*$/;
$("fieldset label").each(function() {
var $this = $(this);
var inputVal = $this.children('input').prop('value');
var price = priceRegExp.exec(inputVal)[1];
$this.empty().append('span').text(price);
});

Get files from form without querying for input field

I'm trying to upload files using AJAX. However, I'm having issues grabbing the files from my form. I want to gather all the
<input type="file">
fields that are nested within the form, without using their specific ids. So, not like this:
console.log($( "#i_dont_want_to_query_for_this_id" )[0].files);
//FileList {0: File, length: 1}
I feel there must a be way to get them from the form element itself:
<form class="part-form">
...
<input type="file" id="i_dont_want_to_query_for_this_id">
</form>
This is how I handle the submit:
$( ".part-form" ).each(function () {
var $me = $( this );
$me.on('submit', function (event) {
event.preventDefault();
var formElement = $me[0];
var fd = new FormData(formElement);
...
}
I guess this can also be achieved using classes and each() on these, but I feel there must be a way to grab all files in a submitted form by simply using the data in the form itself, I just cannot find it.
Any help is greatly appreciated!

You can use an attribute selector like $("file[type=input]") to get all the file inputs. Here's a fiddle.
$(document).ready(function() {
$( ".part-form" ).each(function () {
var $me = $( this );
$me.on('submit', function (event) {
event.preventDefault();
var $resultDiv = $("#result-div");
$me.find("input[type=file]").each(function(index, fileInput) {
for(var i = 0; i < fileInput.files.length; i++) {
// Do whatever you really want to do with the file.
var $span = $("<span />");
$span.text(fileInput.files[i].name);
$resultDiv.append($span);
}
})
});
});
})

Use can use selector $("input[type='file']")
$(document).on('change', 'input[type="file"]', function(){
console.log($(this)[0].files)
alert($(this)[0].files)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="part-form">
...
<input type="file" id="i_dont_want_to_query_for_this_id">
<input type="file" id="i_dont_want_to_query_for_this_id2">
</form>

Sending one of multiple forms with jQuery

I'm doing a thing like the follow-:
$.each(data2, function(key2, val2) {
$('#posts').append('<div class="send_comment" align="right">');
$('#posts').append('<input type="hidden" class="com_post_id" value="'+i+'"><br /\>');
$('#posts').append('Author: <input type="text" class="com_author"><br /\>');
$('#posts').append('Img: <input type="text" class="com_img"><br /\>');
$('#posts').append('Text: <input type="text" class="com_text"><br /\>');
$('#posts').append('<button class="new_comment">Send</button>');
$('#posts').append('</div>');
});
How can I send these fields with $.post? With $(this), I can get the clicked element, but then?

Since it is dynamically injected element,you should bind the functionality using jQuery on
$(function(){
$(".send_comment").on("click",".new_comment",function(e){
e.preventDefault();
var item=$(this);
var postId=item.parent().find(".com_post_id");
var author=item.parent().find(".com_author");
var msg=item.parent().find(".com_text");
$.post("yourPage.php", { id : postId, author:author ,msg:msg },function(result){
//do whatever with result
alert(result);
});
});
});
http://api.jquery.com/on/
jQuery on will work on current and future elements.

data = $(this).closest('form').serialize()

I always found the modal form example from jqueryui's site as a good example of how to send data from a form: http://jqueryui.com/demos/dialog/#modal-form
Essentially give your fields ids, then:
var author = $( "#author" ),
image = $( "#image" ),
text = $( "#text" ),
allFields = $( [] ).add( author ).add( image ).add( text );
Then use post:
$.post("your_url_that_processes_data",allFields, function(data){
// do something with data
});
If you have multiple forms that vary slightly there are plenty of ways to go about that. I'd recommend either changing the action URL OR grabbing an "id" from some DOM element some how. Maybe you can change the form id to something like : "form-".id in your script then read it before you submit.
I can potentially try to help with a more detailed use case?

How to dynamically catch a parent of ID in jQuery?

<td><input type="submit" id="view_{{ var }}" value="View"></td><td>
I need to catch this id pattern. I have multiple submit button in the table. Whose id are variable but having a common pattern. On clicking each submit button the first and second <td> value of same row should be selected.

You can use the Attribute Starts With selector:
$('input[id^="view_"]')

I'd place a .delegate() handler on the <table>, with a selector to match the submit inputs.
$('#myTable').delegate(':submit', 'click', function() {
var id_value = this.id.split('_')[1];
alert( id_value );
// and so on
});
If there are other <input type='submit' /> elements in the table, then you could use a more specific selector to target only those.

Try this:
var a = $('input[id^="view_"]');
var id = a.attr("id").replace("view_", "");

Noob jQuery "$" function return question

HTML:
<input type="text" id="priceperperson1" name="priceperperson1" />
<input type="text" name="personsvalue1" class="countme" readonly="readonly" />
JS:
jQuery(document).ready(function($) {
$('div.pricerow input.countme').each(function(){
var id = this.name.substr(this.name.length-1);
alert($('input#priceperperson'+id));
this.value = parseInt($('priceperperson'+id).value) * parseInt($('countpersons'+id).value);
});
});
Shortened as possible. All I've in alert is "Object"... Value is NaN. I've tried to "parseInt" on id. I've tried:
$('[name=priceperperson'+id+']');
$('priceperperson'+id);
What I'm doing wrong?

You are retrieving jQuery objects when you do the $(..)
To get the value (string) use the .val() method.
so
alert( $('input#priceperperson'+id).val() );

You should probably put the $ in the function definition.
I'm guessing it's causing the $ variable to be re-defined, in the function -- and not point to the jQuery's $() function anymore.
I'm thinking about this one :
jQuery(document).ready(function($) {
Try using, instead :
jQuery(document).ready(function() {

When you are looping through jquery objects, I believe you have to use:
$(this).attr('name'); instead of this.name
also, to call values from objects you have to use $.val() or $.attr('attributename');
// Shortcut for doc ready
$(function()
{
// Loop through values
var id = $(this).attr('name');
alert($('input#priceperperson' + id).val());
});

Are you perhaps looking for .val()?
this.val(parseInt($('priceperperson'+id).val()));

All I've in alert is "Object"... Value
is NaN. I've tried to "parseInt"
Try giving a base to parseInt:
parseInt(variable, 10);

There are some mistakes... to get the value of a jQuery object you must use .val() method, not .value.
Then, the parseInt() requires, as second parameter, the radix. Something like:
...
this.value = parseInt($('priceperperson'+id).val(), 10) * parseInt($('countpersons'+id).val(), 10);
...

your code may contain errors
your code
id = lenght 1 OK
if id lenght > 1 ?? possible exception
priceperperson1 to priceperperson_1
# option # proposal
<input type="text" id="priceperperson_1" name="priceperperson_1" /> // => use "_"
<input type="text" name="personsvalue_1" class="countme" readonly="readonly" />
jQuery(document).ready(function($) {
$('div.pricerow input.countme').each(function(){
var id = this.name.split("_")[1]; // => get array value
this.value = parseInt($('[name=priceperperson_'+id+']').value()) *parseInt($('[name=countpersons='+id+']').value());
});
});