How to make content editable with button - javascript

I am trying to make the input type text field editable on click with button but it is not working properly. tried all possible thing any suggestion please
<html><body>
<script>
$(document).ready(function()
{
$('#btnEdit').click(function()
{
$("input[name='name']").removeAttr("readonly");
});
});
</script>
<?php
require_once ('connectdb.php');
$sql = "SELECT * FROM general_information";
$result = $dbhandle->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
?>
<form>
<input type = "text" name = "name" value = <?php echo $row["email"];?> readonly>
<button class="btn btn-primary" id="btnEdit" > edit </button>
<?php } } ?>
</form>
</body></html>

There are two problems I see in the code,
Button is submitting the form and reloading the page. Use preventDefault() to override form submit.
Use prop instead of removeAttr.
$(document).ready(function(){
$('#btnEdit').click(function(e){
e.preventDefault();
$("input[name='name']").prop("readonly", false);
});
});
UPDATE from #cmorrissey comment.
In textbox, quotes are missing in the value attribute
<input type = "text" name = "name" value = "<?php echo $row["email"];?>" readonly>

Your button is posting the form thus reloading the page so Change your button and give it an onclick event function like onclick="editInputField()":
Edit
Give the input and id:
<input type = "text" id = "name" name = "name" value = <?php echo $row["email"];?> readonly>
Then your javascript function to make the input editable:
<script type="text/javascript">
function editInputField(){
document.getElementById("name").readOnly = false;
}
</script>
EDIT
I noticed you using jquery even though the question is tagged with javascript.
The reason why your code is not working has to do with:
1: The button as mentioned earlier so change it to:
Edit
2: How your targeting the input field, use the field id like this:
$("#fieldID").removeAttr("readonly");

You can use disable or readOnly attributes. Here you have two examples.
<input type="text" id="name" disabled="disabled" value="Example"/>
<input type="text" id="name2" readonly="readonly" value="Example2"/>
<button onclick="myFunction()">Click me</button>
function myFunction() {
document.getElementById("name").disabled = false;
document.getElementById("name2").readOnly = false;
}

Related

how to use this keyword in input tag's id and change values onclick() event

I am new to Javascript. I want to change the value of name attribute by clicking on checkbox input type using this keyword.
The main aim of code is that i would like to save element's value in an array in php on clicking preference . For example if i click on Oranges checkbox at first then the value of name attribute of Oranges should be "fruits[0]"; and if i uncheck the checkbox the value of name attribute of Oranges should be "fruits[]" and same for all. When i click the submit the values shoud be append in php array according to the index.
I will be grateful to you.
</head>
<body>
<form action="<?php $_PHP_SELF ?>" method="POST">
Apples:<input onclick="values()" id="chkbox(this)" type="checkbox" name="fruits[]" value="Apples">
<br><br>
Oranges:<input onclick="values()" id="chkbox(this)" type="checkbox" name="fruits[]" value="Oranges">
<br><br>
Pears:<input onclick="values()" id="chkbox(this)" type="checkbox" name="fruits[]" value='Pears'>
<br><br>
<input type='submit' value="submit">
</form>
<script>
var test=0;
function values()
{
if(checkbox.checked == true)
{
if(test==0)
{
document.getElementById('chkbox(this)').name='fruits[',test,']';
}
else
{
test=test+1;
document.getElementById('chkbox(this)').name='fruits[',test,']';
}
}
else
{
test=test-1;
document.getElementById('chkbox(this)').name='fruits[]';
}
}
</script>
</body>
</html>
<?php
$fruits=$_REQUEST["fruits"];
echo $fruits[1];
?>
Try this:
</head>
<body>
<form action="<?php $_PHP_SELF ?>" method="POST">
Apples:<input onclick="values(this)" id="chkbox0" type="checkbox" name="fruits[]" value="Apples">
<br><br>
Oranges:<input onclick="values(this)" id="chkbox1" type="checkbox" name="fruits[]" value="Oranges">
<br><br>
Pears:<input onclick="values(this)" id="chkbox2" type="checkbox" name="fruits[]" value='Pears'>
<br><br>
<input type='submit' value="submit">
</form>
<script>
var test=0;
function values()
{ var element = arguments[0];
if(element.checked)
{
if(test==0)
{
element.name='fruits['+test+']';
}
else
{
test++;
element.name='fruits['+test+']';
}
}
else
{
test--;
element.name='fruits[]';
}
}
</script>
</body>
</html>
<?php
$fruits=$_REQUEST["fruits"];
echo $fruits[1];
?>
In the "values" function, I do not see that the checkbox object already is defined which could be your problem.
Try editing the inputs onclick attribute so that it says "this" inside the parameters. Then instead of using "checkbox.checked" use "arguments[0].checked".
I think that will work, good luck!
Edit: I dont understand why the ids of your checkboxes is included with (this)?
Also a tip on the first if statement: The code will still run if you remove the "== true" part.
Replace the test=test+1; and test=test-1; with test++; and test--;
Good luck with Javascript!

