Using an image to submit a search form - html

I have done this a lot of times but I have a problem, I'm trying to do it with the google form, the google name have slashes so is not working on all browsers, is there a different way to do this?
Any clue is good :D
code:
<form action="http://www.webpage.com/search.php" id="cse-search-box" name="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-number" />
<input type="hidden" name="cof" value="FORID:number" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="31" class="form-search" />
<a name="sa" id="sa" href="javascript:document.cse-search-box.submit();"><img src="images/arrow.jpg" class="img-search"/></a>
</div>
</form>

<input type="image" src="path/image.png" />

<input type="image" ...> is what is used for images acting as submit buttons.

- is the minus operator, so document.cse-search-box doesn't mean what you think it does -- further, this way of accessing elements is obsolete. Use getElementById instead:
document.getElementById('cse-search-box').submit();
Actually, you don't even need JavaScript to do this. There are at least 2 ways to do it using HTML alone:
<input type="image" src="images/arrow.jpg" />
or:
<button type="submit"><img src="images/arrow.jpg" /></button>

Related

How to submit different forms with same input

Im trying to implement the "i'm feeling lucky" functionality in a quite simple web. The thing is that at first, without this button, the query was properly done (i mean when doing a normal search). But, when i included the im feeling lucky button, the normal search stopped working and know even when you click on norma search it goes directly to the firs result. im new to HTML and still lost regarding forms. Note that i cant do it using js cause its for an assignment meant to be done only with HTML.
Thanks a lot for your help :D
Image
Advanced
<form action="https://www.google.com/search?">
<div><input type="text" name="q" id="search"></div>
<div>
<input type="submit" value="Google Search" id="button">
<form>
<input type="hidden" name="btnI" value="1">
<input type="submit" value="I'm feeling lucky" id="button">
</form>
</div>
</form>
In case that you need two buttons with one text field, perhaps a different approach would be useful. Use
<button type="submit" name="action" value="val1"></button>
and
<button type="submit" name="action" value="val2"></button>
but be careful with this one, since some browsers will upload value from the "value" attribute.
The other method is to use some PHP in your script, like this:
<input type="submit" name="update_button" value="Update" />
<input type="submit" name="delete_button" value="Delete" />
<?php
if (isset($_POST['update_button'])) {
//update button
} else if (isset($_POST['delete_button'])) {
//delete button
} else {
//no button was pressed
}
?>
Happy coding!
You cannot nest forms
You need two forms:
Image
Advanced
<form action="https://www.google.com/search?">
<div><input type="text" name="q" id="search"></div>
<div>
<input type="submit" value="Google Search" id="button">
<input type="hidden" name="btnI" value="1">
</div>
</form>
<form action="https://www.google.com/search?"><input type="hidden" name="q" value="I'm feeling lucky"><button>I'm feeling lucky</button></form>
A few notes:
you have a form tag nested inside the other which is wrong.
you have two submit button with same id.
Remove these issues and it will work as desired.
As I see it, you want to have window inside another window, both of which will have buttons? In that case, don't go form inside form, make it div inside div and in both of them, enter a form, here's and example:
<div id="div1">
<form action="https://www.google.com/search?">
<input type="text" name="q" id="search">
<input type="submit" value="Google Search" id="btn1" class="button">
</form>
<div id="div2">
<form action="https://www.google.com/search?">
<input type="text" name="q2" id="search">
<input type="submit" value="Google Search" id="btn2" class="button">
</form>
</div>
</div>

Form Returning ?query instead of returning search results page

