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>
Related
I am trying to set the search on my website as the default focus point on page load. The search I am using is "search & filter"
I have tried using autofocus and onfocus but cannot get the cursor to show in the search box. My search is in a widget on my woocommerce shop page.
If you are using jQuery, you can use the jQuery focus function.
If the focus is not been set on page load, it's likely something else is stealing focus.
function setSearchFocus(){
console.log('setting search focus');
$( "#search" ).focus();
}
$( document ).ready(function() {
setSearchFocus();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
Search: <input type="text" name="search" id="search"><br/>
</form>
<br/>
<br/>
<button onClick="setSearchFocus()">Click to set focus</button>
I have a simple problem yet it seems impossible to solve in AMP!!
I have a simple form with an input and a submit button like this:
<form id="myform">
<input type="text" id="srchInput"/>
<button type="submit">Submit</button>
</form>
All I want is to be able to concat a static url to the input value and redirect the page to the result, when the form is submitted.
For instance if the user inputs: "Hello" and submits the form, I would like to redirect him to a page like "MY/STATIC/URL/Hello".
Is there any way to achieve this in amp?
One way of doing this is by setting the AMP-Redirect-To header in the response (See AMP-form-redirection). Send the user input on form submission, and then generate your desired url from your API endpoint and set AMP-Redirect-To header in your response to the generated URL.
Another way of doing it would be by using navigateTo(url=STRING) action (See AMP Actions & Events) on for the form submit event. In this case you have to store the value in input to a state by using events like input-throttled, and then use url substitution in the navigateTo url string to append amp-state value.
The first method is guaranteed to work.
The second method should work in theory, but I was unable to figure out how to get AMP-STATE value by url substitution. The code for the same should be something like:
<form id="myform" on="submit:AMP.navigateTo(url="MY/STATIC/URL/AMP_STATE(endValue)>")">
<input type="text" id="srchInput" on="input-throttled:AMP.setState({ endValue : event.value })" />
<button type="submit"> Submit </button>
</form>
If you can figure out how to substitute amp-state value to the url this should work. Let me know if it helped.
The easiest way to do this is via a GET action:
<head>
...
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
</head>
<body>
<form method="GET" action="MY/STATIC/URL" target="_top">
<input type="text" id="srchInput" name="srcInput" value="test">
<button type="submit">Submit</button>
</form>
</body>
The form submit will navigate to /MY/STATIC/URL?srcInput=test.
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.
I am writing a form using jQuery and encounter some difficulties.
My form works fine in static page (html).
However, when I use the form in dynamic page(aspx), the form does not behave correctly.
I cannot append items to the form and call the form.serialize function.
I think the error occurs when a form is inside another form (.aspx code needs to enclosed by a form tag).
What should I do?
Let me give a simplified version of my code:
<form name="Form1" method="post" id="Form1">
some content
<form name="form_inside">
<input name="fname" type="text" />
</form>
</form>
jQuery code:
$("#form_inside").append($("<input type='text' name='lname'>"));
When the user submits,
$("#form_inside").serialize();
// it should return fname=inputfname&lname=inputlname
I want to append element to "form_inside" and serialize the form "form_inside".
The form "Form1" is required by the aspx and I cannot remove it.
Could you just serialize the fields inside Form1?
I don't know anything about ASP, but it seems that you're not doing a straightforward "submit" anyway - so does it really matter if the fields aren't within their own separate form?
You could possibly group the fields you're interested in within a <div> or something, e.g.:
<div id="my-interesting-fields">
...
</div>
then substitute #form-inside with #my-interesting-fields where appropriate - is that helpful at all?
Edit
OK, a quick glance at the jQuery code suggests that serialize() depends on the form's elements member.
I suppose you could hack this in a couple of different ways:
Copy all elements from #my-interesting-fields into a temporary <form> that you dynamically create outside Form1, then call serialize() on that. Something like:
$("#Form1").after("<form id='tmp-form'></form>").
append("#my-interesting-fields input");
$("tmp-form").serialize();
Or, create an elements member on #my-interesting-fields, e.g.
$("#my-interesting-fields").elements = $("#my-interesting-fields input");
$("#my-interesting-fields").serialize();
I haven't tried either of these, but that might give you a couple of ideas. Not that I would necessarily recommend either of them :)
Because you can't have nested <form> tags you'll need to close off the standard dotnet form tag like below:
<script type="text/javascript">
$(document).ready(function() {
$("#form_inside").append($("<input type='text' name='lname'>"));
$("#submitBtn").click(function() {function() {
var obj = $("#form_inside *");
var values = new Array();
obj.each(function(i,obj1) {
if (obj1.name && !obj1.disabled && obj1.value) {
values.push(obj1);
};
});
alert(jQuery.param(values));
}); });
});
</script>
<form id="form1" runat="server">
<div>
<div id="form_inside" name="form_inside"> <input name="fname" type="text" /><input type="button" id="submitBtn" /></div>
</div>
</form>
jQuery.param on a array of form elements will give you the same results as .serialize()
so you get all elements in div $("#form_inside *) then filter for elements then on the result jQuery.param will give you exactly what you need
Google custom search code is provided as a form tag. However, Asp.net only allows a single form tag on a page. What is the best way to implement their code so you can include it on an aspx page (say as part of a Masterpage or navigation element).
You can have multiple form tags on an ASP.NET page. The limitation is on server-side (runat="server") form tags.
You can implement two form tags (or more) as long as only one has the runat="server" attribute and one is not contained in the other. Example:
<body>
<form action="http://www.google.com/cse" id="cse-search-box"> ... </form>
<form runat="server" id="aspNetform"> ... </form>
<body>
You may be able to have multiple form tags, but note that they cannot be nested. You'll run into all kinds of weirdness in that scenario (e.g., I've seen cases where the opening tag for the nested form apparently gets ignored and then its closing tag winds up closing the "parent" form out).
You'll need to remove the form tag and use javascript send the query. Have a look at
http://my6solutions.com/post/2009/04/19/Fixing-Google-Custom-Search-nested-form-tags-in-asp-net-pages.aspx
I have included the before and after code as well. So you can see what I've done to integrate it with blogengine .net.
You could use Javascript:
<input name="Query" type="text" class="searchField" id="Query" value="Search" size="15" onfocus="if(this.value == 'Search') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Search'; }" onkeydown="var event = event || window.event; var key = event.which || event.keyCode; if(key==13) window.open('http://www.google.com/search?q=' + getElementById('Query').value ); " /><input name="" type="button" class="searchButton" value="go" onclick="window.open('http://www.google.com/search?q=' + getElementById('Query').value );" />