i have this code of a search bar engine.
<form id="frmSearch" class="search1" method="get" action="default.html" /> <input class="search" id="txtSearch" type="text" name="search_bar" size="31" maxlength="255" value=""
<style="left: 396px; top: 20000px; width: 293px; height: 60px;" />
<input class="search2" type="submit" name="submition" value="Search" style=" padding- bottom:20px; left: 300px; top: 0px; height: 50px" />
<input class="search2" type="hidden" name="sitesearch" value="default.html" />
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.ro/search?q=' + document.getElementById('txtSearch').value;
return false;
}
</script>
I want to make the search button,when user clicks it. It should search through local text file.
After it started the search for the key word to make refresh steady for the same word for which started to search.
To bring me all the keyword found on the txt to my graphical interface as small frames....
thank's for your help
First, I advice you to read the Quick Tour in StackOverflow, to know how to use this Website.
Also, I think you correct your HTML :
<form id="frmSearch" class="search1" method="get" action="default.html">
<input class="search" id="txtSearch" type="text" name="search_bar" size="31" maxlength="255" />
<input class="search2" type="hidden" name="sitesearch" value="default.html/>
<input class="search2" type="submit" name="submition" placeholder="Search" style="padding-bottom:20px; left: 300px; top: 0px; height: 50px" />
</form>
<form> tag is not an autoclosing tag : you can read this official documentation for this tag.
For all the HTML Specification you can read this.
and your JavaScript:
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.ro/search?q=' + document.getElementById('txtSearch').value;
}
</script>
Now, your HTML SYNTAX is correct, but is not according with what you want...
We want to see in your Javascript, you can't verify if the value of your element 'txtSearch' is empty...
If you want to create a search bar, and load a part of your page in relation with the search box (your input type text), I advice you to learn what is AJAX.
You do not need to use a <form> tag if you don't want to reload all your page for display the results (images or other...) in your page...
Also, I noticed that you add the 'JQuery' tag on this conversation... but, in your sample you don't use JQuery... you just use JavaScript!
If you want to use JQuery, this can help you to create your Ajax Request (you can read this for that).
Related
While this code does work, I want to be able to transfer the code to a different html page when the user clicks submit after filling out the form.
<HTML>
<HEAD>
<TITLE>Test Input</TITLE>
<STYLE>
body {
background-color: #2C2F33
}
.form {
font-family: Arial;
color: #FFFFFF
}
.
</STYLE>
<SCRIPT>
function testResults (form) {
var Name = form.Name.value;
var Bio = form.Bio.value;
document.write (Name);
document.write("<br>");
document.write (Bio);
}
</SCRIPT>
</HEAD>
<BODY>
<DIV CLASS="FORM">
<FORM NAME="myform" ACTION="" METHOD="GET" >What is your name? This can be your first name, or an alias your known by. <BR>
<INPUT TYPE="text" NAME="Name" VALUE="" STYLE="height: 50px; width: 400px;"><P>
<FORM NAME="myform" ACTION="" METHOD="GET">Who are you? What do you do? <BR>
<INPUT TYPE="text" NAME="Bio" VALUE="" STYLE="height: 200px; width: 400px;"><P>
<div class="">
<INPUT TYPE="button" NAME="button" Value="Submit" onClick="testResults(this.form)">
</div>
</FORM>
</DIV>
</BODY>
</HTML>
Can anyone please tell me how to achieve this? I've tried making another html page then writing the info, but it doesn't work.
Side note, yes there is some code that isn't filled out
The action property specifies which page it is sent to. Right now it is blank and won't send to another page, even if all the other mark-up was correct.
There are many ways to achieve what you are trying to do. This is only one aspect to consider initiallly.
I have a search bar and when I press the search button it will look for keywords in the text file that you have on your computer, then bring to me the words that are found back to the page?
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.ro/search?q=' + document.getElementById('txtSearch').value;
}
<form id="frmSearch" class="search1" method="get" action="default.html" />
<input class="search" id="txtSearch" type="text" name="search_bar" size="31" maxlength="255" value=""
style="left: 396px; top: 20000px; width: 293px; height: 60px;" />
<input class="search2" type="submit" name="submition" value="Cauta" style=" padding-bottom:20px; left: 300px; top: 0px; height: 50px" />
<input class="search2" type="hidden" name="sitesearch" value="default.html" />
Sorry, scripts can only perform web-related actions. Accessing local files is unsafe and forbidden for secure reasons.
UPD:
for an offline app you can use something like this:
var fileRequest = new XMLHttpRequest();
fileRequest.open('GET', 'file://[your file path]', false);
fileRequest.responseText // it is yours text
#Horia, you should be using the Google Search box and their custom search engine with API, instead of an iframe. This stack overflow might solve your problem. What are the alternatives now that the Google web search API has been deprecated?
I am not using a reset button because I have other functions that aren't working either and I need to do it this way to meet program requirements. I am intentionally not using jQuery. Everything seems correct to me.
HTML:
<script src="js/breaker.js"></script> <!-- it seems to be linked right, but nothing is working -->
<form action="#" method="get" onsubmit="return false"> <!-- is there something wrong here? -->
<td><textarea id="text" cols="50" rows="10" style="width: 40em; height: 15em;"></textarea></td>
<input type="text" value="0" id="shift" style="width: 4em;"/>
<input type="button" value="Exit value = 3" onclick ="javascript: clearSetFocus();"/>
Javascript:
function clearSetFocus() { //functions seems right
document.getElementById("text").value = "";
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="images/fav_icon.png">
<script>
function submitAlbum(){
var frm=document.getElementById("custRegistration");
frm.action="CustomerinfoServlet?formidentity=domobileappRegistrations";
frm.submit();
}
</script>
</head>
<body style=" background-color:#f9f9f9" onload="DrawCaptcha();">
<!--start mainwrap-->
<div id="mainwrap">
<!--start midwrap-->
<div id="midwrap">
<div style="width: 100%; background-repeat:no-repeat; margin-top:15px; height:546px; background-image: url('images/form_background.png')">
<br/><br/><br/>
<div style="margin: 0 auto; background-color: #ffffff; opacity:0.9; border: 1px solid #D7EBFF; width: 400px; padding: 15px; height: 440px; margin-left: 56%;">
<form class="form" name ="custRegistration" id="custRegistration" onsubmit="return submitAlbum(this)" action="download.jsp" method="post" >
<p class="name">
<label for="name">Name <span style="color:red">*</span>:</label>
<input type="text" name="name" id="name" placeholder="" pattern="[A-Za-z ]{3,20}" required/>
<input type="hidden" id="formidentity" name="formidentity" value="domobileappRegistrations"/>
</p>
<p class="email">
<label for="email">Email Id <span style="color:red">*</span>:</label>
<input type="email" name="email" id="email" pattern="((\w+\.)*\w+)#(\w+\.)+(com|org|net|us|info|biz|co)" required aria-required="true" placeholder="" required/>
</p>
<p class="submit">
<label for="download" id="freetrail"></label>
<input type="submit" value="Submit" />
</p>
</form>
</div>
</div>
</div>
</div>
<div style="clear:both"></div>
</body>
</html>
Above form is working fine in all the browsers except safari(version used is-5.1.7) and iPad.In safari the form is not validating the html5 required attribute and making the form to submit, while in other browsers(chrome,firefox,IE) its working fine.so can anyone tell me how can i make it done with safari??any help would be appreciated..
The HTML form validation is a Working Draft.
It is a method of setting required fields and field types without requiring JavaScript.
Partial support in Safari refers to lack of notice when form with required fields is attempted to be submitted. Partial support in IE10 mobile refers to lack of warning when blocking submission.
Also support for using differently colored borders is not complete in Firefox or Opera - using a separate class for styling works well in both.
In Chrome the attribute formnovalidate doesn't work on <input type="submit"> elements but does on <button type="submit"> elements.
You can try to use the script bellow for all browsers not supporting HTML5 required attribute:
//Required attribute fallback
$('#form').submit(function() {
if (!attributeSupported("required") || ($.browser.safari)) {
//If required attribute is not supported or browser is Safari
//(Safari thinks that it has this attribute, but it does not work),
//then check all fields that has required attribute
$("#form [required]").each(function(index) {
if (!$(this).val()) {
//If at least one required value is empty, then ask to fill all required fields.
alert("Please fill all required fields.");
return false;
}
});
}
return false; //This is a test form and I'm not going to submit it
});
EDIT:
As alternative, you can use the jQuery validation plugin, in such basic way (more details on how-to use it are if you follow the link):
$(document).ready(function() {
// validate the form when it is submitted
$("#form").validate();
});
This is the most browser's compatible solution.
I have a very simple form with three fields that I need to submit to an mvc action. The form must be application/x-www-form-urlencoded. however, one of the fields is populated by users copying and pasting an already urlencoded value. I would like to decode that value prior to submitting the form. this seems really simple but I keep running into proplems with my javascript.
Here is the code:
<html>
<head>
<script>
function decodeURI()
{
decodeURIComponent(document.createprofile.URI.value);
}
</script>
<title>Test Create</title>
</head>
<body>
<center>
<h1> Spoof Profile Calls </h1>
<hr>
<div style="border: 1px solid black; width: 300px;">
<b>Create</b>
<form method="post" action="https://test.test-lab.com/Profile/Create/" name="createprofile">
<input type="hidden" name="ReturnURL" value="self.close()">
UserName: <input type="text" name="UserName"><br />
Client: <input type="text" name="Client"><br />
URI: <input type="text" name="URI" onblur="decodeURI();"><br />
<input type="submit" formenctype="application/x-www-form-urlencoded" value="Go To - Create"><br />
</form>
</div>
</body>
</html>
The URI field is the one that needs url decoded prior to submission because it gets reencoded and thus corrupted. I could ask the users to un-encode these values themselves but they are not terribly sophisticated users and it will likely not happen.
Thank you in advance!
UPDATED WITH FAILING CODE
Replace the line
URI: <input type="text" name="URI" onblur="decodeURI();"><br />
by
URI: <input type="text" name="URI" onchange="decodeURI(this);"><br />
And do something like
function decodeURI(elm) {
elm.value = 'foo ' + elm.value + ' bar';
return false;
}