Change paragraph attribute to input tag - javascript

I tried following code in which I am trying to change paragraph tag to input fields through jquery on button click. I want my values to retain in the textbox when I click the button. Unfortunately, it isn't working! Here I have tried it with just name field. Any suggestions please.
code
<div id="menu2" class="tab-pane fade">
<h3>Address Book</h3>
<p>Default delivery address</p>
<?php
$em=$_SESSION['login_email'];
$query = mysqli_query($con,"SELECT * FROM customers where email='$em'" );
while($row=mysqli_fetch_assoc($query)){
?>
<h5>Name:</h5><p class="name" id="name"><?= $row['name'] ?></p>
<h5>Email:</h5><p class="mail"><?= $row['email'] ?></p>
<h5>Telephone:</h5><p class="tele"><?= $row['phone'] ?></p>
<h5>Address:</h5><p class="addres"><?= $row['address'] ?></p>
<h5>City:</h5><p class="city"><?= $row['city'] ?></p>
<?php
}
?>
<input type="button" id="update" value="Update Address" >
</div>
Jquery
<script src="js/jquery-1.6.2.js"></script>
<script>
$(document).ready(function() {
$('#update').click(function()
var input = $("<input>", { val: $(this).text(),type: "text" });
$('#name').replaceWith(input);
input.select();
});
});
</script>

Your code works, bar two errors. Firstly, you're missing a { after the click handler function definition. Secondly, this within the #update click handler refers to the button element, yet you're trying to read the val() of the #name input, so you need to change the selector. With that in mind, try this:
$('#update').click(function() {
var $name = $('#name');
var $input = $("<input>", {
val: $name.text(),
type: "text"
});
$name.replaceWith($input);
$input.select();
});
Working example
I would also be wary of having duplicated id attributes in your page as you are defining the elements in a loop. Should there be multiple rows returned from your query, then you will have multiple elements with the same id in the document which will lead to possible errors as the HTML will be invalid.

Related

I can't take the value attribute on button | jQuery AJAX

I made ajax script for delete button and have data attribute based on id on the table in database. This is the HTML :
<textarea name="komentar" id="komentar" cols="30" rows="10"></textarea><br>
<input type="submit" name="submit" id="submit" value="Submit"><br>
<br><br><hr><br>
<!-- Komentar akan ada di dalam sini -->
<div id="komentar_wrapper">
<?php
include_once 'db.php';
$query = "SELECT * FROM komentar ORDER BY id DESC";
$show_comments = mysqli_query($db, $query);
foreach ($show_comments as $comment) { ?>
<p id="komentar_<?php echo $comment['id']; ?>"><?php echo $comment['komentar']; ?>
<!-- data-id-> data attribute, buat spesifik id mana yang mau di hapus -->
<button id="button_hapus" class="hapus_komentar" data-id="<?php echo $comment['id']; ?>">Delete</button>
</p>
<?php } ?>
</div>
And when i try to console the data-id, it wont show the value on console. This is the script :
$(".hapus_komentar").on("click", function() {
console.log($(this).attr("data-id"));
});
When i click the button it say undefined, i think it should print the id based on button data-id
try this i have prepared a demo code for you and runs ok
<?php
$as = array(1,2,3,4,5,6,7);
foreach ($as as $comment) { ?>
<p id="komentar_<?php echo $comment ?>"><?php echo $comment; ?>
<button id="button_hapus" class="hapus_komentar" data-id="<?php echo $comment; ?>">Delete</button>
</p>
<?php
}
?>
<script type="text/javascript">
$(".hapus_komentar").on("click", function() {
alert($(this).attr("data-id"));
//console.log($(this).attr("data-id"));
});
</script>
use Jquery.data(). and use event delegation since your button is generated dynamically.
$(document).on("click",".hapus_komentar",function() {
console.log($(this).data("id"));
});
You can use $(this).data("id") to get the id.
Your code is correct. Just check in HTML weather data-id will have value or not. Maybe that's the reason you are not getting proper value. As well you have taken that button in the loop so make sure on individual button click you will get all buttons data-id.
$(".hapus_komentar").on("click", function() {
console.log($(this).data("id"));
});
now use this.
$(document).on("click",".hapus_komentar",function() {
console.log($(this).attr("data-id"));
});

