Append an input after a textarea with Javascript or jQuery - javascript

I have a textarea in a DIV that I can not modify.
I need to add an element, an input checkbox, just after the text area with javascript.
This is the code :
<div id="msgrapidosinick"><p class="msguser">My Wall</p>
<form method="post" id="messaggioajaxd" name="frm2">
<textarea class="areamsgnoava" name="messaggio"></textarea>
<input type="hidden" value="1" name="invia" id="invia">
<input type="hidden" value="1" name="riceve" id="riceve">
<input type="hidden" value="/assyrian" name="pagina" id="pagina">
<input type="submit" value="Share" class="submsg" name="senda2" style="display: none;">
</form>
</div>
So just after the textarea I need to add an element, that is a input checkbox, when the textarea is clicked.
How do I do that?
Please help me.
Just to let you know my site loads also jQuery 1.3.2
Thank you

You can use the aptly-named after() method:
$("textarea[name=messaggio]").click(function() {
$(this).after("<input type='checkbox' name='yourCheckBoxName' />");
});
If you want to avoid creating the check box if it already exists, you can do something like:
$("textarea[name=messaggio]").click(function() {
var $this = $(this);
if (!$this.next(":checkbox").length) {
$this.after("<input type='checkbox' name='yourCheckBoxName' />");
}
});

Presuming you only want the checkbox created on the first click to the textarea, you could do something like this:
$("#messaggioajaxd textarea").click(function(){
if ($('#createdCheckbox').length==0){
$('<input />').attr('type','checkbox').attr('id','createdCheckbox').insertAfter($(this));
}
});
Example on jsfiddle

Niklas beat me to it but here is what I was going to suggest...
Demo: http://jsfiddle.net/wdm954/ppnzf/1/
$('textarea.areamsgnoava').click(function() {
if ($('input.new').length == 0) {
$(this).after('<input type="checkbox" class="new" />');
}
});

I think that some IE version will not like that you add a field dynamically. If you can add an element to the form, may be you could change the form totally, and inject it as a new form instead, using div.innerHTML or using the DOM.
And add the checkbox in the original HTML as hidden, and show it if the textarea is clicked.
eg:
<div id="msgrapidosinick"><p class="msguser">My Wall</p>
<form method="post" id="messaggioajaxd" name="frm2">
<textarea class="areamsgnoava" name="messaggio"></textarea>
<input type="checkbox" name="checkBox" id="checkBox" style="display:none">
<input type="hidden" value="1" name="invia" id="invia">
<input type="hidden" value="1" name="riceve" id="riceve">
<input type="hidden" value="/assyrian" name="pagina" id="pagina">
<input type="submit" value="Share" class="submsg" name="senda2" style="display: none;">
</form>
</div>
Then if you have the reference of the textarea DOM node:
textarea.onfocus = function(ev){
var ta = ev.target || ev.srcElement;
ta.form.checkBox.removeAttribute('style');
}
Or using jQuery and focus.

Related

Why is jQuery input tag not working when appending input field?

I am trying to create multiple tag fields with jQuery.
The tag script that I am using is from http://codepen.io/k-ivan/pen/NxxGPv
It works perfectly fine, however, when adding more fields by appending, the script stops working.
Can anyone suggest a solution?
HTML:
<form role="form" method="POST" enctype="multipart/form-data" action="../test.php">
<label for="default">Default
<input type="text" id="default" class="tagged form-control" name="tag-1" data-removeBtn="true" placeholder="create tag">
</label>
<input type="button" value ="add More" id="add">
<input type="submit" value="submit">
</form>
jQuery for adding more fields (adding works perfectly fine):
<script >
$(document).ready(function(){
var Count =2;
$('#add').click(function(){
$('#add').before($('<div/>',{
class:'row',
})
.fadeIn('slow')
.append(' <input type="text" id="default" class="tagged form-control" name="tag'+Count+'" data-removeBtn="true" placeholder="create tag">')
)
Count++;
});
});
</script>
I would also like to ask how a PHP script can be added inside this append event?

Text field to Hidden field value - value not being set

