Javascript: Loading data into an hidden form element - php

I'm working on a school assignment, which consists of creating a social network (Basically: Facebook :P). This is in groups, and one of us wrote an auto-complete search engine, which works like this:
http://img585.imageshack.us/img585/333/194d61cbc3fe4cc98005ea1.png
You enter a name, it used some js and php to query the DB to find profiles matching the part of the string you entered. Now, I want to use this functionality to implement the tagging of photos. Now the problem is this: This .js script returns an unordered list of elements, consisting of links (hrefs), and if one is selected:
select: function( event, ui ) {
if (ui.item) {
window.location.href = ui.item.href;
}
}
gets called to navigate to the appropriate profile. Now what I'd like to do is: Enter a string, get the list of query results, and when I click one, i want to load it inside the box. Now I have almost 0 experience with PHP and JavaScript (I had to learn it from scratch basically, I can handle most of it now, but still... :P), and I can't get it to work
Basically that text box is "defined" in the html like this:
<div class="widget" id="search">
<form id="search" method="POST" enctype="multipart/form-data">
<input type="hidden" name="search" value="3559d7accf00360971961ca18989adc0614089c0" />
<div class="field text term "><label for="term">Zoeken</label>
<input type="text" name="term" id="term" class="text" value="" />
</div>
</form>
</div>
How do I access that actual textbox, and put data in it? Any takers? :) I can't seem to get it to work, despite trying almost every name, id or class that I see there. I just need to get the clicked name into the box, so I can just submit it & enter it into the database, as having to enter the entire exact name manually isn't really... Fancy enough

document.getElementById('term').value = newValue;
or, using jQuery (as you specified in the tags):
$('#term').val(newValue);

Related

How to get the right forms value from a button click

Overview of what my question is:
I have an array that is populated via XML inputs, and from this I am the using it to populate a web form with form controls. From here I want to be able to select the exact form that is clicked, but to do that I need to give the controls some form of unique identifier, which is an issue...
As the site is of a betting nature and I am currently working with horse racing, each horse is given a unique identifier by default, I have tried to add this identifier to the forms.
e.g:
<?php
//Values from feed examples: 123, 234, 345
$valuesFromFeed = array(123, 234, 345); //These are not in my code, they are values from the XML feed
while ($uniqueIdentifier = $valueFromFeed) {
<form name="horse_<?php echo $uniqueIdentifier; ?>_frm" action="#">
<input type="hidden" name="horse_<?php echo $uniqueIdentifier; ?>" />
<input type="button" value="Place bet" />
</form>
}
?>
But then the problem comes when I try to reference this name of "horse_123", I need to know exactly what the value of that name is, which is impossible as there are millions of horses, tracks and races.
Example of trying to get post:
<?php
if (isset($_POST['horse_' . $uniqueIdetifier])) {
echo "You got the right thing here.";
} else {
echo "Still no joy.";
}
?>
The issue with the code above, is that once the $uniqueIdentifier has been used in the while above, it is removed and is no longer usable in this scope.
So to conclude, my point and question:
How do I get the correct name from the form in a submit for the specific horse that I wish to reference and get information on?
How do I use this information as I need to?
Better Description:
I have been given an XML feed and site as part of a handover, this feed contains many hundreds of races and horses.
When this information is loaded into the page, it is also stored in a database on the server, as well as sending it through some different loops (which are messy, but someone else's code I'm trying to clean up!) which split it down and then make up a dynamic menu containing all the races, horses, odds and information. (All information on a single horse within a race is kept in one form)
Next to the information stated in the prior paragraph, is 2 buttons, one that allows the user to take odds and another that allows users to take starting price.
On either of these button clicks, I need the information attached to said horse, and then populate a betting slip. In the form (mentioned above) the name is "horse_<?php echo $uniqueIdentifier; ?>_frm".
The problem that occurs to me is, yes data is stored on the server when it is loaded, that I cannot seem to get the right form via the unique identifier that is put into the form name
Edits
Added form surrounding my input as this is there, I just missed it in original question
Added the button that transmits data to where I need it
Added a better description of my problem
You can use multiple forms, one for each horse. Each form has a different action, where the URL includes the id of the horse. For example:
<form action="/horses/my_unique_horse_name">
...
</form>
<form action="/horses/another_horse_name">
...
</form>
Or you could have multiple forms all with the same action, with a hidden field for the name of the horse:
<form action="/horses/">
<input type="hidden" value="my_unique_horse_name">
</form>
<form action="/horses/">
<input type="hidden" value="another_horse_name">
</form>
Alternatively, you could have a button for each horse:
<form method="/horses/">
<button type="submit" value="my_unique_horse_name">My Horse</button>
<button type="submit" value="another_horse_name">Another Horse</button>
</form>
Beyond that, I don't entirely understand the problem. What kind of data are you submitting and retrieving?

Data is not sent from a form. MODX revolution

CMF MODX revolution
There is a template with a form
<form action="http://localhost/index.php?id=3" method="post">
<input type="name" name="name">
<input type="search" placeholder="Все товары" name="search_bar">
<input type="submit" value="">
<div style="clear: both;"></div>
</form>
which call a snippet which contains debugging line:
echo '|||||||||||| ', $_POST['search_bar'];
The problem.
If I put a value into search bar - echo will not show anything. But if I save the template
before I putt the value into the search bar and click submit button, then echo display right value from the search bar
Suppose the problem is in caching. But I cleaned it and it is cancelled everywhere (at least I think so, exploring administrator panel).
For Snippets that depend on user input (like a search query) you will want to call them uncached: [[!mySnippet]]
However if you want to gain a bit of performance you can wrap the Snippet call with Jason Coward's getCache, and by default it caches to a unique cache key based on the $_GET parameters. In other words, each search query would get its own cache object. This helps when there are repeat searches for the same string.

