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!
Related
So this is the deal:
I have an order page and I use two forms.
The first form contains input data for ONE order item and when I press OK I will pass the form's input data to javascript through onsubmit=send_item_data(this) and at the end i will return false; in send_item_data function so it doesn't get posted.
In the second one I want to append/substract the former data in div groups (so I can add more or delete them easily) but I can't think (or find) of a solution that puts in group the data from the first form in one div and appends that child div to the second form.
In the end, by the push of a button, the second form will post all the divs' data and I will handle it with PHP backend code.
Code body:
<form action="" id="first_form" method="post" onsubmit="return send_item_data(this)">
<div id="Select_list">
<select blah blah>
---bunch of options---
</select>
</div>
<div id="extras">
---Some extras that you can choose by a checkbox input (I generate it via PHP)---
example:
<input name="checkbox[<?php echo $row['column_data_from_query']?>]" type="checkbox" value="checked">
</div>
--->Possibly two more input fields here<---
<input type="button" value="clear" onclick="clear_form()">
<input type="submit" value="OK">
</form>
<form action="" id="finalize_order_form" method="post">
--->This is the second form<---
--->In here I want to put the data from the first form so i can handle them by group<---
if I click OK three times in the first form there should be three groups here that contain each form's data
<input type="submit" class="button" value="Finallize order"/>
</form>
I mainly use PHP Mysql and Javascript (including AJAX, not jQuery).
So you want to have the order items listed in the second form like a pre-checkout shopping cart. If you use divs for that, they will not be submitted with the POST data to the server - they will be display-only. So you need to follow Robert's advice and save the 1st form's data to the DB each time an item is added/removed (in addition to his other reasons like not losing a customer's session info). That way the DB will already be up-to-date when they click Confirm Order. Or else you need to hook the Confirm Order button to a JS function that converts the divs back to JSON and posts that to the server to be stored in the DB.
As far as creating the display-only div from the 1st form's data, your send_item_data function needs to loop over all the form's inputs, get their values, and add them to the div however you want them to be displayed. Then you can just insert the div into the second form. Since you are passing "this" to the function, which is the form object itself, you can get the inputs via something like:
var inputs = this.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type == 'submit') continue; //ignore the Submit button
var name = inputs[i].name, value = inputs[i].value;
---use the name and value of this input to construct a span or something to insert inside your div---
}
---now you can insert the div into the 2nd form---
Have a query that should hopefully be nice and simple to answer.
I have a form that will be used to add rows into a database. The default number of rows to show when loading the page is 6. I would like to add the option to add more rows to the form, by changing a field, or clicking a button etc.
I currently use a while loop to print out the form. I simply say:
while($rows > 0) {
echo "FORM INPUTS HERE";
$rows = $rows - 1;
}
So the loop goes through a prints a set of inputs for record 1, and then takes one off the count, then prints a set of inputs for record 2, and so on.
Is there a way I can get the while loop to print more without refreshing the page? The simplest way would be to have a small form at the top of the page, with an extra columns field, and submit button. This would then post the value back to the same page, and add it to the default number of rows.
I would like to do this without having to submit, post or GET anything, but to have it happen then and there.
I think it may be tricky, as the while loop will have already run, and I dont know how to get it to run a second time.
Cheers
Eds
If you need an empty form, use Javascript and add this new form elements to the DOM on the fly! :)
Do you need to load some information on that form?
You can use ajax to make your wish. It doesn't refresh page, but sends out a request to the server asynchronously and fetches the content and appends to the form.
Example, if you have a code this way:
<form method="post">
<ul>
<li><label><strong>Field 1:</strong> <input type="text" /></label></li>
<li><label><strong>Field 2:</strong> <input type="text" /></label></li>
<li><label><strong>Field 3:</strong> <input type="text" /></label></li>
<li><label><strong>Field 4:</strong> <input type="text" /></label></li>
<li><label><strong>Field 5:</strong> <input type="text" /></label></li>
</ul>
</form>
Now using jQuery's $.getScript function, you can fetch a script, which is similar to this:
$("form ul").append('<li><label><strong>Field ' + $currentValue + ':</strong> <input type="text" /></label></li>');
This works out for you.
Thanks for all the suggestions guys.
I decided to just go for a small 1 filed form at the top of my page, where a user enters the number of rows they want to add, and then press the add button.
It should suffice, as the page doesnt NEED to be too fancy, and is much quicker and simpler to implement.
Thanks very much
Eds
My website is separated into two parts - a large (CodeMirror) <textarea> and a drop-down menu which has a <form> (that contains "From", "To", "Subject" inputs) in it linked to a send.php file.
The text area and the form itself are located inside different <div>s so I'm not able to link it to the rest of the inputs I'm transferring to the send.php file.
How can I link / connect the submit button to the <textarea> input along with the other inputs it's associated with ("From", "To", "Subject") when transferring the data to the send.php file?
<div id="container">
<div id="sidebar" class="twenty"> //the form div
<li class="menu">
<li class="dropdown">
<form method="post" action="send.php">
<input type=... />
<input type=... />
<input type=... />
<input type="image" src=... alt="Submit Form" />
</form>
</li>
</li>
</div>
<div class="seventy"> //the textarea div
<textarea id="code" name="code">
</textarea>
</div>
</div>
Technically, you could use the form attribute to associate a textarea with a form:
<form ... id="foobar">
...
</form>
...
<textarea form="foobar" ...>
This is an HTML5 feature supported by Chrome and Firefox, for example, but not IE 9.
So check out other options, primarily reorganizing the page as suggested by #niomaster or using JavaScript as suggested by #Fluffeh. However, it’s not a good idea to rely on JavaScript being enabled, in matters of basic functionality. In reorganizing the page, care should be taken to avoid messing up any styling (or scripting) that might rely on the current markup. Also note that the current markup is invalid, since li elements are allowed only as children of ol or ul, so restructuring (if feasible) would be recommendable anyway.
At the simplest, it might suffice to move the <form ...> start tag to the very start of the body element and the </form> end tag right before the end of the body element. Then all form field elements on the page would be fields of this form.
You can make form the outermost tag. It changes nothing to the flow of the document.
You can't directly - if it's not in a form, it can't be submitted.
The best you can do is to write a custom javascript function that replaces your 'submit (image type)' action and copies the data from the textform into a hidden field within the form then submits the form as the last action. This will get the results you want without the user really knowing what you are doing behind the scenes.
Edit: As niomaster correctly points out, forms can span more than just a single <div> or <li> attribute. You can extend it easily without changing your code structure.
use jquery
//Get the text from text area
var textareadata = $("#code").val();
//dynamically append a hidden feild to your form
$('form').append('<input type="hidden" name="myfieldname" value="myvalue" id='myvalue'/>');
// dynamically write your text adtea data to the hidden field append to the form
$('#myvalue').val(textareadata);
amiregelz,
You can just add one id to form tag. using jquery get the value of the text area [$("#text-areaID").val();]and add hidden field using jquery/ javascript, pass the value to hidden field which you created dynamically then after validation of the form submit the form. You can get the value of the textarea as well in your php page.
Hope It will help you. Please mark it answer if it helps.
I incorporated a jquery type-ahead autocomplete script into an existing search page that consisted of 2 dropdown auto submit search boxes. Those auto submits where accomplished using onchange and they were self referencing. As soon as the user selected the category in the first drop down, the page returned with the second drop down filled with an ever increasing number of options. The page submitted using the following code;
<form name="nav"><select name="platform" id="platform" onChange="document.location.href=document.nav.platform.options[document.nav.platform.selectedIndex].value">
Upon completion of the user selecting the first drop down, the page returns to itself and narrows the results for the second drop down. The problem was the second drop down was getting too big for users to maneuver.
Without knowing jquery I've been able to graft the type ahead autocomplete script into the existing search form for the replacement of the second drop down. However, I cannot figure out how to carry the value of the jquery search forward to the same page to have a php statement execute it.
The following jquery populates the second field with the id of the record I need to carry forward. This is the function from jquery;
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
This is the html at the bottom of the page that ends up containing the id of the record I need going forward.
<div>
<form name="dash3.php">
<div>
Start typing the name of the item, select the correct title when it appears:
<br />
<input type="text" name="papa" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
<input type="hidden" value="?list=1" />
</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><input type="submit" value="Submit">
</form>
</div>
The php sitting at the top of the page is looking for this to trigger the add;
if ($_GET['list']==1) {
I need to set 'list' equal to 1 (you can see I tried that with the hidden input) and the php variable named $vid set to the contents of the jquery type ahead results so that the submit button will carry the values forward and the php script will execute the add. I've tried hidden fields, I've tried grafting pieces of jquery together but I don't have a solid base in java or jquery and I can't think of another way to do this. I've gotten a little further with each request, I hope that I've framed the question well enough to get it this go around! Thanks much.
From first glance, it looks like you are updating the "inputString" input with a null value on blur? You have not passed anything to your "fill" function.
JQuery provides simple event handlers that would clean that part up a bit.
$(function(){ // <--This waits until load to initialize handlers
$("#inputString").blur(function(){
alert($(this).val());
});
});
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);