PHP MYSQLdisplaying unwanted span tags

I am submitting some text to a MYSQL database using php, however I am getting some unwanted styling with the text. I am wanting to basically keep all the text in one paragraph tag and just have breaks to separate the lines. When I look at the text in the database it is included with all the styling tags such as brs', spans' and divs'. I want the break tags but not the spans and divs. Why would this be happening and how can I prevent the spans and divs from being included with the inserted text. I will provide my code below.
here is the php update code
if($_POST['about']){
$edit_desciption = $_POST['about'];
$id = 1;
$stmt = $conn->prepare('UPDATE table_name SET about = ? WHERE id = ?');
$stmt->bind_param("si", $edit_desciption, $id);
$stmt->execute();
// echo $final_outputs;
$stmt->close();
$conn->close();
header("Location: ../../admin_login/logged_in.php");
//$connect->close();
}
and here is the form
function getContent(){
document.getElementById("about").value = document.getElementById("about_edit").innerHTML;
}
<p id="about_edit" contentEditable="true"><?php echo $output; ?></p>
<div class="col-12">
<form id="update_CMS" onsubmit="return getContent()" action="../includes/php/edit.php" Method="POST">
<textarea id="about" name="about" style="display: none;"></textarea>
<input type="submit" name="submit" id="edit_submit" />
</form>
</div>
Using:
strip_tags($_POST['about'], '<br><p>')
works

JavaScript Function Call With OnClick

