I have to make a wordpress plugin of a simple html form that do simple calculation. Here is my form code.
<html>
<head>
<title>Calculate</title>
<script language="javascript">
function addNumbers()
{
var val1 = parseInt(document.getElementById("value1").value);
var val2 = parseInt(document.getElementById("value2").value);
var ansD = document.getElementById("answer");
ansD.value = val1 + val2;
}
</script>
</head>
<body>
<input type="text" id="value1" name="value1" value="1"/>
<input type="text" id="value2" name="value2" value="2"/>
<input type="button" name="Sumbit" value="Click here"
onclick="javascript:addNumbers()"/>
<input type="text" id="answer" name="answer" value=""/>
</body>
</html>
Thanks
Try looking at this information sources, so that you can integrate your page with wordpress.
http://codex.wordpress.org/Writing_a_Plugin
http://corpocrat.com/2009/12/27/tutorial-how-to-write-a-wordpress-plugin/
I would say this is more of a design task than a pure coding task.
When it comes to outputting your code somewhere on the page generated by WordPress I would suggest using wp_enqueue_script() to include your javascript. Alternatively you might use the wp_head action if you really need inline script code. To print the actual form element, on option would be to hook on to the the_content filter and just append/prepend the content. Other options includes creating a shortcode to allow the user to insert [my_form] in the page content, or a creating a template tag for inclusion in your themes template files.
But all that really depends on the need of your users and what you intend to accomplish with this plugin. That said, it is definitely a good thing having at least basic understanding on the concepts of WordPress plugins as suggested by Ersel Aker, although a plugin doing what you are asking or might be as simple as:
// Enqueue javascript (placed in plugins.js in js subdir of plugin)
wp_enqueue_script('plugin.js.handle', plugins_url('js/plugin.js', __FILE__), array());
// Add filter to the_content
add_action('the_content', 'my_plugin_content');
// Append form to page content under certain conditions
function my_plugin_content($content) {
$form = '<input type="text" id="value1" name="value1" value="1"/> <input type="text" id="value2" name="value2" value="2"/> <input type="button" name="Sumbit" value="Click here" onclick="javascript:addNumbers()"/> <input type="text" id="answer" name="answer" value=""/>';
if ( some_magic_conditions_are_met() ) {
return $content . $form;
}
return $content;
}
Related
I would like to have 2 mutually exclusive fields.
One will be a FileField and other TextBoxField.
Is there a ready html form I can get my hands on to.
I have searched the web and couldnt find any.
Oh I am a little sorry..
I meant that I wanted to do this via Django Templates
You can make an onInput event listener and handle it using javascript, so that if the user types in one field it empties the other.
For example:
<form>
<label for="first">Fill This:</label>
<input type="text" name="first" id="first" oninput="run('first')"><br><br>
<label for="second">Or This:</label>
<input type="text" name="second" id="second" oninput="run('second')"><br><br>
<input type="submit" value="Submit">
</form>
<script>
function run(activeField) {
if (activeField == 'first') {
const second = document.querySelector('#second')
second.value = ''
} else {
const first = document.querySelector('#first')
first.value = ''
}
}
</script>
For Your textbox, you can use this:
<input type="text" name="name" placeholder="Please enter your name">
And for your files:
<input type="file" name="fileName">
But for file name it needs to be encrypted. HTML won't let you submit a form with a file. But you can override this in the form attr, like this:
<form action="dirToForm.py" method="POST" enctype="multipart/form-data"></form>
So this was brought to my attention today, that our website search field does not work in chrome... I cannot click and enter text into the text field, nor click the search icon to initiate searching...
Sorry I do not know the specifics as to what is causing this, nor did I develop this. One of our developers who left quite some time ago did. I am now in charge of trying to figure this out.
FireFox and IE 11 seems to working fine.
Any insight is greatly appreciated.
<div class="searchbox" id="searchbox">
<script type="text/javascript">
function RunSearch() {
window.location.href = "http://search.domain.com:8765/query.html?ql=&col=web1&qt=" + document.getElementById("search").value;
}
</script>
<div class="formSrchr">
<input type="text" size="20" name="qt" id="search" value="Search" onfocus="if(this.value == 'Search') {this.value=''}" onblur="if(this.value == ''){this.value ='Search'}" />
<input type="hidden" name="qlOld" id="qlOld" value="" />
<input type="hidden" name="colOld" id="colOld" value="web1" />
<input type="image" name="imageField" alt="search" src="/_images/search-mag.gif" onclick="RunSearch();" />
</div>
</div> <!-- /searchbox -->
This is bad code and i suggest an entire re-write.. As for a quick fix..
You could try the following :
var searchTerm = document.getElementById("search").value;
location.assign("http://search.domain.com:8765/query.html?ql=&col=web1&qt=" + searchTerm );
Or
function RunSearch() {
window.location.href = "http://search.domain.com:8765/query.html?ql=&col=web1&qt=" + document.getElementById("search").value;
return false;
}
But dont use this.. re-write it!
My recommendation is to open the Developer tools in chrome and look at the Javascript debug window. That should tell you what's going on in the more general case. In either case, I recommend rewriting that snippet like this:
<div class="searchbox" id="searchbox">
<div class="formSrchr">
<form action="http://search.domain.com:8765/query.html" method="get">
<input type="text" size="20" name="qt" value="Search" onfocus="if(this.value == 'Search') {this.value=''}" onblur="if(this.value == ''){this.value ='Search'}" onmouseup="return false" />
<input type="hidden" name="ql" id="ql" value="" />
<input type="hidden" name="col" id="col" value="web1" />
<input type="image" alt="search" src="/_images/search-mag.gif" />
</form>
</div>
</div>
The standard form element will behave the way it's supposed to without JavaScript. All the named inputs will be added as URL parameters just like it did before. That's what method="get" does. For most forms, the default method="post is best; however, for search you aren't really posting anything. There are some strange proxy servers that disable all HTTP POST calls to prevent people behind that proxy from accidentally sharing information they aren't supposed to. The method="get" allows those people to at least search your site.
NOTE: based on some searching around, Chrome needs you to disable the onmouseup event for focus and blur to work as expected. My HTML form above has that change in it already for you.
In HTML 5, you can simplify it even more by using the placeholder tag. It would look like this:
<input type="text" size="20" name="qt" placeholder="Search" value=""/>
That removes all the Javascript from your search form.
I want to have a box in HTML such as this one:
Particular thing, I need to do this using only HTML (no PHP or particular langage requiring server, or particular installation).
The reason for this is that it is meant to be used for HTML pages that will be opened from a USB key, not a website, and it has to be usable by any non-expert person. So no web-server configuration or installation required, such as what would be required for PHP, if I am right.
Think about not using a Form, but just using a Javascript function.
I'm not sure if this probably is not possible due to security reasons, but it could be a solution...
function redirect() {
var input = document.getElementById("stuff");
window.location = input.value;
}
<span>NOM:</span>
<input type="text" id="stuff"></input>
<br>
<input type="button" onclick="redirect()" value="Submit"></input>
I managed to do what I needed thanks to Anders Anderson's answer. Here is the code for those interested in doing similar thing. First, for the Javascript
function redirect() {
var answergiven = document.getElementById("answergiven");
var realanswer = document.getElementById("realanswer");
var nextpage = document.getElementById("nextpage");
if(answergiven.value.toLowerCase() == realanswer.value.toLowerCase()){
window.location = nextpage.value;
}
else{
alert('Wrong answer, please try again.');
}
return false; // prevent further bubbling of event
}
And for the HTML part, there are two hidden variables that determine the real answer, and the next page to go to, and the text field for the answer
<form name="myform" onSubmit="return redirect()">
<span>Réponse:</span>
<input type="text" id="answergiven" />
<input name="tosubmit" type="submit" value="Submit" />
<input type="hidden" id="realanswer" value="theanswer" />
<input type="hidden" id="nextpage" value="thenextpage.html" />
</form>
Please see the code here
it is an angular form, and the variable form should be of FormController . As you see with the usage of form.$pristine, the variable $pristine exists in form, but why it doesn't output when I just try <pre>form = {{form}}</pre>. I wanted to see all the members (if possible function names, else at least all primitives like $dirty, $valid , etc.) Why it is not outputting in the pre tag and how can I show them? It is mainly for debugging, but curious as well.
<form novalidate name="form" class="simple-form">
Name: <input type="text" ng-model="user.name" /><br />
E-mail: <input type="email" ng-model="user.email" /><br />
Gender: <input type="radio" ng-model="user.gender" value="male" />male
<input type="radio" ng-model="user.gender" value="female" />female<br />
<button ng-click="reset()">RESET</button>
<button ng-click="update(user)">SAVE</button>
</form>
<pre>pristine = {{form.$pristine}}</pre>
<pre>form = {{form}}</pre>
output
pristine = true
form = {}
An expression like this: {{form}} will convert the form object to a string. Angular uses the build in angular.toJson function to serialize the object. Please have a look at the documentation: angular.toJson. As you can see there all properties with a leading $ are stripped.
How to solve your problem:
You may use the JSON.stringify function to get all properties. Because you can't call this function in an expression you need to provide a helper function in your controller:
$scope.stringify = function(obj){
return JSON.stringify(obj);
}
Now you are able to output your complete form object in the view:
{{stringify(form)}}
The following should also work...
<pre>form = {{form | json}}</pre>
I am trying to add a Google search box to my own website. I would like it to search Google itself, not my site. There was some code I had that use to work, but no longer does:
<form method="get" action="https://www.google.com/search">
<input type="text" name="g" size="31" value="">
</form>
When I try making a search, it just directs to the Google homepage. Well, actually it directs here: https://www.google.com/webhp
Does anyone have a different solution? What am I doing wrong?
Sorry for replying on an older question, but I would like to clarify the last question.
You use a "get" method for your form.
When the name of your input-field is "g", it will make a URL like this:
https://www.google.com/search?g=[value from input-field]
But when you search with google, you notice the following URL:
https://www.google.nl/search?q=google+search+bar
Google uses the "q" Querystring variable as it's search-query.
Therefor, renaming your field from "g" to "q" solved the problem.
This is one of the way to add google site search to websites:
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_blank">
<input name="sitesearch" type="hidden" value="example.com">
<input autocomplete="on" class="form-control search" name="q" placeholder="Search in example.com" required="required" type="text">
<button class="button" type="submit">Search</button>
</form>
Figured it out, folks! for the NAME of the text box, you have to use "q". I had "g" just for my own personal preferences. But apparently it has to be "q".
Anyone know why?
(The reason your code isn't working is because the GET request name is now "q" instead of "g".
I recommend using one of the two methods below:
Method 1: Simply send a GET request directly to Google (Best and most simple option)
<form method="GET" action="https://www.google.com/search">
<input name="q" type="text">
<input type="submit">
</form>
Another (more complicated) answer would be
Method 2: Use JS to redirect to Google
<textarea id="searchterm"></textarea><button
onclick="search()">Search</button>
<script>
function search() {
var Blah = document.getElementById("searchterm").value;
location.replace("https://www.google.com/search?q=" + searchterm + "");
}
</script>
Hope this helps!
From 13 March 2021. I make this very easy code for my website https://neculaifantanaru.com/en/how-can-i-integrate-google-search-box-to-my-website-by-implementing-custom-code.html
First Step. This is the search box. Copy this code where you want in your html/php pages. People will search here the information. This form will send the search results to another html page called search.html
<form action="https://YOUR-WEBSITE.com/search.html" method="get" id="site-search">
<fieldset>
<!-- <label for="search">Search in website</label> -->
<input type="text" name="q" id="q" value="" />
<button type="submit" class="btn btn-inverse">search</button>
</fieldset>
</form>
Second Step. Create a new html page named search.html. And add this code in the <head> section, more likely before </head>:
<script>
(function() {
var cx = 'YOUR-NUMBER-CODE';
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>
YOUR-NUMBER-CODE you can get from this link https://cse.google.com/cse/all (Here you must add your new search engine.. Also, put OFF on the option "Search the entire web" in order to find results only on your website, not the entire web)
Step Three. Copy this code in the <body> section on the same page: search.html
<div class="main-content">
<h1>Search the site</h1><p>If you want to search for our articles on a specific topic, write the search term in the form below.</p>
<gcse:searchbox-only></gcse:searchbox-only>
<gcse:searchresults-only></gcse:searchresults-only>
</div>
THAT'S ALL.