Hey guys I'm still fairly new to js and JQuery so I really need some help. I've tried several ways to do this. I basically need the value of my text box increased by 1 when a user clicks the plus button, and decreased by 1 when they click the minus button. I haven't coded for the minus as I haven't figured out the plus. My $('#itemQuant1').val(+1); call works, but stops at 1. Here is my js:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script>
$(document).ready(function(){
var current_count = $('#itemQuant1').val();
var plus_count = current_count + 1;
var minus_count = current_count - 1;
//var minusCount = document.getElementById('minusItem').value;
$("#plusItem1").on('click', function(){
current_button = $(this);
if (current_button.attr('id') == "plusItem1")
{
$('#itemQuant1').val(+1);
//current_count.val() + plus_count;
//plus_count.val() + 1;
//$('#itemQuant1').value = current_count.value + 1;
}
});
});
</script>
Here is the html:
<body>
<div>
<table style= "border:solid;border-width:thin;">
<tr>
<td style= "border:solid;border-width:thin;"><p><input class"comfirmItem" type="checkbox">1-FLUE CONNECTOR ASSEMBLY PACKAGE (0005812) +$665.10<button id="plusItem1" class="more_Item" style="float:right;">+</button><button id="minusItem" class="less_Item" style="float:right;">-</button><input id="itemQuant1" class"itemCount" type="textbox" value=0 style="width:30px;text-align:center;margin-left:5px;margin-right:5px;float:right;"></p></td>
</tr>
<tr>
<td style= "border:solid;border-width:thin;"><p><input class"comfirmItem" type="checkbox">2-DUCT BOX ASSEMBLY (0005875) +$305.01<button id="plusItem" class="more_Item" style="float:right;">+</button><button id="minusItem" class="less_Item" style="float:right;">-</button><input id="itemQuant2" class"itemCount" type="textbox" style="width:30px;text-align:center;margin-left:5px;margin-right:5px;float:right;"></p></td>
</tr>
</table>
</div>
</body>
</html>
You just need to do this - http://jsfiddle.net/jayblanchard/rCM5d/
$('#itemQuant1').val( parseInt($('#itemQuant1').val()) + 1);
For up and down buttons it might be an idea to wrap all the button logic together like so: http://jsbin.com/kikitule/1/edit
Your HTML would look like this:
<button class="items-button" data-sum="1" data-target="#itemQuant1">+</button>
<button class="items-button" data-sum="-1" data-target="#itemQuant1">-</button>
<input id="itemQuant1" class="itemCount" type="textbox" value=0>
And JQuery like this:
$(document).ready(function(){
$(".items-button").on('click', function(){
var $button = $(this);
var $quantity = $($button.attr('data-target'));
var sum = parseInt($button.attr('data-sum'), 10);
var total = parseInt($quantity.val(), 10) + sum;
if (total < 0) {
total = 0;
}
$quantity.val(total)
});
});
Related
<script type="text/javascript">
var i = 0;
var j = 1;
$("#add").click(function(){
++i;
var c = i + j;
$("#dynamicpre").append('<div class="dynamicfields mb-5"><h5>Track:' + c + '</h5></div>');
});
$(document).on('click', '.remove-tr', function(){
$(this).closest('.dynamicfields').remove();
});
</script>
In the above question I am simply append a value through c variable. Now, What happen here when I click on add button it show Track:2 but when I click on remove and click again on add button then it show Track:3 but I want to show Track:2. So, How can I do this? Please help.
Thank You
From your .remove-tr click code it seems that you will be having .remove-tr element inside .dynamicfields div then only your $(this).closest would work, so I have added .remove-tr button dymanically.
Check comments for explanation.
$("#add").click(function() {
// default track value
let c = 1;
// get last dynamicfields's h5 element inside #dynamicpre
let lastAdded = $("#dynamicpre .dynamicfields h5:last");
// check if there is any dynamicfields is there? if yes then only get track number
if (lastAdded.length) {
// get track number from last dynamicfields from its text
// get track text and replace Track: with empty value and convert it to number
c = 1 + Number(lastAdded.text().replace("Track:", ""));
}
// append new div with remove button
$("#dynamicpre").append('<div class="dynamicfields mb-5"><h5>Track:' + c + '</h5> <input type="button" class="remove-tr" value="remove" /> </div>');
});
$(document).on('click', '.remove-tr', function() {
$(this).closest('.dynamicfields').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input type="button" id="add" value="add">
<div id="dynamicpre">
</div>
you have to -1 the value of "j" on removing function and also create a remove button at the end only and remove the last div on remove button click then it will work fine :
var i = 0;
var j = 1;
$("#add").click(function(){
++i;
var c = i + j;
$("#dynamicpre").append('<div class="dynamicfields mb-5"><h5>Track:' + c + '</h5></div>');
});
$(document).on('click', '.remove-tr', function(){
if(j>=1){
i --;
}
$(".dynamicfields:last-child").remove()
});
<input value="add" type="button" id="add" />
<div id="dynamicpre">
hammad
</div>
<input value="remove" type="button" class="remove-tr" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
I want multiple textarea(ck editor) where user can input multiple data in it , i tried various function and methods of jquery like clone() and appendTo but the problem is they are cloning the textarea but ckeditor is not working, after cloning the textarea i am unable to wrote anything in it
Please help me with it.
This is what i tried
test1
http://jsfiddle.net/FADxv/793/
test2
http://jsfiddle.net/kbqjnecx/3/
Thanks
Add an id to each new textarea and manually initialize the editor using
CKEditor.replace(id [,config])
Something like:
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
var editorId = 'editor_' + x;
$(wrapper).append('<div> <textarea id="'+editorId+'" class="ckeditor" name="ck[]"></textarea>Remove</div>'); //add input box
CKEDITOR.replace(editorId, { height: 200 });
}
});
DEMO
Check this for cloning ckeditor.
Check this fiddle : http://jsfiddle.net/manektech/47htysb5/
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.4/standard/ckeditor.js"></script>
</head>
<body>
<div class="row hide_mail_id_domain">
<div class="col-sm-12">
<table class="table">
<thead>
<tr>
<th>Option</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<textarea class="ckeditor" required="" name="question_option_1" ></textarea>
</td>
<td></td>
</tr>
</tbody>
</table>
Add More
</div>
</div>
<script>
var REMOVE = '';
var i=1;
$(document).ready(function () {
$('.add_more').click(function () {
var oneplus=i+1;
var tr_object = $('tbody').find('tr:first').clone();
// getting and renaming existing textarea by name.
$(tr_object).find('textarea[name="question_option_1"]').attr("name", "question_option_"+oneplus+"");
$(tr_object).find('input').val('');
$(tr_object).find('td:last').html('Remove');
$('tbody').append(tr_object);
//replace code
CKEDITOR.replace("question_option_"+oneplus+"");
// when i were clicking on add more during my testing , then extra cke-editor id also appending to DOM. so for removing other then first
// included below code
$('#cke_question_option_1').each(function() {
var $ids = $('[id=' + this.id + ']');
if ($ids.length > 1) {
$ids.not(':first').remove();
}
});
i=i+1;
oneplus++;
});
$(document).on('click', '.remove_more', function () {
var id = $(this).closest('tr').find('.id').val();
if (id != '') {
if (REMOVE != '') {
REMOVE = REMOVE + ',' + id;
} else {
REMOVE = id;
}
$('#id').val(REMOVE);
}
$(this).closest('tr').remove();
});
});
</script>
</body>
</html>
I want to be able to email content such as a div that is in my webpage using the php mail function and possible putting it on the so called "Thank Your, Your Email Sent" page. However, I'm running into some issues. I am following this Email Div Content, Email div text content using PHP mail function, and GET entire div with its elements and send it with php mail function questions that has already been posted as a guide but it doesn't seem to be working for me. I want to send via email and show up on the "Thank Your, Your Email Sent" page within the message. Anything I'm doing wrong?
HTML Table that I want to send over is:
<div id="add_items_content" style="width:100%;">
<center>
<table id="add_item_here" style="width:98%;">
<tbody>
<tr><td>Item</td><td>Years</td><td>Quantity</td><td>Training Hours</td><td>Total Item Cost</td></tr>
</tbody>
</table>
</center>
<center>
<table id="add_totals_here" style="width:98%;">
<tbody>
<tr><td cospan="3"> </td><td> </td><td> </td></tr>
</tbody>
</table>
</center>
</div>
<script>
$(document).ready(function(){
$('table[id^=add_item_here]').hide();
$('table[id^=add_totals_here]').hide();
$('div[id^=office_submit]').hide();
$('div[id^=show_form]').hide();
//First obtaining indexes for each checkbox that is checked
$('input[name=item_chk]').change(function(){
var index = this.id.replace('item_chk','');
if($(this).is(':checked')){
AddNewItem(index);
}else{
RemoveItem(index);
}
CalculateTotals();
});
function AddNewItem(index){
// Get hidden variables to use for calculation and tables.
var item = $('#item_chk'+index).parent().text().trim();
var itemdescr = $('#itemdescr'+index).val();
var traininghrs = parseInt($('#traininghrs'+index).val());
var qty = parseInt($('#qty'+index).val());
var yrs = parseInt($('#yrs'+index).val());
var item_cost = 0;
// Calculating item cost for just that one checkbox
item_cost+=parseInt($('#servicefee'+index).val());
item_cost*=parseInt($('#yrs'+index).val());
item_cost+=parseInt($('#licensefee'+index).val());
item_cost*=parseInt($('#qty'+index).val());
var traininghrs = parseInt($('#traininghrs'+index).val());
//Display each item that is checked into a table
$('#add_item_here tr:last').after('<tr id="row_id'+index + '"><td style=\"width:35%;\">' + itemdescr +'</td><td style=\"width:15%;\" >' + yrs +'</td><td style=\"width:16%;\">' + qty +'</td><td style=\"width:18%;\">' + traininghrs + '</td><td style=\"width:16%;\">$'+ item_cost + '</td></tr>');
}
function RemoveItem(index){
$('table#add_item_here tr#row_id'+index).remove();
}
function CalculateTotals(){
var total_cost = 0;
var total_training = 0;
$('input:checkbox:checked').each(function(){
var index = this.id.replace('item_chk','');
var item_cost = 0;
// Calculating item cost for just that one checkbox
item_cost+=parseInt($('#servicefee'+index).val());
item_cost*=parseInt($('#yrs'+index).val());
item_cost+=parseInt($('#licensefee'+index).val());
item_cost*=parseInt($('#qty'+index).val());
var traininghrs = parseInt($('#traininghrs'+index).val());
total_cost +=item_cost;
total_training +=traininghrs;
});
if(total_cost > 0 || total_training > 0) {
$('#add_totals_here tr:last').children().remove();
$('#add_totals_here tr:last').after('<tr ><td colspan="3" style=\"width:66%;\">TOTALS:</td><td style=\"width:18%;\">' + total_training + '</td><td style=\"width:16%;\">$'+ total_cost + '</td></tr>');
$('#add_item_here').show();
$('#add_totals_here').show();
$('#office_submit').show();
}else{
$('table[id^=add_item_here]').hide();
$('table[id^=add_totals_here]').hide();
$('div[id^=office_submit]').hide();
}
}
$("input[name='office_submit']").click(function () {
$('#show_form').css('display', ($(this).val() === 'Yes') ? 'block':'none');
});
// Quantity change, if someone changes the quantity
$('select[name=qty]').change(function(){
var index = this.id.replace('qty','');
if($("#item_chk"+index).is(':checked')){
RemoveItem(index);
AddNewItem(index);
CalculateTotals();
}
});
// Years change, if someone changes the years
$('select[name=yrs]').change(function(){
var index = this.id.replace('yrs','');
if($("#item_chk"+index).is(':checked')){
RemoveItem(index);
AddNewItem(index);
CalculateTotals();
}
});
})
</script>
Trial Number 1; So far I have tried:
<script>
function mail_content() {
var tablesContent = document.getElementById("add_items_content").innerHTML;
$.post('send_form.email.php',{content:tablecontent},function(data) {
});
}
</script>
Using script I have added to the send_form_email.php:
<?php
$txt = $_POST['content'];
mail($to,$subject,$message,$txt,$headers);
mail($from,$subject2,$message2,$txt,$headers2);
?>
Trial Number 2: I even tried storing it into a hidden field:
<input name="data" id="data" type="hidden" value=""></input>
<script type="text/javascript">
$(document).ready(function(){
$("#price_quote").submit(function() { //notice submit event
$("#my_hidden_field").val($("#add_items_content").html()); //notice html function instead of text();
});
});
</script>
And then the send_form_email.php I put it in that message see if it even shows up.
$txt = $_POST['data'];
$message = "Content: ".$txt."\n";
mail($to,$subject,$message,$txt,$headers);
mail($from,$subject2,$message2,$txt,$headers2);
Trial Number 3: Even tried Ajax
<script>
function mail_content(){
var html = $('#add_items_content').html();
$.ajax(function{
type="POST",
url:"send_form_email.php",
data:"data="+html,
success:function(response){
$('#add_items_content').show().html("email sent");
}
});
}
</script>
What am I missing or doing wrong? Why doesn't the div / tables show up or display?
You really should check your JS console for errors:
var tablesContent = document.getElementById("add_items_content").innerHTML;
^---note the "sC"
$.post('send_form.email.php',{content:tablecontent},function(data) {
^--note the c
JS vars are case sensitive, and will NOT magically correct typos for you.
And then there's this:
<input name="data" id="data" type="hidden" value=""></input>
^---id 'data'
$("#my_hidden_field").val($("#add_items_content").html());
^--- completely DIFFERENT ID
I am trying to figure out how to add on the value of the selected input button into the textarea.
This is my input button to call the action:
<input type="button" id="scorebutton" value="TD">
<input type="button" id="scorebutton" value="PAT" name="PAT">
<input type="button" id="scorebutton" value="SFTY" name="Safety">
When each of the button is selected, the following javascript runs, respectively:
function addHTD(){document.getElementById("HScore").innerHTML=parseInt(document.getElementById("HScore").innerHTML,10) +6;}
function addHPT(){document.getElementById("HScore").innerHTML ++;}
function addHSF(){document.getElementById("HScore").innerHTML=parseInt(document.getElementById("HScore").innerHTML,10) +2;}
Then the score is recorded, adding 6, 1, and 2. But it is recorded in a textarea:
<td width="220px"><textarea class="lap" id="Hlapdetails"></textarea></td>
With this javascript running:
function marklapH()
{
if(runningstate == 1)
{
if(lapdate != '')
{
var lapold = lapdate.split(':');
var lapnow = stopwatch.value.split(':');
var lapcount = new Array();
var x = 0
for(x; x < lapold.length; x++)
{
lapcount[x] = new Array();
lapcount[x][0] = lapold[x]*1;
lapcount[x][1] = lapnow[x]*1;
}
if(lapcount[1][1] < lapcount[1][0])
{
lapcount[1][1] += 60;
lapcount[0][1] -= 1;
}
if(lapcount[2][1] < lapcount[2][0])
{
lapcount[2][1] += 10;
lapcount[1][1] -= 1;
}
}
lapdate = stopwatch.value;
Hlapdetails.value += (++lapcounter) + '. ' + stopwatch.value + '\n';
}
}
My question is how can I get the TD, PAT, and SFTY to be recorded with the marking of time in the textarea. To look like so:
0:24 TD
0:35 PAT
etc.
Any help would be greatly appreciated.
Thanks
do you want this
function addHTD(element)
{
document.getElementById("HScore").innerHTML=(parseInt(document.getElementById("HScore").innerHTML,10) +6)+element.value;
}
function addHPT(element)
{
document.getElementById("HScore").innerHTML= (document.getElementById("HScore").innerHTML+1)+element.value;
}
function addHSF(element)
{
document.getElementById("HScore").innerHTML=(parseInt(document.getElementById("HScore").innerHTML,10) +2)+element.value;
}
to make above work you will need to modify html like this
<input type="button" id="scorebutton" value="TD">
<input type="button" id="scorebutton" value="PAT" name="PAT">
<input type="button" id="scorebutton" value="SFTY" name="Safety">
I bascially did the next best thing. I copied the marklap three times and then changed the function names and the outcome to match each selection. and this works.
Thanks for all of your help.
I have a code like this...
<html>
<head>
<title>test</title>
<script type="text/javascript">
var counter = 2;
var idCounter= 3;
function addNew() {
if(counter<=5){
// Get the main Div in which all the other divs will be added
var mainContainer = document.getElementById('mainContainer');
// Create a new div for holding text and button input elements
var newDiv = document.createElement('div');
newDiv.id='divs'+counter;
// Create a new text input
var newText = document.createElement('input');
var newText1 = document.createElement('input');
newText.type = "input";
newText.id="ans"+(idCounter);
idCounter++;
newText1.type = "input";
newText1.id="ans"+(idCounter);
idCounter++;
// newText.value = counter;
// Create a new button input
var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = "Remove";
// Append new text input to the newDiv
newDiv.appendChild(newText);
newDiv.appendChild(newText1);
// Append new button input to the newDiv
newDiv.appendChild(newDelButton);
// Append newDiv input to the mainContainer div
mainContainer.appendChild(newDiv);
counter++;
// Add a handler to button for deleting the newDiv from the mainContainer
newDelButton.onclick = function() {
mainContainer.removeChild(newDiv);
counter--;
}
}
else{
alert('Only 5 rows are allowed');
}}sss
function removeRow(divId){
mainContainer.removeChild(divId);
counter--;
}
</script>
</head>
<body >
<div id="mainContainer">
<div><input type="button" value="Add New Row" onClick="addNew()"></div>
<div id="div1"><input type="text" id="ans1"><input type="text" id="ans2"><input type="button" value="Remove" onClick ="javascript:removeRow(div1);"></div>
</div>
</body>
</html>
I want to achieve the same using jQuery.I also need the values entered in each of these textboxes.Please help.
Okay, because I had nothing better to do, and, to be honest, I was curious, I put this together. As implied in my comment, above, I didn't particularly like the way you had it laid out, so I used the following (x)html:
<form action="#" method="post">
<fieldset id="rows">
<ul>
<li>
<input type="text" id="ans1" name="ans1" />
<input type="text" id="ans2" name="ans2" />
</li>
</ul>
</fieldset>
<fieldset id="controls">
<button id="addRow">add</button>
<button id="removeRow" disabled>remove</button>
</fieldset>
</form>
With the following jQuery (although I've clearly not optimised, or refined it, but it should meet your requirements):
$(document).ready(
function(){
$('#addRow').click(
function() {
var curMaxInput = $('input:text').length;
$('#rows li:first')
.clone()
.insertAfter($('#rows li:last'))
.find('input:text:eq(0)')
.attr({'id': 'ans' + (curMaxInput + 1),
'name': 'ans' + (curMaxInput + 1)
})
.parent()
.find('input:text:eq(1)')
.attr({
'id': 'ans' + (curMaxInput + 2),
'name': 'ans' + (curMaxInput + 2)
});
$('#removeRow')
.removeAttr('disabled');
if ($('#rows li').length >= 5) {
$('#addRow')
.attr('disabled',true);
}
return false;
});
$('#removeRow').click(
function() {
if ($('#rows li').length > 1) {
$('#rows li:last')
.remove();
}
if ($('#rows li').length <= 1) {
$('#removeRow')
.attr('disabled', true);
}
else if ($('#rows li').length < 5) {
$('#addRow')
.removeAttr('disabled');
}
return false;
});
});
JS Fiddle demo of the above
I'm not, however, sure what you mean by:
I also need the values entered in each of these textboxes.
If you can explain what that means, or how you want them to be available (and, ideally, why they're not already available to you) I'll do my best to help.
I have a solution which will help you use here is the code
<script type="text/javascript" src="js/jquery.js"></script>
<script type = 'text/javascript'>
var newRowNum = 1;
var project_id ;
$(function() {
$('#addnew').click(function()
{
newRowNum++; // This is counter
//var i = 0;
///////// <a> <td> <tr>
var addRow = $(this).parent().parent();
///////// In the line below <tr> is created
var newRow = addRow.clone();
$('input', addRow).val('');
$('td:first-child', newRow).html();
$('td:last-child', newRow).html('<a href="" class="remove span">Remove<\/a>');
var newID = 'project'+newRowNum;
var add = 'description'+newRowNum;
newRow.children().children().first('input').attr('id', newID).attr('name', newID);
newRow.children().children().eq(1).attr('id', add).attr('name', add);
$('#table').find('tr:last').after(newRow);
$('a.remove', newRow).click(function()
{
newRowNum--;
$('#table').find('tr:last').remove();
return false;
});
return false;
});
});
</script>
<table width="75%" border="0" align = "center" id = 'table'>
<tr>
<td align = "center">Project </td>
<td align = "center">Description</td>
<td align = "center">Add Row</td>
</tr>
<tr>
<td align = "center"><input type = 'text' size = '35'name = 'project[]' id="project" ></td>
<td align = "center"><input type = 'text'size = '55' name = "description[]" id = 'description'></td>
<td width = '10%'><a id="addnew" href= "" class = 'span'>Add</a></td>
</tr>
</table>
You can also give each text box unique name if you change code like this and changing these two variables
var newID = 'project'+newRowNum;
var add = 'description'+newRowNum;
if you use the first method i shown here it will be easy to post data using array. That's all.