Develop Reference

Set variable value in jQuery to Javascript calculator

I have a form with a price calculator and while I am able to set all text fields and such using a jQuery script, I can't figure out how to simply set a variable in that jQuery script that is used in a price calculator in another Javascript on the page.
There is a text field with an id of #price_draftarticles that I set a value to - that works but I also have a variable called price_draftarticles that is being added to other variables to create a total. I referenced my Form_Calculator() function but it's still not updating the total.
Relevant form code
<div class="col-sm-8">
<div class="radio">
<label>
<input class="structype" type="radio" name="CorpStructure" id="price_structureop3" value="I want to provide my own structure" onClick="checkRadioCS(); Form_Calculator();"><strong>I want to provide my own structure</strong>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="checkbox">
<label>
<input name="DraftArticles" type="checkbox" id="DraftArticles" onClick="checkRadioTF(); Form_Calculator();" value="Yes">DETAILS
</label>
</div>
</div>
<div class="col-xs-4 col-sm-2">
<input name="price_draftarticles" type="text" class="form-control fcalc" id="price_draftarticles" value="" readonly>
</div>
</div>
My jquery function
<script>
$(function () {
$('.structype').change(function () {
if ($(this).val() === 'I want to provide my own structure')
{
$("#DraftArticles").prop("checked", true);
$("#price_draftarticles").val('$25.00');
$("price_draftarticles").val('25.00');
$('#CustomStructureDetail').show('500');
}
if ($(this).val() == 'Standard structure template one class of shares') {
$('#CustomStructureDetail').hide('500');
}
if ($(this).val() == 'Two classes of shares') {
$('#CustomStructureDetail').hide('500');
}
});
checkRadioTF();
checkCheckBox();
Form_Calculator();
checkeFileJur();
});
</script>

Looks like you forgot the '#' character in
$("price_draftarticles").val('25.00');
This should be
$("#price_draftarticles").val('25.00');

As what #BYates said the selector missed '#' for price_draftarticles.
$("#price_draftarticles").val('25.00');
But if you're trying to get/set value of the input using it's name. The selector should be like this:
$('input[name="price_draftarticles"]').val('25.00')

style attribute not defined when i check two passwords if match

I have simple registration form and the password inputs are:
<label for="pass">Password:</label>
<div class="input-group input-group-md">
<span class="input-group-addon" id="sizing-addon1"><span class="glyphicon glyphicon-cog"></span></span>
<input type="password" class="form-control" placeholder="Password" aria-describedby="sizing-addon1" id="pass">
</div>
<br>
<label for="pass_confirm">Confirm password:</label>
<div class="input-group input-group-md">
<span class="input-group-addon" id="sizing-addon1"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="password" class="form-control" placeholder="Confirm password" aria-describedby="sizing-addon1" id="confirmPass">
</div>
<br>
<p id="passwordMatch"></p>
I want the paragraph with id="passwordMatch" to show up and depending on the result to show the exact text needed. My jquery code is:
$('#confirmPass').on('keyup', function () {
if ($('#confirmPass').val() == $('#pass').val()) {
$('#passwordMatch')[0].style.display = "block";
// use array to convert jquery to object $('#passwordMatch').html('Password match!').css('color', 'green');
} else {
$('#passwordMatch').html('Password do not match!').css('color', 'red');
}
});
But when i type some random passwords in the inputs the console is telling me that the .style attribute is not defined. Before that i was using $('this') but i found out that i get an object and because of that i cant access DOM directly. Nevermind, changed it with if('#confirmPass').val() and i still get the same error.

If you need to access the DOM object directly you should use $('#passwordMatch')[0].style.display = "block";
But as you already use jQuery I suggest you to use $('#passwordMatch').show();

The problem is that you're using .style on a jquery Selector - try this instead of .style:
$('#passwordMatch').css("display", "block");

change the line of code to:
$('#passwordMatch').css({'display':'block'});

$('#passwordMatch') returns a collection, so it doesn't have a style attribute. You should probably pick whether you are going to be using jQuery or pure javascript and stick to it. jQuery -> $('#passwordMatch').css('display','block');
If you really wanted to, you could also do:
$('#confirmPass').on('keyup', function () {
if ($('#confirmPass').val() == $('#pass').val()) {
$('#passwordMatch')[0].style.display = "block";
$('#passwordMatch').html('Password match!').css('color', 'green');
} else {
$('#passwordMatch').html('Password do not match!').css('color', 'red');
}
});

I need help showing and hiding data based on a checkbox