Fetching values for query dynamically and firing on button click PHP

I have a page where I have two columns one is Attribute name and Attribute Value. I have a button named Add Attribute Value which adds text boxes to the screen so that an Attribute Name can have multiple Attribute values. I have added the text boxes with a variable i in javascript.
I need to use the "i" variable and also access the text in the textbox using the name "'mytext'+i".
The code written is below:
<html>
<head><title>Add Attributes</title></head>
<body>
<script language="javascript">
var i = 1;
function changeIt()
{
my_div.innerHTML = my_div.innerHTML +"<br>             <input type='text' name='mytext'+ i><br>"
i++;
}
</script>
<form action= "" method = "POST">
<h1 align = "center"><u>Attribute Management</u></h1>
Attribute Name Attribute Value <br>
<br><input type="text" name="attname" >
<input type="text" name="attvalue">
<input type="button" value="Add Attribute Value" onClick="changeIt()">
<div id="my_div"></div>
<b> </b><br>
<br><br><input type="submit" name = "submit" value = "Add Attribute" >
<input type="submit" name = "submit1" value = "User Application" >
</form>
</body>
</html>
<?php
if(isset($_POST['submit'])){
$att_name = $_POST['attname'];
$query_string1 = "ALTER TABLE users ADD $att_name varchar(20)";
$query_string2 = "ALTER TABLE attributes ADD $att_name varchar(20)";
$part_string = "(";
for($x = 0;$x<= i;$x++){
$att_value= $_POST['mytext'.$x];
if($x = 0){
$part_string = $part_string.$att_value;
}
else{
$part_string = ",".$part_string.$att_value;
}
}
$part_string= $part_string.")";
$query_string3 = "INSERT INTO attributes ('$att_name') VALUES '$part_string'";
$connect = mysqli_connect("localhost","root", "","nets") or die("Couldn't connect to database");
/*$query1 = mysqli_query($connect,$query_string1);
$query2 = mysqli_query($connect,$query_string2);
$query3 = mysqli_query($connect,$query_string3);*/
}
if(isset($_POST['submit1'])){
header('Location: RegisteredUsers.php');
}
?>
Get an error of "i" is not defined and "Undefined index: mytext0". I have to collect all the attribute values and fire a query with all the values from the text box together.
Please suggest.
The error of "Undefined index: mytext0" is come due to no such input field is defined, because you have initialised the i with 1 so, just make it 0.
And also you have a issue in the html, which you are adding, just change your script block with following :
var i = 1;
function changeIt()
{
my_div.innerHTML = my_div.innerHTML +"<br>             <input type='text' name='mytext"+ i+"'><br>"
i++;
}
<html>
<head><title>Add Attributes</title></head>
<body>
<form action= "" method = "POST">The error of "Undefined index: mytext0" is come due to no such input field is defined, because you have initialised the i with 1 so, just make it 0.
And also you have a issue in the html, which you are adding, just change your script block with following :
<h1 align = "center"><u>Attribute Management</u></h1>
Attribute Name Attribute Value <br>
<br><input type="text" name="attname" >
<input type="text" name="attvalue">
<input type="button" value="Add Attribute Value" onClick="changeIt()">
<div id="my_div"></div>
<b> </b><br>
<br><br><input type="submit" name = "submit" value = "Add Attribute" >
<input type="submit" name = "submit1" value = "User Application" >
</form>
</body>
</html>

My ajax code can't send values to other php page [duplicate]

This question already has answers here:
JavaScript: Inline Script with SRC Attribute?
(3 answers)
Closed 6 years ago.
I tested my update.php file and it works perfect and there is not any error when i checked my script via console . Only problem in here . Ajax can't send values "id" "comment_area" to update.php file . What is the mistake in here ?
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.2.min.js">
$(document).ready(function() {
$("#b_news").submit(function(evt) {
evt.preventDefault();
var text = $('#breaking_news_text').val();
var id = 21;
$.ajax({
type: "POST",
url: "update.php",
data: {
comment_area: text,
id: id
},
success: function() {
alert("sucess");
}
});
});
});
</script>
<form id="b_news" method="post" action="">
<div>
<div>
<textarea id="breaking_news_text" class="breaking_news_text" rows="6" cols="50" placeholder="Add text here..." required></textarea>
</div>
</div>
<div>
<input type="button" id="save" value="Save Changes" />
</div>
</form>
<?php
include("./inc/connect.inc.php");
$id=$_POST['id'];
$update = $_POST['comment_area'];
$sql = "update comments set comment_area='$update' Where id='$id'";
$result = mysqli_query($mysqli, $sql)or die("error");
?>
Seems to me that your button simply can't submit the form because of its type.
Try to change the type attribute of the button to submit this way :
<input type="submit" id="save" value="Save Changes"/>
You have two problems.
First you can only have one script per script element. The script can either be referenced by the src attribute or it can be between the start and end tags.
If you try to do both, as you are here, then only the src will be respected.
Use separate <script> elements for your two scripts.
Second, you have no way to trigger the submit event. The submit event will trigger when the form is submitted, but you can't do that from a textarea or a button. Replace the button with a submit button.