HTML using forms are compulsory ?

i was making a website with PHP,jQuery,AJAX,mySQL which has lot of interaction with user. Now what i was asking that using forms are really necessary ?
what i have done for most of my user inputs are kinda like this -->
simple e.g
<div class="contact-form">
<input type="text" class="textInputs" id="name" placeholder="Enter your name..." />
<button class="submitButton" id="contactSend">Subscribe</button>
</div>
A SIMPLE comment system
<div class="comment-box" d-id="1">
<input type="text" class="textInputs" id="comment" placeholder="Enter comment..." />
<button class="submitButton" id="comment">Comment</button>
</div>
<div class="comment-box" d-id="2">
<input type="text" class="textInputs" id="comment" placeholder="Enter comment..." />
<button class="submitButton" id="comment">Comment</button>
</div>
JQUERY kinda this->
$('#comment').click(function(){
var id = $(this).closest('.comment-box').attr('data-id');
//ajax stuff
}):
Therefore what i wanna ask is whether this kinda structure is good or gonna cause some serious problem ?
Are using <form>'s compulsory ?
If you are submitting form by clicking submit button and posting variable to other pages or the same page then tag is necessary
If you are using form tag to find input values to post using ajax is necessary
If you are using ajax and pulling input values using dom id to post via ajax form is not required, in this case you may also need to do javascript validation using dom ids
Ideally using tag is better and follows standard HTML structure.
It depends upon your requirement and how you going to use the form in your project.
If you have min. no of fields ( 2-3 fields ) in your form. You can directly manipulate the form fields using id or name with JQuery or JavaScript. Otherwise you should have form tag to manipulate the data with more fields in the form.
I would recommend to have form tag in your page to maintain the standard format and use form tag and Ajax submission with Jquery.
Note: Anyway if you are going to get form data using Jquery, better to use the following syntax to get the from values:
// To check the radio button
var isAnsChecked = $("input:radio[name=<FIELDNAME>]").is(":checked");
var radio-value = $("input:radio[name=<FIELDNAME>]:checked").val();
// get Text box values
var text-value = $("input:text[name=<FIELDNAME>]").val();

Jquery autocomplete submission form

I am converting an old double dropdown box search form. With the old method, the form was submitted on each user selection using this:
<form name="navTwo">
<select name="item" id="item" onChange="document.location.href=document.navTwo.game.options[document.navTwo.game.selectedIndex].value">
The problem with the old method is that users were forced to look thru the second dropdown that contained an ever growing number of options.
I opted to make a new search using one auto submit drop down and a new jquery type ahead search field (thanks to Jamie McConnell, jamie#blue44.com). Everything works great with the type ahead. However, I cannot figure out how to submit the new form once the user picks the type ahead item. Ideally I would like to force the user to click submit once they've selected that second item.
I've tried carrying the id of the second search item and placing it in a hidden input but I cannot get the variable set to the id. Here is what I've tried so far, unsuccessfully;
//The page name is dash3.php
//If list = 1 it will add the record
//The jquery stuff works fine, it adds the value to the input field, I need it to grab the id of that record, not just the title. The $vid is empty, not sure how to set it.
//The code below is missing the submit button, I tried adding a link so that I could see the variables.
<form name="nav">
<div>
Start typing the name of the item, select the correct title when it appears:<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
<input type="hidden" value="?list=1&ptfm_ctrl=1&vid=<?=$vid?>" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
<strong>+</strong>
</form>
So, to make my question more clear;
How can I grab the id of the type ahead record that is being placed in the input field by a jquery autocomplete script and make a self referencing form carrying this id to the same page?
Thanks much!
Maybe this example in the autocomplete documentation will help: http://jqueryui.com/demos/autocomplete/#custom-data
The idea is that you populate your autocomplete boxes with enough data for the user to select the right choice and then provide the id and hook into the success event.
select: function( event, ui ) { ... }
This might help get you started: http://jsfiddle.net/shanabus/HGF59/
Instead of the alert that fires upon the second dropdown selection, do something like update your form action:
$("#myForm").attr("action", $("#myForm").attr("action") + "/" + ui.item.id);
and then submit if needed. Hope this helps!

Include form data in the middle of "action" attribute

I'm working on building a more user-friendly frontend access page in Wordpress for a content library built on ContentDM (http://www.oclc.org/support/questions/contentdm/default.htm). One of the things that was requested as part of the site was a search form that instead of searching Wordpress, goes to the ContentDM library and searches there.
It appears that the search syntax for ContentDM is as follows:
http://libraryID.contentdm.oclc.org/cdm/search/searchterm/INPUT_TERM/order/nosort
With "INPUT_TERM" being whatever the user searched for.
In other words, in order to create a search form that went directly there, I'd have to dynamically insert the contents of the input element into the middle of the "action" attribute of the form.
I'm guessing my best bet is to just send it to a PHP page that sticks $_POST['whatever'] into the URL and does a redirect. But is there in fact a way to do it dynamically from the form (ideally without Javascript) and save a step?
Thanks!
I guess something like this could work:
<form action="" method="get"
onSubmit="location.href='http://libraryID........./'+this.children[0].value+'/order/nosort; return false;">
Search: <input type="search" />
<input type="submit" value="Go" />
</form>
This will redirect the browser to the search page given in the search box, however it's not terribly reliable.
You might want to see if there's a query string "version" of the URL - maybe that search URL is affected by mod_rewrite to "look pretty", and you might be able to have http://libraryID.contentdm.oclc.org/cdm/search as the action, and have the input field named searchterm:
<form action="http://libraryID.contentdm.oclc.org/cdm/search" method="get">
Search: <input type="search" name="searchterm" />
<input type="submit" value="Go" />
</form>

Categories