dynamically add variables in array - javascript

i have a script that add educational record to my database. my point is that i want to add variable dynamically depending upon the values user add. following is the script and jsfiddle example to show.
$(function() {
var inc =1;
$('.add').live('click',function(){
var $val1= $('.val1').val();
var $val2= $('.val2').val();
var $val3= $('.val3').val();
var $val4= $('.val4').val();
var result = $val1 + $val2 +$val3 +$val4;
var hiddin="get_val"+inc;
var edu="edu"+inc;
var grade="grade"+inc;
var grp="grp"+inc;
var colg="colg"+inc;
//alert(hiddin);
$('<div class='+hiddin+' style="display:block;">'+'<span class='+edu+'>'+$val1+'</span>'+'<span class='+grade+'>'+$val2+'</span>'+'<span class='+grp+'>'+ $val3 +'</span>' +'<span class='+colg+'>' +$val4 +'</span>'+ '</div>').appendTo('.wrap');
// alert(result);
var $val1= $('.val1').val('');
var $val2= $('.val2').val('');
var $val3= $('.val3').val('');
var $val4= $('.val4').val('');
inc++;
});
$('.submit').live('click',function(){
var $edu1= $('.edu1').html();
var $edu2= $('.edu2').html();
var $edu3= $('.edu3').html();
var $edu4= $('.edu4').html();
var $grade1= $('.grade1').html();
var $grade2= $('.grade2').html();
var $grade3= $('.grade3').html();
var $grade4= $('.grade4').html();
var $grp1= $('.grp1').html();
var $grp2= $('.grp2').html();
var $grp3= $('.grp3').html();
var $grp4= $('.grp4').html();
var $colg1= $('.colg1').html();
var $colg2= $('.colg2').html();
var $colg3= $('.colg3').html();
var $colg4= $('.colg4').html();
alert($edu4 + $colg3 + $grp2 + $grade3);
});
});
following is the link http://jsfiddle.net/Apexusman/g7PSH/5/
please help

I suggest you to set some hidden variables to span and get the value. something like this
$('<div class='+hiddin+' style="display:block;">'+'<span class='+edu+'><input type="hidden" name="edu[]" id="edu_'+inc+'" value="'+$val1+'" >'+$val1+'</span>'+'<span class='+grade+'><input type="hidden" name="grade[]" id="grade_'+inc+'" value="'+$val2+'" >'+$val2+'</span>'+'<span class='+grp+'><input type="hidden" name="group[]" id="group_'+inc+'" value="'+$val3+'" >'+ $val3 +'</span>' +'<span class='+colg+'><input type="hidden" name="college[]" id="college_'+inc+'" value="'+$val4+'" >' +$val4 +'</span>'+ '</div>').appendTo('.wrap');
and change the html
<form id="save_form">
<div class="wrap"> </div>
</form>
and get the values by using jquery serialize
var data_save = $("#save_form").serialize();
alert(data_save);

Related

How to use data value to refer back to another variable

