I am developing comment systems with two level of replay to the comments and I have a problem with how to show and hide divs .., because it's id's are different .., I tried in a way with:
<button>replayl</button>
<span style="display:none;">
<form action='' method='post' name="addcmt" onsubmit="return validate()">
<textarea rows="1" cols="60" name='textarea1' id='textarea1' onKeyDown="limitText(this.form.textarea1,this.form.countdown,300);"
onKeyUp="limitText(this.form.textarea1,this.form.countdown,300);">
</textarea>
<br>
<br>
<input type="hidden" name="level1" id="level1" value="commtlevel1" />
<input id='addcmt' type='submit' value='Add reply' name='submit'/>
</form>
</span>
and jquery:
<script>
$("button").click(function () {
$("span").show();
});
</script>
but this way when I click reply button it shows all the span tag contente.., I wanna kow how I show one tag only or a way to my work done.
As there is no button in your HTML, it's partly a guess. But the following code will toggle the visibility of the span immediately following your button :
$(document.body).on("click", "button", function () {
$(this).next("span").toggle();
});
Note that you'd better define some classes to make the selector more selective :
$(document.body).on("click", "button.toggler", function () {
$(this).next("span").toggle();
});
After edited question, i suggest you use div instead of span (because of display inline vs block).
$("button").click(function () {
$(".myform").toggle('slow');
});
would do the job how you want.Here is the result.
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I tried to add a form from a php file to another php file using jQuery, and I added an event to my added input(submit) button, but it's nt work,
I have seen some answers that propose using the method $elm.on("click",function() instead of of $elm.click(function(), but it still not work.
So here is my code :
<div id="update" class="third">
<div class="updatingzone">
You will have to rwrite all the data again
<form method="post" class="updating">
<input type="text" name="id" class="id" style="width:40px;" />
<input type="submit" id="button" value="Insert" />
</form>
<input type="submit" id="button" class="cancel" value="Cancel" />
</div>
<div class="insertion"></div>
</div>
when I press the Button Insert this php file is added :
<?php require_once "connexion.php";
$gdb = new GestionBD();
$id = $_POST["id"];
$req = "select * from utilisateurs WHERE id='$id'";
$results = $gdb->selectFromBD($req);
foreach ($results as $result):
?>
<form class="insertMode" method="post">
<input type="text" value="<?php echo $result->nom;?>" class="nom" name="nom" /><br />
<input type="text" value="<?php echo $result->email;?>" class="email" name="email" /><br />
<input type="text" value="<?php echo $result->sexe;?>" class="sexe" name="sexe" /><br />
<input type="text" value="<?php echo $result->age;?>" class="age" name="age" /><br />
<input class="test" id="button" type="submit" value="Add" />
</form>
<?php endforeach;?>
When I press the button with the class test I don't get an alert with "no" message, as you can see in the script :
$(".updating").submit(function () {
var id = $(".id").val()
$(".insertion").show()
$.post("getId.php",{id:id},function (data) {
$(".insertion").html(data)
});
return false;
});
$(".test").click(function () {
alert("no");
});
And i am sorry if this is long.. Thank you people
Since the element is being generated dynamically, you need to use event delegation.
$(document).on("click",".test", function () {
console.log("no");
});
Reference Document: https://learn.jquery.com/events/event-delegation/
Hope this will help you.
use this construction for dynamicaly created objects: $(document).on("click", "elementSelector", function(){ /* function body*/})
Create delegated event binding using on like this
$(document).on("click",".test",function(){ ..... });
Note : Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.
The jQuery method you're using assumes that the element is already within the DOM (already exists on the page) when your Javascript runs. Because you're adding HTML to the page after your script has run, your use of $(".test") will not catch any HTML added later.
You have two options:
1. Query your HTML only once the new HTML has been inserted
Include your $() query in the same callback where you're inserting your HTML, like this:
$.post("getId.php", {id:id}, function(data) {
$(".insertion").html(data);
// this will work now
$(".test").on("click", function() { ... });
});
Or, maybe better, scope your jQuery query to only look within the newly inserted HTML:
$.post("getId.php", {id:id}, function(data) {
var $insertion = $(".insertion");
$insertion.html(data);
// only find .test within the new HTML
$insertion.find(".test").on("click", function() { ... });
});
2. Change your jQuery syntax to bind an event listener to the body
As #diavolic points out, jQuery provides a second syntax for .on, where you bind your listener to an element but provide a selector as a second argument. The callback will only fire if the event is triggered on elements matching this selector. By binding the listener to the body tag (which is always present in the DOM) and providing .test as the selector, the .test element doesn't need to exist in the DOM when the javascript runs.
$(document.body).on("click", ".test", function() {
// do something
});
$.post("getId.php", {id:id}, function(data) {
$(".insertion").html(data);
});
Either option should work. The first option is a better option if you want to listen for clicks only within a specific element. The second is more reliable if you aren't sure when or where the new HTML will be inserted.
More information about event delegation can be found here: http://api.jquery.com/on/#direct-and-delegated-events
//for <input type="button" class="test" value="test">
jQuery(document).ready(function() {
jQuery('.test').on( 'click', function () {
alert('no');
});
});
<form method="POST">
<div id="showme">Show me <?php echo $_POST['name']?></div>
Send the value<input type="radio" name="name" value="ja"/>
<input type="submit" id="submit" name="submit" value="BEREKENEN! ">
</form>
<script>
$(document).ready(function () {
$('#showme').hide();
$('#submit').click(function(e) {
e.preventDefault();
$('#showme').fadeIn(5000);
});
});
</script>
This code won't send the value of the radiobutton to the showme div.
I can't receive the $_POST['name'] when I use hide() and fadeIn() between the <script> tags.
Whenever I don't use jQuery it sends the data - when using it , it won't let me send the value.
How do I fix this problem, this is just an example of 1 radio button. I have a list of 6 radiobuttons that need to be sent to PHP section in the same file, I don't want to make another file for this.
This code will FadeIn the requested div, it shows me Show me but it won't show the value where I ask for with the line <?php echo $_POST['name']?>
PHP is parsed on the server. <?php echo $_POST['name']?> has already been evaluated and echod to the page long before any of the submission stuff happens. What you need is to use AJAX.
You can replace the submit button with just a regular button, remove the <form> element entirely even.
jQuery:
$('#submit').on('click', function(evt) {
var e = evt || window.event;
e.preventDefault();
$.post('page.php', { name: $('input[name="name"]').val() }, function ( data ) {
$('#showme').append(data).fadeIn(5000);
});
return false;
});
(if you do what I did below turning submit into button, you dont need the e.preventDefault())
PHP:
if(isset($_POST['name'])) {
echo $_POST['name'];
return;
}
HTML:
<div id="showme">Show me </div>
<label for="name">Send the value</label><input type="radio" name="name" value="ja"/>
<input type="button" id="submit" name="submit" value="BEREKENEN!">
I'm not so sure you can get a non-BOOLEAN value from a radio button with PHP though. You're probably better off using <input type="hidden" value="ja" /> or maybe type="text".
I am new at using jQuery but I really want to include some common javascript functionality to my website. I have a div that presents a form to a user where by he/she can enter some information. What I would like to do is to display the div when required but hide it when it isn't required.
Here is the jQuery code I am using to select and remove the div
<script type="text/javascript">
$("#newRequestCancel").click(function() {
$("#newRequestForm").remove();
});
</script>
and here is the html tag
<h3 class="main-top">
New Product
</h3>
<div id="newRequestForm" class="panel">
<form action="index.php" method="post">
<p><label>Title</label><span class="required">*</span></p>
<p><input type="text" /></p>
<p><label>Image</label><span class="required">*</span></p>
<p><input type="file" /></p>
<p><label>Description</label><span class="required">*</span></p>
<p><textarea></textarea></p>
<p><label>Preferred Price [KES]</label><span class="required">*</span></p>
<p><input type="number" /></p>
<p><label>County</label><span class="required">*</span></p>
<p><select><option disabled selected="selected">.: Select a County :.</option></select></p>
<p><label>Location</label><span class="required">*</span></p>
<p><input type="text" /></p>
<br/>
<p>Any field marked with an asterisk (<span class="required">*</span>) is required.</p>
<br/>
<p><input type="submit" value="Make Request" /><span class="ibar"></span>Cancel</p>
<br/>
</form>
</div>
So if I click the new product link its supposed to insert the div and when I click the cancel link inside the div its supposed to remove it. Please help!
Hi Masaba and welcome to the site.
You are looking for .show() and .hide() not .remove(). Remove completely deletes the HTML so you can't show it again.
$("#newRequestCancel").click(function() {
$("#newRequestForm").hide();
});
$("#new-request-make").click(function() {
$("#newRequestForm").show();
});
$(document).ready(function()
{
$('#new-request-make').click(function()
{
$('#newRequestform').show();
});
$("#newRequestCancel").click(function() {
$("#newRequestForm").hide();
});
});
Check out jQuery .show() and .hide()
To show:
$("#new-request-make").click(function() {
$("#newRequestForm").show();
});
To hide:
$("#newRequestCancel").click(function() {
$("#newRequestForm").hide();
});
<script type="text/javascript">
$("#newRequestCancel").click(function() {
$("#newRequestForm").hide();
});
$("#newRequestLoad").click(function() {
$("#newRequestForm").show();
});
</script>
This should do the trick.
Here, a beautiful present for you.
http://jsfiddle.net/eX3QK/
<div id="login">
<p style="font-size:16px;">Hello</p>
<div class="arrow_box">
Logout
</div>
</div>
Jquery is used, change html tag to whatever.
$("#login").click(function(e){
$("#login div").css("visibility","visible");
e.stopPropagation();
});
$("html").click(function(e){
$("#login div").css("visibility","hidden");
});
I am using a dialog box to display and submit a enquiry form on my page.I am having problem when I try to call it again and again.The first time everything works fine and the form s submitted successfully.But if I click the GO button(added html below).I get an error for this line document.
EDITED:
<div class="hidden" id="dialog">
<form action="index.php" class="testForm" id="testForm">
<div class="name" id="name">
<div class="displayName" id="dispName">Name</div>
<div class="textName" id="viewName"><input type="text" class="fname" id="fullName" /></div>
<div class="hide" id="nameErr"></div>
</div>
<div class="address" id="addressDetails">
<div class="displayAddress" id="dispAddress">Address</div>
<div class="textAddress" id=""><input type="text" class="taddress" id="fullAddress" /></div>
<div class="hide" id="addressErr"></div>
</div>
<div class="submitForm" ><input type="button" class="submitDetails" id="submitInfo" name="Submit" value="Submit" onClick="validateAndSubmitForm()"/>
<a name="Close" onclick="$('#dialog').dialog('close');">Close</a>
</div>
</form>
</div>
Javascript\jquery
function submitEnquiryForProperty()
{
document.forms.testForm.reset();
$("#dialog").dialog({
modal:true,
resizable:false,
autoOpen:false,
width:260,
});
openDialog();
}
function openDialog(){
$("#dialog").dialog("open");
}
function closeDialog(){
$("#dialog").dialog("close");
}
Callback function on form submit
$.ajax({
type:'POST',
url:"processForm.php",
data:"name="+name+"&address="+address,
dataType:"html",
success:function(msg){
if(msg=="success"){
$("#dialog", window.parent.document).html("<div class='pad5'><div class='flt' style='padding-left:3px; width:235px;'><div class='thanx_msg'>Thank you for submitting the details. <br /><div class='spacer5'> </div><span class='gre'>Our Sales team shall revert to your query soon.</span></div></div><div class='spacer5'> </div><div style='padding-left:3px;' class='text'><strong>You can also:</strong></div><div style='margin-left:20px; line-height:20px;'>• Apply for a <a href='homeloan.php'>Home Loan</a><br />• Visit <a href='http://www.proptiger.com'>proptiger.com</a> for more properties<br />• See our <a href='http://www.proptiger.com/blog'>Blog</a> for latest updates</div></div><br/><div class='msg' style='color:red;'>Click to close the box</div>");
$(function(){
$('#dialog').click(function() {
closeDialog();
});
});
}
else
{
alert("Operation cannot be completed,please try again");
}
}
But I am facing the same problem.Error at the .reset() line.
Thanks for your time.
Updated answer
If you want to have a reusable dialog, do it like this:
Include the dialog element (almost assuredly a <div>) in your initial HTML. Use a CSS class so that it will not be immediately visible, for example:
HTML:
<div id="dialog" class="hidden">...</div>
CSS:
.hidden { display: none }
Unconditionally call $("#dialog").dialog(options) from Javascript immediately after the page loads. Be sure to set autoOpen: false in the options.
Whenever you want to display the dialog, use $("#dialog").dialog("open").
Whenever you want to hide the dialog, use $("#dialog").dialog("close").
Repeat steps 3 and 4 as much as you like.
.dialog( "destroy" )
Remove the dialog functionality completely. This will return the element back to its pre-init state.
.dialog( "close" )
Close the dialog.
Is there a way to hide a form from my users until they click a link and then the form drops down for the user to fill out, by using PHP or JQuery if so how? Is there a tutorial that will teach me how to do this?
Yes, you can do so, you hide the form initially either with jquery or css and the slideDown it down like this:
$(function(){
$('a#link_id').click(function(){
$('form-selector').slideDown('slow');
// prevent default action
return false;
});
});
and to hide it back, you can use the slideUp function:
$(function(){
$('a#link_id_2').click(function(){
$('form-selector').slideUp('slow');
// prevent default action
return false;
});
});
If you want to show and hide using same link, use the slideToggle instead:
$(function(){
$('a#link_id').click(function(){
$('form-selector').slideToggle('slow');
// prevent default action
return false;
});
});
Here is the prototype for your html:
<a id="form_show_hide">Show/Hide Form</a>
<div id="form_container">
<form>
...form elements...
</form>
</div>
and jquery for that:
$(function(){
$('a#form_show_hide').click(function(){
$('#form_container').slideToggle('slow');
// prevent default action
return false;
});
});
and finally here the demo for that
try adjusting the display property of the form using hide and show:
jQuery:
$('#formId').hide();
Yes, there are a number of ways to implement something like this. An Ultra Basic implementation:
<form action="" method="post" id="login_form" style="display: none;">
<label for="username">Username</label> <input type="text" name="username" /><br />
<label for="password">Password</label> <input type="password" name="password" />
</form>
Show Form
You could use any number of jquery plugins and methods for showing the form, including show()/hide(), fadeIn()/fadeOut(), slideUp(), slideDown() (as above) etc. You could use something like FancyBox (or Facybox) to display the form in a 'popup' type window.
Note - For compatibility, I'd suggest not using jquery in the onclick event.
Simple:
http://docs.jquery.com/Show
With effects:
http://jqueryui.com/demos/show/
You can do this with jQuery. You need a click target, then an event bound to the click target and a container for the form. Something like:
<span id="ClickTarget">Click Me!</span>
<div id="FormContainer"> <!-- fill in the form here --> </div>
<script type=text/javascript language=javascript>
$('#ClickTarget').click(function () {
$('#FormContainer').show();
});
</script>