I'm having an issue with passing hidden values. I have a search field that onclick calls my javascript function with the intention of setting a hidden fields value further down the page.
<div class="search">
<input type="text" name="username" class="mySearch" value="">
<input type="button" class="myButton" value="" onclick="setSearch();">
</div>
My javascript, i is set outside of the function.
setSearch(){
if(i == 0){
$('input:hidden[name="search1"]').val($(".mySearch").val());
}
else if(i == 1)
{
$('input:hidden[name="search2"]').val($(".mySearch").val());
}
i++;
}
and then the field I'm try to set
<div class="sendallHolder">
<form method="post" action="getTweets.php">
<input type="hidden" name="fromTest" id="fromTest"/>
<input type="hidden" name="untilTest" id="untilTest"/>
<input type="hidden" name="latTest" id="latTest"/>
<input type="hidden" name="longTest" id="longTest"/>
<input type="hidden" name="search1" id="search1" />
<input type="hidden" name="search2" id="search2" />
<input type="submit" class="sendAll" value="Gather News!">
</form>
</div>
It runs through the loop twice but each time its not setting the values properly in my hidden fields. the dev tools in chrome tell me that the 'value' is popping up but no value is being set. I'm not entirely sure what I'm doing wrong.
Any ideas?
The :hidden selector doesn't do what you think. It matches elements that have been hidden using CSS, it doesn't match type="hidden" inputs. Just use
$("#search1")
since you have an id on the elements.
Use hidden input ID like this :
$('#search1').val($(".mySearch").val())
$(".mySearch").keyup(addhjc);
function addhjc(){
$('#search2').val($(".mySearch").val());
}
or
$('.myButton').click(function(){
$('#search2').val($(".mySearch").val());
});
also
function setSearch(){
if(i === 0){........
and define i var

Radio button selected shows a text box

I've searched a couple of questions on this site but couldn't find a helpfull one, the problem which I have is:
I have 2 radio form boxes, which are called 'Youtube' and 'Picture',I want this: When I click on the radio box of Youtube a text form shows up, I can't fix this and thats why I hope you do guys!
thank you for you time!
my Javascript:
<SCRIPT LANGUAGE="JavaScript">
$("input[type='radio']").change(function(){
if($(this).val()=="youtube")
if($(this).val()=="pic")
{
$("#youtube").show();
}
else
{
$("#youtube").hide();
}
});
</script>
My form:
echo '
<form action="post.php" method="post">
title: <input name="title" type="text" id="title"><br />';
//Picture link: <input name="pic" type="text" SIZE="80" id="pic"><br />
//Youtube link: <input name="youtube" type="text" SIZE="80" id="youtube"><br />';
echo '
<input type="radio" name="youtube" value="youtube">Youtube <input style="display: none;" type="text" name="youtube" id="youtube"/> | <input type="radio" name="pic" value="pic">Picture <input style="display: none;" type="text" name="pic" id="pic"/><br />
Category game:
<select name="cat">';
while($row=mysql_fetch_array($query2)){
echo '
<option value="'.$row["nameID"].'">'.$row["name"].'</option> // here is the problem
'; }
echo '
</select>
<input type="submit" name="submit" value="submit">
</form>
';
Maybe you don't need to do the actual test. Just show the text field next to that input field.
Here's a sample:
http://jsfiddle.net/joeSaad/CTFJh/
$('input[type="radio"]').change(function(){
$('input[type="text"]').hide();
$(this).next('label').next('input[type="text"]').show(); });
Hope this helps.
I think you need do this..
$("input[type='radio']").change(function(){
if($(this).val()=="youtube")
{
$("#youtube").show();
$("#pic").hide();
}
if($(this).val()=="pic")
{
$("#pic").show();
$("#youtube").hide();
}
});
this will work fine, but you must be carefully >>look at this mate:
<input type="radio" name="youtube" value="youtube">Youtube <input style="display: none;" type="text" name="youtube" id="youtube"/>
Picture
when you set a radio name, set the name of radio same..like youtube, youtube ...
also, look at a nother name in form, you use a same name for multiple elements, and this wrong mate, give another element defferant name .. to can get it on php side, without any error ...
good luck
You nested the if statements. The code would only be used if they are both true.
Your input type='radio' tags are not "closed" they should end with a slash as in:
input type="radio" name="something" value="something"/>
The text form that you complain about is already in your HTML code as
input style="display: none;" type="text" name="youtube"
id="youtube"/>
and
input style="display: none;" type="text" name="pic" id="pic"/>
By default it is not displayed hence style="display: none",
when your if statement evaluates as true, the display: none will be removed
Simplify, and un-nest your if statements as follows:
if($(this).val()=="youtube")
$("#youtube").show();
} else {
$("#youtube").hide();
}
This simply says if the radio button is the YouTube button, then show the youtube input, otherwise hide it.

Displaying particular values on radio select

I'm trying to display particular forms on the selection of particular radio buttons.
Here are the radio buttons :-
<input type="radio" name="condition" value="working" id="condition">
<input type="radio" name="condition" value="workingdamaged" id="condition">
<input type="radio" name="condition" value="notworking" id="condition">
When we select the working radio, a different form needs to be opened up. When we select nonworking a different form needs to be there.
Originally, I was doing it via document.getElementById("demo").innerHTML , but, I was suggested that using too much forms within the innerHTML is not a good idea.
Then what is the best way by which I complete this task?
Any suggestions are welcome.
The simplest way I can think of is using data attributes for referring to the corresponding form elements from the radio button selected.
All we have to do is map a radio button with 'data-form="working"' to a particular form with id 'working'
The sample code looks like:
$("form").hide();
$("input:radio").on("change", function() {
$("form").hide();
$("#" + $(this).attr("data-form") ).show();
});
The html markup should look like:
<input type="radio" data-form="working" value="working" name="condition">
<input type="radio" data-form="workingdamaged" value="workingdamaged" name="condition">
<input type="radio" data-form="notworking" value="notworking" name="condition">
<form id="working">
<h2>working form</h2>
</form>
<form id="workingdamaged">
<h2>workingdamaged form</h2>
</form>
<form id="notworking">
<h2>notworking form</h2>
</form>
Fiddle Demo
Your solution is fine and I don't see any major problems with it.
You can also add all forms to DOM, and switch their visibility.
For instance:
<form id="form-working" style="display: none"></form>
<form id="form-workingdamaged" style="display: none"></form>
<form id="form-notworking" style="display: none"></form>
<input type="radio" name="condition" value="working" id="condition-working">
<input type="radio" name="condition" value="workingdamaged" id="condition-workingdamaged">
<input type="radio" name="condition" value="notworking" id="condition-notworking">
<script>
var forms = ['working', 'workingdamaged', 'notworking'];
function switch(form) {
for (var k in forms) {
forms[k].style.display = 'none';
}
document.getElementById('form-' + name).style.display = 'block';
}
var elements = document.getElementsByName('condition');
for (var k in elements) {
elements[k].onclick = function() {
if (this.cheked) {
switch(this.getAttribute('value'));
}
}
}
</script>
EDIT: you have to change IDs of the elements. ID must be unique
Also you may consider using or external libraries for templating.
You may take a look at this question. It might serves your purpose.
Show form on radio button select
<input type="radio" name="condition" class="selectradio" value="working" selection="select1">
<input type="radio" name="condition" class="selectradio" value="workingdamaged" selection="select2">
<input type="radio" name="condition" class="selectradio" value="notworking" selection="select3">
give them different ids this
create a model like this .
<div class=content>
<div class="subcontent" style="display:none" id="select1">//content</div>
<div class="subcontent" style="display:none" id="select2">//content</div>
<div class="subcontent" style="display:none" id="select3">//content</div>
</div>
<script>
$(function(){
$('.selectradio').change(
function(){
var sourced=$(this).attr("selection") ;
$(".subcontent").hide();
$("#"+sourced).show();
}
);
});
</script>
you have to include jquery library .

how to get the value of the hidden fields in here after the radio button is clicked

Am trying to get the value of the hidden input fields on every click of a radio button. I have just posted a single div. I have a multiple div with same structure. I have successfully obtained the value of radio button but I want to get the value of hidden input now.
<div class="QA">
<h1> First Question</h1>
<input type="radio" id="check" name="q" value="A">Options 1</input>
<input type="radio" id="check" name="q" value="B">Options 2</input>
<input type="radio" id="check" name="q" value="C">Options 3</input>
<input type="radio" id="check" name="q" value="D">Options 4</input>
<input type="hidden" id="result" value="B" />
<br/>
<div id="result"></div>
</div>
<script>
$(document).ready(function() {
$("input:radio").change(function() {
checkResult(this);
});
});
function checkResult(el)
{
$this=$(el).parent("div.QA");
$this.slideUp();
}
</script>
Maybe you could try removing the hidden input entirely and indicate the correct answer using a data-* attribute. Something like:
<div class="QA" data-answer="B">
Then in your checkResult function you could retrieve this value using
function checkResult(el)
{
$this=$(el).parent("div.QA");
var answer = $this.data("answer");
$this.slideUp();
}
function checkResult(el)
{
$this = $(el).parents("div.QA");
$this.slideUp();
var x = $this.find('#result').val(); //find value of hidden field in parent div
}
Change your markup
multiple id's should not be used. Use class instead.
<input type="radio" id="check" name="q" value="A">Options 1</input>
to
<input type="radio" class="check" name="q" value="A">Options 1</input>
var $hidden=$(el).siblings("input[type='hidden']");
BTW you have lot of elements with same ID, not good
You can get the value of the hidden element by it's id.
var hiddenValue = $("#result").val();
You can use this in hidden function
function checkResult(el)
{
var hiddenValue = $("#result").val();
alert(hiddenValue);
}

Categories