Current I have the following div
<div class="tag-header">
<?php echo $row->name; ?>
</div>
And I add the contenteditable to the div with .attr
$('.tag-header').attr("contenteditable", "true");
But my problem is how to pass the value to php and post to database?
*NOTE: I'm not ready to use ajax just normal php submit.
Added a demo here
Update html to
<form>
<div class="tag-header">
<?php echo $row->name; ?>
</div>
<input type="hidden" id="tagval" />
</form>
Then use the focusout event to bind
$(".tag-header").focusout(function() {
$("#tagval").val($(".tag-header").text());
});
Submit the form to get the value in PHP.
Related
In the following example i have a script with a loop that fetches comments from database, and gives every comment a form with a textarea and submit button so that users can interact with every comment separately.
The follow code makes the page looks a big mess and disturbing due to the repetition of the texareas.
What i need is a jQuery code that will hide the textareas and allow me to show a selected textarea individually when a link or div is clicked. I will simplify what i want in the following code.
<?php
$comments = array('comment1','comment2','comment3','comment4','comment5','comment6','comment7','comment8','comment9');
$c_count = count($comments);
for($i=0; $i<$c_count; $i++){
$comment = $comments[$i];
echo $comment;
?>
<hr />
<div style="border:1px solid #999; width:200px;">Click Here to Show Reply Form</div>
<div class="comment_box">
<form action="path/to/insert_reply.php" method="POST">
<textarea name="reply" cols="47" rows="4"></textarea>
<input type="submit" name="submit" value="Post Reply">
</form>
</div>
<?php
}
?>
This can be done quite easily with JQuery. http://api.jquery.com/ will be helpful.
In this example, the client can click on the comment_header div to view or hide the comment box. Note I added an additional identifier to the divs. There are many different ways to select individual div elements - you might consider wrapping both the comment_header and comment_box divs under a container div with a unique id attribute. Here, I choose to use the .data() JQuery capability.
PHP:
<?php
$comments = array('comment1','comment2','comment3','comment4','comment5','comment6','comment7','comment8','comment9');
$c_count = count($comments);
for($i=0; $i<$c_count; $i++){
$comment = $comments[$i];
echo $comment;
?>
<hr />
<div data-index="<?= $i; ?>" style="border:1px solid #999; width:200px;">Click Here to Show Reply Form</div>
<div id="<?= $i; ?>" class="comment_box">
<form action="path/to/insert_reply.php" method="POST">
<textarea name="reply" cols="47" rows="4"></textarea>
<input type="submit" name="submit" value="Post Reply">
</form>
</div>
<?php
}
?>
JS/JQuery:
$(document).ready(function(e) {
$('.comment_box').hide();
$('.comment_header').on('click', function(e) {
$('#' + $(this).data('index')).toggle();
});
});
Hope this is helpful. Here is the JSFiddle: http://jsfiddle.net/EUQG2/
To hide unselected textarea when a particular textarea is focused
$(document).ready(function(){
$('textarea').focus(function(){
$('textarea').not(this).hide();
});
});
You can play around this. I hope it helps
At its simplest, assuming that all you want to do is to hide the textarea elements (in this case by hiding the parent .comment_box element), and to show them by clicking the preceding div element:
$('.comment_box').hide().prev('div').on('click', function(){
$(this).next('.comment_box').toggle();
});
JS Fiddle demo.
If you want only one .content_box/textarea visible at any given point:
$('.comment_box').hide().prev('div').on('click', function(){
var target = $(this).next('.comment_box');
$('.comment_box').not(target).hide();
target.toggle();
});
JS Fiddle demo.
References:
hide().
next().
not().
on().
prev().
toggle().
I have this form, but this form inside PHP foreach function that gives the value from database, so I can't give the form id because redundancy will happened. And when click on any star in stars rating it will do as a submit, go to function so in the function I want to submit the form without id how?
<form class="watching-us-reating-form" name="swatching-us-reating-form" action=" method="get">
<input type="hidden" name="watchlist_id" value="<?php echo $fundAndUserWatchingThem['contactId']?>">
<!-- This hidden field used to save the value of the rating before submit -->
<input type="text" name="priority" class="watching-us-reating-value">
<!-- This DIV to contain the stars rating -->
<div class="watching-us-rating-div" data-score="<?php echo $flag; ?>" data-number="<?php echo $numberOfStars; ?>"></div>
</form>
You can use closest() to get the form element related to the clicked star rating:
$('.watching-us-rating-div').click(function() {
$(this).closest('form').submit();
});
Also, your form tag is missing an action - is that an error in your example?
I have this Code:
<div contenteditable="true"><p><?php echo $row[1]; ?></p></div>
Can I take the contents of the div and send them as a POST parameter in order to use them in the PHP. It would be good if I can use: onchange="this.form.submit()".
Thanks!
It is not possible to post contents of div tags, as this is only possible on form elements. The workaround for this would be to use some Javascript that populates a hidden field when a form is submitted, and the hidden field is posted instead.
Observe the following HTML. See that there is an onsubmit event attached to the form element. What we're saying to the browser here is when the form is submitted, first call the Javascript function process, and only submit if said function returns true:
<form method="post" action="process.php" onsubmit="javascript: return process();">
<input type="hidden" id="hidden" name="content" vlaue="<?php echo $row[1] ?>">
<div contenteditable="true" id="content"><p><?php echo $row[1] ?></p></div>
<button type="submit">Post</button>
</form>
This would be your Javascript. What you're doing is getting the innerHTML of the element with the id content and assigning it to the value of the element with the id hidden and return true so the form can be successfully submitted:
<script>
function process() {
document.getElementById("hidden").value = document.getElementById("content").innerHTML;
return true;
}
</script>
And in the process.php file, just output the posted content:
var_dump("Posted content: " . $_POST['content']);
Hope this helps!
What I want to do is that only when I click on a div with id="$project['slug']", it will load the iframe inside that div.
So, i removed the src attribute from the iframe, and add it on onclick event.
I have this in my HTML/PHP:
<div class="box" id="<?=$project['slug']?>" onclick="load_frame();">
<iframe id="frame_<?=$project['slug']?>" frameborder="0"></iframe>
</div>
Js:
function load_frame() {
id = location.hash.replace('#', '');
var source = "<?php echo $project['video']; ?>";
$('#frame_'+id).attr("src", source);
}
Unfortunately, when I inspect the iframe it shows: src="<?=$project['video']?>" instead of the value that the variable holds.
Do you have any idea what i am doing wrong?
thank you!
jQuery is a client side language and have access only to the DOM elements once they have been rendered. So what you need to do is store $project['video'] variable in a hidden field and then using the id of that field get access to the rendered data.
Also, i noticed that you should use <?php instead of <?
You may try something like this.
<div class="box" id="<?php echo $project['slug']; ?>">
<iframe id="frame_<?php echo $project['slug']; ?>" frameborder="0"></iframe>
<input type="hidden" id="<?php echo $project['slug']; ?>" value="<?php echo $project['video']" />
</div>
Then in jQuery do:
$(document).ready(function(){
$('.box').click(function(){
var slug = $(this).attr('id');
var source = $('input#' + slug).val();
$('iframe#' + slug).attr("src", source);
});
});
add hidden input on html page
<input type="hidden" id="hidsource" value="<?php echo $project['video']" />
edit your function in js like this
function load_frame() {
id = location.hash.replace('#', '');
$('#frame_'+id).attr("src", $('input#hidsource').val());
}
hope this will work
You might not have the shorthand syntax enabled on the server. Try standard PHP instead:
<?php echo $project['slug']; ?>
Say I have info.php page with user info (id, name, age, etc).
On this page, there is an 'edit' button that takes the user to a form on edit.php so they can change their info. The form is populated via $_POST with id, name, age, etc.
edit.php has an 'update' button that posts back to info.php with the updated data. This all works fine.
But when I try to load edit.php within a jQuery Tools Overlay pop-up, the form in edit.php appears but the variables are not passed along. Instead they all appear as 'undefined'.
I am not sure where to place the required href element so as to pass my variables to edit.php when inside the overlay.
Any ideas?
<form action="edit.php" method="post">
<input type="hidden" name="edit" value="yes" />
<input type="hidden" name="id" value="<?php echo $row[1] ?>" />
<input type="hidden" name="name" value="<?php echo $row[2] ?>" />
<!-- this is the required href to trigger overlay -->
<a href="edit.php" rel="#overlay" style="text-decoration:none">
<input type="submit" value="Edit"/>
</a>
</form>
<div class="apple_overlay" id="overlay">
<!-- the external content is loaded inside this tag -->
<div class="contentWrap"></div>
</div>
<!-- make all links with the 'rel' attribute open overlays -->
<script>
$(function() {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({
mask: 'darkred',
effect: 'apple',
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
I'm a little confused by the question but this is possibly what you are looking for...
You need to either pass the ID in the url and look up the data serverside or pass all the data in the url like so
<a href="edit.php?id=<?php echo $row[1] ?>&name="<?php echo $row[2] ?>" rel="#overlay" style="text-decoration:none">
Another way is to store name id and all that stuff in $_SESSION in php. Then info.php would save it and edit php would read it.