.closest() function is not working for inputs - javascript

I have HTML like this in
<input type="text" class="q" placeholder="search nearby">
<input type="hidden" name="lat" class="lat" value="123">
<input type="hidden" name="lon" class="lon" value="456">
<input type="submit" value="Go" class="btn btn-xs btn-primary btn-go">
I want to get values of classes lat/lon/q by clicking on btn-go. I know we can do this using closest but i couldn't achieve this somehow.
My JS
$(document).on('click', '.btn-go', function(){
var lat_value = $(this).closest('input').find('.lat').val();
var lon_value = $(this).closest('input').find('.lon').val();
var q_value = $(this).closest('input').find('.q').val();
alert(lat_value + lon_value + q_value);
});

Use siblings
$(document).on('click', '.btn-go', function() {
var lat_value = $(this).siblings('.lat').val();
var lon_value = $(this).siblings('.lon').val();
var q_value = $(this).siblings('.q').val();
alert(lat_value + lon_value + q_value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="q" placeholder="search nearby">
<input type="hidden" name="lat" class="lat" value="123">
<input type="hidden" name="lon" class="lon" value="456">
<input type="button" value="Go" class="btn btn-go btn-xs btn-primary b">

Related

How to calculate average of values that are being inputted through dynamically added input fields into another textbox?

I want to calculate the average of inputs that have been inputted through dynamically added number text fields into another text field called, average. Please guide how can I calculate the average of dynamic fields using javascript.
<html>
<body>
<form>
<table id="dynamic_field">
<td>
<div>
<input type="hidden" class="form-control" name="uuid[]"/>
</div>
</td>
<td><input type="text" class="form-control" id="average" name="average"/></td>
<td>
<div>
<label>Enter number</label>
<input type="text" class="form-control" name="number[]" />
</div>
</td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
<input type="submit" name="submit" id="submit" value="Submit">
</table>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
var max_input = 7;
var i = 1;
$("#add").click(function(){if (i < max_input) {
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><div><input type="hidden" class="form-control" name="uuid[]"/></div></td><td> </td><td><div><label>Enter number</label><input type="text" class="form-control" name="number[]" /></div></td><td> </td><td valign="bottom"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr><tr><td> </td><td> </td></tr>');
}});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("#submit").on('click',function(){
var formdata = $("#main-form").serialize();
$.ajax({
url :"action.php",
type :"POST",
data :formdata,
cache :false,
success:function(result){
alert(result);
$("#main-form")[0].reset();
}
});
});
});
</script>
You can use each loop to iterate through all your number input and on each iteration store value of input inside some variable and then divide this total with count and finally add result inside your average input-box.
Demo Code :
$(document).ready(function() {
var max_input = 7;
var i = 1;
$("#add").click(function() {
if (i < max_input) {
i++;
$('#dynamic_field').append('<tr id="row' + i + '"><td><div><input type="hidden" class="form-control" name="uuid[]"/></div></td><td> </td><td><div><label>Enter number</label><input type="text" class="form-control" name="number[]" /></div></td><td> </td><td valign="bottom"><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr><tr><td> </td><td> </td></tr>');
}
});
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
$(document).on("input", "input[name*=number]", function() {
var total = 0;
//get length of input field
var count = parseInt($("input[name*=number]").length);
//loop through each inputs
$("input[name*=number]").each(function() {
//add
total += $(this).val() != "" ? parseInt($(this).val()) : 0
})
//put value inside input box
$("#average").val(total / count);
})
});
<html>
<body>
<form>
<table id="dynamic_field">
<tr>
<td>
<div>
<input type="hidden" class="form-control" name="uuid[]" />
</div>
</td>
<td><input type="text" class="form-control" id="average" name="average" /></td>
<td>
<div>
<label>Enter number</label>
<input type="text" class="form-control" name="number[]" />
</div>
</td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
<input type="submit" name="submit" id="submit" value="Submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Get inputs value in javascript using arrays

I am using HTML and javascript to getting some values from the user. I have one input text and two buttons on the page. first button for adding input text to form and the second button for sending data to javascript script. my code is like the following code :
function add_input_function() {
var html = "<input type='text' placeholder='Your text' id='text_input[]'/><br/>";
$("#container").append(html);
}
function send_function() {
var inputs = document.getElementById("text_input");
for (var i = 0; i < inputs; i++) {
console.log(inputs.value);
}
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<form method="post">
<div id="container">
<input class="input" type="text" placeholder="Your text" id="text_input[]" /><br/>
</div>
<br/>
<input onclick="add_input_function()" type="button" id="add" value="Add Input">
<br/>
<input onclick="send_function()" type="button" id="add" value="Send">
</form>
I want to get all of the values and show them in the console and separate with -. Can you help me?
(My for loop doesn't work now)
Add some class for each input, then when you click on send button, grab all element by class selector, and iterate loop on element to get value
<form method="post">
<div id="container">
<input class="input info" type="text" placeholder="Your text" /><br/>
</div>
<br/>
<input onclick="add_input_function()" type="button" id="add" value="Add Input">
<br/>
<input onclick="send_function()" type="button" id="add" value="Send">
</form>
<script>
function add_input_function() {
var html = "<input type='text' class='info' placeholder='Your text' /><br/>";
$("#container").append(html);
}
function send_function() {
var inputText = [];
var inputs = document.getElementsByClassName("info");
for (var i = 0; i < inputs.length; i++) {
console.log(inputs[i].value);
inputText.push(inputs[i].value)
}
var finalContent = inputText.join(' - ');
console.log(finalContent);
}
</script>
This is an alternative
function add_input_function() {
var html = "<input type='text' placeholder='Your text' id='text_input[]'/><br/>";
$("#container").append(html);
}
function send_function() {
let result = '';
$('input[type="text"]').each(function(index){
result += $(this).val() + '-';
});
alert(result);
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<form method="post">
<div id="container">
<input class="input" type="text" placeholder="Your text" id="text_input[]" /><br/>
</div>
<br/>
<input onclick="add_input_function()" type="button" id="add" value="Add Input">
<br/>
<input onclick="send_function()" type="button" id="add" value="Send">
</form>
i hope it helps...
var index=1;
var inpidarr=[];
inpidarr.push("text_input0")
function add_input_function() {
var html = "<input type=\"text\" placeholder=\"Your text\" id=\"text_input".concat(String(index))+"\"/><br/>";
$("#container").append(html);
inpidarr.push("text_input".concat(String(index)))
index++;
}
function send_function() {
;
for(i=0;i<inpidarr.length;i++)
{
console.log(document.getElementById(inpidarr[i]).value);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form method="post">
<div id="container">
<input class="input" type="text" placeholder="Your text" id="text_input0"/><br/>
</div>
<br/>
<input onclick="add_input_function()" type="button" id="add" value="Add Input">
<br/>
<input onclick="send_function()" type="button" id="add" value="Send">
</form>

Javascript - Object reference returning null even though it shoudn't

I've got this:
var strBox = document.getElementById("txtSTR");
var strModBox = document.getElementById("txtSTRMod");
var refBox = document.getElementById("txtREF");
var refModBox = document.getElementById("txtREFMod");
var fortBox = document.getElementById("txtFOR");
var forModBox = document.getElementById("txtFORMod");
var intBox = document.getElementById("txtINT");
var intModBox = document.getElementById("txtINTMod");
These vars all point to text boxes (read only) in my HTML document.
They rely on populating their .value with the following array:
//0-STR, 1-REF, 2-FOR, 3-INT, 4-JUD, 5-CHA, 6-WIL, 7-TOU
var charAttsAR = ["8","8","8","8","8","8","8","8"];
They are populated with the relevant array entry manually from a function called popDefDat() like this:
strBox.value = charAttsAR[0];
strModBox.value = modSetter(charAttsAR[0]);
refBox.value = charAttsAR[1];
refModBox.value = modSetter(charAttsAR[1]);
fortBox.value = charAttsAR[2];
forModBox.value = modSetter(charAttsAR[2]);
intBox.value = charAttsAR[3];
intModBox.value = modSetter(charAttsAR[3]);
....and so on
My issue is that strBox, strModBox, refBox and refModBox all initialise their data fine. However, at fortBox, it throws "fortBox is null" and I have no idea why. The code is identical, I have my script loaded just before the end of my tag and I also have:
//initialise default data when page loads
window.onload = popDefDat()
Honestly, I'm stuck. Any advice appreciated.
Here's the html too:
<form id="form3" name="form3" method="post" onsubmit="return false" action="">
<p><label></label>
<label for="lblHeadATT"></label>
<input name="lblHeadATT" type="text" disabled="disabled" id="lblHeadATT" value="Points" readonly="readonly" />
<label for="lbHeadMOD"></label>
<input name="lbHeadMOD" type="text" disabled="disabled" id="lbHeadMOD" value="Mod" readonly="readonly" />
<label for="txtPointBuy"></label>
<input name="txtPointBuy" type="text" id="txtPointBuy" readonly="readonly" />
<p>Strength:
<label for="txtSTR"></label>
<input name="txtSTR" type="text" id="txtSTR" readonly="readonly" />
<label for="txtSTRMod"></label>
<input name="txtSTRMod" type="text" id="txtSTRMod" readonly="readonly" />
<input type="button" name="Btn_StrMinus" id="Btn_StrMinus" value="-" onclick="FNCstrSub()" />
<input type="button" name="Btn_StrPlus" id="Btn_StrPlus" value="+" onclick="FNCstrPlus()"/>
<p>Reflex:
<label for="txtREF"></label>
<input name="txtREF" type="text" id="txtREF" readonly="readonly" />
<label for="txtREFMod"></label>
<input name="txtREFMod" type="text" id="txtREFMod" readonly="readonly" />
<input type="button" name="Btn_RefMinus" id="Btn_RefMinus" value="-" onclick="FNCrefSub()" />
<input type="button" name="Btn_RefPlus" id="Btn_RefPlus" value="+" onclick="FNCrefPlus()"/>
<p>Fortitude:
<label for="txtREF"></label>
<input name="txtFOR" type="text" id="txtREF" readonly="readonly" />
<label for="txtFORMod"></label>
<input name="txtFORMod" type="text" id="txtFORMod" readonly="readonly" />
<input type="button" name="Btn_ForMinus" id="Btn_ForMinus" value="-" onclick="FNCforSub()" />
<input type="button" name="Btn_ForPlus" id="Btn_ForPlus" value="+" onclick="FNCforPlus()"/>
</p>
<p>Intellect:
<label for="txtINT"></label>
<input name="txtINT" type="text" id="txtINT" readonly="readonly" />
<label for="txtINTMod"></label>
<input name="txtINTMod" type="text" id="txtINTMod" readonly="readonly" />
<input type="submit" name="Btn_IntMinus" id="Btn_IntMinus" value="-" onclick="FNCintSub()"/>
<input type="submit" name="Btn_IntPlus" id="Btn_IntPlus" value="+"onclick="FNCintPlus()" />
I've yet to write the tags for the other text boxes and buttons as I was hoping to solve this before carrying on.
Thanks

jquery add remove form input on toggle

I have the following html and form elements
<div class='ticket-sold' id='1' >RAFFLE-1-NOVEMBER</div>
<div class='ticket' id='2'>RAFFLE-2-NOVEMBER</div>
<div class='ticket' id='3'>RAFFLE-3-NOVEMBER</div>
<div class='ticket' id='4'>RAFFLE-4-NOVEMBER</div>
<div class='ticket' id='5'>RAFFLE-5-NOVEMBER</div>
<form class="paypal" action="./includes/gateways/payments.php" method="post" id="paypal_form" target="_blank">
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="lc" value="UK" />
<input type="hidden" name="currency_code" value="GBP" />
<input type="hidden" name="payer_email" value="customer#example.com" />
<input name="item_name_1" value="TICKET NUMBER 5" id="input_5" type="hidden">
<input name="item_name_2" value="TICKET NUMBER 20" id="input_20" type="hidden">
<input name="item_name_3" value="TICKET NUMBER 27" id="input_27" type="hidden">
<input type="hidden" name="amount_1" value="10" id="input_5" />
<input type="hidden" name="amount_2" value="10" id="input_20" />
<input type="hidden" name="amount_3" value="10" id="input_27" />
<input type="submit" name="submit" value="Submit Payment"/>
</form>
Basically, I have jquery that when the Div class 'ticket' is selected, the 'amount' field is updated based on the number of 'ticket' elements selected.
var counter = 0;
$(".ticket").on("click", function() {
$(this).toggleClass("green");
$(this).toggleClass('selected');
var selectedIds = $('.selected').map(function() {
return this.id;
}).get();
var id = $(this).attr('id');
if(!$(this).hasClass('selected')) {
$('#paypal_form #input_' + id).remove();
counter--;
} else {
counter++;
$('#paypal_form').append('<input type="hidden" name="item_name_'+counter+'" value="TICKET NUMBER ' + id + '" id="input_'+id+'">');
$('#paypal_form').append('<input type="hidden" name="amount_'+counter+'" value="' + $(".ticketprice").text() +'" id="input_'+id +'">');
}
$(".totaltickets").text(selectedIds.length -1);
$(".totalprice").text((selectedIds.length - 1)*$(".ticketprice").text());
What I would like to do, is at the same time of the onclick function on the 'ticket' div, I would like another input type ie <input type="hidden" name="item_name" value="Selected ID from Div"> added dynamically to the Form ("paypal_form"). And if the 'ticket' DIV is toggled, ie Clicked to deselect the item, the added element should be removed.
thanks
Craig.
You could approach it similar to this. It checks if the class selected is assigned to the selected div. If so, it appends a hidden input with a specific ID to the form. If the div is unselected, it removes that input from the form.
$(document).ready(function() {
$(".ticket").on("click", function() {
$(this).toggleClass("green");
$(this).toggleClass('selected');
var selectedIds = $('.selected').map(function() {
return this.id;
}).get();
var id = $(this).attr('id');
if(!$(this).hasClass('selected')) {
$('#paypal_form #input_' + id).remove();
} else {
$('#paypal_form').append('<input type="hidden" id="input_' + id + '">');
}
$('[name=amount]').val((selectedIds.length - 1) * $(".ticketprice").text());
$('[name=item_name]').val((selectedIds.length - 1) + " Ticket(s) selected");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='ticket-sold' id='1'>RAFFLE-1-NOVEMBER</div>
<div class='ticket' id='2'>RAFFLE-2-NOVEMBER</div>
<div class='ticket' id='3'>RAFFLE-3-NOVEMBER</div>
<div class='ticket' id='4'>RAFFLE-4-NOVEMBER</div>
<div class='ticket' id='5'>RAFFLE-5-NOVEMBER</div>
<form class="paypal" action="./includes/gateways/payments.php" method="post" id="paypal_form" target="_blank">
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="lc" value="UK" />
<input type="hidden" name="currency_code" value="GBP" />
<input type="hidden" name="payer_email" value="customer#example.com" />
<input type="hidden" name="item_name" value="" />
<input type="hidden" name="amount" value="0" />
<input type="submit" name="submit" value="Submit Payment" />
</form>
figured it out with the following
var ii = 1;
$("input[name^='item_name']").each(function(i){
$(this).attr('name', 'item_name_' + ii++);
});
var ii = 1;
$("input[name^='amount']").each(function(i){
$(this).attr('name','amount_' + ii++);
});
thanks for your help :)

How to generate input fields dynamically

I have a form with input fields.
Once,I clicked on submit button I want to generate 2 input fields with a "plus / +" icon. So, when I click on "+" icon it will generate input fields.
Here is the html part:
<label>Name</label>
<input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium"/>
<label>Id</label>
<input type="text" value="123" id="demo_1" name="demo_name" class="input-medium">
<button id="demo_submit" class="btn" name="demo_submit" type="button">Submit</button>
I suggest to have a look at existing plugins (For example - Jquery SheepIt! Plugin) and see how that is coded.
To add dynamically form elements this can be done with the clone() method and DocumentFragment - http://ejohn.org/blog/dom-documentfragments/
Working example at http://plnkr.co/edit/szYoU4GCeLWX8b9DcsYT
<script type="text/javascript">
function addFields () {
var newNode1 = document.createElement('input'),
newNode2 = document.createElement('input');
newNode1.type = newNode2.type = "text"; document.forms[0].appendChild(newNode1);
document.forms[0].appendChild(newNode2);
}
</script>
<form>
<label>Name</label>
<input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium"/>
<label>Id</label>
<input type="text" value="123" id="demo_1" name="demo_name" class="input-medium">
<button id="demo_submit" class="btn" name="demo_submit" type="button" onclick="addFields()">Submit</button>
</form>
$(".addInput").click(function {
$("form").append( PUT INPUT ELEMNT HERE);
});
Check this out.
HTML
<label>Name</label>
<input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium" />
<label>Id</label>
<input type="text" value="123" id="demo_1" name="demo_name" class="input-medium">
<button id="demo_submit" class="btn" name="demo_submit" type="button">Submit</button>
<button id="demo_add" class="btn" name="demo_add" type="button">Add more</button>
<div id='add'></div>
jQuery
$('#demo_add').click(function () {
$inputName = "<input type='text' placeholder='Name'/>";
$inputId = "<input type='text' placeholder='Id'/>";
$br = "<br/>";
$('#add').append($inputName);
$('#add').append($inputId);
$('#add').append($br);
});
Hopefully it helps.

Categories