TokenInput - getting values from multiple search fields - jquery-tokeninput

I'm using Loopj's TokenInput and it's working fine.
I have three search boxes on the same page - one each for three different search attributes and each with its own external data source (in this case, search by ship name, ship class and ship type). Of course, there are three 'Submit' buttons, one for each search box.
My Problem: Clicking any 'Submit' button only returns values for its own search box (based on included script-refer below). What I'd like is to click ANY button and get the values for ALL the search boxes so that I can create a MySQL query.
<script type="text/javascript">
$(document).ready(function() {
$("input[type=button]").click(function () {
alert("Would submit: " + $(this).siblings("input[type=text]").val());
});
});
</script>
Note: This earlier question "Using tokeninput jquery plugin on more than one input on a page".seems related but the answers to that question didn't address this issue.

After some further testing, I've figured out the answer and I'll include it here for the sake of completeness. Unfortunately this highlights just how little I know about coding...
The javascript 'alert' script is a red-herring. It doesn't magically get the token values out of thin air. The token values are already stored in the relevant input fields.
The "Submit" buttons are a red-herring. That's because they are
". They're just there to trigger the
javascript alert, they can't submit a form.
You need a form! The "TokenInput" demos show how the plugin works, but they're meant to be used IN A FORM.
I added a form field at the top of my page and a closing form field (</form>) at the bottom of the page. The result was that my three search boxes were inside the form. Note the action is to retrieve the same page and method = post.
`<form id="myshiptype" name="pixsearchform" action="<?php echo $_SERVER[REQUEST_URI]; ?>" method="post" >`
I changed the sample input "name" fields from 'blah' to something more meaningful - shipid, classid and typeid.
I added a Submit button (of the <input type="Submit" /> variety) to the bottom of the form. <input type="submit" id="update" name="update" value="Update search" />
I added some debugging code to the page to show the values of the input fields after the Submit button is clicked.
<?php
$postvalues = "";
if ($_POST) {
$kv = array();
foreach ($_POST as $key => $value) {
$kv[] = "$key=$value";
}
$postvalues = join("&", $kv);
}
echo "post values are ".$postvalues;
?>
Here's a sample of the debug - "post values are shipid=34&classid=&typeid=677,638&update=Update search"
Next steps are to adapt the form to Ajax and also disable the "Enter" key in the form (for when a user hits Enter in an empty Search).

Related

How to load again html table in jsp page

Here in my registration page i did servlet page in insert values to Data Base and i need to display all the insert values from Data Base in html table using in jsp when i enter all the details click add button it shows message in another page when i go back to the previous page table not update with latest values when i reload page it shows values how can i do this
my image after clicking add button table not updated: image description here
Call page reload with javascript, on button press. You can do this in two ways:
1)
<input type="submit" value="submit" onsubmit="window.location.reload()"/>
in case it doesn't work, check the first answer on How can I refresh a form page after the form submits to _blank?
2)
<input type="submit" value="submit" onclick="refresh()" />
add the following javascript code just below:
<script type="text/javascript">
function refresh (){
window.location.reload();
}
</script>
The above two solutions are equivalent. A different approach is to set the meta attribute of the html page, specifying the refresh interval. Please take a look at https://www.codeproject.com/Questions/250016/refresh-the-jsp-page
That gives a third solution:
3)
<%
if(session.getAttribute("refreshCount") != null &&
session.getAttribute("refreshCount") == true )
{
response.setHeader("REFRESH", "0"); //refresh page once per submit
session.setAttribute("refreshCount", false);
}
%>
In the servlet, when you save data to database, also call
HttpSession session=request.getSession();
session.setAttribute("refreshCount",true);
4)
In the servlet, use redirect instead of forward (you will be redirecting to the same page)
how to reload JSP page after submit form data
http://www.javapractices.com/topic/TopicAction.do?Id=181

Flask: buttons with varying functions

I'm writing a program in flask. In one of the pages (/search), the user will have a field to enter a string and click a search button. The result page that follows works all right, which consists of an html page with several images on it.
Now i want to add a button next to each image that, once clicked, will add an item to my mongoDB database.
So, 2 problems:
1) The buttons i managed to create so far will demand a "return redirect(page)". I don't want that. The user must be allowed to click several buttons in sequence, instead of having to perform a new search.
2) i built my own mechanism for rendering the result.html page. According to the search results, my code opens result.html and writes (appends) the urls on it.
#app.route('/add', methods = ['POST'])
def add():
print "hi"
return None ##Python won't accept 'return None' here =(
[...]
w=open("result.html", "a")
[...]
for k in cursor:
try:
w.write(k['url'] + "'> <form action='/add' method='post'> \
<input type='submit' value='Add'></input></form>")
How can i make the button tell the /add view function know the url for each image? I suppose there is something i should replace in this last block of code.