I have a simple function that works when it is hard coded, but when I try to pass a second parameter into it, it doesn't work. I am calling the function with the onclick and using the id => thumbnail to get the value. Any suggestions?
Hard Coded Example (Works)
<script>
function clearFileInputField(tagId) {
document.getElementById(tagId).innerHTML = document.getElementById(tagId).innerHTML;
$('.thumbnail').val("");
}
</script>
<div id="thumbnail_div" class="row">
<?php echo $form->labelex($model,'thumbnail'); ?>
<?php echo $form->textfield($model,'thumbnail', array(placeholder => "No file chosen", readonly => true, 'class' => 'thumbnail')); ?><br>
<?php echo $form->filefield($model,'thumbnail'); ?>
<?php echo $form->error($model,'thumbnail'); ?>
<input type="checkbox" onclick = "clearFileInputField('thumbnail_div')" href="javascript:noAction();"> Remove Thumbnail
</div>
Parameters Passed (Not Working)
<script>
function clearFileInputField(tagId, div) {
document.getElementById(tagId).innerHTML = document.getElementById(tagId).innerHTML;
$('.div').val("");
}
</script>
<div id="thumbnail_div" class="row">
<?php echo $form->labelex($model,'thumbnail'); ?>
<?php echo $form->textfield($model,'thumbnail', array(placeholder => "No file chosen", readonly => true, 'id' => 'thumbnail')); ?><br>
<?php echo $form->filefield($model,'thumbnail'); ?>
<?php echo $form->error($model,'thumbnail'); ?>
<input type="checkbox" onclick = "clearFileInputField('thumbnail_div', 'thumbnail')" href="javascript:noAction();"> Remove Thumbnail
</div>
You are almost there. In your code, the paramenter div is converted to string. Instead of that, try the code given below,
<script>
function clearFileInputField(tagId, div) {
document.getElementById(tagId).innerHTML =
document.getElementById(tagId).innerHTML;
$('.'+div).val("");
}
</script>
$('.div').val("");
^^^^^^
That's a string, not a variable. You're trying to find elements that have class="div".
You need to concatenate the variable with a string containing the dot.:
$('.' + div).val("");
$('.div').val("");
That part is close but not going to work as you might have intended. You instead should have it one of two ways,
$('.'+div).val("");
or,
$(div).val("");
With option 1, you are using a string for the period and concatenating it with the value of the variable div
With option 2, you will need to change the passed parameter to include a period before it.
You could easily get rid of your inline handler and just create a simple event handler.
jQuery(function(){
// Bind a handler to any button with the class remove_thumbnail
$('.remove_thumbnail').change(function(){
if (this.checked) {
$(this)
// go up to parent row
.parents('.row')
// find the thumbnail
.find('.thumbnail')
.val("");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thumbnail_div" class="row">
<input type="text" class="thumbnail" value="foo">
<input type="checkbox" class="remove_thumbnail"> Remove Thumbnail
</div>
The advantages here are that you separate content and behavior and do not introduce functions into the global scope.
try this (with script placed underneath the markup):
<div id="thumbnail_div" class="row">
<?php echo $form->labelex($model,'thumbnail'); ?>
<?php echo $form->textfield($model,'thumbnail', array(placeholder => "No file chosen", readonly => true, 'id' => 'thumbnail')); ?><br>
<?php echo $form->filefield($model,'thumbnail'); ?>
<?php echo $form->error($model,'thumbnail'); ?>
<input type="checkbox" onclick = "clearFileInputField('thumbnail_div', 'thumbnail')" href="javascript:noAction();"> Remove Thumbnail
</div>
<script>
function clearFileInputField(tagId, div) {
document.getElementById(tagId).innerHTML = document.getElementById(tagId).innerHTML;
$('.'+div).val("");
}
</script>

JQuery - enable 4 text-boxes at once if 1 checkbox is checked

I have search before I post, but I only found questions and solutions that is showing ONE textbox if ONE checkbox is checked as in: jquery - show textbox when checkbox checked
But my form is different
<form method="post" action="actionhere">
<div id='clone_me'>
<?php
for($i=1; $i<=5;$i++) {
?>
<div>
<span id="title">Line <?php echo $i;?></span>
<input type='checkbox' name='ck_<?php echo $i;?>'/>
<input type='text' class='tx<?php echo $i;?>' name='tx[<?php echo $i;?>][]'/>
<input type='text' class='tx<?php echo $i;?>' name='tx[<?php echo $i;?>][]'/>
<input type='text' class='tx<?php echo $i;?>' name='tx[<?php echo $i;?>][]'/>
<input type='text' class='tx<?php echo $i;?>' name='tx[<?php echo $i;?>][]'/>
</div>
<?php } ?>
</div>
<input type='submit' name='submit' value='Submit'/>
<input type="button" value="Add row" class="addrow" />
</form>
<script>
$(document).ready(function() {
$('.addrow').click(function(){
var n= $("#clone_me>div").length;
var new_n=n+1;
var new_line= $('#clone_me div:first').clone().append();
$("span#title", new_line).text("Line "+new_n+" ");
//since I clone the 1st <div> therefore the cloned id must be 'ck_1', so changed it to latest id
$("input#ck_1", new_line).attr("name", "ck_"+new_n);
$("input#ck_1", new_line).attr("id", "ck_"+new_n);
$("input.tx1", new_line).attr("name", "tx["+new_n+"][]");
$("input.tx1", new_line).attr("class", "tx"+new_n);
new_line.appendTo('#clone_me');
});
});
</script>
As you can see from the code, I have a form which by default will have 5 sets of 1-checkbox-4-textbox, and user is allowed to add new set by clicking 'add row' button (which jquery will do clone).
How can I make the 4 textbox enabled once the correspond checkbox is checked? I'm not using hide() or show(). I want the user knows the textbox are there, but is disabled until user tick the checkbox.
if ($("#ck_4").is(":checked")) {
$("input#tx4).attr("readonly", false); //or enabled
I thought it will be something like that, but since user can dynamically add how many rows as he wants, how can I achieve it?
http://jsfiddle.net/aLw3T/2/
first give your checkbox a data attribute like this
<input type='checkbox' data-id="<?php echo $i;?>" name='ck_<?php echo $i;?>'/>
after this create following javascript code to handle your input/textarea fields
$(document).ready(function () {
$('input[type="checkbox"]').click(function () {
var self = $(this);
var checkboxId = self.data('id');
var checkboxChecked = self.is(":checked");
/* jQuery < 1.9 */
if (checkboxChecked) {
$('.tx' + checkboxId).attr('disabled', 'disabled');
} else {
$('.tx' + checkboxId).removeAttr('disabled');
}
/* jQuery 1.9+ */
$('.tx' + checkboxId).prop('disabled', checkboxChecked);
});
});
As long as the input fields are siblings to the checkbox you can use following jquery code:
$(document).ready(function() {
$('form').on('click', 'input[type=checkbox]', function(e) {
var checkbox = $(this);
checkbox.closest('.row').find('input[type=text]').prop('disabled',!checkbox.is(':checked'));
});
});
if you have multiple forms, change the selector used for binding of the click event.
e.g. $('form.my_form').on...
see example: http://codepen.io/lchngr/pen/zhasg/

Inaccurate retrieval of values from an input fields using javascript referenced by inputs class names

I have created an input fields populated by ids that I will use later to make a query in my database via javascript. Using foreach loop, the fields were populated correctly by their respective ids. Using javascript I want to be able to access this ids, however, using the onclick function that is based on their class name, the values for the first and second input fields are the only fields that returns the correct id value and the rest input field values were taken from the second input field having the id value of 2 instead of returning the right id value. What is the wrong with this? How could I retrieve right id values from this input fields? Thanks a lot. Here is my code
View:
<?php
foreach($data_currencies as $row){
?>
<div class="row-fluid">
<div class="span2"><input type='checkbox' class="currency_check_box" id='chk' name='currency_id[]' value="<?php echo $row->id; ?>" /></div>
<div class="span4" style="text-color:black;"><?php echo anchor("currencies/edit_currency/$row->id/$tennant_id",$row->pretty_name);?></div>
<div class="span4" style="text-color:black;"><?php echo $row->currency_code;?></div>
<div class="btn-group span1" id="condition" data-toggle="buttons-radio" >
<?php if($row->status==1) { ?>
<input type="text" value="<?php echo $row->id; ?>" class="btn active first" id="enable"/>
<input type="text" value="<?php echo $row->id; ?>" class="btn passive" id="disable"/>
<?php }
else{ ?>
<input type="text" value="<?php echo $row->id; ?>" class="btn off" id="enable"/>
<input type="text" value="<?php echo $row->id; ?>" class="btn active on" id="disable"/>
<?php } ?>
</div>
</div>
</address>
<address>
<?php
}
?>
Javascript
<script type="text/javascript">
$(".first").click(function(){
alert($(".first").val());
});
$(".passive ").click(function(){
alert($(".passive").val());
});
$(".off").click(function(){
alert($(".off").val());
});
$(".on ").click(function(){
alert($(".on").val());
});
</script>
Output:
Clicking the input field with id value 1
Clicking the input field with id value 2
Clicking the remaining input fields gives the same outputs
The problem is that you need to use the this keyword in your js. Otherwise you will just be getting the element with the first occurence of that class. Also considering all of your input fields have the 'btn' class why don't you change your js to
$(".btn").click(function(){
//Use 'this' to get the value of the element you clicked on
alert($(this).val());
});
Note You are looping through your rows in your PHP code but each time giving the elements the same id (id="enable" and id="disabled"). This will cause multiple elements to have the same id, which will invalidate your HTML and could cause you problems later on.
Try this
$(".first").click(function(){
alert($(this).val());
});
$(".passive ").click(function(){
alert($(this).val());
});
$(".off").click(function(){
alert($(this).val());
});
$(".on ").click(function(){
alert($(this).val());
});

Categories