jquery add remove form input on toggle - javascript

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 :)

Related

.closest() function is not working for inputs

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">

jquery remove removes all the thing which is appending after?

Below is my code. I am removing some elements in html with class and it removes but I am inserting some elements with class .als-h-f before a input field. but remove function removes these also. please suggest why this is happening?
if (jQuery(this).find('input[type=hidden]').length > 0) {
jQuery('.als-h-f').remove();
jQuery(this).find('input[type=hidden]').each(function () {
jQuery('#search').before(jQuery(this));
});
}
<div class="als-cont">
<input type="hidden" class="als-h-f" name="als_id" value="11">
<input type="hidden" class="als-h-f" name="als_fname" value="Rajesh">
<input type="hidden" class="als-h-f" name="als_lname" value="Sharma">
<input type="text" name="search" id="search">
</div>

You can't find an HTML element that you've removed from the DOM. Store them in a variable before you remove them and then add them again.
$input = $('#search');
$hiddens = $('.als-h-f');
$hiddens.remove();
$hiddens.each(function(index, $hidden){
console.log($hidden);
$input.before($hidden);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="als-cont">
<input type="hidden" class="als-h-f" name="als_id" value="11">
<input type="hidden" class="als-h-f" name="als_fname" value="Rajesh">
<input type="hidden" class="als-h-f" name="als_lname" value="Sharma">
<input type="text" name="search" id="search">
</div>

Javascript Validate form group field

I have a form where I can add dynamically new section with fields. How can I chceck that this dynamically input is valid (not empty).
My code:
var i= 0;
$("#addSection").click(function(e){
e.preventDefault();
i++;
var html = '<div>';
html += '<input type="text" name="person['+ i +'][name]" value="" />';
html +='<input type="text" name="person['+ i '][surname]" value="" /></div>';
var section= $(html);
$('#myDiv').append(section);
});
This create like:
<div id="myDiv">
<div>
<input type="text" name="person[1][name]" value="" />
<input type="text" name="person[1][surname]" value="" />
</div>
<div>
<input type="text" name="person[2][name]" value="" />
<input type="text" name="person[2][surname]" value="" />
</div>
</div>
Now I want to validate only names person[1][name], person[2][name], person[3][name], etc. How can I validate this fields when I click submit button?

Copy text from text fields to textarea + labels

[SOLVED] I have a script that copies text from text fields to text area. My question is how can I upgrade this script so it would copy labels to? Or if I could somehow add extra text before field value?
This is my HTML:
<label>Input1: </label> <input type="text" name="i1" class="entry" id="field_1" value="" /> <br />
<label>Input2: </label> <input type="text" name="i2" class="entry" id="field_2" value="" /><br />
<label>Input3: </label> <input type="text" name="i3" class="entry" id="field_3" value="" /><br />
<label>Input4: </label> <input type="text" name="i4" class="entry" id="field_4" value="" /><br />
<label>Input5: </label> <input type="text" name="i5" class="entry" id="field_5" value="" /><br /><br />
<input type="button" name="b" value="copy" /><br /><br />
<textarea class="box" name="t" rows="5"> </textarea>
And this:
<script type="text/javascript">
$( document ).ready(function() {
$("input:button").click(function() {
var values = "";
$("input:text").each(function(i) {
values += (i > 0 ? "\n" : "") + this.value;
});
$("textarea").val(values);
});
});
</script>
EDIT: Is there any way of not showing text if some of the text fields are empty?
I added if(this.value.length > 1) and when copy is pressed it shows "undefined".

try
$( document ).ready(function() {
$("input:button").click(function() {
var values = "";
$("input:text").each(function(i) {
var text=$(this).prev("label").text();
values+=text+" " ;
values += (i > 0 ? "\n" : "") + this.value;
});
$("textarea").val(values);
});
});
DEMO

Combo box for all control

I created a filterable drop Down List using JavaScript. This is the List Box Coding.
<select name="d1" class="leftselect" id="d1" size="5" ondblclick="DropDownTextToBox('d1','t1');" style="display:none;" >
<option>axcsus-COMMON STOCK</option>
<option>aces</option>
<option>bdfs</option>
<option>befs</option>
<option>behs</option>
<option>dfgh</option>
<option>dhes</option>
<option>dwww</option>
<option>pass</option>
<option>pass</option>
</select>
I created 4 Text Field and a arrow character. If i click the arrow character , I'll show the list at the bottom of the control.
<div id="div_name" style="float:left;z-index: 20;">
<input name="t1" type="text" id="t1" onkeyup="value_filtering('d1','t1');" onkeypress="onEnter(event,'d1','t1')" />
<input type="button" class="rightselect" onclick="displayList('d1','t1');" value="▼" />
</div>
<div class="inputbox">
<input name="t2" class="inputbox" type="text" id="t2" onkeyup="value_filtering('d2','t2');" onkeypress="onEnter(event,'d2','t2')" />
<input type="button" class="leftselect" onclick="displayList('d1','t2');" value="▼" />
</div>
<div style="float:left;text-align:center;" >
<input name="t3" type="text" id="t3" onkeyup="value_filtering('d3','t3');" onkeypress="onEnter(event,'d3','t3')" />
<input type="button" class="rightselect" onclick="displayList('d1','t3');" value="▼" />
</div>
<div class="inputbox">
<input name="t4" class="inputbox" type="text" id="t4" onkeyup="value_filtering('d4','t4');" onkeypress="onEnter(event,'d4','t4')" />
<input type="button" class="leftselect" onclick="displayList('d1','t4');" value="▼" />
</div>
In the display List function I'm getting the corresponded textbox position and displayed the List Control under the Text Box. Okie. Now my problem is If i select any option in the text box, I need to display the selected value to the textbox which the listbox shown under. After selecting the value from the list box, How i find in which text box showing the List ? Dynamically how can i find the text box id ?
This is my JS code for displaying the Listbox to the corresponding TextBox.
function displayList(ele,txt)
{
vis=document.getElementById(ele);
obj=document.getElementById(txt);
if (vis.style.display==="none")
vis.style.display="block";
else
vis.style.display="none";
vis.style.position = "absolute";
//alert(getElementPosition(txt).top + ' ' + getElementPosition(txt).left);
vis.style.top = getElementPosition(txt).top+obj.offsetHeight;
vis.style.left = getElementPosition(txt).left;
}
Note : I can call this function at the click event of arrow button. I can easily pass the text Field Id. But in the case ListBox action i can't send the particular ID of the Text Field.

If you have no opposition to using jquery you can using the jquery UI built-in autocomplete which will do pretty much what you're looking for. For more advanced and nicer plugins you can try chosen

Try this.
<script>
var targetInput=null;
function displayList(ele,txt) {
vis=document.getElementById(ele);
obj=document.getElementById(txt);
targetInput = obj;
if (vis.style.display==="none") {
vis.style.display = "block";
} else {
vis.style.display = "none";
vis.style.position = "absolute";
//alert(getElementPosition(txt).top + ' ' + getElementPosition(txt).left);
vis.style.top = getElementPosition(txt).top+obj.offsetHeight;
vis.style.left = getElementPosition(txt).left;
}
}
function selectList(txt) {
if (!targetInput) return;
targetInput.value = txt.value;
txt.style.display = 'none';
}
</script>
<div id="div_name" style="float:left;z-index: 20;">
<input name="t1" type="text" id="t1" onkeyup="value_filtering('d1','t1');" onkeypress="onEnter(event,'d1','t1')" />
<input type="button" class="rightselect" onclick="displayList('d1','t1');" value="▼" />
</div>
<div class="inputbox">
<input name="t2" class="inputbox" type="text" id="t2" onkeyup="value_filtering('d2','t2');" onkeypress="onEnter(event,'d2','t2')" />
<input type="button" class="leftselect" onclick="displayList('d1','t2');" value="▼" />
</div>
<div style="float:left;text-align:center;" >
<input name="t3" type="text" id="t3" onkeyup="value_filtering('d3','t3');" onkeypress="onEnter(event,'d3','t3')" />
<input type="button" class="rightselect" onclick="displayList('d1','t3');" value="▼" />
</div>
<div class="inputbox">
<input name="t4" class="inputbox" type="text" id="t4" onkeyup="value_filtering('d4','t4');" onkeypress="onEnter(event,'d4','t4')" />
<input type="button" class="leftselect" onclick="displayList('d1','t4');" value="▼" />
</div>
<select name="d1" class="leftselect" id="d1" size="5" ondblclick="DropDownTextToBox('d1','t1');" onclick="selectList(this)" style="display:none;">
<option>axcsus-COMMON STOCK</option>
<option>aces</option>
<option>bdfs</option>
<option>befs</option>
<option>behs</option>
<option>dfgh</option>
<option>dhes</option>
<option>dwww</option>
<option>pass</option>
<option>pass</option>
</select>

Categories