I'm trying to add html block with jQuery, but whatever i tried i couldn't add it correctly. I want to copy and paste one specific html block when i click the "add" button (Addfield button). I don't want to clone, just add one field with one click . Again and again... Hope you can help me thanks in advance.
HTML :
<div class="entry-edit">
<div class="entry-edit-head">
<h4 class="icon-head head-edit-form fieldset-legend"><?php echo Mage::helper('panel')->__('Kategoriler') ?></h4>
<button id="Addfield" title="Field Ekle" type="button" class="smclass" onclick="" style="float: right;"><span><span><span>Field Ekle</span></span></span></button>
</div>
<fieldset id="grop_fields">
<table cellspacing="0" class="form-list">
<tr>
<td class="label"><label for="Type">Tip</label></td>
<td class="value">
<select id="Type" name="optional[1][type]" class=" select">
<option value="0">Date</option>
<option value="1">Text</option>
<option value="2">Select</option>
</select>
</td>
</tr>
<tr>
<td class="label"><label for="Class">Class</label></td>
<td class="value">
<input id="Class" name="optional[1][class]" value="" type="text" class=" input-text"> </td>
</tr>
</table>
<button id="Add" title="Ekle" type="button" class="scalable save" onclick="" style=""><span><span><span>Ekle</span></span></span></button>
<br></br>
</fieldset>
You can do it like this:
var html_code = '<span>put your full code here</span>';
var selector = 'body';
//change selector with where you want to append your html code into..
$(selector).append(html_code);
One way to approach this would be to create your "template" area in a hidden DIV. Use jQuery to duplicate and repeat the template.
For example:
<div id="templateholder"></div>
<div id="template" style="display: none;">
<div class="template">
<label for="Type">Tip</label>
<select id="Type" name="optional[1][type]" class=" select">
<option value="0">Date</option>
<option value="1">Text</option>
<option value="2">Select</option>
</select>
<button id="Add" title="Ekle" type="button" class="scalable save" onclick="" style=""><span><span><span>Ekle</span></span></span></button>
</div>
</div>
function createTemplate() {
var temp = $("#template div.template").clone();
//from here you can do things like change name fields or values
temp.find("#Type").attr("name", "Type2");
//...attach events
temp.find("#Add").click(function() {
//some click action like make a new template
createTemplate();
});
//then add the new code to the holding area
$("#templateholder").append(temp);
}
If you wanted to create a new one when the page first loads
$(function() {
createTemplate();
});
Its would be nice to know what you have tried.... but if you do a quick search you would know about DOM method....
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
source: http://www.w3schools.com/js/js_htmldom_nodes.asp
there is another question in stackoverflow with similar question with decent answer
Inserting HTML into a div
Related
I am trying to show selected values of a dropdown in my ui.
<tr class="odd" rowid="1" height="50">
<td>
<select disabled name="item[]" id="item_1" class="dropdown required" tabindex="18">
<?php echo $itemOption;?>
</select>
</td>
<td >
<a href="javascript:void(0);" style="height:40px; width:45px" class="button add_new_row ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-focus" data-role="button" ><span class="ui-button-text" style="padding:0;" disabled>+</span></a>
</td>
</tr>
and in jquery I need to get this tr for replicating my dropdown. Here is my jquery
var thisRow = $(this).closest('tr');
newid=parseInt(thisRow.attr('rowid'))+1;
var count = $('.dataTable input.timepicker').length + 1;
newRow = thisRow.clone(true).insertAfter(thisRow).find('input').val('').end().
But I am getting undefined for thisRow. What may be the reason. Some one please correct me.
You should call this script using any action like bind up in function or trigger on any event etc.
Where you want to call this??
Let have an example, suppose I have a HTML like
<div id="div1">
<span class="test">Call Closest Division</span>
</div>
<div id="div2">
<span class="test">Call Closest Division</span>
</div>
and I want to get closest division when click on span. My script look like this
$('.test').click(function(){
var id = $(this).closest('div').attr('id');
alert(id);
})
Don't forgot to include jquery library.
Working demo
Hi! Guys I know nothing when it comes to JQuery... Please help me with this.
I created bootstrap form with a button add another field if the user want additional input fields. The new field are cloned from the original field.
The date-picker didn't work at first (on cloned field) so I add code to solve that.. (which I was luck to do and it took me 7hrs to get it correct)..
but then I found out even the cloned select box aren't working also.
-> Since the selector was using ID (#e1), I thought that was a reason so I changed it to class (.e1). That didn't help.
->So I tried the same method (like how I did on date-picker) but it also failed..
Here is the Code:
-> At Page header
<script src="assets/js/jquery-2.0.3.min.js"></script>
<script>
function cloneRow()
{
var row = document.getElementById("rowToClone"); // find row to copy
var num = Math.floor((Math.random() * 500) + 1);
var table = document.getElementById("tableToModify"); // find table to append to
var clone = row.cloneNode(true); // copy children too
clone.id = "row" + num; // change id or other attributes/contents
table.appendChild(clone); // add new row to end of table
clone.querySelectorAll('[id="id-date-picker-1"]')[0].id = "id-date-picker-" + num; //Put Unique ID
//For Selector
$(function(){
$('.e1').select2();
$('.clone').click(function() {
var clone = $('.select2').clone();
var cloned = clone.find('.e1');
cloned.removeClass('select2').removeAttr('id');
clone.appendTo('.elements');
$(cloned).select2();
});
});
}
</script>
The Row to be cloned
<tbody id="rowToClone">
<tr>
<td>
<div class="form-group" style="width: 100%;">
<select class="e1" style="width:100%;">
<option value="AL" />Alabama
<option value="AK" />Alaska
<option value="AZ" />Arizona
</select>
</div>
</td>
<td>
<div class="form-group" style="width: 100%;">
<select class="e1" style="width:100%;">
<option value="VA" />Virginia
<option value="WA" />Washington
</select>
</div>
</td>
</tr>
-> The trigger button
<button type="button" onclick="cloneRow()" class="btn btn-default purple"><i class="fa fa-plus"></i> Add </button>
->Page Footer
//On Page Footer
//--Jquery Select2--
$(".e1").select2(); //I added this line
$("#e1").select2();
$("#e2").select2({
placeholder: "Select a State",
allowClear: true
});
-> Please help me.. I will appreciate.
A couple of problems (your HTML for the options is invalid), but a lot of plugins, that change the DOM, simply do not like to be cloned. They store instance information in element data and are often not re-entrant (cannot reapply the plugin to elements that already have the DOM changes).
As taking existing rows to clone can get messy, I would suggest a slightly different approach to the cloning, that will avoid these problems.
Simply keep a separate template row in your page, that you can clone, inside a dummy script block:
<script id="rowToClone" type="text/template">
<tr>
<td>
<div class="form-group" style="width: 100%;">
<select class="e1" style="width:100%;">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option></select>
</div>
</td>
<td>
<div class="form-group" style="width: 100%;">
<select class="e1" style="width:100%;">
<option value="VA">Virginia</option>
<option value="WA">Washington</option></select>
</div>
</td>
<td>
<div class="form-group" style="width: 100%;">
<input type="text" class="datapicker"/>
</div>
</td>
</tr>
</script>
type="text/template" is unknown, so the script is ignored by all browsers.
Then the clone becomes as simple as:
$('#clonerow').click(function(){
$('#table tbody').append($('#rowToClone').html());
// now apply any plugins to the new row
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/j1smswmt/2/
Here is an expanded version with datepicker applied to each new row:
$('#clonerow').click(function(){
$('#table tbody').append($('#rowToClone').html()).find('tr:last .datapicker').datepicker();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/j1smswmt/3/
Notes:
Your options are currently invalid. You need to enclose the text inside matching <option> & </option> tags.
As you are using jQuery avoid using inline onclick handlers. They separate the event registration from the event handler for no real benefit. Do it the jQuery way instead.
In case anyone still experience this issue but would still want to use the jQuery clone:
If you are using Bootstrap, you actually just need to remove the bootstrap-select and then reinitialise the normal cloned select.
Just add these two lines of code after you do your clone:
clone.find('.bootstrap-select').remove();
clone.find('select').selectpicker();
Based on answer from this Github issue: https://github.com/silviomoreto/bootstrap-select/issues/605
I want to be able to enter text in the lower text field, click Add to List and have it populate in the text area above. Then if you click the item in the text area you are given the option to remove it. So far I've been able to transfer the value of the text field into the text area but need help beyond that. A working demo can be found online HERE and a JS Fiddle that doesn't work for some reason (can someone tell me why it works locally and elsewhere) JS Fiddle link. This is what I have so far:
HTML:
<div class="table-responsive">
<table class="table table-bordered">
<tbody>
<tr>
<td colspan="2" valign="top">
Problem List:<BR />
<textarea rows="4" cols="50" id="ProbAreaTo" ></textarea><BR />
<button type="button" class="btn btn-default ">Delete Selected Problem</button>
</td>
</tr>
<tr>
<td colspan="2" valign="top"><p>To add a problem to the list, type it in the New Problem text field and then click "Add to List". To remove a problem, click it in the list, then click, "Delete Selected Problem"<P>
<strong>New Problem</strong><P>
<input type="text" id="ProbAreaFrom">
<P>
<button type="button" class="btn btn-default" id="ProbListBtn" onclick="ListProbs();">Add to List</button>
</p>
</td>
</tr>
</tbody>
</table>
</div>
JAVASCRIPT
function ListProbs() {
if (document.getElementById("ProbListBtn").onclick) {
var txt1 = document.getElementById("ProbAreaFrom").value;
ProbAreaTo.value = txt1;
}
}
Sorry but your working demo does not work correctly either. It can only add 1 item, adding a second will just overwrite the first.
Im sorry but a textarea is not the right way to go as you want the area you placed a textarea to be selectable only, not writeable and editable otherwise it voids the purpose of having to add items with a single line textbox.
I would suggest using a select box with a size of say 5 e.g.
<select id="selectbox" name="selectbox" size="5">
</select>
Then, set the css for the selectbox to have overflow:hidden; so it does not display the scroller (You can then set the overflow to auto if the selectbox length is > 5 in javascript)
In javascript on your add button, you can do this:
var x = document.getElementById("selectbox");
var txt1 = document.getElementById("ProbAreaFrom").value;
var option = document.createElement("option");
option.text = txt1
x.add(option);
This will take the textbox value and add it into the selectbox.
You can then easily code a selected item to be removed on the delete button call.
A select box is used to store and remove newly created elements. This code is complete from the example given above, it does remove the element from the select box and also clears the input text box after you click add. Here is a working JS FIDDLE
CSS
#sbox {
overflow: hidden;
width: 200px;
}
HTML
<div class="table-responsive">
<table class="table table-bordered">
<tbody>
<tr>
<td colspan="2" valign="top">
Problem List:<BR />
<select id="sbox" name="selectbox" size="5"></select>
<BR>
<button type="button" class="btn btn-default" onclick="DeleteProbs();">Delete
Selected Problem</button>
</td>
</tr>
<tr>
<td colspan="2" valign="top"><p>Instructions<P>
<strong>New Problem</strong><P>
<input type="text" id="ProbAreaFrom">
<P>
<button type="button" class="btn btn-default" id="ProbListBtn"
onclick="ListProbs();">Add to List</button>
</p>
</td>
</tr>
</tbody>
</table>
</div>
JAVASCRIPT
function ListProbs() {
var x = document.getElementById("sbox");
var txt1 = document.getElementById("ProbAreaFrom").value;
var option = document.createElement("option");
option.text = txt1
x.add(option);
ProbAreaFrom.value="";
}
function DeleteProbs() {
var x = document.getElementById("sbox");
for (var i = 0; i < x.options.length; i++) {
if (x.options[i].selected) {
x.options[i].remove();
}
}
}
So I want to change the select option using javascript but without reloading the page.
I am able to change other element data using document.getElementById.value
but not the select element
This is what I am trying to do: there is a form and a table inside my webpage , the table data is fetched dynamically using php. The form will edit the data. so when the edit button is pressed the row data against it will be automatically filled into the form.
All other elements of the form could fetch the data with my code. except the select option input element.
below is the the code I have used for each element of the form
jsfiddle here:http://jsfiddle.net/ZE6BX/11/
document.getElementById("l_type").value = data[1];
data array contains the values of the row against which edit is pressed!
u can check whether using index value or option value.
var opt = ocument.getElementById('l_type').options;
for(var i=1;i<opt.length;i++){
if(opt[i].value == 'Ve'){
**opt[i].selected = true;** }
}
this will help u.
This works http://jsfiddle.net/ZE6BX/12/
YOu had a difference in case in between VE in the table and Ve as the value in the select.
Here's the code
HTML:
<div id="l-form">
<form method="post" class="DA_custom_form" id="l-form" action="php/add.php">
<h3>Add</h3>
<label>Name</label>
<input type="text" class="field" id="l_name" name="l_name" />
<label>City</label>
<input type="text" class="field" id="l_city" name="l_city" />
<label>Phone</label>
<input type="text" class="field" id="l_phone" name="l_phone" />
<label>OP</label>
<div class="cl"> </div>
<input type="text" class="field" id="l_op" name="l_op" />
<label>Type</label>
<select class="select_field" id="l_type" name="l_type">
<option value=" ">Select type</option>
<option value="cu">Cu</option>
<option value="Ve">Ve</option>
<option value="Ex">Ex</option>
</select>
<div class="cl"> </div>
<div class="btnp">
<input type="submit" value="Save" name="submit" id="submit" />
</div>
</div>
</form>
</br>
</br>
<table id="existing" border=1>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>View/Edit</th>
</tr>
</thead>
<tbody>
<tr style:padding-left:10px;>
<td>sweet_name</td>
<td>Ve</td>
<td style="display:none">dream_city</td>
<td style="display:none">123456</td>
<td style="display:none">SWAG</td>
<td>
<button class="edit_button" value="Edit" name="button">Edit</button>
</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function () {
var data;
$("#existing").on("click", ".edit_button", function () {
data = $(this).closest("td").siblings().map(function () {
return $(this).text();
}).toArray();
console.log(data[0]); // name
console.log(data[1]); //type
console.log(data[2]); //city
console.log(data[3]); //phone
console.log(data[4]); //op
document.getElementById("l_name").value = data[0];
$("#l_type").value = data[1];
document.getElementById("l_city").value = data[2];
document.getElementById("l_phone").value = data[3];
document.getElementById("l_op").value = data[4];
});
});
I know this has been asked many times before but none of those solutions seem to work in my situation.
I need the checkbox on each row to disable the next text field. Each table row is created on the fly (JS clone). Only the first row is static. Each subsequent row, the name and ID are appended with a new number (formfield1, formfield2, etc) and happen after the page has loaded.
HTML
<div class="add_rec_container" id="fuel_stop" style="display:block;"><!--open #fuel_stop-->
<p class="label">Enter Fuel Stop:</p>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="fuel_stop_table" class="fuel_data">
<tbody>
<tr>
<td><select name="data_fuel_state1" id="data_fuel_state1" class="state_menu">
<option value="AZ">AZ</option>
<option value="CA" selected="selected">CA</option>
<option value="NM">NM</option>
<option value="NV">NV</option>
<option value="OR">OR</option>
<option value="UT">UT</option>
</select>
</td>
<td><input type="tel" name="data_total_gal1" id="data_total_gal1" class="help total_gal_field" title="Gallons"/></td>
<td><input type="checkbox" name="data_yard1" id="data_yard1" class="enablePPG" value="yes" onclick="disablePPG(this);"/> Yard
</td>
<td>$ <input type="tel" name="data_price1" id="data_price1" class="help price_field" title="PPG" /></td>
</tr>
</tbody>
</table>
<a id="add_fuel_row" class="add_btn">+ State</a>
</div><!--close #fuel_stop-->
<input type="submit" name="Submit" class="send_button" value="Send"/>
</form>
</div><!--close .record_entry_container-->
JS (not working but I think should)
function disablePPG() {
$(this).click(function() {
if ($(this).is(':checked')){
$(this).next('.price_field').prop('disabled', true);
} else {
$(this).next('.price_field').prop('disabled', false);
}
});
}
The following JS works on the first row of form elements, but obviously not a solution for multiple rows when added.
function disablePPG() {
$(this).click(function() {
if ($('#data_yard1').is(':checked')) {
$('#data_price1').prop('disabled', true);
} else {
$('#data_price1').prop('disabled', false);
}
});
}
Any help much appreciated.
$(".enablePPG").on("click", function()
{
if($(this).is(":checked") == true)
$(this).parent().next().children().attr("disabled", "disabled");
else
$(this).parent().next().children().removeAttr("disabled");
});