Alright so I have a form. In the form I have a lot of check boxes. If a person clicks on the checkbox. It shows the field below the box. If they click on the checkbox again it makes the field below the checkbox disappear and makes the field have no value.
here is the code. I have JS running the show and hide. and Html calling it.
function ShowCutSewDescription() {
var select = $('#send_item_to_cutsew');
console.log(select)
//select = parseInt(select);
if (select.attr('checked', true)) {
$('#cutsew-checked').show();
}else {
$('#cutsew-checked').hide();
}
}
<div class="form-group">
<label class="col-md-3 control-label">Sending item to Cut/Sew Manager</label>
<div class="col-md-9">
<input type="checkbox" name="send_item_to_cutsew" class="form-control input-inline input-medium" placeholder="Enter text" onchange="ShowCutSewDescription()">
</div>

Changes made
► select.attr('checked', true) to select.is(":checked")
► $('#send_item_to_cutsew') to $('[name="send_item_to_cutsew"]') since there is no element with that Id.
Working Demo
function ShowCutSewDescription() {
var select = $('[name="send_item_to_cutsew"]');
if (select.is(":checked")) {
$('#cutsew-checked').show();
} else {
$('#cutsew-checked').hide();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-md-3 control-label">Sending item to Cut/Sew Manager</label>
<div class="col-md-9">
<input type="checkbox" name="send_item_to_cutsew" class="form-control input-inline input-medium" placeholder="Enter text" onchange="ShowCutSewDescription()">
</div>
<div id="cutsew-checked">
Sample box
</div>

I assume this is using jQuery. If so, the selector that you have input is looking for something with an id of send_item_to_cutsew.
jQuery uses css selectors as a base, as referenced by this page: https://api.jquery.com/category/selectors/
The proper way to get the input that you want based on the name is as follows:
var select = $('[name="send_item_to_cutsew]');
or you can set the id to the above like so:
<input type="checkbox" id="send_item_to_cutsew" name="send_item_to_cutsew" class="form-control input-inline input-medium" placeholder="Enter text" onchange="ShowCutSewDescription()">

How can I use the same jQuery function for multiple divs without repeating the code

I have a add/remove textfield feature wherein I want to implement a jQuery function to all the textfields in a div.
Can I use the same jQuery function for all the fields in the div or should I write different for each.
DEMO can be got here. In the demo I have made it work for one input field, how can I make it work for the rest.
HTML
<div id="single">
<div id="Ivrgroupzbase_grpzWelcomeNotes" class="row">
<h2><a id="addScnt" href="#">Add Another Input Box</a></h2>
<label for="Ivrgroupzbase_grpzWelcomeNotes">Grpz Welcome Notes</label>
<input type="text" id="Ivrgroupzbase_grpzWelcomeNotes" name="Ivrgroupzbase[grpzWelcomeNotes]" cols="50" rows="6">
</div>
<div id="p_scents" class="row">
<h2><a id="addScnt" href="#">Add Another Input Box</a></h2>
<label for="Ivrgroupzbase_grpzWelcomeNotes">Grpz Welcome Notes</label>
<input type="text" id="Ivrgroupzbase_grpzWelcomeNotes" name="Ivrgroupzbase[grpzWelcomeNotes]" cols="50" rows="6">
</div>
</div>

fiddle http://jsfiddle.net/Drea/28h0L6eb/
html
changed id "addScnt" to class - you should avoid using same id multiple times
js
$('.addScnt').on('click', function (event) {
event.preventDefault();
$(this).closest('.row').append(createInput($('#Ivrgroupzbase_grpzWelcomeNotes p').length + 1), '');
});

Populate Input based on another field?

I have 1 field that will be used for the users name, and another that will be used for the users URL
so if a user types john smith into the name input, i would like to automatically populate the URL input with john-smith since the url will end up being /personal-trainer-directory/john-smith
how do I do this automatically so the user doesnt have to fill out the url field?
Here is an example but there is some ExpressionEngine code, thats why there are curly brackets, but I figure this is more related to the code instead of the CMS so posting this here.
this is what I currently have:
<div class="formsection clearfix">
<label for="title">Name</label>
<span class="directions">The name you want to be displayed in your listing.</span>
<input type="text" name="title" id="title" value="{title}" size="50" maxlength="100">
</div>
<div class="formsection clearfix">
<label for="url_title">URL Title</label>
<span class="directions">Put a dash between first and last name. example: "john-smith"</span>
<input type="text" name="url_title" id="url_title" value="{url_title}" maxlength="75" size="50">
</div>

$("#title").change( function () {
$('#url_title').val('/personal-trainer-directory/'+$(this).val().toLowerCase().replace(/ +/g, '-').trim());
});
jsFiddle example

You can do something like this
$(function(){
$("#title").blur(function(){
$("#url_title").val('/personal-trainer-directory/' + $(this).val());
});
});
jsFiddle
or if you want it to be populated as you type
$(function(){
$("#title").keyup(function(){
$("#url_title").val('/personal-trainer-directory/' + $(this).val());
});
    });
jsFiddle