We have a large search box on our homepage that just stopped working after a recent update from our vendor. I'm trying to debug the issue but I could really use an extra set of eyes. Instead of returning a list of courses it's returning "?query" to the current page URL. Any help would be greatly appreciated.
Affected Page: https://ce.harpercollege.edu/
Code:
<form action="https://ce.harpercollege.edu//search/publicCourseAdvancedSearch.do" class="search-form" id="search-form" method="GET" role="form" target="_blank">
<label for="quick-search">BECOME MORE</label>
<span class="search-btn-span" id="search-btn-span">
<input name="method" type="hidden" value="doPaginatedSearch" />
<input name="showInternal" type="hidden" value="false" />
<input name="cspIndex" type="hidden" value="true" />
<input name="isPageDisplayed" type="hidden" value="true" />
<input class="form-control" name="courseSearch.courseDescriptionKeyword" placeholder="Search Course Number, Title, or Keyword..." type="text" />
<button type="submit"></button>
</span>
</form>
Working Search URL:
https://ce.harpercollege.edu/search/publicCourseAdvancedSearch.do?method=doPaginatedSearch&showInternal=false&cspIndex=true&isPageDisplayed=true&courseSearch.courseDescriptionKeyword=garden&courseSearch.disciplineCode=&courseSearch.partialCourseNumber=&courseSearch.courseCategoryStringArray=0&courseSearch.sectionSemesterIdString=&courseSearch.sectionInstructorName=&courseSearch.sectionAccreditingAssociationStringArray=0&courseSearch.sectionDayOfWeekStringArray=0&courseSearch.sectionStartTimeStringArray=0&courseSearch.sectionStartMonthStringArray=0&courseSearch.filterString=availforreg
I managed to fix the issue. An old script was hiding in JS and was breaking the form. Sorry for being a bother.

Using HTML input element (type="submit"), how can we customize the GET field?

Using <form method="get"> element including <input type="submit"> element, we can have a way to GET a web page with some fields specified by the <input type="text" name="studentId"> elements, but can I customize those fields?
For example: I always want to add a action=true to the GET url to let the URL be something like this: http://example.com/?studentId=123&action=true?
Use <input type="hidden" name="action" value="true" />
inside your form.
You can add a hidden form field, though the name action is not a good one, as form has an action attribute and this name can conflict when scripting the form:
<input type="hidden" id="something" name="something" value="somthingelse" />
<div id="gbqffd">
<input type="hidden" value="en" name="h1">
<input type="hidden" value="d" name="tbo">
<input type="hidden" value="search" name="output">
<input type="hidden" value="psy-ab" name="sclient">
</div>
Google always has the answer; in this case I never had to do a search just look at the source :)

HTML Search Bar

I don't know how to put it exactly, so here goes.
I've created a search bar on my webpage that uses your input text to search another website.
This is what I've got (things have been censored):
<form name="search" class="form-search" method="get" action="http://www.nameofwebsite.com/search.php?">
<input name="searchbynum" type="text" class="search-query input-large" onkeypress="return submitenter(this,event)">
<button type="submit" class="btn btn-primary">Search</button>
</form>
When searching on the actual website, the search URL looks like this:
http://www.nameofwebsite.com/search.php?searchbynum=search+phrase&searchbydesc=&Submit=Go
Where "search+phrase" is what is searched. To get to the point,
What would I have to do to add the "&searchbydesc=&Submit=Go" at the end of the search?
Add hidden fields to your page.
<form ...>
<div>
<input type="hidden" name="searchbydesc" value="" />
<input type="hidden" name="Submit" value="Go" />
</div>
</form>
Note that your HTML as it is, is invalid. A <form> element cannot have <input /> elements as immediate children, they must be wrapped in a <div> or <fieldset> or other similar elements.

POST extra values in an HTML <form>

I have a simple form which passes the value of an <input /> element:
<form action="updaterow.php" method="POST">
<input type="text" name="price" />
</form>
How can I post extra values along with the <input /> value? For example, an arbitrary string, or a variable inside the current PHP script.
I know this is possible with GET:
<form action="updaterow.php?foo=bar" method="GET">
<input type="text" name="price" />
</form>
or:
<form action="updaterow.php?foo=<?=htmlspecialchars($bar)?>" method="GET">
<input type="text" name="price" />
</form>
but I need POST.
You can include a hidden form element.
<input type="hidden" name="foo" value="bar" />
You can simply use a hidden field. Like so:
<input type="hidden" name="your-field-name" value="your-field-value" />
This field will then be available in your PHP script as $_POST['your-field-name']
As mentioned already, using hidden input fields is an option, but you can also use a session. That way you donĀ“t have to post anything, the variables remain on the server and are not exposed in the html.