Need to add a search to static HTML site using javascript - javascript

anyone can help me to implement a search field for a static website, my website doesn't have a database, it's only HTML and CSS.
I want to be able to search files with extension .html in a specific folder called post.
Inside the post folder, there are many files with extension .html
I want to search these files through input field using javascript and output the URL in a div

<div id="search">
<form name="searchForm" action="http://google.com/search">
<input name="query" type="text" value="" placeholder="search" maxlength="250" />
<input name="query" type="hidden" value="site:yoursiteurl"/>
<input id = "submitButton" name="submit" type="submit" value="Search" />
</form>
</div>

Related

Custom HTML Google Form not working when i use it in Angular

Hey so i'm trying to use a custom html layout for a form and sending the data through google forms to a sheet.
The project is being developed in Angular.
When i try to send the form the "submit" button does nothing, and there are no errors in the console or the debugger.
But when i copy the exact same code into a fresh html file it works with no problems. So i'm pretty sure it has something to do with Angular.
<form action="https://docs.google.com/forms/u/0/d/e/(personal link)/formResponse" method="post">
<input type="text" name="entry.1676852988" placeholder="name">
<input type="text" name="entry.567673583" placeholder="email" id="">
<button type="submit" >Submit form</button>
</form>
Try using the ngNoForm directive.
<form ngNoForm action="https://docs.google.com/forms/u/0/d/e/(personal link)/formResponse" method="post">
<input type="text" name="entry.1676852988" placeholder="name">
<input type="text" name="entry.567673583" placeholder="email" id="">
<button type="submit" >Submit form</button>
</form>

refresh external website with new form data provide with href

Folks
I am in need to construct a simple < a> tag. or another such mechanism such as < form> etc
There is a third party tool that does not takes arguments in the url.
But suppose at a certain endpoint "https://example.com/ticket" there is a form that performs a search on given tickets Number. I can head over there and manually type a ticket ID and submit the form and result is retrieved.
This tool has one input and one button
<input id="query" name="query" autocomplete="off" type="text">
<button> name="button" type="submit" class="btn"></button>
On my page I have list of tickets assign to certain users, and I am trying to construct an href link that will take the user to "https://example.com/ticket" in new window and reload the page with provide ticket ID in post method
something like following
TICKET-123
one of the option I tried is
<form action="https://example.com/ticket" method="post">
<input id="query" name="query" autocomplete="off" type="text" hidden>
<button> name="button" type="submit" class="btn" value="TICKET-123"></button>
</form>
Argument in the usr such as https://example.com/ticket?id=TICKET-123 would've been sweet, but form link does not work. what am I missing
Could you try something like this for the form sending a user to search.php
<form action="search" method="get" name="searchform" target="_self">
<input type="text" autocomplete="off" placeholder="Enter your ticket number" id="ticketnumber" name="ticketnumber">
<button class="button" type="submit">Search</button>
</form>
where search.php would contain the following
<?php
$ticketnumber = $_GET["ticketnumber"];
header("Location: https://example.com/ticket/$ticketnumber");
die();
?>
This would work if you just need to send users to an external site. As long as the pattern is like this. You then wouldn't need to reload the page if you can send the user to the URL correctly in the first instance.
Your question is a little vague but I think this approach could work because users then must input their ticket number instead of getting the inner text from the <a> tag. Let me know if you're looking at a different approach and please clarify how.
Also, if you didn't want to process this via PHP (I'd recommend it though because users can't see how it's done) you could go with the same form and the following
<form action="example.com/ticket/" method="get" name="searchform" target="_self">
<input type="text" autocomplete="off" placeholder="Enter your ticket number" id="ticketnumber" name="ticketnumber">
<button class="button" type="submit">Search</button>
</form>
Or you could use window.location.replace("https://example.com/ticket/#"); and place the ticket number where # is.

Load a form action in a div on the same page