Send value of div on form submit

I am trying to submit a form with a couple of different inputs, which all work fine. However, one of the inputs is a textarea (sort of). I had to alter it into a content editable div, mainly because I created my own bold, italic and underline buttons which wouldn't work with normal textareas. The problem is that the form on submit is not sending the text to the php and i was wondering what i could do to get the value of the div in the php.
Here is the "textarea":
<div id="dash_new_shout_textarea" name="dash_new_shout_textarea"
class="dash_new_shout_textarea" contenteditable="true"
placeholder="Write your shout..." name="dash_new_shout_textarea"
value="<?php echo isset($_POST['dash_new_shout_textarea']) ?
$_POST['dash_new_shout_textarea'] : '' ?>"></div>
The form is just a normal form with method=post.
Here is the php:
$newShoutTextarea = $_POST['dash_new_shout_textarea'];
Thanks for the help
I would suggest that you follow the other answers and use jQuery, but since there is no jQuery tag in your question I suppose that I should provide a good non-jQuery solution for you.
HTML
<form onsubmit="prepareDiv()">
<div id="dash_new_shout_textarea" class="dash_new_shout_textarea" contenteditable="true" placeholder="Write your shout..." name="dash_new_shout_textarea" value="<?php echo isset($_POST['dash_new_shout_textarea']) ? $_POST['dash_new_shout_textarea'] : '' ?>"></div>
<input type="hidden" id="dash_new_shout_textarea_hidden" name="dash_new_shout_textarea" />
</form>
Javascript
function prepareDiv() {
document.getElementById("dash_new_shout_textarea_hidden").value = document.getElementById("dash_new_shout_textarea").innerHTML;
}
Your PHP remains the same.
What you can do is this:
<div id="dash_new_shout_textarea"></div>
<input type="hidden" name="dash_new_shout_textarea" id="dash_new_shout_textarea_hidden" />
<script type="text/javascript">
setInterval(function () {
document.getElementById("dash_new_shout_textarea_hidden").value = document.getElementById("dash_new_shout_textarea").innerHTML;
}, 5);
</script>
the problem is that a DIV is not a form element and cannot be posted. If you use some javascript, you could populate a hidden input field with the data and then receive it server side as POST variable
You can add a hidden input to your form and update it with jquery
<div id="dash_new_shout_textarea" name="dash_new_shout_textarea"
class="dash_new_shout_textarea" contenteditable="true"
placeholder="Write your shout..." name="dash_new_shout_textarea"
value="></div>
<form id="target" method="post" action="destination.php">
<input id="textarea_hidden" name="textarea_hidden" type="hidden" value="">
<input type="submit" value="Submit">
</form>
script
$("#target").click(function() {
$("#textarea_hidden").val($("#dash_new_shout_textarea").val());
});
What you can do is use jQuery for this.
DEMO HERE
Proper scenario would be:
*Get value from div and save it into hidden field. *
This has to be done when you submit form:
$(function () {
$("#send").on("click", function () {
$("#hiddenfield").val($("#dash_new_shout_textarea").text());
alert($("#hiddenfield").val());
$("form#formID").submit();
});
});

Convert a DIV to textarea with specific "name" attribute

I have a small admin panel that I have created to do simple database tasks for my DayZ server. Now I want to make a simple editor for the news blurb on my website. The news blurb is stored in a table on my database. What I want is when the page loads it simply echo's the data and looks like it does on the live site. Then, when I click on it, I want it to convert into:
<textarea name="edit><?php echo news; ?></textarea>
This is my current code:
function divClicked() {
var divHtml = $(this).html();
var editableText = $("<textarea name="edit" />");
editableText.val(divHtml);
$(this).replaceWith(editableText);
editableText.focus();
// setup the blur event for this new textarea
editableText.blur(editableTextBlurred);
}
$(document).ready(function() {
$("#editable").click(divClicked);
});
<form method="post" action="newsedit.php">
<div id="editable"><?php echo $news; ?></div>
<input type="submit" value="Edit News" />
</form>
Now, this does work in the sense that when I click on the text it does convert into a textarea. The problem is that it doesn't give it the "edit" name so when I hit the sumbit button, it is as if I submitted nothing and it deletes all the data out of the table because
<textarea name="edit"></textarea>
is technically empty. Are there any ways to make it so when I click on the text it will convert the code to textarea with that specific name so there is actual data when I hit submit?
Change the form to:
<form method="post" action="newsedit.php">
<div id="<?php echo $newsID;?>"><?php echo nl2br($news); ?></div>
<input type="submit" value="Edit News" />
</form>
Where $newsID is returned along with the $news text.
The nl2br($news) will just make sure the line breaks are honored.
var editableText = $("<textarea name='edit' />");
http://jsfiddle.net/H5aM4/ inspect the textarea
TRY This
$("#editable").click( function(){
$(this).replaceWith(function() {
return $("<textarea name='edit'>").text(this.innerHTML);
});
});
Here is the working example

Categories