Please consider the following (Issue is, the results of the Google Search on our page is not registering within our Google Analytics Account):
HTML FORM:
<div style="float:right; margin-right:12px;">
<form id="cse-search-box" name="srchfrm" action="http://google.com/cse" target="_blank" onsubmit="validatesearch()">
<input value="999999999999999999999:srraaaaaaaa" name="cx" type="hidden"/>
<input id="q" name="q" type="text" onKeyPress="return submitenter(this,event)" placeholder="Search"/>
<a href="javascript:;" onmouseover="MM_swapImage('go','','/btn_go_on.gif',1)" onmouseout="MM_swapImgRestore()" />
<input type="image" src="/btn_go.gif" alt="Go" width="20" height="21" border="0" align="top" id="go"/>
<input value="UTF-8" name="ie" type="hidden"/>
</form>
</div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(function() {
google.search.CustomSearchControl.attachAutoCompletion(
'999999999999999999999:srraaaaaaaa',
document.getElementById('q'),
'cse-search-box');
});
</script>
URL ON EXECUTING A SEARCH:
http://www.google.com/cse?cx=999999999999999999999:srraaaaaaaa&q=test+search&x=12&y=11&ie=UTF-8&oq=&gs_l=#gsc.tab=0&gsc.q=test%20search&gsc.page=1
QUERY PARAMETERS BEING USED:
q
query (I read in another post to try this)
Thank you for all the help in advance!
By changing:
action="http://google.com/cse"
within,
<form id="cse-search-box" name="srchfrm" action="http://google.com/cse" target="_blank" onsubmit="validatesearch()">
to redirect to a page within the website, this resolved the issue.
Working code:
<div style="float:right; margin-right:12px;">
<form id="searchbox_99999999999999999999:srraaaaaaaa" name="srchfrm" action="/search" target="_self" onsubmit="validatesearch()">
<input value="99999999999999999999:srraaaaaaaa" name="cx" type="hidden"/>
<input id="q" name="q" autocomplete="off" type="text" onKeyPress="return submitenter(this,event)" placeholder="Search"/>
<input name="ie" value="UTF-8" type="hidden"/>
<a href="javascript:;" onmouseover="MM_swapImage('go','','/btn_go_on.png',1)" onmouseout="MM_swapImgRestore()" />
<input type="image" src="/btn_go.png" alt="Go" width="20" height="21" border="0" align="top" id="go"/>
</form>
</div>
The Search Page itself has the following code as per Google documentation:
HEAD:
<script>
(function() {
var cx = '99999999999999999999:srraaaaaaaa';
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>
BODY:
<gcse:searchresults-only></gcse:searchresults-only>
Related
I'm trying to get filtered data from a webform more quickly. Basically I want to use URL input to specify a date and to precheck a checkbox. I'm getting stuck with how to specify the check box as I'm not sure what the value should be.
<form action="/xxx/yyy" class="form-inline d-flex justify-content-end" method="get"> <div class="input-group input-group-lg mb-2">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</div>
<input type="text" name="from" value="" class="form-control datetimepicker-input" id="datetimepicker7" data-toggle="datetimepicker" data-target="#datetimepicker7" autocomplete="false">
<div class="input-group-append">
<button type="submit" class="btn btn-dark"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
</form>
####snip and skip to the part of the form I wish to pre-check####
<fieldset id="departureGatewayFilters">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="AMS" id="departureGatewayCheck_AMS">
<label class="form-check-label" for="departureGatewayCheck_AMS">
AMS
</label>
</div>
So far I'm using URL string: /xxx/yyy?from=2020-03-05 - what would I need next to pre-check the checkbox as well?
Thanks in advance!
Clare
Getting your checkbox checked and also getting value of the checkbox just through URL string is little bit troublesome. But you can try this :
You can assign unique name to the checkbox.
<input class="form-check-input" type="checkbox" name="checkbox_1" id="departureGatewayCheck_AMS">
And then what you can do is pass the value of checkbox through URL string. For example :
/xxx/yyy?from=2020-03-05&checkbox_1=test.
Now, using javascript you can parse URL strings and get your search params, compare it and get your checkbox checked.
<script lang="javascript">
var url_string = window.location.href ; //gets current URL
var url = new URL(url_string); // instantiate string as URL object
var c = url.searchParams.get("checkbox_1"); //get the params
if(c == "test") {
document.getElementById("departureGatewayCheck_AMS").checked = true; //checks your checkbox
}
</script>
Hope it helps ! Have a good day!
I think all you need to do is add a (checked="true") argument to your input tag your code should look like this then:
<div class="form-check">
<input class="form-check-input" checked="true" type="checkbox" value="AMS" id="departureGatewayCheck_AMS">
<label class="form-check-label" for="departureGatewayCheck_AMS">
AMS
</label>
</div>
Hope this helps
If you want to make the checkbox departureGatewayCheck_AMS checked by default, it is sufficient to edit its code like this:
<input class="form-check-input" type="checkbox" value="AMS" name="departureGatewayCheck_AMS" id="departureGatewayCheck_AMS" checked> AMS
If the checkbox is selected, since its "value" attribute is "AMS",your url (if you submit the form via GET) would be something like:
/xxx/yyy?from=2020-03-05&departureGatewayCheck_AMS=AMS
Complete solution for your requirement:-
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" integrity="sha256-yMjaV542P+q1RnH6XByCPDfUFhmOafWbeLPmqKh11zo=" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
<div class="container">
<form class="form-inline d-flex justify-content-end" method="get"> <div class="input-group input-group-lg mb-2">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</div>
<input type="text" name="from" value="" class="form-control datetimepicker-input" id="datetimepicker7" autocomplete="false">
<div class="input-group-append">
<button type="submit" class="btn btn-dark"><i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
<fieldset id="departureGatewayFilters">
<div class="form-check">
<input class="form-check-input" name="checkname" type="checkbox" value="AMS" id="departureGatewayCheck_AMS">
<label class="form-check-label" for="departureGatewayCheck_AMS">
AMS
</label>
</div>
</fieldset>
</form>
</div>
</body>
<script type="text/javascript">
$(function () {
var url_string = "https://www.example.com/page?from=2020-12-12&checkname=1";//window.location.href ; //gets current URL
var url = new URL(url_string); // instantiate string as URL object
var date=url.searchParams.get("from");
var check = url.searchParams.get("checkname"); //get the params
alert(date);
alert(check);
if(check) {
$( "#departureGatewayCheck_AMS" ).prop( "checked", true );
}
$('.datetimepicker-input').datetimepicker({
format: 'YYYY-MM-DD',
defaultDate: date,
});
});
</script>
in pop up box, we are displaying login form. once user enter wrong email id or password, we are displaying message : Invalid login/pw , but once they enter correct details and click on login button, than user will be logged in.
but issue is pop up box will remain until we close the pop up manually with help of close button as in below image, but i want to hide the pop up box if login is successfull.
enter image description here
Once we click on login, under Response tab, if there is no message, than i want to hide the pop up, if there is message as success":false,"error":"Invalid login or password." , than i don't want to hide the pop up
enter image description here
I tried below code :
Html
<form>
//code for email and pw
<button onclick = "hideWindow()">Login</button>
</form>
Ajax
function hideWindow()
{
var username=jQuery( "#customusername" ).val();
var password=jQuery( "#custompassword" ).val();
url="";
new Ajax.Request(url, {
method: 'POST',
onFailure: function(response){
},
parameters: {
username: username,
password:password
},
onSuccess: function(response)
{
if(response.responseText=="")
{
//trigger to close popup
document.getElementById('something').style.display = 'none';
document.getElementById('ajaxlogin-mask').style.display = 'none';
}
}
});
}
edit
<div class="ajaxlogin-window" id="something">
<form>
<div class="content">
<ul class="form-list">
<li>
<input type="hidden" id="likeproduct_id" name="product_id" value=""/>
<label for="email" class="required"><em>*</em>Email</label>
<div class="input-box">
<input type="text" name="login[username]" value="<?php echo $this->htmlEscape($this->getUsername()) ?>" id="email" title="<?php echo $this->__('Email Address') ?>" />
</div>
</li>
<li>
<label for="pass" class="required"><em>*</em><?php echo $this->__('Password') ?></label>
<div class="input-box">
<input type="password" name="login[password]" id="pass" title="<?php echo $this->__('Password') ?>" />
</div>
</li>
<?php echo $this->getChildHtml('form.additional.info'); ?>
</ul>
</div>
<div class="buttons-set">
<button onclick = "hideWindow()" type="submit" class="button" title="<?php echo $this->__('Login') ?>" name="send" id="send2" ><span><span><?php echo $this->__('Login') ?></span></span></button>
</div>
</div>
As I can see there is some thing wrong with your ajax function try this out:
onSuccess: function(response)
{
document.getElementById('something').style.display = 'none';
document.getElementById('ajaxlogin-mask').style.display = 'none';
}
function hideWindow()
{
var db_username = 'ankit';
var db_password = 'password';
var username=jQuery( "#customusername" ).val();
var password=jQuery( "#custompassword" ).val();
if(username = db_username && password == db_password) {
jQuery('#something').hide();
}
else{
jQuery('#something').prepend('Wrong Cred ');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ajaxlogin-window" id="something">
<form>
<div class="content">
<ul class="form-list">
<li>
<input type="hidden" id="likeproduct_id" name="product_id" value=""/>
<label for="email" class="required"><em>*</em>Email</label>
<div class="input-box">
<input type="text" name="login[username]" value="" id="email" title="Email Address" />
</div>
</li>
<li>
<label for="pass" class="required"><em>*</em>Password</label>
<div class="input-box">
<input type="password" name="login[password]" id="pass" title="Password" />
</div>
</li>
</ul>
</div>
<div class="buttons-set">
<button onclick = "hideWindow()" type="submit" class="button" title="Login" name="send" id="send2" ><span><span>Login</span></span></button>
</div>
Please check the code instead of ajax call i have just added a if condition.
Hope it might help you
Thanks
Hello I need to put searching option and value in the URL. I know it's very basic but I have never implement the search function before ever always used the templates one but this time I need to use it. below is my code please help me.
Right now I am getting this in the link
list/%7Boption%7D/%7Bvalue%7D
but I want this in the link list/Hello/thisishelloworld or this may be list/option?Hello/value?thisishelloworld but I think I can get the second option using Get instead of Post method
AND YA ITS IN LARAVEL 5.2
<center>
<div class="form-group">
<label>Select your option from below</label>
<select class="form-control" id="options" name="options" style="width:100%" type="checkbox">
<option>Hello</option>
<option>World</option>
<option>it's Me</option>
</select>
</div>
<div class="col-md-4" id="value">
<div class="panel panel-warning">
<div class="panel-heading">
Enter your Search below
</div>
<form role="form" action="/list/{option}/{value}" method="post">
{{ csrf_field() }}
<div class="form-group has-success">
<input class="form-control" placeholder="Search" type="text" name="{{ value }}" id="value">
<input type="submit" class="btn btn-primary" name="submit" value="Search">
</div>
</form>
</div>
</div>
</center>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function hide() {
$("#value").hide();
$("#h").hide();
$("#search").hide();
}
function show() {
$("#value").show();
$("#h").show();
$("#search").show();
}
function initHandlers() {
$("#options").change(function() {
show();
});
}
hide();
initHandlers();
</script>
Laravel 5. 2
Step 1:
First you have to create a route.
Routes.php :
Route::get('/list', function(){
// do process
})->name('search');
HTML :
something.blade.php :
{!! Form::open('search', ['route' => 'search', 'method' => 'GET']) !!}
<div class="form-group has-success">
<input class="form-control" placeholder="Search" type="text" name="search" id="value">
<input type="submit" class="btn btn-primary" name="submit" value="Search">
</div>
</form>
To reduce load blocking I decided to convert the following google custom adsense search code...
<form action="http://www.google.ru" id="cse-search-box" class="form-search">
<div>
<input type="hidden" name="cx" value="partner-pub-7920375793574512:1188291711" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="55" />
<input type="submit" name="sa" value="Найти" class="btn btn-info" />
</div>
</form>
<script type="text/javascript" async src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("elements", "1", {packages: "transliteration"});</script>
<script type="text/javascript" async src="http://www.google.com/cse/t13n?form=cse-search-box&t13n_langs=en"></script>
<script type="text/javascript" async src="http://www.google.ru/coop/cse/brand?form=cse-search-box&lang=ru"></script>
... to (I just removed scripts to require js load style)
<form action="http://www.google.ru" id="cse-search-box" class="form-search">
<div>
<input type="hidden" name="cx" value="partner-pub-7920375793574512:1188291711" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="55" />
<input type="submit" name="sa" value="Найти" class="btn btn-info" />
</div>
</form>
... and require js module:
var scripts;
scripts = ['http://www.google.com/jsapi', 'http://www.google.com/cse/t13n?form=cse-search-box&t13n_langs=en', 'http://www.google.ru/coop/cse/brand?form=cse-search-box&lang=ru'];
define(scripts, function() {
return google.load("elements", "1", {
packages: "transliteration"
});
});
And got unpredicted result:
when page is loading first it is ok, but then I see white screen without any html element and no errors in google chrome console.
So loading google scripts in require js module breaks all html. Why it is so?
I added window. in line
return google.load("elements", "1", {packages: "transliteration"});
so got line:
return window.google.load("elements", "1", {packages: "transliteration"});
And all works fine.
Full code of require.js module:
var scripts;
scripts = ['http://www.google.com/jsapi', 'http://www.google.com/cse/t13n?form=cse-search-box&t13n_langs=en', 'http://www.google.ru/coop/cse/brand?form=cse-search-box&lang=ru'];
define(scripts, function() {
return window.google.load("elements", "1", {
packages: "transliteration"
});
});
I followed the http://msdn.microsoft.com/en-us/library/cc264294%28v=office.12%29 making a new SP project with the under _layouts. the control renders fine, and i can select files, however when I click upload it shows the little loading icons. with no files uploaded.
<LINK REL="stylesheet" TYPE="text/css" HREF="/_layouts/1033/styles/ows.css">
<SCRIPT LANGUAGE="javascript">
function MultipleUploadView() {
document.all.idUploadCtl.SetTreeViewColor("#FF0000");
document.all("idMultipleView").style.display = "inline";
}
function DocumentUpload() {
document.all.idUploadCtl.MultipleUpload();
}
</SCRIPT>
<FORM NAME="frmUpload" METHOD="post"
ACTION="upload.aspx?RootFolder=& Source=http://jono-pc/Shared Documents/Forms /AllItems.aspx">
<SharePoint:FormDigest ID="FormDigest1" runat="server" />
<INPUT TYPE="hidden" NAME="Cmd" VALUE="Save">
<INPUT TYPE="hidden" NAME="NextUsing"
VALUE="http://jono-pc/Shared Documents/Forms/AllItems.aspx">
<INPUT TYPE="hidden" VALUE="New">
<INPUT TYPE="hidden" NAME="putopts" VALUE="true">
<INPUT TYPE="hidden" NAME="destination"
VALUE="http://jono-pc/Shared Documents">
<INPUT TYPE="hidden" NAME="Confirmation-URL"
VALUE="http://jono-pc/Shared Documents/Forms/AllItems.aspx">
<INPUT TYPE="hidden" NAME="PostURL"
VALUE="http://jono-pc/_vti_bin/shtml.dll/_layouts/upload.aspx" />
<INPUT TYPE="hidden" NAME="VTI-GROUP" VALUE="0">
<P CLASS="ms-toolbar">
<A HREF="javascript:MultipleUploadView()"
TARGET="_self">Upload Multiple Files</A>
</P>
<DIV ID=idMultipleView style='display:none'>
<P CLASS="ms-toolbar">
<A HREF="javascript:DocumentUpload()"
TARGET="_self">Save and Close</A>
</P>
<OBJECT id=idUploadCtl name=idUploadCtl
CLASSID=CLSID:07B06095-5687-4d13-9E32-12B4259C9813
WIDTH='100%' HEIGHT='350px'>
</OBJECT>
</DIV>
</FORM>
Finally found the answer to this dilemma (hint provided by an old SP bug: http://support.microsoft.com/kb/2489168) The input values must be relative URLS because SharePoint Office 2010 appends the http:// to all the values. so if you have a full URL it will append the http:// twice. Once I changed to relative paths, it uploaded fine.