I have a dealer locator which is powered through software that our IT department manages, and I'm trying to fix up their code a bit and make it more user friendly.
What I'd like to do is allow end users to enter in their zip code, and have the list of dealers in their area show up on the same page, rather than open a new tab/window, or re-load the page.
<div class="locator">
<form method="get" id="dsearchform" action="http://www5.pacelink.com/paceweb/locatorframe.jsp?brand=SWEQ&zip=&&distance=50&numlocations=6&submit=Find+a+Dealer" target="_blank" alt="Pace Search - Sno-Way" onsubmit="return dsearch(this)" class="dealersearch">
<input type="hidden" name="locatorBrand" value="SWEQ" />
<input type="hidden" name="distance" value="100" /><input type="hidden" name="numlocations" value="6" />
<h2>Sno-Way Dealer Locator:</h2>
<h3 class="secondary">Enter your zip code below to find an authorized Sno-Way dealer near you!</h3>
<div class="zip-entry">
<input type="text" name="zip" placeholder="ZipCode" value="ZipCode" class="field" onfocus="if(this.value == 'ZipCode'){this.value='';}" onblur="if(this.value == ''){this.value='ZipCode';}"/>
<input type="submit" name="submit" value="Search" id="button" class="but"/>
</div>
</form>
</div>
I've cobbled this together from another solution posted here, but I don't think it's on the right track at all:
<div id="search">
<form id="try" method="post" target="receiver" action="http://www5.pacelink.com/paceweb/locatorframe.jsp?brand=SWEQ&zip=&&distance=50&numlocations=6&submit=Find+a+Dealer">
Zip: <input id="zip" name="zip" type="text" onfocus="if(this.value == 'ZipCode'){this.value='';}" onblur="if(this.value == ''){this.value='ZipCode';}"/>
<input type="submit"/>
</form>
<div id="receiver">
<?php if (isset($_POST['zip'])){
//display search results here.
}
?>
</div>
</div>
First of
If you want to change the html dynamically you need to go with JavaScript and AJAX. This is , you load stuff asynchronously. The comment states XHR, this is
XmlHttpRequest
Better directly look for the much more convenient JQuery Ajax function.
Jquery is very easy to use.
Example to set html of the container with id retailer
$('#retailer').html(response); // response is the html your php creates
You only need to fetch the html via jquery ajax({... }), where most of the stuff works by default. Just set the url of your webservice and the request body payload) and go. In the callback you do the above and are fine.
Give it a try at
https://learn.jquery.com/ajax/
And inside your html after including the script resource for jquery in the header.
<script>$(document).ready(function(){
// your code goes here
}); </script>
To code your JQuery / JS.
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header" id="content-wrapper">
<h1>
Dashboard <small>${userType} </small>
</h1>
</section>
</div>

get the id of one post from one page to another page in html

I am trying to get the id of one object from one page to another page.
I have two pages
index.html
intro.html
index.html
<input type="text" name="fname" value="" id="idnew">
<input type="button" value="Post" id="butonid">
<script>
$("#butonid").click(function(){
$('#idnew').val("4")
}
</script>
Now I want to send the input value of id idnew to intro.html page.
Please help me
val("4") sets the value for that element, right before loading intro.html and is discarded along with your previous page.
To send that value, you could forget javascript altogether and use a form:
<form action="intro.html" method="get">
<input type="text" name="idnew" value="">
<input type="submit" value="Submit">
</form>
then to access that value, for instance in php use $_GET['idnew']

How to select a file and load its binary content to a local variable (JS/HTML)

I want to send a file in a REST PUT request.
The user should be able to choose the file he wants to load from his local machine. I need to load the file as binary content and send it as part of the PUT request.
How can i let the user choose the file and load its binary content?
You should have a form with the enctype of multipart/form-data and the method equals PUT
<form method="PUT" enctype="multipart/form-data" action="http://myrestserver.com/">
User name: <input type="text" name="username" />
<br />
Password: <input type="password" name="password" />
<br />
File to upload: <input type="file" name="uploaded_file">
<br />
<input type="submit" value="Press"> to upload the file!
</form>

Categories