I want to be able to POST to an external URL when a user clicks a link (menu item) in a WordPress menu.
I've tried adding the required parameters to the URL of a custom menu item, but unfortunatley the external site requires the data to be submitted via POST rather than a GET.
Has anyone solved this problem before or know of any plugins that would help?
Here is the solution I came up with.
I added a form to the top of the page with hidden fields corresponding to the data I wanted to POST. So in header.php straight after the opening body element:
<form id="postform" action="..." method="post" target="_blank">
<input type="hidden" name="field1" value="value1" />
<input type="hidden" name="field2" value="value2" />
...
</form>
Then I defined a Custom Menu Item with a URL of '#' and a CSS class of 'submitform'.
Finally, I added some JavaScript to the head in header.php to submit the form when the menu item link is clicked:
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function()
{
jQuery('.submitform').click(function()
{
jQuery('#postform').submit();
return false;
});
});
</script>
I guess ideally an id would be assigned to the anchor created via the Custom Menu Item. However, WordPress doesn't appear to allow that and actually using a class has meant I can have links in both a header and footer menu with the same class and hence both submitting the form.
Related
I need to do it without javascript.
For example, the form HTML rendered on the page normally looks like this:
<form action="/contact-us/#wpcf7-f713-p61-o1" method="post" class="wpcf7-form submitting" novalidate="novalidate" data-status="submitting">
But I need to add the custom attribue data-netlify="true" so the form should end up like this:
<form action="/contact-us/#wpcf7-f713-p61-o1" method="post" class="wpcf7-form submitting" novalidate="novalidate" data-status="submitting" data-netlify="true">
There is a similar question over here. But that is for putting a custom attribute on the input, I need the custom attribute on the form itself.
If the action always is the same on the form you could use javascript to add it
<script>
var data = document.querySelector('[action="/contact-us/#wpcf7-f713-p61-o1"]');
data.setAttribute('data-netlify', true);
console.log(data);
</script>
Introduction:
At this moment I'm creating my first custom Wordpress theme. Now I succesfully created a HTML/CSS template and converted this to fit wordpress (including header.php, index.php, footer.php, functions.php, sidebar.php and page.php).
Case/Problem definition:
At my homepage (index.php), I included several div's filled with text (pure HTML and CSS). Now I want to be able to manually change this text from an admin panel in my Wordpress Back-end. I already made an extra sub-menu page in the admin panel. This page is completely blank at this moment.
In Short:
How to fill in a text form in my Wordpress admin panel and echo this out on a certain page (front-end).
Extra
Since I'm new to Wordpress, PHP and creating your own themes I'm not sure how to do this or how to search for tutorials online (I don't know the correct terminology to search).
Thanks for all the tips and advice already!
In your functions.php add the following code that is highlighted. This will add a twitterid. So anywhere in your custom theme you can call the value of the custom admin page:
add menu item:
add_action('admin_menu', 'add_global_custom_options');
Assign the custom function which will create a form.
function add_global_custom_options()
{
add_options_page('Global Custom Options', 'Global Custom Options', 'manage_options', 'functions','global_custom_options');
}
Create a Function Which Generates the Form:
<?php
function global_custom_options()
{
?>
<div class="wrap">
<h2>Global Custom Options</h2>
<form method="post" action="options.php">
<?php wp_nonce_field('update-options') ?>
<p><strong>Twitter ID:</strong><br />
<input type="text" name="twitterid" size="45" value="<?php echo get_option('twitterid'); ?>" />
</p>
<p><input type="submit" name="Submit" value="Store Options" /></p>
<input type="hidden" name="action" value="update" />
<input type="hidden" name="page_options" value="twitterid" />
</form>
</div>
<?php
}
?>
View your admin page. You will find a new link in your Admin Menu called “Global Custom Options”. Just enter your values in that form and you are good to go for using those values in your theme files like “get_option(‘twitterid’)”. So, in your index.php or any other theme file, you can do something like
<?php echo get_option('twitterid') ?>
and it will print whatever value is in the textbox on admin page.
Here is a link to the tutorial for reference.
I want to have a top menu with New, Save, Cancel buttons and below, 3 different entry forms, similar to a "desktop application". When form1 is filled up, Save button would submit the form. Also, if form2 or form3 are filled up, the same Save button can submit the form, taking into account that is in a different form.
Is it possible to do this, a submit button outside form tags ?
If not, any suggestion how to fake submit?
Thanks for your help
You just have to trigger the submit event with .submit in jQuery by example.
Here is the doc : http://api.jquery.com/submit/
Instead of an <input type="submit"> button or jQuery call you could use the new HTML5 <button> element and its form attribute to specify which form(s) the button belongs to. Then just set its formaction attribute to the required destination. Documentation
Example:
<form id="form1">
...
</form>
<form id="form2">
...
</form>
<form id="form3">
...
</form>
<button form="form1 form2 form3" formaction="processForm.php" formmethod="POST">
Submit
</button>
You can use
$("#formId").submit(function() { /*your stuff*/ });
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.
I only want to display the iframe containing the search results when the search form has been submitted, however I'm not sure how to do this as the $_GET variables are not available to my script so I can't do
if(isset($_GET['submit'])) {
//display iframe
}
How can I capture the search results returned from the google mini (to a file) to display as in include within the webpage or how can capture the submit event for this page, which I can use as the condition to display the iframe containing the search results?
Many thanks
Return false in a form's onSubmit event, then set the src property of your iframe to what would be the URL you use for the search.
Something like:
<form onSubmit='return doSearch();'>
<input type='text' name='search' id='search' />
<!-- or whatever parameters needed for the search form -->
<input type='submit' />
</form>
<iframe id='google'></iframe>
<script>
function doSerarch() {
var aSearch = 'search=' + $('#search').val(); // or whatever
$('#google').attr('src','http://yourmini?');
return false;
}
</script>