I'm trying to use create a converter by using the data attribute to refer back to a previous value.
I cannot seem to get:
data-my_currency to refer back to 301.46
data-this to refer back to 4259.00
$('input').keyup(function() {
var BTC = 4259.00
var ETH = 301.46
var LTC = 67.72
var USD = 1
var EUR = 0.83
var CNY = 6.46
var convertFrom = $('.js').data('my_currency');
//Should refer back to EUR var
var convertTO = $('.js').data('this');
//Should refer back to BTC var
var amount = $('input').val();
var result = convertFrom * convertTO * amount;
var newresult = result.toFixed(2);
$('.output').html(newresult);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="js" data-my_currency="EUR"></div>
<div class="js" data-this="BTC"></div>
<input type="text" class="input" />
<div class="output">Me</div>
Alternatively and without changing your existing code much, you can declare your variables at global scope (which you should avoid) and use window object to get the value of the variable.
var BTC = 4259.00
var ETH = 301.46
var LTC = 67.72
var USD = 1
var EUR = 0.83
var CNY = 6.46
$(document).ready(function () {
$('input').keyup(function () {
var convertFrom = $('[data-my_currency]').data('my_currency');
var convertTO = $('[data-this]').data('this');
var amount = $('input').val(); //Assuming user enters only numbers
var result = window[convertFrom] * window[convertTO] * amount;
var newresult = result.toFixed(2);
$('.output').html(newresult);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="js" data-my_currency="EUR"></div>
<div class="js" data-this="BTC"></div>
<input type="text" class="input" />
<div class="output">Me</div>
If you are attempting to make them refer back to the JavaScript variables, why not simply use those JavaScript variables directly?
If, however, you have your Bitcoin and currency prices written as an element in the page (which is what I assume is the case), you're looking for $('.js[data-my_currency]')[0].innerHTML and $('.js[data-this]')[0].innerHTML respectively.
Breaking this down:
.js targets the class js
[data-my_currency] targets the attribute data-my_currency
$('.js[data-my_currency]') returns a nodeList
[0] grabs the first node
.innerHTML grabs the content inside of that node.
$('input').keyup(function() {
var convertFrom = $('.js[data-my_currency]')[0].innerHTML;
var convertTO = $('.js[data-this]')[0].innerHTML;
var amount = $('input').val();
var result = convertFrom * convertTO * amount;
var newresult = result.toFixed(2);
$('.output').html(newresult);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="js" data-my_currency="EUR">0.83</div>
<div class="js" data-this="BTC">4259.00</div>
<input type="text" class="input" />
<div class="output">Me</div>
Hope this helps! :)

AJAX and XML mutiple choice quiz - choices loading to same var

I'm having trouble getting the choices getting separated on different lines and I am not sure why and have not been able to figure out why
XML:
<q>
<qNum>1</qNum>
<qText>What is the side of a hammer called?</qText>
<choice>Hammer</choice>
<choice>Face</choice>
<choice>Side of the hammer</choice>
<choice>The check</choice>
</q>
AJAX:
$(document).ready(function(e) {
$.get('quiz.xml', function (d){
var html;
var title = $(d).find('title').text();
var desc = $(d).find('description').text();
html = '<div><h1>'+title+'</h1><br><h3>'+desc+'</h3><br></div>';
$('#1').append(html);
$(d).find('q').each(function(index, element) {
var $q = $(this);
var qNum = $q.find('qNum').text();
var qText = $q.find('qText').text();
var html2 = '<div><p>'+qText+'</p>';
$q.find('choice').each(function(index, element) {
var choice = $q.find('choice').text();
html2 += '<input type="radio" name="q'+qNum+'" class="choice" value="'+choice+'" /><label class="choice">'+choice+'</label><br>';
});
$('#1').append($(html2));
});
});
});
All the choices will be added to the var every time and i cant figure out how to break them up with keeping the same tag name
Please change it to
var choice = element.textContent;
You should change
var choice = $q.find('choice').text();
to
var choice = element.text();
I think. What it looks like is that for each choice, you select all the choices with $q.find('choice'), whereas you only want the choice you are currently iterating over, which is in element.

Get data sent from form in popup

I need to Get data sent from form in popup but the problem that in the form there is many checkboxes with same name like name='list[]' :
JS :
function showPopup(){
var user = document.getElementById("check").value;
var popup = window.open("milestone.php?a="+user,"hhhhhh","width=440,height=300,top=100,left=‌​300,location=1,status=1,scrollbars=1,resizable=1") ;
}
html :
<input type='checkbox' name="approve[]" value="get from Mysql">
<input type='checkbox' name="approve[]" value="get from Mysql">
<input type='checkbox' name="approve[]" value="get from Mysql">
var user = document.getElementById("check").value;
That won't work because:
You need to get multiple values
You need to get the values only of checkboxes that have been checked
You don't have an element with that id (but an id has to be unique anyway)
The fields all have the same name. Use the name.
var inputs = document.getElementsByName("approve[]")
Then you need to generate your form data from it, filtering out the ones which are not checked:
var form_data = [];
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.checked) {
form_data.push(encodeURIComponent(input.name) + "=" + encodeURIComponent(input.value));
}
}
Then put all the form data together:
var form_data_query_string = form_data.join("&");
Then put it in your URL:
var url = "milestone.php" + "?" + form_data_query_string;
Then open the new window:
var popup = window.open(url,"hhhhhh","width=440,height=300,top=100,left=‌​300,location=1,status=1,scrollbars=1,resizable=1") ;
If you want to pass the array via get you should loop through all the checked checkboxes and store the value of everyone in array then convert them to Json using JSON.stringify so you can passe them in url :
function showPopup(){
var approve_array=[];
var checked_checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
for(var i=0;i<all_checkboxes.length;i++){
approve_array[i] = checked_checkboxes[i].value;
}
var url = "milestone.php?approve="+JSON.stringify(approve_array);
var popup = window.open(url,"hhhhhh","width=440,height=300,top=100,left=‌​300,location=1,status=1,scrollbars=1,resizable=1") ;
}
In you php page you could get the array passed as Json using json_decode :
$array_of_approves = json_decode($_GET['approve']);
Hope this helps.
You can access the value as:
$approveList= $_POST['approve'];
and can be iterated as
foreach ($approveList as $approve){
echo $approve."<br />";
}

Issue with Jquery click not getting called

I am building an eCommerce Application where the user can select the option and the shopping cart is automatically updated through jquery.
The user will have few radio button to choose from and as he selects the radio button, the shopping cart is updated.
Now, the issue I am facing is, when he taps on the radio button ( Mobile website), some times, the callback function is not called at all so the shopping card is not updated.
I am not an expert, but can you please tell me if I am missing anything. Here is the code I am using.
HTML Code
<div class="col-33">
<div class="panel1 panel-primary text-center no-border">
<div class="panel-body blue">
<label>
<input type="radio" name="recharge_amount" value="{var name='price_id'}"/><br/>{var name='grand_total1'}
<input type="hidden" id="carttotal_{var name='price_id'}" value="{var name='carttotal'}"/>
<input type="hidden" id="taxper_{var name='price_id'}" value="{var name='taxper'}"/>
<input type="hidden" id="taxamount_{var name='price_id'}" value="{var name='taxamount'}"/>
<input type="hidden" id="grand_total_{var name='price_id'}" value="{var name='grand_total'}"/>
</label>
</div>
</div>
</div>
Jquery
$('#transfer_target input[type="radio"]').click(function()
{
$('#cart_total').hide();
var $amt = $(this).val();
var carttotal_el = "#carttotal_" + $amt;
var taxper_el = "#taxper_" + $amt;
var taxamount_el = "#taxamount_" + $amt;
var grand_total_el = "#grand_total_" + $amt;
//update_price_list($amt);
var $carttotal = $('#carttotal');
$carttotal.html($(carttotal_el).val());
var $salestax_per = $('#salestax_per');
var $str = '<h4>Sales Tax(' + $(taxper_el).val() + ')</h4>';
$salestax_per.html($str);
var $salestax_amount = $('#salestax_amount');
$salestax_amount.html($(taxamount_el).val());
var $grand_total = $('#grand_total');
$grand_total.html($(grand_total_el).val());
$('#cart_total').show();
});
Are you using a DOM Ready function? You should have something that looks like this. It may simply be that the data is ready.
$(document).ready(function() {
someName();
});
function someName() {
$('#transfer_target input[type="radio"]').click(function() {
$('#cart_total').hide();
var $amt = $(this).val();
var carttotal_el = "#carttotal_" + $amt;
var taxper_el = "#taxper_" + $amt;
var taxamount_el = "#taxamount_" + $amt;
var grand_total_el = "#grand_total_" + $amt;
var $carttotal = $('#carttotal');
$carttotal.html($(carttotal_el).val());
var $salestax_per = $('#salestax_per');
var $str = '<h4>Sales Tax(' + $(taxper_el).val() + ')</h4>';
$salestax_per.html($str);
var $salestax_amount = $('#salestax_amount');
$salestax_amount.html($(taxamount_el).val());
var $grand_total = $('#grand_total');
$grand_total.html($(grand_total_el).val());
$('#cart_total').show();
});
}

How to fetch the name from JavaScript? JavaScript creates new input on every click

I am creating a new input-box by clicking on a link with the help of Javascript.
Here's the Javascript code:
<script>
var instance = 1;
function myFunction(event) {
instance++;
var DivAllPrime=document.getElementById("divPrime");
var newLabel1 = document.createElement("label");
newLabel1.id = "label" + instance;
newLabel1.innerHTML = 'label '+instance;
newLabel1.className="col-md-4 formLineHeight";
var newInput2=document.createElement("input");
newInput2.id="ingredient"+instance;
newInput2.name="ingredient"+instance;
newInput2.className="form-control ";
newInput2.placeholder="Ingredient";
newInput2.name="ingredient"+instance;
var newDiv2=document.createElement("div");
newDiv2.className="col-md-3 marginBottom10";
newDiv2.appendChild(newInput2);
DivAllPrime.appendChild(newLabel1);
DivAllPrime.appendChild(newDiv2);
var newInput4=document.createElement("input");
newInput4.className="form-control ";
newInput4.name="totalunit"+instance;
newInput4.placeholder="Unit";
newInput4.type="text";
var newDiv3=document.createElement("div");
newDiv3.className="col-md-2 marginBottom10";
newDiv3.appendChild(newInput4);
DivAllPrime.appendChild(newDiv3);
var newInput5=document.createElement("select");
newInput5.id="unit"+instance;
newInput5.name="unit"+instance;
newInput5.className="form-control ";
var newDiv4=document.createElement("div");
newDiv4.className="col-md-2 marginBottom10";
var newInput6=document.createElement("option");
newInput6.value="gram";
newInput6.innerHTML="Gram";
newInput6.selected=true;
newInput5.appendChild(newInput6);
var newInput7=document.createElement("option");
newInput7.value="ml";
newInput7.innerHTML="ML";
newInput5.appendChild(newInput7);
newDiv4.appendChild(newInput5);
DivAllPrime.appendChild(newDiv4);
return false;
}
</script>
This line sets the name of the new input dynamically:
newInput4.name="totalunit"+instance;
How can I get the name and send it to the servlet?

Categories

Resources