My goal is to design a program that will take user input to create a title, keywords, and a set of matching descriptions. Once the user enters this into the UI and clicks generate_html the section should disappear. Then the word matching html should be generated with the user data.
For example, the input page would look like the figure shown below:
The word matching html would look like the figure shown below:
The code for the user input is the following
User Input:
<center>
<div class="inputBoxes">
<table id="tablestyle">
<td>
<input id="el1" type="text" value="">
</td>
<td>
<input id="el2" type="text" value="">
</td>
<td>
<input id="el3" type="text" value="">
</td>
<td>
<input id="el4" type="text" value="">
</td>
<td>
<input id="el5" type="text" value="">
</td>
</table>
</div>
</center>
Result in HTML:
<center>
<div class="inputBoxes">
<table id="tablestyle">
<td>
<input id="dl1" type="text" value="">
</td>
<td>
<input id="dl2" type="text" value="">
</td>
<td>
<input id="dl3" type="text" value="">
</td>
<td>
<input id="dl4" type="text" value="">
</td>
<td>
<input id="dl5" type="text" value="">
</td>
</table>
</div>
</center>
<center>
<center>
<span style="padding: 3px">
<button id ="one" class="button" type="button" onClick="generate_html()">generate html</button>
</span>
</center>
The code for the description and word matching is
<center>
<div class="source">
<div id="s1" class="draggyBox-small"></div>
<div id="s2" class="draggyBox-small"></div>
<div id="s3" class="draggyBox-large"></div>
<div id="s4" class="draggyBox-small"></div>
<div id="s5" class="draggyBox-small"></div>
</div>
</center>
<table id="tablestyle">
<tr id="row1">
<td>
<div id="t1" class="ltarget"></div>
</td>
<td id = "d1">
</td>
</tr>
<tr id="row2">
<td>
<div id="t2" class="ltarget"></div>
</td>
<td id = "d2">
</td>
</tr>
<tr id="row3">
<td>
<div id="t3" class="ltarget"></div>
</td>
<td id = "d3">
</td>
</tr>
<tr id="row4">
<td>
<div id="t4" class="ltarget"></div>
</td>
<td id = "d4">
</td>
</tr>
<tr id="row5">
<td>
<div id="t5" class="ltarget"></div>
</td>
<td id = "d5">
</td>
</tr>
</table>
The generate_html method is shown below
function generate_html() {
el1 = document.getElementById("el1").value
el2 = document.getElementById("el2").value
el3 = document.getElementById("el3").value
el4 = document.getElementById("el4").value
el5 = document.getElementById("el5").value
s1 = document.getElementById("s1")
s2 = document.getElementById("s2")
s3 = document.getElementById("s3")
s4 = document.getElementById("s4")
s5 = document.getElementById("s5")
dl1 = document.getElementById("dl1").value
dl2 = document.getElementById("dl2").value
dl3 = document.getElementById("dl3").value
dl4 = document.getElementById("dl4").value
dl5 = document.getElementById("dl5").value
d1 = document.getElementById("d1")
d2 = document.getElementById("d2")
d3 = document.getElementById("d3")
d4 = document.getElementById("d4")
d5 = document.getElementById("d5")
s1.innerHTML = el1
s2.innerHTML = el2
s3.innerHTML = el3
s4.innerHTML = el4
s5.innerHTML = el5
d3.innerHTML = dl1
d4.innerHTML = dl2
d5.innerHTML = dl3
d1.innerHTML = dl4
d2.innerHTML = dl5
answer = el4+": "+dl4+"\n"+el5+": "+dl5+"\n"+el1+": "+dl1+"\n"+el2+": "+dl2+"\n"+el3+": "+dl3
console.log(answer)
}
As stated above, I'd like to break this up into two sections such that when the user clicks the generate_html button the section transitions to the word matching html. If anyone could provide advice on how to achieve this I would appreciate it. Thank you.
I think your question is essentially, "How do I change the visibility of parts of the DOM on user input (e.g. the press of a button)?" The most basic answer is to use the CSS visibility property and set it in javascript via the HTML DOM style property.
I've translated your code into a working snippet below. See my comments inline for what I've changed. A couple of notes:
You didn't provide the table styling, or any other styling, for that matter, so it's unstyled in the snippet. Also, you set the tables to id="tablestyle" when I think you meant class="tablestyle", so I made that change. Having multiple elements with the same id is always a bad idea.
Even if the table were styled, one would be hard-pressed to get it looking like your screenshot. I suspect you have some styling that puts the table inline with all the draggyBoxes, but that seems rather clunkly to me, and also violates the div (new line) v. span (inline) rule. For a more modern approach, I would recommend familiarizing yourself with flexbox, which you can use pretty easily to replicate something like your screenshot.
function generate_html() {
el1 = document.getElementById("el1").value
el2 = document.getElementById("el2").value
el3 = document.getElementById("el3").value
el4 = document.getElementById("el4").value
el5 = document.getElementById("el5").value
s1 = document.getElementById("s1")
s2 = document.getElementById("s2")
s3 = document.getElementById("s3")
s4 = document.getElementById("s4")
s5 = document.getElementById("s5")
dl1 = document.getElementById("dl1").value
dl2 = document.getElementById("dl2").value
dl3 = document.getElementById("dl3").value
dl4 = document.getElementById("dl4").value
dl5 = document.getElementById("dl5").value
d1 = document.getElementById("d1")
d2 = document.getElementById("d2")
d3 = document.getElementById("d3")
d4 = document.getElementById("d4")
d5 = document.getElementById("d5")
s1.innerHTML = el1
s2.innerHTML = el2
s3.innerHTML = el3
s4.innerHTML = el4
s5.innerHTML = el5
d3.innerHTML = dl1
d4.innerHTML = dl2
d5.innerHTML = dl3
d1.innerHTML = dl4
d2.innerHTML = dl5
// get the input and results sections and flip their visibilities
document.getElementById("input-section").style.visibility = "hidden"
document.getElementById("results-section").style.visibility = "visible"
answer = el4+": "+dl4+"\n"+el5+": "+dl5+"\n"+el1+": "+dl1+"\n"+el2+": "+dl2+"\n"+el3+": "+dl3
console.log(answer)
}
<!-- Added input-section div so that we can control its visibility -->
<div id="input-section">
<center>
<div class="inputBoxes">
<table class="tablestyle">
<td>
<input id="el1" type="text" value="1">
</td>
<td>
<input id="el2" type="text" value="2">
</td>
<td>
<input id="el3" type="text" value="3">
</td>
<td>
<input id="el4" type="text" value="4">
</td>
<td>
<input id="el5" type="text" value="5">
</td>
</table>
</div>
<div class="inputBoxes">
<table class="tablestyle">
<td>
<input id="dl1" type="text" value="6">
</td>
<td>
<input id="dl2" type="text" value="7">
</td>
<td>
<input id="dl3" type="text" value="8">
</td>
<td>
<input id="dl4" type="text" value="9">
</td>
<td>
<input id="dl5" type="text" value="10">
</td>
</table>
</div>
<div style="padding: 3px">
<button id ="one" class="button" type="button" onClick="generate_html()">generate html</button>
</div>
</center>
</div>
<!-- Added results-section div so that we can control its visibility,
initially set to "hidden" -->
<div id="results-section" style="visibility: hidden">
<center>
<div class="source">
<div id="s1" class="draggyBox-small"></div>
<div id="s2" class="draggyBox-small"></div>
<div id="s3" class="draggyBox-large"></div>
<div id="s4" class="draggyBox-small"></div>
<div id="s5" class="draggyBox-small"></div>
</div>
</center>
<table class="tablestyle">
<tr id="row1">
<td>
<div id="t1" class="ltarget"></div>
</td>
<td id = "d1">
</td>
</tr>
<tr id="row2">
<td>
<div id="t2" class="ltarget"></div>
</td>
<td id = "d2">
</td>
</tr>
<tr id="row3">
<td>
<div id="t3" class="ltarget"></div>
</td>
<td id = "d3">
</td>
</tr>
<tr id="row4">
<td>
<div id="t4" class="ltarget"></div>
</td>
<td id = "d4">
</td>
</tr>
<tr id="row5">
<td>
<div id="t5" class="ltarget"></div>
</td>
<td id = "d5">
</td>
</tr>
</table>
</div>
I have been tasked with coding some javascript to add a pizza to a 'basket'. I have a 'Add to Basket' button which needs to get the name, description, size and price of the pizza.
Currently, I have managed to get the name and description of the pizza from the 'Add to Basket' button but I also need to get the price and size of the pizza which is determined from what radio button the user selects.
The html code was given to me.
<td>
<table border="0" cellpadding="0">
<tbody>
<tr align="center">
<td>
<input id="size" name="Cheese" data-price="6.50" value="Small" type="radio" checked>Small
</td>
<td>
<input id="size" name="Cheese" data-price="8.50" value="Medium" type="radio">Medium
</td>
<td>
<input id="size" name="Cheese" data-price="9.99" value="Large" type="radio">Large
</td>
</tr>
<tr align="center">
<td style="padding-top: 6px">£6.50</td>
<td style="padding-top: 6px">£8.50</td>
<td style="padding-top: 6px">£9.99</td>
</tr>
</tbody>
</table>
</td>
<td>
<input id="addbasket" name="Cheese" data-description="Mozzarella cheese" value="Add to Basket" type="button" onclick="addBasket(this)">
</td>
Here is the javascript, I was also asked to convert the NodeList to an array and then filter through that array to get the radio button that is checked which I think I have done with the first two lines.
function addBasket(button) {
var nodes = [].slice.call(document.getElementsByName(name));
var radio = nodes.filter(function(el){return el.checked;})[0];
var pizzaname = button.name;
var pizzadesc = button.getAttribute('data-description');
var pizzaprice = radio.dataset.price;
}
Now I don't know how to get the 'data-price' and the 'value' (size of pizza) from the radio button.
You can use radio.getAttribute('data-price') to get the price of the pizza and radio.value to get the size of the pizza. Also note that you can avoid using [].slice.call by using [].filter.call on your NodeList.
var name = 'Cheese'
function addBasket(button) {
var nodes = document.getElementsByName(button.name)
var radio = [].filter.call(nodes, function(e) {
return e.checked
})[0]
var pizzaname = button.name
var pizzadesc = button.getAttribute('data-description')
var pizzasize = radio.value
var pizzaprice = radio.getAttribute('data-price')
console.log({
Name: pizzaname,
Description: pizzadesc,
Size: pizzasize,
Price: pizzaprice
})
}
<td>
<table border="0" cellpadding="0">
<tbody>
<tr align="center">
<td>
<input name="Cheese" data-price="6.50" value="Small" type="radio" checked>Small
</td>
<td>
<input name="Cheese" data-price="8.50" value="Medium" type="radio">Medium
</td>
<td>
<input name="Cheese" data-price="9.99" value="Large" type="radio">Large
</td>
</tr>
<tr align="center">
<td style="padding-top: 6px">£6.50</td>
<td style="padding-top: 6px">£8.50</td>
<td style="padding-top: 6px">£9.99</td>
</tr>
</tbody>
</table>
</td>
<td>
<input id="addbasket" name="Cheese" data-description="Mozzarella cheese" value="Add to Basket" type="button" onclick="addBasket(this)">
</td>
My below code skips the last row of the html table on button click if all the values are filled in the text box's but now i have a situation where i wan to skip the first row only as in my case there will be heading on first row and print all data expect first row.
With Heading demo doent work as there is text on first row
Demo With out heading skips last row working
HTML
<table border="1" id="Positions_names">
<tbody>
<tr>
<td align="center">text heading
</td>
<td>
text heading
</td>
<td style="display:none;">
text heading
</td>
<td style="display:none;">
text heading
</td>
<td style="display:none;">
text heading
</td>
<td style="display:none;">
text heading
</td>
<td style="display:none;">
text heading
</td>
</tr>
<tr>
<td align="center">b
<input type="hidden" value="b">
</td>
<td>
<input onchange="election_title_onchange();" class="designatiom_placeholder" type="text" placeholder="Enter a Designation">
</td>
<td style="display:none;">
<input type="hidden" class="election_id" value="767F1G">
</td>
<td style="display:none;">
<input type="hidden" class="election_title" value="21">
</td>
<td style="display:none;">
<input type="hidden" class="election_date" value="2015-09-21">
</td>
<td style="display:none;">
<input type="hidden" class="election_start_time" value="02:03">
</td>
<td style="display:none;">
<input type="hidden" class="election_end_time" value="15:04">
</td>
</tr>
<tr>
<td align="center">c
<input type="hidden" value="c">
</td>
<td>
<input onchange="election_title_onchange();" class="designatiom_placeholder" type="text" placeholder="Enter a Designation">
</td>
<td style="display:none;">
<input type="hidden" class="election_id" value="767F1G">
</td>
<td style="display:none;">
<input type="hidden" class="election_title" value="21">
</td>
<td style="display:none;">
<input type="hidden" class="election_date" value="2015-09-21">
</td>
<td style="display:none;">
<input type="hidden" class="election_start_time" value="02:03">
</td>
<td style="display:none;">
<input type="hidden" class="election_end_time" value="15:04">
</td>
</tr>
<tr>
<td align="center">d
<input type="hidden" value="d">
</td>
<td>
<input onchange="election_title_onchange();" class="designatiom_placeholder" type="text" placeholder="Enter a Designation">
</td>
<td style="display:none;">
<input type="hidden" class="election_id" value="767F1G">
</td>
<td style="display:none;">
<input type="hidden" class="election_title" value="21">
</td>
<td style="display:none;">
<input type="hidden" class="election_date" value="2015-09-21">
</td>
<td style="display:none;">
<input type="hidden" class="election_start_time" value="02:03">
</td>
<td style="display:none;">
<input type="hidden" class="election_end_time" value="15:04">
</td>
</tr>
</tbody>
</table>
<input type="submit" onclick="save_election_req_details();" id="submit_positions">
js:
$('#submit_positions').click(function () {
var x = document.getElementById("Positions_names").rows.length;
if(x=="1")
{
alert("Select Some Details to Contunue");
}
else {
var html = '';
var arr = [];
var valid = true;
$('#Positions_names tr').each(function (index, me) {
if (index < $('#Positions_names tr').length - 1 && valid) {
var inputs = $('input', me);
inputs.each(function (index, me) {
if ($(me).val().length == 0) valid = false;
});
var selects = $('select', me);
selects.each(function (index, me) {
if ($(me)[0].selectedIndex == 0) valid = false;
});
if (valid){
arr.push('("' + inputs[0].value + '","' + inputs[1].value +'")');
}
}
});
if (valid) {
html = 'INSERT INTO demo (xxxx, xxxxx, xxxx,xxxx,xxxx) VALUES ' + arr.join(',') + ';';
alert(html);
} else
{
alert("Fill the Price or Select the Created Product");
}
}
});
Maybe like this? FIDDLE
I just added another condition in your if-clause.
Before:
if (index < $('#Positions_names tr').length - 1 && valid) {
After:
if (index < $('#Positions_names tr').length && valid && index >= 1) {
Alternatively:
if (index >= 1 && valid) {
try this
$('#Positions_names tr:gt(0)').each(function (index, me) {
$('tbody tr').each(function(){
$(this).find('td:eq(5)').text('$145');
});
In above example you can skip header row by putting it into thead. I have given code to loop through the Table Body
jsFiddle
Some Refrences, may Help you.
each()
find()
:eq() Selector
text()
Depending on how you want to do things. Here is a more succinct way of doing your JavaScript. It uses pseudo elements for first and last. Also you can use <thead> tags to do headers. This eliminates the need to skip the first row.
$('form').submit(function(e) {
//prevents the form from submitting
e.preventDefault();
//pushes the strings into arrays to be joined by commas later
var chunck = [];
//foreach tr in tbody
$('tbody tr')
//do not select first or last child tr
.not(':last-child,:first-child')
//find the inputs an foreach
.find('input').each(function() {
//get the name and the value
var name = $(this).attr("name");
var value = $(this).val();
//if the value is not empty then push it to the string
if (value.length > 0) {
chunck.push("('" + name + "','" + value + "')");
}
})
//chunck.join() puts commas between array elements
var string = 'INSERT INTO (name,value) VALUES ' + chunck.join();
alert(string);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table border="1">
<thead>
<tr>
<th>Head</th>
<th>Head</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>
<input name='a' />
</td>
</tr>
<tr>
<td>b</td>
<td>
<input name='b' />
</td>
</tr>
<tr>
<td>c</td>
<td>
<input name='c' />
</td>
</tr>
<tr>
<td>d</td>
<td>
<input name='d' />
</td>
</tr>
</tbody>
</table>
<input type="submit" />
</form>
how i can get sum of balance amount of checked row?
I am not able to get event of checkbox and then column's value of that particular row.
Please help me out.
I got my Ans by my own
var grid = $("#amount_detail").data("kendoGrid");
grid.tbody.on("change", ".ob-paid", function (e) {
var row = $(e.target).closest("tr");
var item = grid.dataItem(row);
var balance_amount = item.balance_amount;
item.set("checkbox", $(e.target).is(":checked") ? 1 : 0);
if($(e.target).is(":checked")==1){
var t = ($("#tot_balance").val() * 1)+(balance_amount * 1);
$("#tot_balance").val(t);
}
else{
var t = ($("#tot_balance").val() * 1)-(balance_amount * 1);
$("#tot_balance").val(t);
}
I created a prototype on jsbin for you to check out. This should contain all of the necessary components to do what you're asking for. I am assuming the Kendo UI grid has an ID, so you would want to replace the selector that I have used with your grid's ID. However, the concept is essentially what you're looking for.
Assuming you have a grid with the id myTable, you would be able to do something like this:
<table id="myTable">
<thead>
<tr>
<th>
Select
</th>
<th>
Action
</th>
<th>
Action
</th>
<th>
Name
</th>
<th>
Unique ID
</th>
<th>
Format
</th>
<th>
Job #
</th>
<th>
Total Amount
</th>
<th>
Balance Amount
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="check" />
</td>
<td>
<input type="button" value="Make Payment" />
</td>
<td>
<input type="button" value="Change Details" />
</td>
<td>
John Doe
</td>
<td>
12345
</td>
<td>
AIR CAN
</td>
<td>
Random Number 11122
</td>
<td>
1500
</td>
<td class="balance">
2340
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="check" />
</td>
<td>
<input type="button" value="Make Payment" />
</td>
<td>
<input type="button" value="Change Details" />
</td>
<td>
Jane Doe
</td>
<td>
56789
</td>
<td>
LCL CAN
</td>
<td>
Random Number 14562
</td>
<td>
1300
</td>
<td class="balance">
1000
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="check" />
</td>
<td>
<input type="button" value="Make Payment" />
</td>
<td>
<input type="button" value="Change Details" />
</td>
<td>
Jim Bob
</td>
<td>
82352
</td>
<td>
AIR CAN
</td>
<td>
Random Number 985613
</td>
<td>
600
</td>
<td class="balance">
800
</td>
</tr>
</tbody>
</table>
<br />
<p id="total">
</p>
You're JavaScript might look something like this:
$(document).ready(function(){
//Store the totals here.
var totals = [];
//Handle checkbox click.
$('#myTable input:checkbox').on('click', function(){
var sum = 0;//For adding the sum
//Get the cell with the balance in it.
var number = $(this).parentsUntil('tbody').find('.balance').text();
//Handle if checked
if ($(this).is(':checked')){
$(this).parentsUntil('tbody').addClass('highlight');
totals.push(parseInt(number));
}else{//Handle if not checked
$(this).parentsUntil('tbody').removeClass('highlight');
var idx = totals.indexOf(parseInt(number));
totals.splice(idx, 1);
}
for (var n = 0; n < totals.length; n++){
sum += totals[n];
}
$('#total').text(sum > 0 ? sum : "");
});
});
Please see the prototype for clarification on use and for a live demo of the code.
Hope this helps. :)
My script is here : jsfiddle
i have two attributes in my form that my script do edit on a click in the div area/next to the link or double click on the link ( this how the script do the edit )
my problem is: if i have a textarea that includes an URLs per row and it sums all the chars in one link, if you see my example above, the link below is actually textarea with test1.com in first row and test2.com in second row, but the script shows this link : test1.comtest2.com, and i need it to be two link each one on a row, how can i do this ?
Refer this LIVE DEMO 2
Addition to my previous answer, I have modified some parts of JQuery to handle your criteria.
HTML:
<table>
<tbody>
<tr>
<td class="left">
<label>Date: </label>
</td>
<td class="cartRight">
<span id="status0" style="float:right;"/>2012-06-20
</td>
</tr>
<tr>
<td class="left">
<label>*Anchor Text </label>
</td>
<td class="cartRight">
<input type="text" value="dasdas" onchange="immediateEditItemInCart(this.value,'anchor_text',0,'pr','35')" class="mandatory0" readonly="readonly" id="anchor_text0"/>
<br/>
</td>
</tr>
<tr>
<td class="left">
<label>*URL </label>
</td>
<td class="cartRight">
<div style="padding:0 !important">
<div class="a0" style="padding:0 !important">
test.com
</div>
<input type="text" value="dsad.cas" onchange="immediateEditItemInCart(this.value,'url',0,'pr','35')" class="mandatory0" id="url0" style="display:none"/>
</div>
<br/>
</td>
</tr>
<tr>
<td class="left">
<label>Address </label>
</td>
<td class="cartRight">
<input type="text" value="dsada" onchange="immediateEditItemInCart(this.value,'address',0,'pr','35')" class="mandatory0" readonly="readonly" id="address0"/>
<br/>
</td>
</tr>
<tr>
<td class="left">
<label>Phone </label>
</td>
<td class="cartRight">
<input type="text" value="432423" onchange="immediateEditItemInCart(this.value,'phone_number',0,'pr','35')" class="mandatory0" readonly="readonly" id="phone_number0"/>
<br/>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td class="left">
<label>Date: </label>
</td>
<td class="cartRight">
<span id="status4" style="float:right;"/>2012-06-22
</td>
</tr>
<tr>
<td class="left">
<label>*Anchor Text </label>
</td>
<td class="cartRight">
<input type="text" value="dasdasd" onchange="immediateEditItemInCart(this.value,'anchor_text',4,'am','30')" class="mandatory4" readonly="readonly" id="anchor_text4"/>
<br/>
</td>
</tr>
<tr>
<td class="left" style="vertical-align: top">
<label>*URL </label>
</td>
<td class="cartRight">
<div style="padding:0 !important;">
<div class="a0" style="padding: 0px ! important; display: block;width:200px;">
<a target="_blank" href="test1.com">test1.com</a><br/>
<a target="_blank" href="test2.com">test2.com</a><br/>
</div>
<textarea cols="82" onchange="immediateEditItemInCart(this.value,'url',4,'am','30');$(this).autoGrow();" class="mandatory4" id="url4" input="" style="height: auto; overflow: hidden; display: none;" rows="3">test1.com<br></br>test2.com<br></br></textarea>
<div class="clear">
</div>
</div>
</td>
</tr>
</tbody>
</table>
JQuery:
$('.a0 a').click(function(){
var href = $(this).attr('href');
// Redirect only after 500 milliseconds
if (!$(this).data('timer')) {
$(this).data('timer', setTimeout(function() {
window.open(href, '_blank')
}, 500));
}
return false; // Prevent default action (redirecting)
});
$('.a0').dblclick(function(){
var txt = document.createElement('div');
$.each($(this).find('a'), function(i, val) {
clearTimeout($(val).data('timer'));
$(val).data('timer', null);
$(txt).append($(val).text());
$("<br>").appendTo(txt);
});
var content = $(this).parent().find('input,textarea');
var text = "";
$.each($(txt).html().split("<br>"), function(i, val) {
if (val != "")
text += val + "\n";
});
$(content).html(text);
$(this).hide();
$(content).show().focus();
})
$('#url0, #url1, #url4').each(function(index, element) {
$(element).blur(function(){
if ($(this).val().length == 0)
$(this).show();
else
{
var ele = this;
var lines = $(ele).val().split("\n");
var divEle = $(ele).hide().prev().show().empty();
$.each(lines, function(i, val) {
$("<a />").html(val).attr({
'href': val,
'target': '_blank'}).appendTo(divEle);
$("<br/>").appendTo(divEle);
});
}
});
});
Given a string with white-space separated values:
var str = "test1.com test2.com";
you can retrieve the individual values by splitting it:
var vals = str.split(/\s+/);
The above uses a regex to split wherever there are one or more whitespace characters together, and will set vals to an array containing the values.
Your current code is really tied in to a single anchor element, so you'd need to update it to create however many are needed. Maybe if you wrapped your existing anchor in some container (a span or div) so that that container can hold multiple anchors then you could do something like this:
var vals = this.value.split(/\s+/),
$container = $(this).hide().prev().show().empty();
$.each(vals, function(i, val) {
if (i > 0) $("<span> </span>").appendTo($container);
$("<a />").html(val).attr('href',val).appendTo($container);
});
Of course you need a corresponding change in the code that takes the anchor text and puts it in the textarea for editing, but I've done that in this working demo: http://jsfiddle.net/pg8Pu/4/
Refer LIVE DEMO
I have come across some of issues on HTML such as not closing <br>, <input> .. tags. Whatever I have seen issues on HTML, those I have fixed.
While testing the live demo, follow the steps:-
To edit the hyperlink, double click on dotted area
To open the link, click on the link
HTML:
<table>
<tbody>
<tr>
<td class="left">
<label>Date: </label>
</td>
<td class="cartRight">
<span id="status0" style="float:right;"/>2012-06-20
</td>
</tr>
<tr>
<td class="left">
<label>*Anchor Text </label>
</td>
<td class="cartRight">
<input type="text" value="dasdas" onchange="immediateEditItemInCart(this.value,'anchor_text',0,'pr','35')" class="mandatory0" readonly="readonly" id="anchor_text0"/>
<br/>
</td>
</tr>
<tr>
<td class="left">
<label>*URL </label>
</td>
<td class="cartRight">
<div style="padding:0 !important">
<div class="a0" style="padding:0 !important">
test.com
</div>
<input type="text" value="dsad.cas" onchange="immediateEditItemInCart(this.value,'url',0,'pr','35')" class="mandatory0" id="url0" style="display:none"/>
</div>
<br/>
</td>
</tr>
<tr>
<td class="left">
<label>Address </label>
</td>
<td class="cartRight">
<input type="text" value="dsada" onchange="immediateEditItemInCart(this.value,'address',0,'pr','35')" class="mandatory0" readonly="readonly" id="address0"/>
<br/>
</td>
</tr>
<tr>
<td class="left">
<label>Phone </label>
</td>
<td class="cartRight">
<input type="text" value="432423" onchange="immediateEditItemInCart(this.value,'phone_number',0,'pr','35')" class="mandatory0" readonly="readonly" id="phone_number0"/>
<br/>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td class="left">
<label>Date: </label>
</td>
<td class="cartRight">
<span id="status4" style="float:right;"/>2012-06-22
</td>
</tr>
<tr>
<td class="left">
<label>*Anchor Text </label>
</td>
<td class="cartRight">
<input type="text" value="dasdasd" onchange="immediateEditItemInCart(this.value,'anchor_text',4,'am','30')" class="mandatory4" readonly="readonly" id="anchor_text4"/>
<br/>
</td>
</tr>
<tr>
<td class="left" style="vertical-align: top">
<label>*URL </label>
</td>
<td class="cartRight">
<div style="padding:0 !important;">
<div class="a0" style="padding: 0px ! important; display: block;width:200px;">
<a target="_blank" href="test1.comtest2.com">test1.com test2.com</a>
</div>
<textarea cols="82" onchange="immediateEditItemInCart(this.value,'url',4,'am','30');$(this).autoGrow();" class="mandatory4" id="url4" input="" style="height: auto; overflow: hidden; display: none;" rows="3">test1.com test2.com</textarea>
<div class="clear">
</div>
</div>
</td>
</tr>
</tbody>
</table>
JS:
$('.a0 a').click(function(){
var href = $(this).attr('href');
// Redirect only after 500 milliseconds
if (!$(this).data('timer')) {
$(this).data('timer', setTimeout(function() {
window.open(href, '_blank')
}, 500));
}
return false; // Prevent default action (redirecting)
});
$('.a0').dblclick(function(){
var txt = "";
for(var i=0; i<$(this).find('a').length; i++) {
clearTimeout($(this).find('a').data('timer'));
$(this).find('a').data('timer', null);
txt += $(this).find('a').text() + "<br/>";
}
$(this).parent().find('input,textarea').html(txt).show().focus();
$(this).hide();
})
$('#url0, #url1, #url4').each(function(index, element) {
$(element).blur(function(){
if ($(this).val().length == 0)
$(this).show();
else
{
var ele = this;
var lines = $(ele).val().split("\n");
var divEle = $(ele).hide().prev().show().empty();
$.each(lines, function(i, val) {
$("<a />").html(val).attr({
'href': val,
'target': '_blank'}).appendTo(divEle);
$("<br/>").appendTo(divEle);
});
}
});
});
Another solution:
$('#url0, #url1,#url4').each(
function(index, element){
$(element).blur(function(){
l = this.value.split(/\s+/);
$(this).hide().prev().show().empty();
txt = "";
for(var i in l) {
txt += ''+l[i] + '<br />';
}
$(this).parent().find('div').not('.clear').html(txt);
})
}
);
See this fiddle
In your example you are saving back whole text from textarea to url of one single a tag.
obviously it will remove the CR/LF from your text when using html() to read the value as CR/LF is not important in html.
If you need to have two tags you need to change your function and put a div instead of a tag as container and then in double click of any of your links read container text.
when saving back the textarea text as links, you need to create one single link (a) tag and put in container div