How to get the input value from $(this).context - javascript

My Full calender external events are displayed as following
<?php foreach ($plants as $plant) { ?>
<div class='fc-event evt'>
<input type="hidden" value="<?php echo $plant->hcpd_id;?>" class="abc">
<p class="evt_name"><?php echo $plant->hcpd_name;?></p>
</div>
<?php } ?>
And this is my jquery
$('#external-events2 .fc-event').each(function() {
var str = $(this).context;
$(this).data('event', {
title: $.trim($(this).text()),
stick: true,
color : '#4AC948',
className : "sub",
id : //need to add the id here
});
});
I want to give a specific id to each event. (taken from the database. It is given in the hidden input field)
Following is one of the generated divs.
I want to get the hidden id of the following $(this).context result
<div class="fc-event evt ui-draggable ui-draggable-handle">
<input type="hidden" value="1" class="abc">
<p class="evt_name">My Plant 1</p>
</div>
Any idea of how to retrieve that.
I tried string replacing, but didn't work.

What event are you using? For example, if you are using the click event:
$('.fc-event').click(function(){
//Get the ID
var eventID = $(this).find('input[type="hidden"]').val();
//Do whatever you want with the ID here.
});

Related

How to make content editable with button

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;
}

Changed value not showing

I've created a textfield to change a value, which seems to work fine on one part.
Voornaam: <h3 id="title1">Test</h3>
<input type="text" id="myTextField1"/>
<input type="submit" id="byBtn" value="Change" onclick="change1()"/><br/>
This is linked to this javascript function:
function change1(){
var myNewTitle = document.getElementById('myTextField1').value;
if( myNewTitle.length==0 ){
alert('Write Some real Text please.');
return;
}
var title = document.getElementById('title1');
title.innerHTML = myNewTitle;
}
And this works without any problems and shows my changed value, however when I would like to display that same value somewhere lower in my html code, it does not show the changed value.
Here is a part of the code where the changed value does not show up:
<section class="bg-green">
<div class="block left wide">
<article>
<h1>testfile<br/><span contenteditable="true" data-id="school-name"><?php echo $schoolName; ?></span></h1>
<br/>
<p>
<strong>Geachte <span data-id="name"><?php echo $salutation; ?> <?php echo $lastName; ?></span></strong>,
<p id="title1">Test.</p>
</p>
The part where it should show up is
<p id="title1">Test.</p>
Could anyone point me in the right direction?
It seems that your are using the id "title1" more than once. The document.getElementById will only find one (the first, if I'm not mistaken).
Use a class and iterate over the elements found by getElementByClassName
var titles = document.getElementsByClassName('title1');
Array.prototype.forEach.call(titles,title => {
title.innerHTML = myNewTitle;
});
Here is a working jsfiddle of my solution.
You have two DOM elements with the same ID = title1
<h3 id="title1">Test</h3>
and
<p id="title1">Test.</p>
entered text should appear in the first usage of ID = h3 tag.
It is also invalid HTML when you use one ID more times
The solution:
Voornaam: <h3 id="title1">Test</h3>
<input type="text" id="myTextField1"/>
<input type="submit" id="byBtn" value="Change" onclick="change1()"/><br/>
function change1(){
var myNewTitle = document.getElementById('myTextField1').value;
if( myNewTitle.length==0 ){
alert('Write Some real Text please.');
return;
}
var title = document.getElementById('change1result');
title.innerHTML = myNewTitle;
}
<section class="bg-green">
<div class="block left wide">
<article>
<h1>testfile<br/><span contenteditable="true" data-id="school-name"><?php echo $schoolName; ?></span></h1>
<br/>
<p>
<strong>Geachte <span data-id="name"><?php echo $salutation; ?> <?php echo $lastName; ?></span></strong>,
<p id="change1result">Test.</p>
</p>

Javascript getElementById when you dont know the ID

I am using PHP to assign a random ID to a checkbox, now I want to check that value of checkbox but because I don't know the ID, I dont know how to check it.
so here is the HTML :
<input class="citycheck"
id="<?php $city_id; // this is randomly generated ?>"
type="checkbox"
name="<?php echo $city_name"> <?php echo $city ?>
<div class"properties">Some Properties</div>
and my Javascript:
<script>
jQuery(document).ready(function($) {
// right now I am checking by class
// show or hide if it is already checked
if ($(".citycheck").is(':checked'))
$(".properties").show();
else
$(".properties").hide();
// show or hide if user clicked on the checkbox
$(".citycheck").click(function() {
if ($(this).is(":checked")) {
$(".properties").show();
} else {
$(".properties").hide();
}
});
});
</script>
but because there are many checkbox with class citycheck when one is checked, if another city is not checked, the properties are still shown.
How can I check the value of checkbox by ID when I don't know the ID yet?
Update
The reason I want the ID is because ID is unique and class is not. So using class, if one checkbox is checked it shows properties related to that class.
I have a checkbox for every city, every city had some properties, if I click on Chicago, then properties of Chicago are listed. Problem right now is that if I check Chicago, properties of Boston are also shown.
You could assign a pseudo class in your element and use this pseudo class to find all the elements in your page. Then you can check which of them are checked and do whatever is needed. I did the same also for details by assigning a pseudo class. As it is now your html code if someone change the name of the class from citycheck to whatever the behavior of you UI will not change at all, provided that will note move the elements, since we rely on the siblings. Please have a look at the following snippet:
$(function(){
$('.js-citicheck').on("change", function(){
var ele = $(this);
var details = ele.siblings('div.js-details');
if(ele.is(":checked")){
details.show();
} else {
details.hide();
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input class="citycheck js-citicheck"
id="berlin"
type="checkbox"
/>
<label for="berlin">Berlin</label>
<div class="details js-details" style="display:none">Berlin details.</div>
</div>
<div>
<input class="citycheck js-citicheck"
id="london"
type="checkbox"
/>
<label for="london">London</label>
<div class="details js-details" style="display:none">London details.</div>
</div>
<div>
<input class="citycheck js-citicheck"
id="paris"
type="checkbox"
/>
<label for="paris">Paris</label>
<div class="details js-details" style="display:none">Paris details.</div>
</div>
You Can add a prefix to the id
<input class="citycheck"
id="<?php echo 'id_'.$city_id; ?>" // this is randomly generated
type="checkbox"
name="<?php echo $city_name"> <?php echo $city ?>
<div class"properties">Some Properties</div>
and then :
var list = document.querySelectorAll('[id^="id_"]');
var list = $('[id^="id_"]');
traverse the list and check if it's checked or not
I think you can achieve everything you want to with simple jQuery selectors.
Working Example:
$(document).ready(function(){
$('.properties').hide();
$('.citycheck:checked + .properties').show();
$('.citycheck').change(function(){
$(this).next('.properties').toggle();
alert('The id of this checkbox is: ' + $(this).attr('id'));
});
});
input {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="sdnflfldja" class="citycheck" type="checkbox" name="Alphaville">
<div class="properties">Some Properties</div>
<input id="sdnfldfj" class="citycheck" type="checkbox" name="Betaville">
<div class="properties">Some Properties</div>
<input id="szdnnadsc" class="citycheck" type="checkbox" name="Gammaville">
<div class="properties">Some Properties</div>
<input id="sallddfa" class="citycheck" type="checkbox" name="Deltaville">
<div class="properties">Some Properties</div>
<input id="adlkfkfddsl" class="citycheck" type="checkbox" name="Epsilonville">
<div class="properties">Some Properties</div>

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

How to get Elements values inside element with class

Below code is created from my DB so its multiple with same classes name but with different contents.
What i need to do is that when button with class = 'config' is clicked i need to get the values ['value','type','info'] of this div with this class = config .
How would i go ahead with this ?
$(".config").click(function(){
var id = $(this).attr('id');
});
Any Hint ??
HTML
<div class="mws-form-row bordered">
<label class="mws-form-label"><?php echo SaleAdmin_Engine::getConfigName($this->result[0]['config_name']) ; ?></label>
<div class="mws-form-item">
<b>Value</b> <input type="text" class="value required large" value="<?php echo $this->result[0]['config_value']; ?>">
<b>Type</b> <input type="text" class="type required large" value="<?php echo $this->result[0]['config_type']; ?>">
<b>Info</b> <textarea rows="" cols="" class="info required large"><?php echo $this->result[0]['config_info']; ?></textarea>
</div>
<button class="config btn btn-inverse btn-small" rel="<?php echo $this->result[0]['config_id']; ?>" type="button">Save</button>
</div>
If I understand you correctly something like this should work for you
$(".config").click(function(){
var form1 = $(this).parent();
var value = form1.find(".value").value();
var type = form1.find(".type").value();
var info = form1.find(".info").value();
});
The this in your selector is referencing the button which does not have the elements you are looking for. In order to get those elements you need to get the parent form that the button is related to.
$(document).ready(function(){
$(".config").click(function(){
var form1 = $(this).parent();
var value = form1.find(".value").val();
var type = form1.find(".type").val();
var info = form1.find(".info").val();
});
});
Here is a working jsfiddle.
You can get a collection using the jQuery class selector and then iterate over them all in one shot using jQuery map function to build your values.
$(".config").click(function(){
//Get all items with required class
var resultArray = $.map($(".required"), function(val){
return val.value;
});
console.log(resultArray);
});
See it in action in this fiddle

Categories