Goal: User enters one item in text box that has autofill, after clicking button they are taken to a second page that has other corresponding items already filled out in form.
Problem: Autofill works but becomes erased/wiped out when second page opens (in other words the form is blank.
Question: I suspect I am not properly associating the actions of "form auto fill" and "open second page" with the one button. Any ideas?
$("#nextbutton").click(function () {
$("#favorite_appetizer").trigger("meals");
window.location.href = 'dinner-ideas.html';
});
Well probably problem is already solved, but try adding $_GET into javascript href, like:
window.location.href = '/index.php?first=1&second=2';
Part in part after you declare variable names and values that you can catch in second php page, like:
$_GET['first'];
$_GET['second'];
Ofcourse you need to get values from form elements with .val() or .text() and etc.
And ofcourse this has drawbacks, best used for numbers and words but not texts with symbols. Knowing more about type of form content would help, like if its data to be saved to database, you could AJAX half filled form, then retrieve its data from database with a query. If you are just filtering data, you can URL $_GET database ids of form elements, then query in second page by those ids. So again, depends on data in your forms that you want to pass to second page.
Related
I'm building a Chrome extension that auto-fills a form. The first field on the form triggers additional fields to appear after it is filled out. I'm able to successfully field out the first field, but am struggling to fill out the sub fields.
To fill out the first field I use this code:
document.getElementById('theElementID').focus()
document.execCommand('insertText', false, 'theTextToAutoFill)
Here are a few things I've tried:
Use that same code (updated with the correct IDs) for additional form fields, but document.getElementById returns null because those fields don't exist when the page initially loads
Refresh the page after filling out the first form using reload(), but it's refreshing the entire page (not just the section after the first field). Is there a way to just reload a section of the page?
Add an event listener to the class the first field is in (which also contains the sub fields). Wait until that class has been clicked to attempt to fill the subfields. See code below.
document.getElementsByClassName('theClassContainingSubFormFields')[0].addEventListener("click", function() {
document.execCommand('insertText', false, 'theTextToAutoFill)
});
Ideally, I'm looking for a solution that uses JavaScript.
I am designing my own template by making changes to the default template code of OpenCart 2.0.2.0. After repositioning the Search field, it no longer works: it will not submit on pressing Enter, and the search value is not submitted in the URL when clicking the search button in the form (the form submits though).
In order to try and find what goes wrong when relocating the input field, I have made a fresh installation of OpenCart on my WampSever, and without changing anything else, I moved the input field to the main nav, right after the categories UL -- by simply copying the PHP tag that prints the search template:
<?php echo $search; ?>
Nothing else. The form submits on pressing Enter on the keyboard, and it submits on clicking the search button, but the search parameter is no longer appended to the URL, e.g.
http://localhost/opencart/index.php?route=product/search&search=macbook
I need your help to find out why this happens and how I can move the search field without losing its functionality. I suppose this is Javascript related but not sure how.
To answer my own question:
Yes, it is Javascript related. Since the search input field is not wrapped in a , in order to submit it, and get the search query, two jQuery functions have been written (in catalog/view/javascript/common.js, lines 64-81).
These functions get the search input value by first referencing the within which the input is originally located:
[line 68]
var value = $('header input[name=\'search\']').val();
[line 79]
$('header input[name=\'search\']').parent().find('button').trigger('click');
To make it work, I had to replace the two instances of "header" with the ID of the menu:
var value = $('#menu input[name=\'search\']').val();
Sorted then!
Hope this helps some other OpenCart beginner like myself :)
Hello guys I need your advice on best solution to my problem....
So I have simple html form which has input boxes, selects and stuff...
One of my select field generates its options from database an when user selects any option 3 input fields are filler automatically, problem is if value does not exist I have option value to create new. If user select this option javascript redirects to a new page where new option can be created and saved to database, after that user is redirected back to form however all fields that input fields have been filled now are empty....
What is the best way to save all input values user have entered so I can navigate user to different page where he can add item to the database and redirect him back to same form and fill all fields back?
First thing that I thought to put all input values to array and using php function http_build_query() send via GET and on redirection back send same array back, but form has like 20 fields and i believe it is not best solution as sending data take server resources...
Second, Put everything to json temp file, save on the server redirect user and on redirection back get this json file and fill data back and delete file afterwards... (I like this idea most)
Third, to create hidden form (like lightbox) show this form if needed, but here comes problem on this form submit it has to redirect somewhere if I redirect to same or different page I still lose all data...
Any idea guys?
In this case will better to use popup box (lightbox). Fill it with additional form and add event handler to it on form submit. Try to use event.preventDefault() inside the handler, then attach jquery.post method:
$( "#additional_form" ).submit(function( event ) {
event.preventDefault();
$.post('post.php', $('#additional_form').serialize());
$(#lightbox).hide();
});
There's a lot of ways to do it, you can also just serialize it without sending. Or append it to your main form.
Use the given codes
$("#additional_form").submit(function(event) {
event.preventDefault();
$.post('post.php', $('#additional_form').serialize());
$(#lightbox).hide();
});
I have a form which is using a select list to jump around my site. This is currently using onclick window.location so user selects the page and presses go and it goes to that page.
I now need to add a small text box for the user to type in a code (say 123456) and then when they click go, it should go to the url selected, but with the [CODE] being the number entered in the box. I discovered jquery replaceAll so it gave me the idea to have this in the select html:
http ://jumptothispage.com/parts/p[CODE]/edit
http ://jumptothispage.com/jobs/j[CODE]/edit
When you press go, it would replace all [CODE] in that html with the code entered and then jump to that page selected, e.g.
http ://jumptothispage.com/parts/p123456/edit
http ://jumptothispage.com/jobs/j123456/edit
I am already using jquery on my site so makes sense to try and utilize that again. I'd appreciate a pointer and or other suggestions instead.
Thanks,
Paul.
A workaround: Store the code in a cookie, so at least it's not visible to every person who looks at the URL bar. Then in every onclick, fit it into the URL to send the user to the "right" page.
Or, have your select option's value literally read CODE, which your onclick interprets to mean "The user hasn't set the code yet." When the user types in the code, store it in a variable (in the example below, realcode), and you can then do this:
$('select#navigation option').each(function(idx, el) {
$(el).attr('value', $(el).attr('value').replace(/CODE/, realcode));
});
I have a page with 2 forms and a hidden field that is outside of both of the forms.
How can the hidden field be submitted with either of the forms?
I thought about doing something like this with jQuery:
<script type="text/javascript">
$(function() {
$('form').submit(function() {
// do something to move or copy the
// hidden field to the submitting form
});
});
</script>
Will this work? Any other ideas?
EDIT
The hidden field stores a serialized object graph that doesn't change. Both server methods require the object. The serialized object string can get pretty hefty, so I don't want this thing sent down from the server 2 times.
You can simply inject a copy of the element into each form right before submission.
This way, you can have the option of having different information for each hidden form field without affecting the other.
Something like this:
<script type="text/javascript">
$(function() {
$('form').submit(function() {
$("#hidden_element").clone().appendTo(this);
});
});
</script>
If you want to use the exact same element for both forms without creating a fresh copy, just don't use clone()
See documentation for clone() and for appendTo()
EDIT:
If you don't want to send the hidden element with every request the form sends. Consider storing it in the database for that user for that time. You can submit its content once, and once only for every page reload, and then just send the database id of the hidden element with each form post.
On page load, something like this:
$.post("page.php", { reallyBigObject : $("#hiddenfield").val() }, function(insertedID){
$("#hiddenfield").val(insertedID);
});
Then, in the server side code:
//insert $_POST["reallyBigObject"] into databse
//get the just inserted id (in php it's done with mysql_insert_id())
//echo, or print the just inserted id, and exit
This way your js gets the callback.
Now, you can submit the form as you would, but this time, you're only sending the id (integer number) to the server.
You can then simply delete the object from your server (run a cron to do it after X amount of time, or send another request to delete it.
Honestly, though, unless you object is HUGE(!!), I think storing it by submitting it only once is a lot more complex to execute than to simply send two requests to the server.
Let me know if you have any other questions...
With HTML5, you can include a "form" attribute with an input element. The value of the form attribute is the id of the form(s) the field belongs to. To include the field in more than one form, include all form ids in a space-delimited list. Unfortunately, the form attribute is not supported in IE at all (as of IE 9). FF and Chrome support start in version 4 and 10 respectively.
Append the field to both forms at page load:
$(function() {
$('#form1, #form2').append($('input[name=fieldName]'));
});
Assuming you are doing a non ajax submit you could just append the field into the form being submitted. However if you need this info in both forms is it not better to store this value server side in a session store. This way any non js clients will also work!
$(function() {
$('form').submit(function() {
$('input.yourhiddenSubmit').appendTo(this);
});
});
The only way to pass the variable to the next form is to have that variable in the data that is passed when the form is submitted (either GET or POST), unless you want to use AJAX. Assuming you want to have the hidden variable outside of the actual form for a "good reason", I would recommend using jQuery to include the hidden input field into the form just before submission, like so:
<script type="text/javascript">
$(function() {
$('form').submit(function() {
$(this).append("<input type='hidden' name='hiddenField' value='"+$("#hiddenField").val()+"' />");
return true;
});
});
</script>
Replace all the instances of "hiddenField" with the ID of your hidden field outside the form. This will create a new input inside of the form just before it is submitted with the value of the hidden field that is elsewhere on the page.
Beyond that, you'd have to be a bit more specific about what your exact problem was (and why the field isn't being included in the form) for me to help.
Note that the above code should work in theory, but I didn't have a chance to actually test it out myself.