I need to be able to show an image along with two lines of input texts.
I was wondering if anyone knows of a good minimalistic plugin that can do it.
It is for proxying a CAPTCHA like text. Not too big.
Thanks!
I would suggest jQuery Tools, specifically the Overlay. It'll look something like this:
<div id="overlay">
<div><img src="" id="picture" /></div>
<div><input type="text /><input type="text" /></div>
<button class="close">Submit</button>
</div>
With basic overlay code:
$("#overlay").overlay({
closeOnClick: false,
closeOnEsc: false
});
You can then use the onBeforeClose event to perform any submission actions, validation, etc. (documentation here).
If you need to change the image after the page is loaded, you can use the following:
$("#picture").attr("src", varWithSource);
If you need it, you can also use jQuery Tools's form tools for validation and structure it like a form inside an overlay.
Related
i was making a website with PHP,jQuery,AJAX,mySQL which has lot of interaction with user. Now what i was asking that using forms are really necessary ?
what i have done for most of my user inputs are kinda like this -->
simple e.g
<div class="contact-form">
<input type="text" class="textInputs" id="name" placeholder="Enter your name..." />
<button class="submitButton" id="contactSend">Subscribe</button>
</div>
A SIMPLE comment system
<div class="comment-box" d-id="1">
<input type="text" class="textInputs" id="comment" placeholder="Enter comment..." />
<button class="submitButton" id="comment">Comment</button>
</div>
<div class="comment-box" d-id="2">
<input type="text" class="textInputs" id="comment" placeholder="Enter comment..." />
<button class="submitButton" id="comment">Comment</button>
</div>
JQUERY kinda this->
$('#comment').click(function(){
var id = $(this).closest('.comment-box').attr('data-id');
//ajax stuff
}):
Therefore what i wanna ask is whether this kinda structure is good or gonna cause some serious problem ?
Are using <form>'s compulsory ?
If you are submitting form by clicking submit button and posting variable to other pages or the same page then tag is necessary
If you are using form tag to find input values to post using ajax is necessary
If you are using ajax and pulling input values using dom id to post via ajax form is not required, in this case you may also need to do javascript validation using dom ids
Ideally using tag is better and follows standard HTML structure.
It depends upon your requirement and how you going to use the form in your project.
If you have min. no of fields ( 2-3 fields ) in your form. You can directly manipulate the form fields using id or name with JQuery or JavaScript. Otherwise you should have form tag to manipulate the data with more fields in the form.
I would recommend to have form tag in your page to maintain the standard format and use form tag and Ajax submission with Jquery.
Note: Anyway if you are going to get form data using Jquery, better to use the following syntax to get the from values:
// To check the radio button
var isAnsChecked = $("input:radio[name=<FIELDNAME>]").is(":checked");
var radio-value = $("input:radio[name=<FIELDNAME>]:checked").val();
// get Text box values
var text-value = $("input:text[name=<FIELDNAME>]").val();
I have created a wall like this in facebook using php and jquery. There is a textarea and an input type=button, and using jquery when the user posts something it is displayed under the text area without renew the page. I want to enable my script using an image loader named "loader.gif", so that after press submit button the loader start working until the new post appear. Any idea hot to do this?
<?php
<textarea rows="3" id="comment_text" placeholder="share an update..." style="font-size:11pt; color:#363636; resize:none; "> </textarea>
<input type="button" id="comment_process" style=""/>
?>
You want to place the loader image where it should ultimately be, but with display:none; in its CSS. Then, when the form is submitted, simply toggle it on.
HTML
<img class='loader' src='images/loader.gif' style='display:none;' />
jQuery
$('form').submit(function(){
$('.loader').show();
});
If you are submitting the form using ajax, you may need to hide it again if a success/error is returned. If you are doing a true form submission, the page will load to a different location anyway and there is no need to re-hide the image.
I would like to modify the actual HTML of the comment forms in WordPress. I know of the comment_form() function that WordPress provides, but it doesn't actually let me modify the html of the form. What I'm specifically trying to do is make a bootstrap responsive form, which is not possible with the options provided with the comment_form() function. I've tried looking all over the internet for a way, but to no avail. Can anyone point me in the right direction?
Let me clarify this:
I am looking to modify the actual FORM and containing DIV elements of the comment form, not just the fields.
The uncustomizable parts of the function comment_form() should (idealistically) be limited purely to code that is essential for security and proper form handling by the WordPress core. However, that is not the case. To explore the issue, I used filters (could have used arguments) to completely remove all the code that is customizable. I set all available variables to empty strings—that is, all the stuff mentioned on the codex page for comment_form().
Here is the left-over, non-customisable code from comment_form():
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title"> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/1#respond" style="display:none;">Click here to cancel reply.</a></small></h3>
<form action="http://www.[yourdomain].com/wp-comments-post.php" method="post" id="" class="comment-form">
<p class="form-submit">
<input name="submit" type="submit" id="" value="" />
<input type='hidden' name='comment_post_ID' value='1' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p>
</form>
</div><!-- #respond -->
Where does all this come from? At the bottom of the codex page for comment_form() it says…
Source Code
comment_form() is located in wp-includes/comment-template.php.
comment-template.php is linked and you can view the full code in the browser. comment_form() starts on line 1960. In fact, it’s the last function in that file. There are no arguments or filters that let you modify the residual code above. These lines of code are all moreorless “hard-coded”.
The text Click here to cancel reply. is the only text that survived my filter genocide. Strangely, comment_form() has back-up text for cancel_reply_link hard-coded into the function, in case it is passed to the function as an empty string. None of the other filterable items have hard-coded back-ups.
It is easy to see which bits of code are essential and which bits are non-essential for a HTML form. A little more difficult to judge is which bits are essential for a WordPress form. Some of the bits above were dynamically output (note that this is the first comment on a development blog with no other replies, no parent/child comments).
From the comment_form() function in comment-template.php you can draw out the code needed to produce the dynamic parts of the WordPress form. Then, with default arguments taken from the codex page for comment_form(), you could piece together a barebones form, hard-coding the desired fields, labels and wrapping HTML. I’m doing that now and putting my custom form function in my theme’s comments.php template file, which I call using comments_template() only in single.php (for this particular theme).
The result would be a full and proper, lean and mean WordPress comment form. But… it would be a form that could not be customized anymore using comment_form() arguments or related filters unless you went ahead and included the filter code in your own comment form function. Since you’re customizing the heck out it already, that’s probably not a problem. Similarly, all the WordPress actions would also be unavailable to you or any other plugins unless you also triggered those action functions in your own comment form function. Again, probably not an issue for you at this point.
But most importantly, the resulting form might break your theme if future WordPress updates change the way the core handles forms.
If you’re aware of those risks, you can probably rebuild a hand-coded comment form just from copying code on the codex page for comment_form() and in wp-includes/comment-template.php. I don’t have the finished code, otherwise I’d post it. But I will post when/if I succeed.
Right, that’s all from me for now. Bear in mind (all readers) that despite appearances, I am an amateur WordPress theme developer and my proficiency with PHP and WordPress is very rudimentary. Just writing up this post I learned a lot.
I’m also worried that a full and proper solution is already out there somewhere but I haven’t found it in my searches.
Just Create a New PHP file with the name of comment_form.php then paste all of your code. And your comment form is ready.
you shouldn't edit the wp-includes/comment-template.php file.
Keep this for your ref for more styling your existing comment form
http://codex.wordpress.org/Template_Tags/comment_form
Or this one
http://wordpress.org/support/topic/where-to-find-the-comment_form-function-in-wp3
Form code and action
<div class="comment-form">
<h2 class="comments-wrapper-heading"> Leave a comment </h2>
<form id="commentform" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<div class="commentform-element">
<label class="hide" for="author">Full Name</label>
<input class="input-fields" id="author" name="author" type="text" placeholder="Full Name" value=""/>
</div>
<div class="commentform-element">
<label class="hide" for="author">Email</label>
<input class="input-fields" id="email" name="email" type="text" placeholder="Email" value=""/>
</div>
<div class="commentform-element">
<label class="hide" for="comment">Message</label>
<textarea id="comment" class="input-fields" placeholder="Message" name="comment" cols="40" rows="200"></textarea>
</div>
<input name="submit" class="form-submit-button" type="submit" id="submit-comment" value="Post comment">
<input type="hidden" name="comment_post_ID" value="22" id="comment_post_ID">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
</form>
</div>
WP does not offer a way to create and use a comment form template. i.e.: as of 4.1.1, there's still no way to control all of the HTML markup that makes up the form. There are only ways to edit parts of it and that's by supplying arguments to comment_form().
So, if you would like to edit the whole layout (e.g.: place some of the content side to side instead of on top of one another; replace some of the <p>with <div>), you're out of luck.
What can we do?
An option would be to borrow the whole comment_form() function from the WordPress codebase (like this guy did): make a copy of the function in your theme, rename it, customize it and then call it in place of the vanilla function. That will work but there's a chance it might break on a future WordPress update if some of the inner workings of WP change.
Did you look for the comment_form() function in Wordpress code to see if you can edit it ?
You'll also find some informations here :
http://wordpress.org/support/topic/editing-the-comment-form
This function uses the default form. You need to make a comment-template.php file in your theme and in that file you can make your form.
Now when you will call comments_template() you will get your made form instead of default form.
I don't think you can change the containing div (<div id="respond" class="comment-respond">). Have a look at the comment-template.php
The only thing you can change is the form ID. 'id_form' => 'commentform'
You can make a responsive form without changing these elements.
I've recently answered something similiar on WPSE. You can go and check it out here
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Resizing an iframe based on content
What I am trying to do is:
Use a div to post a form to as an alternative to using ajax as there are some things that I need that are not working with ajax. My code is below for the 2 pages I am using:
The page with the form:
<form action="iframe.php" method="post" onsubmit="document.getElementById(\"\")" target="my_iframe">
<input type="hidden" name="post" value="postdata" />
<input type="submit" value="Do Stuff!" />
</form>
<!-- when the form is submitted, the server response will appear in this iframe -->
<iframe frameborder="0" name="my_iframe" id="frame" src="iframe.php"></iframe>
The iframe source:
<?php
if(isset($_POST['post'])){
var_dump($_POST);
}
?>
What can I do about this? Thanks in advance!
Start with your iframe being hidden in CSS with:
#frame {display:none}
.visible {display:block}
Then something like this on the submit button:
onclick="$(#frame).addClass('visible');"
This will work regardless of what the form does, though, so if you have validation, the frame will still become visible each time the button is clicked. If you rather, you can toggle it on and off with each press, like this:
onclick="$(#frame).toggleClass('visible');"
MuqMan good to see you again! You can change the size of an iframe using its properties. You can then use JavaScript or PHP, depending on what or how you are determining the auto resize, to give a dynamic number to them.
The attributes you're looking for:
<iframe height="200" width="200"></iframe>
iframe properties http://www.w3schools.com/tags/tag_iframe.asp
If you're wanting to show an iframe after the click, you will want to use a change source event of the iframe.
Here's a starter for you iFrame src change event detection?
I'm working on a school assignment, which consists of creating a social network (Basically: Facebook :P). This is in groups, and one of us wrote an auto-complete search engine, which works like this:
http://img585.imageshack.us/img585/333/194d61cbc3fe4cc98005ea1.png
You enter a name, it used some js and php to query the DB to find profiles matching the part of the string you entered. Now, I want to use this functionality to implement the tagging of photos. Now the problem is this: This .js script returns an unordered list of elements, consisting of links (hrefs), and if one is selected:
select: function( event, ui ) {
if (ui.item) {
window.location.href = ui.item.href;
}
}
gets called to navigate to the appropriate profile. Now what I'd like to do is: Enter a string, get the list of query results, and when I click one, i want to load it inside the box. Now I have almost 0 experience with PHP and JavaScript (I had to learn it from scratch basically, I can handle most of it now, but still... :P), and I can't get it to work
Basically that text box is "defined" in the html like this:
<div class="widget" id="search">
<form id="search" method="POST" enctype="multipart/form-data">
<input type="hidden" name="search" value="3559d7accf00360971961ca18989adc0614089c0" />
<div class="field text term "><label for="term">Zoeken</label>
<input type="text" name="term" id="term" class="text" value="" />
</div>
</form>
</div>
How do I access that actual textbox, and put data in it? Any takers? :) I can't seem to get it to work, despite trying almost every name, id or class that I see there. I just need to get the clicked name into the box, so I can just submit it & enter it into the database, as having to enter the entire exact name manually isn't really... Fancy enough
document.getElementById('term').value = newValue;
or, using jQuery (as you specified in the tags):
$('#term').val(newValue);