HTML box formatting - javascript

So I have this bit of JavaScript code that will create two new input fields each time a button is clicked, right now they show up kinda funny. I attached a picture below. The code is also below. I want the name field to show up aligned wit the top of the bigger box, is there any way to do this?
var div = document.createElement("div");
div.innerHTML = "<b>Checkpoint " + markerId + ":</b> <input type='text' id=" + markerId + " placeholder='Checkpoint name'> <textarea rows='5' cols='40' id=" + markerId + "desc> Checkpoint description </textarea> <button type='submit' value='Remove' onClick='remove_checkpoint();' /> <br />";
document.getElementById("divForms").appendChild(div);
Thanks!

Yes. You can do this way:
In CSS:
textarea {vertical-align: top;}
Fiddle: http://jsfiddle.net/praveenscience/xPmY2/
Or if you don't prefer using CSS, give the style inline this way:
<textarea style="vertical-align: top;">Checkpoint description</textarea>
Fiddle: http://jsfiddle.net/praveenscience/xPmY2/1/
But I suggest you go with the CSS version as inline styles are clumsy.
Screenshot

Related

Add button inside textbox

I have this form which allows people to add addresses depending on how many ever they need and it is controlled by two buttons, one that is "add address" and another that is "remove". I was wondering if anyone could help me remove the "remove" button and instead place an "x" in the right corner of the text box that acts as a button to remove that box. I have placed the code related to the form below. Thanks again beforehand for all your help, I appreciate all your help.
jquery
<script>
$(window).load(function(){
$("#add-address").click(function(e){
e.preventDefault();
var numberOfAddresses = $("#form1").find("input[name^='data[address]']").length;
var label = '<label for="data[address][' + numberOfAddresses + ']"></label> ';
var input = '<input type="text" name="data[address][' + numberOfAddresses + ']" id="data[address][' + numberOfAddresses + ']" placeholder= "Address ' + (numberOfAddresses+1) + '"/>';
var removeButton = '<button class="remove-address">Remove</button>';
var html = "<div class='address'>" + label + input + removeButton + "</div>";
$("#form1").find("#add-address").before(html);
});
$(document).on("click", ".remove-address",function(e){
e.preventDefault();
$(this).parents(".address").remove();
//update labels
$("#form1").find("label[for^='data[address]']").each(function(){
//$(this).html("Address " + ($(this).parents('.address').index() + 1));
$(this).next("input").attr("placeholder","Address " + ($(this).parents('.address').index() + 1));
});
});
});
</script>
html
<form id="form1" method="post" action = "h.php">
<div class="address">
<!--<label for="data[address][0]">Address 1</label>-->
<input type="text" name="data[address][0]" id="data[address][0]" placeholder = "Address 1" />
</div>
<button id="add-address">Add address</button>
<input type="submit" value="Submit" />
</form>
You can do this simply using css, display:inline-block, and a negative margin-left
HTML
<div class="address">
<!--<label for="data[address][0]">Address 1</label>-->
<input type="text" name="data[address][0]" id="data[address][0]" placeholder = "Address 1" />
<div class="inputRemove">×</div>
</div>
CSS
.inputRemove{
display:inline-block;
margin-left:-20px;
cursor:pointer;
}
.address input[type=text] {
padding-right:25px;
}
The .address input[type=text] styling will make it so text inputed will not display under the close x
JSFiddle Demo
Just use position absolute the 'x'
.container " position relative
textarea " psotion absolute
.closeBtn " position absolute
notice i put the .closeBtn after the textarea element, so you dont need to specify the z-index in css. the later element will be above the previous element by default.

Switching between div tags breaks my code

