How to pre-fill a form using jquery/javascript - javascript

I have to pre-fill a form on this page that I open using javascript. The best code I have managed to come up with thus far is
submitpage = window.open('http://localhost/bookmarks/submitbookmark');
submitpage.getElementsByName("title")[0].value="Good Luck";
I have no control over the page that opens. When I manually fill the form, it works fine and submits everything. Its when I pass variables in the url that it does not accept some. The problem is that none of the form elements on the third party page have id's, so i have to use the getElementsByName() function but the good thing is that there are only four elements, all with unique names so i can use the function like this getElementsByName()[0].
Now, I want to see the form pre-filled with values and leave the option of submitting to the user by clicking the submit/post button. Just for reference, the form method="POST".

Related

Reload partial and retain form values

When purchasing a course, the user can enter 1 or more students to register for the course. By default there is only one entry but the user can use a dropdown to select more and then the form will update to show more.
I am accomplishing this by triggering an event when the user changes the dropdown value that uses ajax to call an action which returns a partial with the appropriate number of entries and then I just replace the existing div with the new one.
My question is whether there is a way to implement this so that it's kind of like "refreshing" the page where the form remembers and automatically refills in he values the user already entered just like if you were to refresh the entire webpage. Is there a way to do this, or will I need to pass in the existing values into the action in my ajax call and have the partial set them?
A secondary question I just thought of (and perhaps this should be in another post but I will go ahead and put it here for now) is whether I should be concerned about any weird behavior with validation when doing it this way? (I'm using stock, built in validation with annotations).

Wordpress calculator form without resubmit and using custom field value

I am currently trying to solve a problem on my Wordpress website. I do not have any code just yet (as I have re-written 4 different forms before I gave up), so I will just state what I want to do, I am pretty sure it's quite simple and I'm just missing something.
I need to build a form on the front-end that works like this: user inputs some value, chooses some other value from dropdown, than clicks on the submit button, page does NOT reload, instead a value is calculated and shown (I know how to show a value after click using jQuery), BUT the value that will be shown is calculated using not only form inputs and hardcoded variables, but also Wordpress custom field values using PHP function get_field().
The problem is that if I use ajax to get values from the form without reloading the page, those values are in javascript and I need to use them with PHP get_field() function.
So, to repeat what I intend to do, so It's easier to understand more quickly:
Form where user inputs some values
User clicks submit
The page does not reload
New value is calculated based on user input and custom field value (using get_field())
New DIV is shown using JQuery on submit click (I know how to do this one, but its important because this is the reason why the page must not be reloaded).
If you could just point me in the right direction, I will be able to code everything else.
Why not just inject the custom fields inside javascript variables when building the page template in php? Then you would have all the data available in javascript when the page loads. Something like this:
<?php
echo '
<script type="text/javascript">
var custom_field_1 = '.json_encode(get_field('custom_field_1')).';
var custom_field_2 = '.json_encode(get_field('custom_field_2')).';
</script>
';
?>

How to navigate from one popup page to another using Jquery in struts2 application

I wish to navigate through multiple pages in a pop-up block. That is, my main page would be inactive when i navigate through pop-up flow as below
[[Main Page]]
[popup-page1]--Next--> [popup-page2]--Next--> [popup-submit page3] --Submit-->
[[Main Page]]
Each page has different set of attributes that are populated by user input such as radio buttons and text fields etc
for instance, below are some of the attributes that are filled on each page.
[page1]--> your name, DOB, country
[page2]--> your preference, your package, direction
[page3]--> email address and submit
How can i retain these values and submit as a form? Do I need to submit each popup page as a separate form or in one shot by retaining all these value till the end?
Note that my application is in strut2 and usually for page navigation I take the help of model driven arch. (putting the fields in one bean and keep a track of value changes using hidden attributes from one form to another)..How can this be achieved using pop-ups. I have limited knowledge about sj:dialog
EDIT
Use Jquery to simulate pop-up navigation by display none and block property. Then, for submit do an AJAX call, this will perform an async call in the background.
In order to navigate through multiple pages in a pop-up block.
I created multiple divs inside the parent div and on click of each continue button I took help of show and hide using Jquery.
At the end of the flow, submit the request to an URL using an AJAX call (GET request)pass values entered by user as params.

pass form values from one page to a hidden iframe inside page

I am trying to take on a new project creatively. Basically, I have a website where I want to put a custom form and a hidden iframe which will contain its own form. What I want is that when I press the submit button on the page's form, the values of say the text boxes will be passed to the iframe's form's text boxes and then submit the hidden form and display in a visible iframe the results.
I have looked through other questions, but none seem to have the same goal as I.
Is this possible? If so, how? I would highly appreciate any help.
nvncbl
If I've understood you correctly, you want to pass some input parameters without the page reload. If so, then you should dig into ajax in order to call asynchronously different parts of the web page.
Fortunatelly there are many frameworks that can help you. I prefer Knockout.js, but you can use for instance Angular.js or Backbone.js and so on.

How to use form input to update code?

I have a page where I need to filter certain values provided by an embedded widget based on user input in a text field.
I can do this by appending certain parameters to the widget code embedded on the page and refresh the page
How do I take the user input , replace the widget code and refresh the page?
this is the code I might need to append to the widget code that already exist on my page.
%22filter%22:%7B%22keyword%22:%22userprovidedvalue%22%7D,
I am using jsp
You should be able to handle it by putting an onchange on the input field, and sending it to a function that reads the value off of the input field. Alternately, you can have the submit button call a function, that first reads the value off the input field, then performs whatever logic you need, then submits the form.
Jquery is often useful for making things like this easier and more intuitive, though it does have a bit of a learning curve to ramp up.

Categories

Resources