I am trying to get NicEdit to work only for all textareas with IDs of 'r_desc'. Currently this occurs only for the first instance of a form that is generated within a while loop, and not the others. What am I doing wrong?
JavaScript
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() {
nicEditors.editors.push(
new nicEditor().panelInstance(
document.getElementById('r_desc')
)
);
});
</script>
PHP/HTML
$i=0;
while($i<5){ ?>
<form id="content" name="content" method="POST" action="index.php">
<textarea name="r_type" id="textarea"></textarea>
<textarea name="r_desc" id="r_desc"></textarea>
<textarea name="r_rate" id="textarea"></textarea>
<input type="submit" id="button" value="Update" />
</form>
<? $i++;
}
I have also tried:
bkLib.onDomLoaded(function () {
var textareas = document.getElementsByID("r_desc");
for(var i=0;i<textareas.length;i++)
{
var myNicEditor = new nicEditor();
myNicEditor.panelInstance(textareas[i]);
}
});
Elements are supposed to have unique IDs. The implementation of getElementById knows this and will only return the first element that matches the given ID.
You need to use a different approach of identifying elements that you want converted to Nicedit
If you use something like getElementsByClassName or getElementsByTagName instead (note that these return elementS not just an element)
PHP:
$i=0;
while($i<5){ ?>
<form id="content" name="content" method="POST" action="index.php">
<textarea name="r_type" class="to-nice"></textarea>
<textarea name="r_desc" ></textarea>
<textarea name="r_rate" class="to-nice"></textarea>
<input type="submit" id="button" value="Update" />
</form>
<? $i++;
}
JavaScript:
var els = document.getElementsByClassName("to-nice");
Related
I have written a comment system in PHP. Currently, the editor is on the top of the page:
<form method="POST" id="comment_form" enctype="multipart/form-data">
<input type="text" name="comment_name" id="comment_name" value="<?php echo $user ?>" placeholder="User" />
<textarea name="comment_content" id="comment_content" placeholder="Comment" rows="5"></textarea>
<input type="hidden" name="comment_id" id="comment_id" value="" />
<input type="submit" name="submit" id="save" class="btn" value="Send" />
</form>
Each comment look like that (simplified):
<div class="comment">
<b><?php echo $row["user"] ?></b>
<div>
<?php echo $row["comment"] ?>
</div>
<button type="button" class="btn reply" id="'.$row["comment_id"].'">Reply</button>
</div>
An small javascript function sets the focus on the editor when the Reply button is clicked:
$(document).on('click', '.reply', function(){
var comment_id = $(this).attr("id");
$('#comment_id').val(comment_id);
$('#comment_name').focus();
});
});
I would like that editor to open below any Reply button when one of the buttons is clicked.
I guess that adding the editor code after each comment with a "display: none" attribute is not the best solution.
Would you please help me to achieve that ?
If I understand correctly you want one form for all comments, rather than duplicating the form HTML inside every comment.
In which case you need to move it in the DOM via JavaScript. You don't show any attempt at this but it might look something like this:
$(document).on('click', '.reply', function() {
$('#comment_form').insertAfter(this); //<-- move form
var comment_id = $(this).attr("id");
$('#comment_id').val(comment_id);
$('#comment_name').focus();
});
Note also that your JS is syntactically invalid as you have double });.
I have a form in which by using javascript and in a while I add content to it.
Denpending on the number of data in database different number of forms are added to the page.
<?php
while($row = mysql_fetch_array ($result)){
?>
<form method="post" accept-charset="UTF-8" >
//add some content to the form by reading from database
<div class="form-group ">
<input type="submit" name="print" id="button" value="print"/>
</div>
</form>
<?php
}//end while
?>
and below I want to redirect to another page when clicked on each "print" button.
But not only it doesn't redirect to another page but also alert just works for the first button.
Below is the code:
<script>
$("#button").click(function(){
alert('hi');
window.location.href = "design_card.php";
});
</script>
how to solve?
jquery, php or javascript solutions are acceptable. other workable solutions, if work, are good.
Thanks for your response in advance.
Check your HTML
<?php
while($row = mysql_fetch_array ($result)){
?>
<form method="post" accept-charset="UTF-8" >
//add some content to the form by reading from database
<div class="form-group ">
<input type="submit" name="print" id="button" value="print"/>
</div>
</form>
<?php
}//end while
?>
You have created multiple <input> element dynamically with duplicate id so the better way is to assign a class to them like
<?php
while($row = mysql_fetch_array ($result)){
?>
<form method="post" accept-charset="UTF-8" >
//add some content to the form by reading from database
<div class="form-group ">
<input type="submit" name="print" class="buttonClass" value="print"/>
</div>
</form>
<?php
}//end while
?>
And then use this buttonClass class as a jquery selector like this
$(".buttonClass").click(function(){
alert('hi');
window.location.href = "design_card.php";
});
The problem:
I'm duplicating div's using a button.
Within the div's are parts of a form:
<form method="post" action="order-opstellen.php">
<div id="duplicate">
<input type="hidden" id="counter" value="0">
</div>
<input type="button" onclick="duplicate()" value="Add">
<button type="submit">Send</button>
</form>
I'm using this script:
<script type="text/javascript">
var i = 0;
var original = document.getElementById('duplicate');
function duplicate() {
var clone = original.cloneNode(true);
clone.id = "duplicate" + ++i;
clone.style.clear = "both";
original.parentNode.appendChild(clone);
var tempId = document.getElementById("duplicate" + i);
tempId.childNodes[0].value=i;
}
</script>
As you can see, I'm trying to change the value of each input.
Adding it with 1 every time I duplicate the div.
Obviously it is not working. How do I do this?
Update:
So I've got this first part working.
Now I need to go deeper.
<form method="post" action="order-opstellen.php">
<div id="duplicate">
<input type="hidden" id="counter" value="0">
<div class="form-group dispWidth fl">
<label>Productnaam</label>
<select class="form-control dispWidth" name="productnaam"> <?php
$sql_products = "SELECT * FROM product ORDER BY naam";
$results = $conn->query($sql_products)->fetchAll(PDO::FETCH_OBJ);
foreach ($results as $row) {
?>
<option value="<?= $row->productnr ?>"><?= $row->naam ?></option>
<?php }
?>
</select>
</div>
<div class="form-group dispWidth fl ml">
<label>Aantal</label>
<input type="text" name=amountCount class="form-control dispWidth" placeholder="Hoeveelheid">
</div>
</form>
What I want is every time I duplicate the div, the select-name has to be unique. Also the name of the last input has to be unique (amountCount).
Probably by con-catting the i variable behind them both (productnaam1, productnaam2, amountCount1.). How?!
childNodes[0] is the text node that contains the newline and indentation.
Try children[0] instead.
Also, tempId refers to the exact same thing as clone, so just use clone.children[0].value = i;
I have one HTML form:
<form name="modeladd" ethod="post" class="form label-inline" enctype="multipart/form-data" onSubmit="return check('modeladd');">
<?php for($i=0;$i<$tot;$i++) { ?>
<div class="field">
<label for="connect_msg">Connect Message </label>
<textarea rows="4" cols="50" name="connect_msg[<?php echo getField($langs[$lan]);?>]" id="connect_msg[]"><?php echo getField($row[$lan]); ?></textarea>
</div>
<div class="field">
<label for="call_msg">Call Message :</label>
<textarea rows="4" cols="50" name="call_msg[<?php echo getField($langs[$lan]);?>]" id="call_msg"><?php echo getField($row[$lan]); ?></textarea>
</div>
<div class="field">
<label for="stripline_msg">Stripline Message :</label>
<textarea rows="4" cols="50" name="stripline_msg[<?php echo getField($langs[$lan]);?>]" id="stripline_msg"><?php echo getField($row[$lan]); ?></textarea>
</div>
<div class="field">
<label for="cost_msg">Cost Message :</label>
<textarea rows="4" cols="50" name="cost_msg[<?php echo getField($langs[$lan])?>]" id="cost_msg"><?php echo getField($row[$lan]); ?></textarea>
</div>
<?php } ?>
<input type="submit" class="btn btn-grey" value="submit">
</form>
Here is the JavaScript for validation:
function check(form)
{
var name = new Array();
name =document.getElementById('connect_msg[]').value;
for(var i=0 ; i<=1; i++)
{
alert(name[i].value);
}
return true;
}
I am not getting value for both the connect_msg field which is array. I want to validate both the field value using JavaScript so please help me.
The id cannot have [] symbols. Please validate your markup: http://validator.w3.org/
The value returned from an element is type string, so you can't get an array. What you can do is parse the string to create your array.
Eg. Assuming the following is the outputted markup:
<textarea id="connect_msg">a,b,c,d,e,f,g</textarea>
You can do this in JavaScript:
var getConnectMsg = document.getElementById('connect_msg').value;
var connectMsgArray = getConnectMsg.split(',');
And connectMsgArray will contain ['a','b','c','d','e','f','g'].
You can read more about .split() here: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/split
Edit: Since you say the textarea is in a loop, then it's more easier to retrieve the elements using class name attribute, and using jQuery will help you immensely.
So the HTML output would be like this:
<textarea class="connect_msg" id="connect_msg1">a,b,c,d,e,f,g</textarea>
<textarea class="connect_msg" id="connect_msg2">h,i,j,k,l,m,n</textarea>
<textarea class="connect_msg" id="connect_msg3">q,r,s,t,u,v</textarea>
var getConnectMsg = $('.connect_msg');
getConnectMsg.each(function(){
var getValue = $(this).val();
var connectMsgArray = getValue.split(',');
});
In each iteration of the .each(), the value of getValue would be:
a,b,c,d,e,f,g
h,i,j,k,l,m,n
q,r,s,t,u,v
You can do your form validation for a set of fields during each iteration.
the name can't be a multi-dimensional array change this:
name="connect_msg[<?php echo getField($langs[$lan]);?>]"
To this:
name="connect_msg[]"
And then address them in the post script with a foreach loop.
And about the id use this instead() I don't know if it's true that you can't use [] in the id but I know this worked for me:
id="connect_msg_<?php echo getField($langs[$lan]);?>"
Update:
I think your right, maybe using a class instead of id is the way to go.
class="connect_msg"
And then in the form check function instead of this:
var name = new Array();
name =document.getElementById('connect_msg[]').value;
Do this:
var connectMsg = document.getElementByClassName('connect_msg');
And then loop through the connectMsg array and get/validate the values.
Hope this help.
...
<script type="text/javascript">
function printvalues() {
document.write("This is my first JavaScript!");
document.write(form.inputobj1.value);
document.write(form.inputobj2.value);
}
</script>
<form name="form">
<input name="inputobj1" value="123" />
<input name="inputobj2" value="abc"/>
<input type="button" onclick =" printvalues();">
</form>
why this line is not printing the value document.write(form.inputobj1.value);
The document.write overwrites the current document. Once done that, the whole <form> element disappears from the DOM and hence it and its input elements cannot be found.
Replace document.write(...) by for example alert(...) and it should work.
Alternatively you can write it as innerHTML of another element. E.g.
<script type="text/javascript">
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML += "This is my first JavaScript!";
div.innerHTML += form.inputobj1.value;
div.innerHTML += form.inputobj2.value;
}
</script>
<form name="form">
<input name="inputobj1" value="123" />
<input name="inputobj2" value="abc"/>
<input type="button" onclick =" printvalues();">
</form>
<div id="divId"></div>
Note that this is not the "best practice", but since you're learning... When done with core Javascript, I recommend you to get yourself through jQuery. It's a Javascript library which greatly eases DOM manipulation like that and more ;)
document.write()
is probably not what you want. It will overwrite the entire contents of the page. The reason you're getting that error is because when you call document.write, it removes all the previous content, and thus the page will no longer have a form element.
Normally you would use a function such as document.getElementById to get a DOM element. For example:
alert( document.getElementById('inputobj1_id').value );
For DOM element:
<input id="inputobj1_id" name="inputobj1" value="123" />
<script type="text/javascript">
function printvalues() {
var x = document.form.inputobj1.value;
var y = document.form.inputobj2.value
document.write("<Html><head></head><body><h1>");
document.write("This is my first JavaScript!</h1></br><h3>");
document.write(x);document.write("</h3></br><h3>");
document.write(y);document.write("</h3></body></html>");
}
</script>
<form name="form">
<input name="inputobj1" value="123" />
<input name="inputobj2" value="abc"/>
<input type="button" value="click" onclick =" printvalues();">
</form>