I have been working on a project recently and have been required to learn jQuery to do it. Not such an easy thing to learn for a beginner ha. Anyway I have been trying to have a few div tags that are switched between depending on which one the user has clicked on.
The first one, "Add field" should switch to a div that contains a button to add a new field. Now instead of putting a large amount of code here I instead put it into http://jsfiddle.net/9acEk/8/ so you could see a working example, or rather not working. My problem is that when I change a tab and click back on "Add field" tab the buttons no longer work. the page opens with a button that when clicked adds a text box. However even if I just click on the "Add field" tab the button no longer does anything, I have used alert boxs to display the code and it is exactly the same. I have no idea why this does not work after clicking on the tab, it makes no sense to me as the code, as mentioned, is exactly the same.
Apologies if the question makes no sense, any questions on it just ask me and I shall do my best to clear it up. Thanks a lot in advance to any help given, it is appreciated.
EDIT:
It seems the jsfiddle does not work(Sorry very new to that as well) so I shall instead put code here.
<html>
<body>
<table width ="100%" alight="right">
<td width ="51.5%"></td>
<td> <div id="addField" class="tabOptions">Add field</div></td>
<td><div id="fieldProperties" class="tabOptions">Field Properties</div></td>
<td> <div id="formProperties" class="tabOptions">Form Properties</div></td>
</table>
<hr>
<table align ="left"style="background-color: white" width="100%">
<tr>
<tr>
<div id="formName" class="formDetails">
<h2>Untitled</h2>
<h4>This is your form description</h4>
</div>
</tr>
<td width ="50%">
<ul id ="firstColumn">
<div id="identifier">
</div>
</ul>
</td>
<td>
<ul id ="secondColumn" width="5%">
<div id="placeholder">
<div id="mainPanel">
<li><input type="button" class="formCreationButton" id="textAdd" value="Single line text" /></li>
</div>
</div>
</ul>
</td>
<tr>
</table>
​
jQuery
var counter = 1;
var textAreaCounter = 1;
var textBoxCounter = 1;
var tempStorage = $('div#placeholder').html();
$(document).ready(function() {
$(".formDetails").live('click','div',function(){
var divID = this.id;
alert(divID);
alert(document.getElementById(divID).innerHTML);
});
$(".container").live('click','div',function(){
var divID = this.id;
if(divID != ""){
alert(divID);
var content = document.getElementById(divID).outerHTML;
// alert(content);
var text = document.getElementById(divID).innerHTML;
alert(text);
var textboxId = $('div.container')
.find('input[type="text"]')[0]
.id;
$('div#placeholder').html(content);
}
else{
}
});
$("#addField").live('click','div',function(){
$('div#placeholder').html(tempStorage);
});
$("#fieldProperties").live('click','div',function(){
var content = "<p>Content of fields should be here</p>";
$('div#placeholder').html(content);
});
$("#formProperties").live('click','div',function(){
var content = "<p>Content of form should be here</p>";
$('div#placeholder').html(content);
});
$('#textAdd').click(function() {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Textbox " + textBoxCounter + " <br><div id='container " + textBoxCounter + "' class='container'><li><input type='text' value='TEXT' id='textBox " + textBoxCounter +"' name='textBox " + textBoxCounter +"')'></li></div></br>";
document.getElementById("identifier").appendChild(newdiv);
textBoxCounter++
counter++;
});
});​
Change
$('#textAdd').click(function()
to
$('#textAdd').live('click',function() {
and it works fine .. working example here
A couple of things ....
You are using a very old version of jQuery - 1.4.4. I suggest that if your going to learn something new you learn the latest release .... and in that latest release the live() function has been replaced by on() - so your code would look like this :
$(document).on('click','#textAdd',function() {
Where document is any parent element present on page load
Working example here

Validation using javascript or jquery

How to created textbox dynamically , when i click add button.
after i put the input field in the text box.
how to validate the dynamically created textbox using javascript or jquery.
<html>
<head>
<title>Adding and Removing Text Boxes Dynamically</title>
<script type="text/javascript">
var intTextBox=0;
//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement(){
intTextBox = intTextBox + 1;
var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','strText'+intTextBox);
newTBDiv.innerHTML = "Text "+intTextBox+": <input type='text' id='" + intTextBox + "' name='" + intTextBox + "'/>";
contentID.appendChild(newTBDiv);
}
</head>
<body>
<p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>
<p><a href="javascript:addElement();" >Add</a>
<a href="javascript:removeElement();" >Remove</a>
</p>
<div id="content"></div>
<input type="button" value="submit"/>
</body>
</html>
after when i click submit button all textbox validation must be done....
Try to copy this and test. And let's tell me that is as you need.
<!DOCTYPE HTML>
<html>
<head>
<title>Adding and Removing Text Boxes Dynamically</title>
<script type="text/javascript">
var intTextBox = 0 ;//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement(){
intTextBox += 1
var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','strText'+intTextBox);
newTBDiv.innerHTML = "Text "+intTextBox%x+": <input type='text' id='%2+ intTextBox + "' name='" + intTextBox + "' />";
contentID.appendChild(newTBDiv);
}
function removeElement(){
var element = document.getElementById("strText"+intTextBox);
console.log(element);
while (element.firstChild) {
element.removeChild(element.firstChild);
}
intTextBox -=1;
}
</script>
</head><body>
<p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>
<p><a href="javascript:addElement()" >Add</a>
<a href="javascript:removeElement();" >Remove</a>
</p>
<div id="content"></div>
<input type="button" value="submit"/>
</body>
</html>
See more at My jsFiddle
Note : working with FireFox & Chrome
create textbox:
var textbox = $('<input></input>');
textbox.setAttr(type, 'text');
add to container:
$('#button').onclick(function() {
$('#container').append(textbox);
});
validate:
$('#submit').onclick(function() {
if(!$('#textbox').val()) {
alert('input empty');
}
});
You could use this jQuery Validation Plugin. The demo shows that is can validate textboxes.
that's alot of questions rolled into one. You can create and insert elements in jquery with code like the following:
$('<input />', {type : 'text'}).appendTo($(body));
As far as validation is concerned, it would depend on when you want to do it. on keypress, on submit, on blur, etc. If you want a blanket validate for all inputs you'll need to delegate it to some parent element since these textboxes are created after the page is loaded:
$('body').delegate('input','keyup', function(){
/*Do stuff*/
});
But you could also attach the validation when you create the element if it needs to be specific to the field you create.
$('<input />', {type : 'text'}).bind('keyup', function(){
/*Do stuff*/
}).appendTo($(body));
I hope that steers you in the right direction. Good luck

Input value and div's innerHTML are changed with Javascript but don't change in display

I have an INPUT text field, a DIV and an IMG.
The IMG has an onClick event:
reads the INPUT field's current value,
increase it with 1,
does a calculation with the increased value,
writes the result into the DIV.
The value of the INPUT is always increased the right way and the DIV's innerHTML always gets the right result but nothing changes in display. The displayed numbers always stay the same even if everything is done correctly in the "background".
The funny thing in it that I used the same operation at another place on the same site and there everything works and displays perfectly.
Here is the function:
function priceCalculator(max_amound,price,id)
{
var amound = parseInt(document.getElementById('sell_amound_' + id).value);
max_amound = parseInt(max_amound);
if (amound < max_amound)
{
amound = amound + 1;
document.getElementById('sell_amound_' + id).value = amound;
var item_value = amound * price;
document.getElementById('price_' + id).innerHTML = item_value;
alert(document.getElementById('sell_amound_' + id).value + ',' + document.getElementById('price_' + id).innerHTML);
}
}
And here are the elements within a PHP code:
<img src="images/plus.png" onclick="priceCalculator(\''.$bag_items[$i]['amound'].'\',\''.$bag_items[$i]['infos']['price'].'\',\''.$i.'\')" />
<form>
<input id="sell_amound_'.$i.'" type="text" readonly value="1" />
</form>
<div id="price_'.$i.'">'.$bag_items[$i]['infos']['price'].'</div>
The alert at the end of the function shows the right values but the displayed values stay the same.
It's a really simple action... What could be the problem?
EDIT:
After loading the source code of an "item" looks like this (these parts are created with loops from database, and, of course, I removed the irrelevant styling from the code and those many divs are there because of them):
<td>
<img id="item_pic_3" src="images/potions/3.png" onClick="shopSellInfo('3')" />
<div>26</div>
<form>
<input type="hidden" id="selected_item" value="" />
</form>
<div id="item_3" style="display: none;">
<span>blah...</span><br />
<span>
<br />blah...<br /><br />
<div>
<div>
<img src="images/increase.png" onclick="priceCalculator('26','10','3')" /><br />
</div>
<div>
<form>
<input id="sell_amound_3" type="text" readonly value="1" />
</form>
/26
</div>
</div>
<br />
<div id="price_3">10</div>
</span>
</div>
</td>
shopSellInfo('3') is the function that makes item_3 displayed at the right place.
Can you please view source and show what is output by:
<div id="price_'.$i.'">'.$bag_items[$i]['infos']['price'].'</div>
Check that the div id is corresponding to the JavaScript's.
EDIT: item_3 has CSS style display: none, that is why changes are not showing up.
I solved the problem!
The problem was that the IDs appeared at another place, too, so the function didn't know where to change the values because of the duplicated IDs.
Anyway, thanks your answers and will for help!

Creating and Removing Information with jQuery

I'm working on a tagging system and I want users to be able to add and remove tags on the page. for each one thats added I am displaying a small div with the tag and an x to remove the tag. I have the adding functionality working, but I'm not sure how to go about making it so I can remove them. I also have a hidden input which should hold all the values so that when the information is submitted I can use it.
Heres my attempt that doesn't work:
function tagsremove(tag) {
$('#hiddentags').val().replace('/'+tag+'\,\s/', '');
$("#tagdiv-"+tag.replace(" ","_")).fadeOut('normal', function(){
$(this).remove();
});
}
$(document).ready(function(){
$('#tagbutton').click(function(){
var tags = $('#tagsbox').val().split(", ");
for (var i in tags) {
$('#hiddentags').val($('#hiddentags').val() + tags[i] +", ");
$('#curtags').append("<div class='tag'>" + tags[i] + " <a href='#' id='#tagdiv-"+tags[i].replace(" ", "_")+"' onclick='tagsremove(\""+tags[i]+"\");' >x</a></div>");
}
$('#tagsbox').val('');
});
});
heres the html to go with it:
<div class='statbox'>
<form method='post' action='post.php' id='writeform'>
<p class='subtitle'>Title</p>
<input type='text' name='title' id='titlebox' /><br />
<p class='subtitle'>Body</p>
<textarea id='postbox' name='body' rows='10'></textarea><br />
<p class='subtitle'>Tags</p>
<input type='text' id='tagsbox' /><input type='button' id='tagbutton' value='Add' />
<p class='subsubtitle'>Seperate by commas (eg. "programming, work, job")</p>
<div class='subsubtitle' id='curtags'>Current Tags:</div>
<input type='hidden' value='' name='tags' id='hiddentags' />
</form>
</div>
Make each of your tag divs have a relevant ID. For, say, the "play pen balls" tag, your ID could be "tagdiv-play_pen_balls". Now you can just do
function removeTag(tag) {
$("#tagdiv-"+tag.replace(" ","_")).remove();
}
to remove the visible div.
(I'm not sure if that's what you were asking for, though...)
Instead of using .val('') you should be using .html('');
http://docs.jquery.com/Manipulation

Categories