Implementing a evaluation system using jekyll - jekyll

I am improving a website that was created using Jekyll. This site is a blog for an enterprise, and there are some texts there. I need a plugin, which let the readers evaluate the texts. However, I haven't found any.
Can anyone help me?

This Jekyll site (I created) uses a rating form:
http://www.stresan.de/perfekte-turniervorbereitung/
The code below relies on some Javascript and a form that is submitted through the CloudCannon form handling. Cloudcannon can easily be replaced by some other form service, like FormSpree, FormSubmit, FormBucket or others. The initial value of the post is set in the Front Matter. This rating system is therefore partially fake, but it provides good feedback.
function setreviewval(val){
var i=1;
$('#review img').each(function(){
if(i<=val) $(this).attr('src','http://www.stresan.de/img/star.svg');
else $(this).attr('src','http://www.stresan.de/img/star-empty.svg');
i++;
});
}
function setreviewvaldef(val){
setreviewval(val);
//remove mouseover and mouseout
$('#review img').attr('onmouseover','');
$('#review img').attr('onmouseout','');
}
img {width: 30px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="review"><div>Bewerte diesen Artikel: </div>
<img src="http://www.stresan.de/img/star.svg" onmouseover="setreviewval(1);" onmouseout="setreviewval(4);" onclick="setreviewvaldef(1);$('#rating').val(1);$('#ratingform').show().attr('action',$('#ratingform').attr('action')+'#rating=1');" />
<img src="http://www.stresan.de/img/star.svg" onmouseover="setreviewval(2);" onmouseout="setreviewval(4);" onclick="setreviewvaldef(2);$('#rating').val(2);$('#ratingform').show().attr('action',$('#ratingform').attr('action')+'#rating=2');" />
<img src="http://www.stresan.de/img/star.svg" onmouseover="setreviewval(3);" onmouseout="setreviewval(4);" onclick="setreviewvaldef(3);$('#rating').val(3);$('#ratingform').show().attr('action',$('#ratingform').attr('action')+'#rating=3');" />
<img src="http://www.stresan.de/img/star.svg" onmouseover="setreviewval(4);" onmouseout="setreviewval(4);" onclick="setreviewvaldef(4);$('#rating').val(4);$('#ratingform').show().attr('action',$('#ratingform').attr('action')+'#rating=4');" />
<img src="http://www.stresan.de/img/star-empty.svg" onmouseover="setreviewval(5);" onmouseout="setreviewval(4);" onclick="setreviewvaldef(5);$('#rating').val(5);$('#ratingform').show().attr('action',$('#ratingform').attr('action')+'#rating=5');" />
<form method="POST" id="ratingform" action="{{ page.url }}"><input type="hidden" name="_to" value="jhvanderschee#gmail.com" />
<input type="hidden" name="post" value="{{ page.url }}" /><input id="rating" type="hidden" name="rating" value="" /><br />
<input type="text" name="comment" placeholder="Please clarify your score..." class="form-control" required="required" />
</form>
</div>

Related

Wufoo: Your submission is missing the secure POST key

There was a problem with your submission.
Your submission is missing the secure POST key.
when I am redirected on Wufoo then got the warning or error
I have attached screenshot related error
HTML
<form name="Wufoo Button" accept-charset="UTF-8"
enctype="multipart/form-data" method="post"
action="https://subdomainname.wufoo.com/forms/sponsorchild/">
<!-- Dollars -->
<input id="Field127" name="Field127" type="hidden" t-att-value="Field127" />
<!-- Cents -->
<input id="Field127-1" name="Field127-1" type="hidden" t-att-value="Field1271" />
<!-- Child name and file number -->
<input id="Field125" name="Field125" type="hidden" t-att-value="Field125" />
<input id="saveForm" name="saveForm" class="submit" type="submit" value="Submit" />
</form>
Not sure if you're still stuck on this but I found the answer.
You need to keep this bit of HTML at the end of the form (you can just hide it with css). The value acts as the key:
<li class="hide">
<label for="comment">Do Not Fill This Out</label>
<textarea name="comment" id="comment" rows="1" cols="1"></textarea>
<input type="hidden" id="idstamp" name="idstamp" value="[WUFOO VALUE IS HERE]" />
</li>

How to generate a post action inside of an iframe for a payment gateway

I'm trying to set up an iframe-based payment gateway for a WooCommerce online store. The instructions I got from the bank say that I need to "generate a post action inside of the contained IFRAME on the page."
The result should be that when the checkout page loads, inside the iframe I should be seeing fields for the customer to enter their credit card information.
But I don't understand how to take the form below (from the documentation) and automatically post it to the iframe.
Payment Gateway Documentation:
To initiate a transaction, your system must generate a POST action inside of the contained IFRAME on the page.using the format below to the URL designated for your system. You will be provided with a URL for testing and live transaction processing by the processor when your merchant accounts have been configured.
Example:
<form ACTION="https://tranpage/demogwtxnif/txnif.aspx" METHOD="post">
<input type="hidden" NAME="MERCHKEY" VALUE="MYDEMOMERCHANTKEY" />
<input type=”hidden” NAME=”TRANTYPE” VALUE=”AUTH”/>
<input type=”hidden” NAME=”AMT” VALUE=”10.00” />
<input type=”hidden” NAME=”CURR” VALUE=”CAD” />
<input NAME=”invoice” VALUE=”DemoSale1” />
<input NAME=”tranid” VALUE=”123456789” />
<input NAME=”amt” VALUE=1.00 />
<input NAME=”curr” VALUE=”USD” />
<input NAME=”URLAPPROVED” VALUE=”http://www.webstore.com/cgishl/goodpayment.exe?res=#RC#&fres=#FC#&ac=#APP#&ref=#REF#&tran=#TRANID#&invoice=#INVOICE#&err=#EM#” />
<input NAME=”URLOTHER” VALUE=”http://www.webstore.com/cgishl/paymentincomplete.exe?res=#RC#&fres=#FC#&ac=#APP#&ref=#REF#&tran=#TRANID#&invoice=#INVOICE#&err=#EM#” />
<INPUT name=SUBMIT type=submit value="Pay Now">
</form>
Have the form's target attribute match the iframe's name attribute.
<form target="my-iframe" ACTION="https://tranpage/demogwtxnif/txnif.aspx" METHOD="post">
<input type="hidden" NAME="MERCHKEY" VALUE="MYDEMOMERCHANTKEY" />
<input type=”hidden” NAME=”TRANTYPE” VALUE=”AUTH”/>
...
</form>
<iframe name="my-iframe" src="https://tranpage/demogwtxnif/txnif.aspx"></iframe>
Source: https://css-tricks.com/snippets/html/post-data-to-an-iframe/
There is working example (you need to add a simple js line to submit your form):
var iframe = document.createElement('iframe');
var html = `<body>
<form id="form" action="http://example.com" method="post">
<input type="text" name="email" value="mail#example.com"/>
<input type="submit" />
</form>
<script>document.getElementById("form").submit();</script>
</body>`;
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
document.body.appendChild(iframe);

Website search field not working - Chrome

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.

Google custom search on wordpress

The google custom search has recently stopped working on a client's website. Here's the source code
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function(){
var customSearchControl = new google.search.CustomSearchControl('URLGOESHERE/');
customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
customSearchControl.draw('cse');
}, true);
</script>
Is this the most recent code to use? I've been looking to see if this code has been changed recently by Google but cannot see anything.
The problem is the search button just doesn't let you search, almost like it's closed off.
Any help would be much appreciated, thanks.
You can use this code in an iframe
<form id="cse-search-box" action="http://google.com/cse">
<input type="hidden" name="cx" value="YOUR SEARCH ENGINE ID goes here" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</form>
<img src="http://www.google.com/cse/images/google_custom_search_smwide.gif">

Attribute action in form tag doesn't find my ActionResult

I have an mvc3 application and I'm trying to implement Forms Authentication. I'm trying to invoke the CheckUser ActionResult in my SecurityController controller but it just doesn't find it. I guess it searches in views folder. Any ideas? Here is the html code and yes, the action is called CheckedUser.
<form action="Security/CheckUser" method="post">
Username:<br />
<input type="text" name="usernametb" /><br />
Password:<br />
<input type="password" name="passwordtb" /><br />
<br />
<input type="submit" va``lue="Log In" />
</form>
Try this:
<form action="/Security/CheckUser" method="post">
in place of:
<form action="Security/CheckUser" method="post">