Problem solved after I found an other template. Seems the previous one is incompatible.
I'm using the Plugin Foxycomplete (advanced autocomplete search with images) - more specifically: I want to use it. I installed and enabled it. The developer explains one step like this:
Enter the ID of the Form Input Field WITHOUT THE '#' on which you wish to apply the Autocomplete functionaliy. Defaults to the Regular "s".
I've even looked at the file foxycomplete.js, but I don't get it:
(function($) {
$(document).ready(function() {
var inputField = site_data.inputField;
var inputWidth = 0;
var absPath = "";
if(site_data.inputField == ""){
inputField = "s";
}
After this I took a look at the search form with firebug and this is the HTML-code:
<form action="http://localhost/sites/wordpress/" class="searchform" method="get">
<input type="text" value="" name="s" class="field">
<input type="submit" value="" name="submit" class="submit">
</form>
Now I'm assuming that I have to change class = "field" to id = "s", but I also do not know in which document I find the HTML part, I am a little stuck. If I do the change in firebug, it doesn't work.
all you need to do is to add following to your "input type" - name="s", id="s". This worked for me on a Canvas theme, by woothemes, and should be cool with any other
as an example for your code:
<input type="text" name="s" id="s" value="" class="field">
edit: search form code location really different to each theme template. but in most cases it's in header or sidebar.
Related
I would like to custom input files upload from CF7 in WP.
There are many ways to custom the button, but I need to display the file name once it has been uploaded.
I found one way to do it with this code :
<input type="file" class="custom-file-input">
<label class="custom-file-label" for="custom-file-input">Your file</label>
And this script :
<script>
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>
It works, but with CF7, we use shortcode te create inputs.
And it gives something like :
<span class="wpcf7-form-control-wrap">
<input type="file" name="your-file" size="40" class="wpcf7-form-control wpcf7-file custom-file-input" id="your-file" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx" aria-invalid="false">
</span>
<label class="custom-file-label" for="your-file">Your file</label></div>
And it doesn't work anymore.
JS seems ok with the CF7 code.
Maybe it doesn't work because of CF7's way of generating code ?
I don't know.. Do you have an idea ?
Thank in advance for your help :)
[file file-265 id:fileuploadfield class:fileuploadfield limit:120000 filetypes:.jpg .png 1/]
[text uploadtextfield id:uploadtextfield class:uploadtextfield]
<input type="button" id="uploadfile" value="select">
As CF7 wraps the field inside <span> first you need to look for the parent container (assuming .custom-file), and then look for the .custom-file-label.
$(".custom-file-input").on("change", function() {
var filename = $(this).val().split("\\").pop();
$(this).parents(".custom-file").find(".custom-file-label").addClass("selected").html(filename);
});
This is kind of a late answer, but I was having this same issue today and this question helped me find the solution.
I am developing a WordPress plugin that is inserted onto the page by adding a token to the page content.
So, on the page there is some introductory text with the contents of the plugin below. On postback, I would like to clear the introductory text and just show output from the plugin.
I know I could do this using jQuery by replacing the contents of $(".entry-content").html("plugin output"); but I wanted to ask if there was a WordPress native method of doing this instead.
UPDATE
The following is one of the files from the plugin. It is on the POST (the if condition) that I want to replace the page content, with the output of the function. On the GET (the else condition) I just want to append the output of the function to the content.
<?php
/*
The following code utilizes Heredoc syntax.
It is very important to note that the line with the closing identifier must contain no other characters, except a semicolon (;).
That means especially that the identifier may not be indented, and there may not be any spaces or tabs before or after the semicolon.
It's also important to realize that the first character before the closing identifier must be a newline as defined by the local operating system.
This is \n on UNIX systems, including Mac OS X.
The closing delimiter must also be followed by a newline.
*/
class WHRFContactUs {
function GenerateContactUsForm() {
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
$sendgrid = new SendGrid($GLOBALS['MailAPIKey']);
$email = new SendGrid\Email();
$email
->addTo($GLOBALS['MailAPISender'])
->setReplyTo($_POST['Email'])
->setFrom($GLOBALS['MailAPISender'])
->setSubject($_POST['Subject'])
->setHtml($_POST['Message'] . '<br /><hr/>' . $_POST['FullName'] . ' ' . '(' . $_POST['Email'] . ')<br/>' . '<br />')
;
try
{
$sendgrid->send($email);
$html = <<<HTML
Your message has been successfully sent. Thank you for taking the time to provide us your feedback.
<br/><br/>
In the event that your feedback requires a response, a representative will contact you as soon as possible.
HTML;
}
catch(\SendGrid\Exception $ex)
{
echo $ex->getCode();
foreach($ex->getErrors() as $er) {
echo $er;
}
}
}
else
{
$html = <<<HTML
<form method="post" id="ContactUsForm" action="{$_SERVER['REQUEST_URI']}">
<div class="form-group">
<label for="FullName" class="sr-only">Your full name</label>
<input type="text" class="form-control" id="FullName" name="FullName" placeholder="Your full name" data-validation-required="Please enter your full name.">
</div>
<div class="form-group">
<label for="Email" class="sr-only">Your email address</label>
<input type="email" class="form-control" id="Email" name="Email" placeholder="Your email address" data-validation-required="Please enter your email address." data-validation-format="Please enter a valid email address.">
</div>
<div class="form-group">
<label for="Subject" class="sr-only">Subject</label>
<input type="text" class="form-control" id="Subject" name="Subject" placeholder="Subject" data-validation-required="Please enter a subject.">
</div>
<div class="form-group">
<label for="Message" class="sr-only">Message</label>
<textarea class="form-control" id="Message" name="Message" placeholder="Your message..." data-validation-required="Please enter a message." rows="4"></textarea>
</div>
<button type="submit" id="ContactUsFormSubmit" name="ContactUsFormSubmit" class="btn btn-primary">Send message</button>
</form>
<script type="application/javascript" src="{$GLOBALS['WHRFPluginPath']}scripts/whrf-contact-us.js"></script>
HTML;
}
return $html;
}
}
add_shortcode('ContactUsForm', array('WHRFContactUs','GenerateContactUsForm'));
?>
As mentioned in the comments, without knowing how that content is being added it isn't really possible to know how to replace it.
However, there's a possibility of achieving that in a very disruptive and ill-advised way:
Chances are that content is being added by using the filter the_content.
So you could disruptively have a high-priority modification for the content and then remove that filter to stop the other content from being added. As follows:
function my_disruptive_filter($content) {
remove_all_filters('the_content');
return 'my custom content';
}
add_filter( 'the_content', 'my_disruptive_filter', -999, 1);
I'm not 100% sure if a this would work, since I've never tried it.
Also remove_all_filters takes a second parameter that's $priority which is optional. You can target all priorities that are lower that the one using with this hook, via a for loop. But I assume without providing that parameter it would just remove all of them.
Warning
The reason that this is very disruptive is that it would prevent any other code from using that filter. Another developer (or even yourself) might want to use that filter later at some point and it won't work and you have no idea why. Could be a very difficult situation to get out of.
Also this might prevent existing plugin theme from adding their content, so if you wind up using and see missing stuff -- the reason could be this.
Note: this is really a hit-or-miss solution because it depends on how that content is being added.
The function the_content() returns the page content, if you want to overwrite this using your own plugin you should remove this line in whatever page you are (usually page.php/single.php in theme dir) with your custom plugin output.
I have a form in my ASP .NET project that takes the users input, and appends it to a URL to search a wiki. The form works perfectly when you enter in a search term, and click the 'search' button, however when you type into the input box and hit enter, the page refreshes and the box clears.
my html
<form>
<label id="sideBarLabel"> Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
Search Wiki
</form>
my js
function searchWiki(){
var siteQuery = $('#query-string').val();
window.location.href = "/dosearchsite.action?queryString=" + siteQuery;
}
Can anyone help ?
Your searchWiki() js method is only called when the evenement onclick is raised on your button, but not when your form is submitted.
There is several ways to achieve what you want:
Add a js method to catch the onsubmit event of your form:
$("form").on("submit", searchWiki());
Or add a tag on your form:
<form onsubmit="searchWiki()">
Or specify the action attribute on your form:
<form action="/dosearchsite.action">
Note that in ASP.NET, the ModelBinder will link your form inputs to your controller action parameters, using the name attribute of the inputs. That means that you should not specify them in the url yourself.
You should also declare your form using Html.BeginForm or Ajax.BeginForm if you want your form to be submitted by ajax.
#Html.BeginForm("ActionName", "ControllerName")
{
<label id="sideBarLabel">Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
<input type="submit" class="button" value="Search Wiki"/>
}
This will call searchWiki when you press enter.
$('#query-string').keypress(function(event) {
if (event.keyCode == 13) {
searchWiki();
event.preventDefault();}});
I have a site that has 2 forms - a short form and a long form. If you look at http://dforbesinsuranceagency.com you'll see the short form next to the masthead photo. The long form is at http://dforbesinsuranceagency.com/request-free-insurance-quotes/
When the user hits Submit on the short form, it kicks them over to the long form page, so that part works fine. The part that gives me fits is that I need the values entered into the short form fields First Name, Last Name, Email Address and Telephone passed to their equivalent fields on the long form.
How do I do this?
This is how I am redirecting the short form to the long form (I added it to the Additional Settings section for the short form):
on_sent_ok: "location = 'http://dforbesinsuranceagency.com//request-free-insurance-quotes';"
Any help would be appreciated.
Hack, hack, hackety, hack hack hack... Without suggesting "not using a form-builder" I don't think there is an elegant solution - you can't use the other PHP method suggested without modifying the plugin itself (and that is a can of worms). I will propose a Javascript solution but there are some caveats (below):
jQuery(document).ready(function($){
$('#quick-quote form:first').submit(function(){
var foo = {};
$(this).find('input[type=text], select').each(function(){
foo[$(this).attr('name')] = $(this).val();
});
document.cookie = 'formData='+JSON.stringify(foo);
});
var ff = $('#container form:first');
if(ff.length){
var data = $.parseJSON(
document.cookie.match('(^|;) ?formData=([^;]*)(;|$)')[2]
);
if(data){
for(var name in data){
ff.find('input[name='+name+'], select[name='+name+']').val(data[name]);
}
}
}
});
What this will essentially do is: on submission, store your mini-form options in a cookie. On page load it will then look for a form in the main body of the page and apply any stored cookie data.
Notes
The jQuery selectors are deliberately ambiguous to avoid any future changes in your admin panel/plugin that will likely screw with the form IDs (thus breaking the script).
I'm not faffing about pairing field/option names - for example the select box in your mini-form is named insurance-type however the matching box in the main form is named ins-type - you will have to ensure they are of the same name.
This also applies to select box values - if there is no matching value, it will be ignored (eg. some of your values in the main form have » » characters in front (and so don't match).
try this.
set the action of our first form to a php file named xyz.php
<form method="post" action="xyz.php">
<input type="text" name="name">
<input type="text" name="email_address">
<input type="submit" value="Go To Step 2">
</form>
the file xyz.php will create a new form for you which in this case is your second form (the big one). Set the action of the form as required. the code of your xyz.php will look something like this.
<form method="post" action="form3.php">
<input type="text" name="name" value="<?php echo $_POST['name']; ?>">
<input type="text" name="email_address" value="<?php echo $_POST['email_address']; ?>">
<input type="radio" group="membership_type" value="Free">
<input type="radio" group="membership_type" value="Normal">
<input type="radio" group="membership_type" value="Deluxe">
<input type="checkbox" name="terms_and_conditions">
<input type="submit" value="Go To Step 3">
</form>
where the input fields of the first form will already be filled with the details given by the user in the first form.
You can create the first form by yourself and let the contact form create the second form for you providing the default values using the method above.
Hope this helps!
I am working on a plugin, which creates a couple of Virtual pages, and I wish these links to be available in Menu admin page, to let users have the liberty to add them as they create menus.
I want to add a Meta box in Menu administration, very similar to Page/Category meta boxes, to let users select what page to add in their menu.
Apparently, the only possible research is in the core itself.
Here, /wp-includes/nav-menu.php, we can get how to insert the meta box:
add_action('admin_init', 'so_13875144_nav_menu_meta_box');
function so_13875144_nav_menu_meta_box() {
add_meta_box(
'my-custom-nav-box',
__('Custom Box'),
'so_13875144_display_menu_custom_box',
'nav-menus',
'side',
'default'
);
}
function so_13875144_display_menu_custom_box() {
/* Not sure about this global var */
//global $_nav_menu_placeholder;
//$_nav_menu_placeholder = ( 0 > $_nav_menu_placeholder ) ? intval($_nav_menu_placeholder) - 1 : -1;
?>
<p id="menu-item-custom-box">
<label class="howto" for="custom-menu-item-custom-box">
<span><?php _e('URL'); ?></span>
<input id="custom-menu-item-custom-box" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-custom-box]" type="text" class="code menu-item-textbox" value="my text" />
</label>
</p>
<?php
}
But, the hard part, which I haven't managed to make work, is to save the value.
This is the file /wp-admin/nav-menus.php that has to be studied.
Tried to hook into the action wp_update_nav_menu, but the custom meta box input field is not being passed into $_POST.
WordPress Answers may have some hint: https://wordpress.stackexchange.com/search?q=wp_update_nav_menu
http://codex.wordpress.org/Function_Reference/add_meta_box
Use the post_type 'nav-menus'
I know I'm late to the party but just for anyone else trying to do this...
b__ is right, that is the way to get it to show on the page except it is much easier to use checkboxes than any other field because there is an inbuilt javascript function that looks for checkboxes.
All you need to do is copy the html from an existing checkbox -
<li><label class="menu-item-title"><input type="checkbox" class="menu-item-checkbox" name="menu-item[-1][menu-item-object-id]" value="2"> Sample Page</label><input type="hidden" class="menu-item-db-id" name="menu-item[-1][menu-item-db-id]" value="0"><input type="hidden" class="menu-item-object" name="menu-item[-1][menu-item-object]" value="page"><input type="hidden" class="menu-item-parent-id" name="menu-item[-1][menu-item-parent-id]" value="0"><input type="hidden" class="menu-item-type" name="menu-item[-1][menu-item-type]" value="post_type"><input type="hidden" class="menu-item-title" name="menu-item[-1][menu-item-title]" value="Sample Page"><input type="hidden" class="menu-item-url" name="menu-item[-1][menu-item-url]" value=""><input type="hidden" class="menu-item-target" name="menu-item[-1][menu-item-target]" value=""><input type="hidden" class="menu-item-attr_title" name="menu-item[-1][menu-item-attr_title]" value=""><input type="hidden" class="menu-item-classes" name="menu-item[-1][menu-item-classes]" value=""><input type="hidden" class="menu-item-xfn" name="menu-item[-1][menu-item-xfn]" value=""></li>
but give them each a unique ID and put your details in for the URL, title etc.
Then, add a submit button at the end to add to the menu -
<input type="submit" class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e('Add to Menu'); ?>" name="YOUR NAME" id="YOUR ID" onclick="(function(){$('#THE DIV YOU HAVE PUT YOUR LIST IN').addSelectedToMenu( api.addMenuItemToBottom );})"/>
And that should add the item to the list.
This is a pretty old question but I was trying to do this today so in case it points anyone in the right direction...
I won't cover adding the meta box, as it's covered above. I'll also only cover a custom link as I haven't looked into adding a post, page, term link etc.
Just to cover the logic of how I got there...Looking at wp-admin/js/nav-menu.js, for a custom link you'll want to use window.wpNavMenu.addItemToMenu(). This ajax submits to the function wp_ajax_add_menu_item() in wp-admin/includes/ajax-actions.php. This then submits to wp_save_nav_menu_items() in wp-admin/includes/nav-menu.php. The upshot from looking at these files is that all menu items are of a post_type, taxonomy, post_type_archive or custom type.
Hook the javascript to the HTML as you wish, but if you want to submit a custom link, you need to call addItemToMenu() as follows:
var url = 'http://example.com';
var title = 'Link text';
window.wpNavMenu.addItemToMenu({
'-1': {
'menu-item-type': 'custom',
'menu-item-url': url,
'menu-item-title': title,
}
}, window.wpNavMenu.addMenuItemToBottom);
Menu item type has to be "custom" otherwise it requires info for a post, page etc. with which to associate the menu item.