Button to increment contents of html file by one each press

Im currently creating a website for my chickens that will have an "egg counter". I have a hidden part of the site that is password protected where I want to put a button that every time I press it, adds one to the egg value. Currently, I have an html file that has just the number in it which I have embedded into the site.
(this is the code that embeds the .html file)
<h2><b>Egg Counter!<b/></h2>
<p>So far our chickens have laid</p>
<font size="20" color="#FFFFFF"><embed src="./eggs.html"></embed></font>
I'm a novice programmer and I'm not sure whether this is the right approach but I have no idea how to make the button that changes the egg value.
Any help is greatly appreciated!
You can use the javascript onclick event to increment the number by 1 per click.
place this in your head section.
function incrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
}
Place this where you want the button to display.
<form>
<input type="text" id="number" value="0"/>
<input type="button" onclick="incrementValue()" value="Increment Value" />
</form>
I think you want the number to be stored, so it's always showing and you can update it as and when your hipster chickens lay eggs. The previous answer will allow you to increment the number but only while you have the browser open.
I think the best way to do this is with PHP.
So first of all you want your page to be .php , lets say admin/loggedin.php.
You want to create a blank file in the same directory called eggs.txt , with the permissions 0755.
Then you want your form to look like this
<form method="POST" action="loggedin.php">
<input type="text" name="num" value="0"/>
<input type="submit" value="Chicken came first" name="eggs">
</form>
To explain the method / action:
method
is how you want to send the data to the
action
page.
Options are $_POST and $_GET, I don't think going into too much detail here will help.
action= is to tell the form what page to send this data to, in this case we've chosen to send it to the same page the form is on (loggedin.php).
So now once you submit that form we will have a $_POST['num'] available to us which contains the number you entered into the form input field.
To get this, you want to add at the top of your page: EDIT (have changed the section of code below - file_put_contents should of been inside the if($_POST['eggs']) {
<?php
//this checks to see if the form was submitted by checking 'eggs' is set.
if($_POST['eggs']) {
// create a nicer variable for our egg number, it deserves a nice name.
$egg = $_POST['num'];
//this will put the new number of eggs in our eggs.txt file
file_put_contents('eggs.txt',$egg);
}
?>
file_put_contents() writes to a file
Next you want to be able to get that number from the file on your display page. To do this:
<div class="my_egg_count">
<?php echo file_get_contents('eggs.txt'); ?>
</div>
file_get_contents() reads a file, echo 'echo's' from the server to client side.
Let me know if you have trouble with this, you don't want to end up with egg on your face.
EDIT:: try this
if(is_writeable('eggs.txt')) {
if(file_put_contents('eggs.txt',$egg)) {
echo 'File Updated';
}else {
echo 'Error Updating File';
}
}else {
echo "Error: File Isn't Writeable [possibly named incorrectly, isn't in the correct location, or wrong permissions]";
}

Create a link that automatically fills a field on the target page

I'm coding a newsletter and the guy that asked me to do it wants a link in it...all perfect no problems...
Now the problem is that when you click on this link it goes on a page with fields and the guy asked me if it's possible to automatically fill up one of the fields.
The page is a subscription page for some services and this guy wants me to fill up the referral field automatically when you land on the page with his email. Is it possible?
Thanks heaps
One way to do this is to place the field name and value in the query string. The "query string" is the part of a URL which contains field/value pairs. It is separated from the page address by a ? followed by field=value pairs separated by & characters. For example,
http://www.example.com
...would become...
http://www.example.com?fieldName=fieldValue
In order for this to work, the page must parse the field as part of the HTTP GET request and then return the value as a pre-filled field. If the form is properly validated at the server side then it usually already has this capability of parsing fields and retaining their values across multiple submissions of the same form. This is because doing so allows the page to be redrawn with an error message if some fields are blank or have invalid values.
This is very easy to test - just find the field name in the page source and extend the URL you are currently using as shown above. If it works you are done. If not, you may need to get the code on the server side updated to accept the field as part of the query string.
Other ways to accomplish the same thing are more dependent on the server-side code. For example, many sites embed the associate referral ID in the URL such as:
http://www.example.com/123456/
In this case, server-side code interprets the directory path as a field and parses it accordingly. Because this requires very specific server-side code to support it, the first option is probably your best bet.
Encountered this issue, and the following Javascript code did the trick.
Using #T.Rob query string parameters.
HTML CODE:
<input type="text" name="fillfield" id="fillfield" style="width: 350px;" class="input" value=""/>
JAVASCRIPT CODE:
window.onload=function(){
function querySt(ji) {
hu = window.location.search.substring(1);
gy = hu.split("&");
for (i=0;i<gy.length;i++) {
ft = gy[i].split("=");
if (ft[0] == ji) {
return ft[1];
}
}
}
var fieldName = querySt("fieldName");
if( fieldName==null){
}else{
document.getElementById('fillfield').value = fieldName;
}
}
When you visit http://www.example.com?fieldName=fieldValue it would automatically fill in fieldValue to the fillfield input.
Using php
<?
$passthis = "See you on the other side";
echo '<form action="whereyouwantittogo.php" target="_blank" method="post">'.
'<input type="text" name="passthis1" value="'.
$passthis .' " /> '.
'<button type="Submit" value="Submit" >Submit</button>'.
'</form>';
?>
The script for the page you would like to pass the info to:
<?
$thispassed = $_POST['passthis1'];
echo '<textarea>'. $thispassed .'</textarea>';
echo $thispassed;
?>
Use this two codes on seperate pages with the latter at whereyouwantittogo.php and you should be in business.

HTML: Update page vs. Redirecting to a New Page After User Input

I'm trying to write some HTML code so that a table will be created on the current page after the user submits inputs into a form. That is, instead of entering in values into a form, clicking submit, and being redirected to a new page with the computed output values, I'd like for the output values to appear at the bottom of the current page. This way, the user inputs stay intact and the only change is that an output table is appended to the bottom of the current page. Here's an example of how I would ideally like the page to work:
http://amort.appspot.com/
Any help would be very much appreciated. Thanks!
You need your form action to point to same page. lets say the URL of your page is
http://example.com/page.php than you need to point your action to same page.
<form action='http://example.com/page.php'> and have inside your form a hidden field say
<input type='hidden' name='formSubmitted' value='1' > when this form is submitted to itself you can check if hidden field has a value through the get parameters.
Once you get that value you can make a condition check to show up a table. But ofcoursr you will need to use a server side language like jsp or php for that.
One alternate way is you do not submit your form. But instead have a javascript called when you click submit query button. This javascript will read the values from the filled in form boxes and will display them in the table below.
You can use PHP in your HTML file.
Example
simply create you form like so.
<form action="welcome.php" method="get">
Name: <input type="text" name="fname" />
Age: <input type="text" name="age" />
<input type="submit" />
</form>
When the user clicks the "Submit" button, the URL sent to the server could look something like this:
http://www.w3schools.com/welcome.php?fname=Peter&age=37
The "welcome.php" file can now use the $_GET function to collect form data (the names of the form fields will automatically be the keys in the $_GET array):
Then create a table and add the lines are the right places. so this would be your table for example and what you would write in the HTML file its as simple as that.
Welcome <?php echo $_GET["fname"];?>.<br />
You are <?php echo $_GET["age"]; ?> years old!
Hope that helps.
Let me know if it does. Thanks
PK
You need to use javascript to do this. If you provided the current code of your page and the specific goal you wish to accomplish then I could give an example script, however if you feel comfortable coding it yourself then just look up javascript tutorials.
You could easily do this with jQuery. Submit the form to the calculator page with .ajax(), and have the calculator output its results as JSON. You can then output that result in the bottom table without the user ever leaving/reloading the page.
Hope this helps.
You don't say what you're using to process the form, but you won't be able to process it with just HTML. So you'll need some sort of processing with another language.
As others have mentioned, you could do this with JavaScript. AJAX would be one way, but you could write your own code to do this if you really want to (but I wouldn't recommend it if you don't have to).
Another way to do this is with PHP. Have the page process itself when the form is submitted.
Similar to the PHP suggestion, you could do this via a CGI script/program. The action specified within the form would be to call the page itself. Here is a simple Python example, assuming the name of your script is so_self_call.py:
#!/usr/bin/env python
import cgi
import sys
def end_page():
print "</body>"
print "</html>"
def print_form():
print "<form action=\"so_self_call.py\">"
print "<input type=\"text\" name=\"theText\">"
print "<input type=\"submit\">"
print "</form>"
return
def start_page():
print "Content-Type: text/html"
print
print "<html>"
print "<head>"
print "<title>Example of Python CGI script which calls itself</title>"
print "</head>"
print "<body>"
return
def main():
start_page()
print_form()
the_form = cgi.FieldStorage()
if "theText" in the_form:
print "From last time, theText = %s" % (the_form["theText"].value)
end_page()
return
if __name__ == "__main__":
sys.exit(main())