I just cloned one div using jQuery clone, how can I rename each div elements id, and value after cloning, below is my code,
jQuery(function(){
jQuery('#act').click(function(){
jQuery("#test").clone(true, true).insertAfter("div#test:last");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="test">
<input type="hidden" name="product" value="<?php /* #escapeNotVerified */ echo $_product->getId() ?>" />
<input type="hidden" name="selected_configurable_option" value="" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
<label class="label" for=""</label>
<div class="control">
<select name="super_attribute" id="attribute" class="super-attribute-select">
<option value="1">1</option>
</select>
</div>
<label class="label" for="qty"><span>Qty</span></label>
<div class="control">
<input type="number" name="qty" id="qty1" maxlength="12" value="1" title="Qty" class="input-text qty" data-validate="">
</div>
</div>
<div class="actions">
<button type="submit"
title=""
class="action primary tocart"
id="act">
<span>Add new item</span>
</button>
</div>
jQuery(function(){
var len = 0;
jQuery('#act').click(function(){
jQuery("#test").clone(true, true).insertAfter("div#test:last");
$('div#test:last').attr('id', 'test'+len);
//set name for select box
$('div#test'+len+' select').attr('name', 'super_attribute'+len);
len++;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="test">
<input type="hidden" name="product" value="<?php /* #escapeNotVerified */ echo $_product->getId() ?>" />
<input type="hidden" name="selected_configurable_option" value="" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
<label class="label" for=""</label>
<div class="control">
<select name="super_attribute" id="attribute" class="super-attribute-select">
<option value="1">1</option>
</select>
</div>
<label class="label" for="qty"><span>Qty</span></label>
<div class="control">
<input type="number" name="qty" id="qty1" maxlength="12" value="1" title="Qty" class="input-text qty" data-validate="">
</div>
</div>
<div class="actions">
<button type="submit"
title=""
class="action primary tocart"
id="act">
<span>Add new item</span>
</button>
</div>
Generate some unique random numbers and append it to your id using .attr() method
jQuery(function() {
jQuery('#act').click(function() {
var randomnumber = Math.ceil(Math.random() * 100)
var el = jQuery("#test").clone(true, true).insertAfter("div#test:last").attr('id', 'test' + randomnumber);
console.log('id = ' + el.attr('id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="test">
<input type="hidden" name="product" value="<?php /* #escapeNotVerified */ echo $_product->getId() ?>" />
<input type="hidden" name="selected_configurable_option" value="" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
<label class="label" for=""</label>
<div class="control">
<select name="super_attribute" id="attribute" class="super-attribute-select">
<option value="1">1</option>
</select>
</div>
<label class="label" for="qty"><span>Qty</span></label>
<div class="control">
<input type="number" name="qty" id="qty1" maxlength="12" value="1" title="Qty" class="input-text qty" data-validate="">
</div>
</div>
<div class="actions">
<button type="submit"
title=""
class="action primary tocart"
id="act">
<span>Add new item</span>
</button>
</div>
If you want to change just the new elements, apply map (from the top of my head, untested);
jQuery(".test").clone(true, true).map(function(el, index) {
return jQuery(el).attr("id", "test-" + index);
}).insertAfter("div.test:last");
Also, selecting multiple elements by ID (#test), will probably not work, and it's not allowed according to the spec to have multiple elements on a single page with the same ID. So that's why I used a class selector in my code above.
Related
How do I show only one input at a time?
For example, if user clicks anchor #3, he sees input with content "1".
My guess was something like this:
$(".unit a").click(function() {
$(this).toggleClass("active");
$('input').toggle(); // ??
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='amount amount-piece'>
<input type="text" name="amount2" id="amount2" value="7" data-rate="7" readonly="readonly" />
</div>
<div class='amount amount-square'>
<input data-rate="1.25" readonly="readonly" type="text" value="1.25" name="basket[amount]" id="basket_amount" />
</div>
<div class='amount amount-box'>
<input type="text" name="amount3" id="amount3" value="1" data-rate="1" readonly="readonly" />
</div>
<div class='unit'>
#1
#2
#3
</div>
However it's not working.
https://jsfiddle.net/jjrLgpjp/
To achieve this you need to hide() all the input before showing the one related to the clicked <a> element. You can match them up by their index(), using eq(). Try this:
$(".unit a").click(function() {
var index = $(this).toggleClass("active").index();
$('input').hide().eq(index).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="amount amount-piece">
<input type="text" name="amount2" id="amount2" value="7" data-rate="7" readonly="readonly" />
</div>
<div class="amount amount-square">
<input type="text" name="basket[amount]" id="basket_amount" value="1.25" data-rate="1.25" readonly="readonly" />
</div>
<div class="amount amount-box">
<input type="text" name="amount3" id="amount3" value="1" data-rate="1" readonly="readonly" />
</div>
<div class="unit">
#1
#2
#3
</div>
You can do it by adding a attribute (for Eg: for="#one") to your inputs as per the anchor ID and then later select accordingly
$( ".unit a" ).click(function() {
$( this ).toggleClass( "active" );
// $('input').toggle(); // ??
$('input').hide();
$('input[for="#'+ $( this ).attr('id')+'"]').show();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='amount amount-piece'>
<input type="text" name="amount2" id="amount2" for ="#one" value="7" data-rate="7" readonly="readonly" />
</div>
<div class='amount amount-square'>
<input data-rate="1.25" readonly="readonly" type="text" for ="#sec" value="1.25" name="basket[amount]" id="basket_amount" style ="display:none;" />
</div>
<div class='amount amount-box'>
<input type="text" name="amount3" id="amount3" for ="#thd" value="1" data-rate="1" readonly="readonly" style ="display:none;"/>
</div>
<div class='unit'>
#1
#2
#3
</div>
Another alternative, you can use data attribute:
$( ".unit a" ).click(function(e) {
e.preventDefault();
$(this).toggleClass( "active" );
$('.'+$(this).data("target")).show().siblings().not($(this).parent()).hide();
});
.amount:not(:first-child){
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class='amount amount-piece'>
<input type="text" name="amount2" id="amount2" value="7" data-rate="7" readonly="readonly" />
</div>
<div class='amount amount-square'>
<input data-rate="1.25" readonly="readonly" type="text" value="1.25" name="basket[amount]" id="basket_amount" />
</div>
<div class='amount amount-box'>
<input type="text" name="amount3" id="amount3" value="1" data-rate="1" readonly="readonly" />
</div>
<div class='unit'>
<a data-target="amount-piece" href="#">#1</a>
<a data-target="amount-square" href="#">#2</a>
<a data-target="amount-box" href="#">#3</a>
</div>
I would like to make a java script what will make comment field (textarea) as mandatory when you will select a selection list , for now I just make a required icon next to comment code below and stuck on it code bellow.
Thank in advice for all help
Code what I Wrote :
<select id="ddlViewBy">
<option value="1">AJS.$("#comment-popup").parent().children('label').append('<span class="aui-icon icon-required"></span>');</option>
Source Code of my Website :
<form action="/jira/rest/tempo-rest/1.0/worklogs/{issueKey}" class="aui tempo-form" data-form-type="" name="tempo-panel-form-popup" method="post">
<div class="form-body" style="max-height: 393px;">
<input type="hidden" name="id" value="">
<input type="hidden" name="type" value="issue">
<input type="hidden" name="use-ISO8061-week-numbers" value="false">
<input type="hidden" name="ansidate" value="">
<input type="hidden" name="ansienddate" value="">
<input type="hidden" name="selected-panel" value="">
<input type="hidden" name="analytics-origin-page" value="">
<input type="hidden" name="analytics-origin-view" value="">
<input type="hidden" name="analytics-origin-action" value="">
<input type="hidden" name="startTimeEnabled" value="false">
<input type="hidden" name="tracker" value="false">
<input type="hidden" name="preSelectedIssue" class="tempoIssueKey" value="AB-5048">
<input type="hidden" name="planning" value="false">
<div class="field-group">
<label for="user-picker-popup">User</label>
<div class="tempo-pickers">
<div class="aui-ss medium aui-ss-has-entity-icon" id="user-picker-popup-single-select">
<input autocomplete="off" class="text aui-ss-field ajs-dirty-warning-exempt" id="user-picker-popup-field">
<div class="aui-list" id="user-picker-popup-suggestions" tabindex="-1"></div><span class="icon aui-ss-icon noloading drop-menu"><span>More</span></span><img class="aui-ss-entity-icon" alt="" src="google.pl"> </div>
<select id="user-picker-popup" class="plan-user-picker dialog-user-picker aui-ss-select" name="user" data-container-class="medium" data-counter="popup" data-input-text="Jon Smith" multiple="multiple" style="display: none;">
<optgroup id="tempo-user-suggested-popup" data-weight="0" label="">
<option selected="selected" style="background-image:url(/jira/secure/useravatar?size=small&ownerId=jsmith&avatarId=12927)" value="jsmith">Jon Smith</option>
</optgroup>
</select>
</div>
</div>
<div class="field-group tempo-issue-container">
<label for="tempo-issue-picker-popup">Issue </label>
<div class="aui-ss" id="tempo-issue-picker-popup-single-select">
<input autocomplete="off" class="text aui-ss-field ajs-dirty-warning-exempt" id="tempo-issue-picker-popup-field">
<div class="aui-list" id="tempo-issue-picker-popup-suggestions" tabindex="-1"></div><span class="icon aui-ss-icon noloading drop-menu"><span>More</span></span>
</div>
<select id="tempo-issue-picker-popup" class="tempo-issue-picker tempo-picker-all-issues tempo-issue-picker-logwork aui-ss-select" name="issue" multiple="multiple" style="display: none;">
<option selected="selected" value="AB-5048">AB-5048 - Holiday - Jon Smith 2016-06-13-2016-06-13</option>
</select>
</div>
<div class="tempo-datepicker">
<div class="field-group tempo-show-period">
<label for="showPeriod-popup">Period</label>
<div class="checkbox">
<input id="showPeriod-popup" name="showperiod" type="checkbox" value="showperiod" class="showperiod tempo-show-period"> </div>
</div>
<div class="field-group datepicker ">
<label for="datefield-popup">Date</label>
<input type="text" id="datefield-popup" name="date" size="7" value="2016-06-09" class="text medium-field"> <span id="datefield-trigger-popup" class="aui-icon icon-date tempo-datepicker-trigger" tabindex="0">Select a date</span> </div>
<div class="field-group enddate datepicker " style="display: none;">
<label for="enddate-popup">End date</label>
<input type="text" id="enddate-popup" name="enddate" size="7" value="2016-06-09" class="text medium-field"> <span id="enddate-trigger-popup" class="aui-icon icon-date tempo-datepicker-trigger" tabindex="0">Select a date</span> </div>
</div>
<div class="tempo-timepicker resetable">
<div class="field-group tempo-worked-hours">
<label class="timepicker-label" tmp="Work per day" for="time-popup">Worked </label>
<input autocomplete="off" type="text" id="time-popup" name="time" size="3" value="" class="tempo-time text short-field"> </div>
<div class="remaining-and-billed-hours-container">
<div class="field-group tempo-logged-work">
<label for="totalSpent-popup">Logged</label> <span class="totalSpent" id="totalSpent-popup">8h</span> </div>
<div class="field-group tempo-remaining-estimate" style="clear: left;">
<label for="remainingEstimate-popup">Remaining estimate </label>
<input type="hidden" id="remainingEstimateHidden-popup" size="3" maxlength="6" value="">
<input type="text" id="remainingEstimate-popup" name="remainingEstimate" size="3" maxlength="6" value="" class="validate remaining resetable text short-field"> </div>
<div class="field-group tempo-original-estimate">
<label for="originalEstimate-popup">Original estimate</label> <span class="originalEstimate" id="originalEstimate-popup"></span> </div>
</div>
</div>
<div class="field-group resetable">
<label for="comment-popup">Description</label>
<textarea id="comment-popup" name="comment" class="tempo-comment textarea resetable"></textarea>
</div>
<ul id="errors-popup" class="error-list"> </ul>
<p style="width: 97%; margin: 0 0 10px 0;" id="tempo-logwork-issue-hint" class="hint-container overflow-ellipsis" title="Pressing w also opens this dialog box"> <a class="shortcut-tip-trigger" title="Click to view all shortcuts" href="#" tabindex="-1">Shortcut tip:</a> Pressing <strong>w</strong> also opens this dialog box </p>
</div>
<div class="buttons-container form-footer"> <span id="logwork-spinner" class="aui-icon aui-icon-wait" style="display:none"></span>
<div class="buttons"><span class="icon throbber"></span>
<input type="checkbox" id="issue-add-another" class="tempo-add-another-input" value="Another">
<label for="issue-add-another" class="tempo-add-another-label"> Log another </label>
<input type="submit" id="issue-add-button" class="button button-panel-button" accesskey="s" value="Log Work"> <a id="tempo-logwork-issue-cancel" class="cancel" href="/jira/browse/AB-5048?" accesskey="'">Cancel</a> </div>
</div>
Looks like you working inside the atlassian product suite.
So You make a html field mandatory you can add the required attribute
which is workable in all modern browsers except safari I thing please check this
the js(jquery) to add a attribute would be
$('#comment-popup').attr('required', 'required');
if it is a AUI-select or AUI input read the docs there
https://docs.atlassian.com/aui/latest/docs/single-select.html on a select for instance there is a non-empty attribute
How i can update date and time value in a field, when i called popup?
Because in my case the datetime django was updated on refresh.
My popup :
$(document).ready(function(){
PopUpHide();
});
function PopUpShow(){
$("#popup1").show();
$(document).keyup(function(ev){
if(ev.keyCode == 27)
$("#popup1").hide();
});
}
function PopUpHide(){
$("#popup1").hide();
}
In html form popup :
<div class="b-popup b-popup-content" id="popup1">
<div class="cleanuphtml-1">
Add 'problem' item
</div>
<form action="" method="post">
{% csrf_token %} <input id="id_pk_post" value="1" maxlength="1" name="pk_post" type="text" /> <input id="id_post_request" value="1" maxlength="1" name="post_request" type="text" />
<div class="cleanuphtml-2">
<label for="id_description_post">Description:</label>
<textarea id="id_description_post_id" maxlength="9999" name="description_post" autofocus="" onkeyup="enableField(this.form,this.value)" type="text">
</textarea>
</div>
<div class="cleanuphtml-4">
<label for="id_start_date">Start date : <input type="text" name="start_date" id="datetimepicker" /> <label>End date :</label> <input type="text" name="end_date" id="datetimepicker2"
class="cleanuphtml-3" /></label>
</div>
<div class="cleanuphtml-6">
<p class="cleanuphtml-5">
<label>Priority :</label> <select method="post" name="priority_post">
<option value="1" id="id_priority_post" name="priority_post">
High
</option>
<option value="2" id="id_priority_post" name="priority_post">
Medium
</option>
<option value="3" id="id_priority_post" name="priority_post" selected="selected">
Low
</option>
</select>
</p>
</div>
<div class="cleanuphtml-9">
<input type="submit" name="bttnsubmit" value="Add" onclick="window.location.href='/'" disabled="true" class="cleanuphtml-7" /> <input type="button" value="Cancel" onclick="PopUpHide()"
class="cleanuphtml-8" />
</div>
</form>
</div>
This is with jquery called calendar :
$('#datetimepicker').datetimepicker()
.datetimepicker({value:'{{ now_date|date:'Y-m-d H:i' }}',step:10});
I have dynamic element and field on the form.
JS :
<script>
function hapus(i){
$("#field"+i).remove();
}
</script>
HTML :
<div class="fieldwrapper" id="field1">
<select class="fieldtype" id="labensmittel1" name="data[Tagebuch][labensmitell1]" style="width:160px;">
<option value="data">data</option>
</select>
<input type="text" value="" id="qty1" name="data[Tagebuch][qty1]" class="fieldname" />
<input type="text" value="" id="labendata1" name="data[Tagebuch][labendata1]" class="fieldname" />
<input type="button" class="hapus1" value="-" style="width:20px;" id="hapus1" onclick="hapus(1);" />
</div>
<div class="fieldwrapper" id="field2">
<select class="fieldtype" id="labensmittel2" name="data[Tagebuch][labensmitell2]" style="width:160px;">
<option value="data">data</option>
</select>
<input type="text" value="" id="qty2" name="data[Tagebuch][qty2]" class="fieldname" />
<input type="text" value="" id="labendata2" name="data[Tagebuch][labendata2]" class="fieldname" />
<input type="button" class="hapus2" value="-" style="width:20px;" id="hapus2" onclick="hapus(1);" />
</div>
<div class="fieldwrapper" id="field3">
<select class="fieldtype" id="labensmittel3" name="data[Tagebuch][labensmitell3]" style="width:160px;">
<option value="data">data</option>
</select>
<input type="text" value="" id="qty3" name="data[Tagebuch][qty3]" class="fieldname" />
<input type="text" value="" id="labendata3" name="data[Tagebuch][labendata3]" class="fieldname" />
<input type="button" class="hapus3" value="-" style="width:20px;" id="hapus3" onclick="hapus(3);" />
</div>
How can I reorder the fields by name? For example if I remove field2 div id='field3' will be changed into div id='field2' then the select and input field id and name from id="labensmittel3" and name="data[Tagebuch][labensmitell3]" will be moved to id="labensmittel2" and name="data[Tagebuch][labensmitell2]"
Thanks
How about a basic iteration after the delete happens that resets all of your ids:
var fields = $('.fieldwrapper');
var count = 1;
$.each(fields, function() {
$(this).attr('id','field' + count);
count++;
});
I'm trying to concatenate various select menus and radio groups into one hidden field value. I have something that "works" but does not provide the desired results. Basically it returns the first value of the radio groups but not the "selected" one. I'm assuming I need an array of some sort and then concatenate the "selected" value.
Here is some pertinent code:
jQuery
$(window).load(function() {
$(document).ready(function() {
$("#colorSelect, input[name=Radiogroup1]:checked, input[name=Columns]:checked, #fontSelect").change(function() {
concatenated_string = $("#colorSelect").val() + '&' +
$("input[name=Names]").val() + '&' +
$("input[name=Columns]").val() + '&' +
$("#fontSelect").val();
$("#productImage").val(concatenated_string);
$("#temp_display").text(concatenated_string)
})
})
});
html
<form action="https://im-here.foxycart.com/cart" method="post" accept-charset="utf-8">
<div class="center">
<!--Begin leftSide-->
<div class="submission">
<!--Begin hiddenInputs-->
<input type="hidden" name="name" value="I'm Here Notification Sign" />
<input type="hidden" name="price" value="10" />
<input type="hidden" name="image" id="productImage" value="http://2plygraphics.com/im-here/images/01.jpg" />
<!--End hiddenInputs-->
<!--Begin colorSelection-->
<div class="left eighty center">
<label>Color</label>
<br>
<select id="colorSelect" name="Color" tabindex="1" required>
<option value="" selected="selected" disabled>Choose A Color...</option>
<option value="Black">Black</option>
<option value="DarkGrey">Brushed Aluminum</option>
<option value="DarkKhaki">Brass</option>
</select>
</div>
<!--End colorSelection-->
<br>
<!--Begin nameSelection-->
<div class="left eighty center">Number Of Names
<br>
<input type="radio" name="Names" value="1{p+100}" id="Names_1" class="NameRad1 trigger textBox1" tabindex="5" required />One
<br>
<input type="radio" name="Names" value="2{p+200}" id="Names_2" class="NameRad2 trigger textBox2" tabindex="6" />Two
<br>
<input type="radio" name="Names" value="3{p+300}" id="Names_3" class="NameRad3 trigger textBox3" tabindex="7" />Three
<br>
<input type="radio" name="Names" value="4{p+400}" id="Names_4" class="NameRad4 trigger textBox4" tabindex="8" />Four
<br>
</div>
<!--End nameSelection-->
<br>
<!--Begin columnSelection-->
<div class="left eighty center">Number Of Columns
<br>
<input type="radio" name="Columns" value="1" id="Columns_0" class="ColumnRad1 " tabindex="3" required />One
<br>
<input type="radio" name="Columns" value="2" id="Columns_1" class="ColumnRad2 " tabindex="4" />Two
<br>
</div>
<!--End columnSelection-->
<br>
<!--Begin fontSelection-->
<div class="left eighty center">
<label>Font</label>
<br>
<select id="fontSelect" name="Font" tabindex="2" required>
<option value="" selected="selected" disabled>Choose A Font...</option>
<option value="Arial">Modern</option>
<option value="Times New Roman">Classic</option>
<option value="Impact">Vintage</option>
<option value="Verdana">Retro</option>
</select>
</div>
<!--End fontSelection-->
</div>
<!--End leftSide-->
<!--Begin rightSide-->
<div class="submission">
<div class="signCreatorDiv">
<div class="signMain"></div>
<div class="namesColumn">
<div class="NameImg content">
<div class="NameTxt1 right test">
<input class="test" type="text" name="name1" id="textBox1" value="" placeholder="Name 1" tabindex="9" />
</div>
</div>
<div class="NameImg content">
<div class="NameTxt2 right test ">
<input class="test" type="text" name="name2" id="textBox2" value="" placeholder="Name 2" tabindex="10" />
</div>
</div>
<div class="NameImg content">
<div class="NameTxt3 right test">
<input class="test" type="text" name="name3" id="textBox3" value="" placeholder="Name 3" tabindex="11" />
</div>
</div>
<div class="NameImg content">
<div class="NameTxt4 right test">
<input class="test" type="text" name="name4" id="textBox4" value="" placeholder="Name 4" tabindex="12" />
</div>
</div>
</div>
<div class="submitDiv">
<input type="submit" name="x:productsubmit" id="productsubmit" value="Add My Sign" class="submit" tabindex="13" />
</div>
</div>
</div>
<br>
<br>
<!--End rightSide-->
</div>
</form>
<div id="temp_display"></div>
here is a fiddle:
http://jsfiddle.net/mU3Ab/
Thanks for any help :)
Fix these lines:
$("#colorSelect, input[name=Names], input[name=Columns], #fontSelect").change(function(){
concatenated_string =
$("#colorSelect").val() + '&' +
$("input[name=Names]:checked").val() + '&' +
$("input[name=Columns]:checked").val() + '&' +
$("#fontSelect").val();
Anyway, I recommend you to have a look to:
https://api.jquery.com/serialize/
try this.
var concatenated_object ={};
$("#colorSelect, input[name=Names], input[name=Columns], #fontSelect").change(function(){
$("#colorSelect, input[name=Names]:checked, input[name=Columns]:checked, #fontSelect").each(function(){
concatenated_object[$(this).attr("name")]=$(this).val();
});
console.log(JSON.stringify(concatenated_object));
$("#productImage").val(JSON.stringify(concatenated_object));
$("#temp_display").text(JSON.stringify(concatenated_object))
});
});