I have a table of tasks that users can assign themselves to. There is an Assign button and when they click it, I would normally want to create a POST request, assign the task to the user, and redirect them to the task details page. Normally that's fine and I could do that with a button in a form, but they also want to be able to click that button and have the task details page open in a new tab.
So if they were on the main page and wanted to grab three of the tasks, they would want to be able to Ctrl + Click or middle click the button, have each of those pages load in a new tab, and be assigned to each one they clicked.
That leads me to believe I need to make it a link instead of a button? But then that means the request would be a GET request. Would anyone be able to give me a good idea on how I could accomplish this?
I'm using AngularJS 1.4, but even without Angular, I'd be curious to know how I should handle this.
Thanks in advance.
You miss something really nice, in pure HTML. Forms (the common way of doing POST request, isn't it) can have a target attribute, as links do, so the result can be displayed on another tab/window. Here is a sample :
<form action="demo_form.asp" method="get" target="_blank">
...
</form>
Here are the possible target values : _blank|_self|_parent|_top|framename
If you need your result page to be displayed in one place or one another, (multiple buttons i.e.) then this will be the good moment to use javascript, for editing this target property.
Related
I'm working on a web app that takes the user through multiple forms with simple interface of a 'back' button, form, 'save' button and a 'next' button.
Clicking 'save' only calculates a number from given answers and sends it to localStorage.
When I then click 'next', it opens the next html file I prepared, constructed the same way, just with a different form. The problem is that if I press 'back', the form on the first page is empty, but when I use the browser's 'back' button, it's all there. How do I get this result with my 'back' and 'next' buttons? I'd like the user to be able to browse their answers as well as see a certain form already completed if they encounter it on a different path (there are various paths through 3 to 5 of 11 forms created, depending on what the user wants to calculate).
I understand it's opening the html file every time I click an 'a href', but I don't know how to change it. I tried searching for html form reloading prevention etc. but it doesn't seem to yield any answers. I'm not sure I know how to formulate my problem in a simple enough way.
Best simple solution would pretty much be what "Manolo" suggested.
Put all the forms you need in one HTML doc
Set all the form's style to "display: none" except the first
Create a simple JS function that changes the "display" style accordingly and attach it with the "onclick" attribute to your buttons.
Sorry for the lack of code. Typed this on mobile and hoped it would be straight forward enough. Hope this helped.
Load the forms as you need them using javascript to request them to your server. Use fetch api.
Other solution is to add all the forms to one page and hidde them all from the user. When the user click next you hide firstForm and show secondForm.
You can use History_API of DOM to manipulate the history
let stateObj = { foo: "bar" }
history.pushState(stateObj, "page 2", "bar.html")
And can catch thee event of back and next button of navigator with
WindowEventHandlers
I am currently looking at creating a form using HTML, CSS and a bit of JavaScript. I was wondering though if anyone had any ideas how I could keep all the fields populated?
I want to be able to fill in a form and click 'Next' which will go to a different page with a different form. But if the user presses the 'Back' button to edit some information on the previous page for example, how would I keep all the fields populates?
Bit stumped on this, so any suggestions would be appreciated :)
You may use localStorage or cookies for that purpose to store content of the page on the client' side.
See https://stackoverflow.com/a/27273657/696034 for an example; in you case, you call save() when receiving location change event, and load() on the page' initialization.
I have added a button via workflow and I need to redirect it to another location/link(say .. www.google.com link). How can I achive this, Since button's id cannot be changed in workflow, I could not append any Javascript function in that button . Also Action in workflow does not have an option to set link to Workflow buttons,.
Does this mean Workflow buttons can only be made to move to another State?
Note: I know to add buttons via user script but for this particular scenario I want to achive this only with workflow button.
The only way to handle button clicks in workflows is to create a transition to another state. Within the transition, there is a drop-down field called Button that lets you choose which button would fire the transition.
You can only cause a workflow to navigate to either a record using the Go To Record action, or a task link using the Go To Page action. But I'm not sure if you could navigate to a link using workflows as you've mentioned above.
Why not add a button and hijack it via a client script? Just add a call on the form of client side to find the button element on the DOM and change the properties. This can be easily done with jQuery, which comes by default on NetSuite.
My Project is having 3 forms in 3 different pages say form1.cfm,form2.cfm,form3.cfm.
form1.cfm contains first form as follows
<form name="firstform" method="post" action="form2.cfm">
// form-content
</form>
Next
form2.cfm(action page of first form) contains second form as follows
<form name="secondform" method="post" action="form3.cfm">
// form-content
</form>
Back
Next
form3.cfm(action page of second form) contains Third form as follows
<form name="Thirdform" method="post" action="form4.cfm">
// form-content
</form>
Back
Next
So when I use the Back button link in form2.cfm, it goes to the form1.cfm and no issues on it .when I do the same in form3.cfm, it must go to form2.cfm, but it asks for form resubmission, because I know that it is the action page of form1.cfm.
And I want to go for form2.cfm, when I use the back button link from form3.cfm and don't want to see the form resubmission page.
I don't know whether it is fixable or not. but suggestions or solution are welcome.
Thanks in Advance
The problem is that by using POST, you are telling the browser "Hey, this form has effects that might not be appropriate to repeat."
You could change the method to GET, but that probably isn't appropriate either, because that says "This form has no effects, it's just to show stuff."
One solution is to not submit the form at all, but gather the data with JavaScript, send it with an XHR request and then navigate to the next form, again with JavaScript.
Another solution is to not have several separate forms at all. Just put them all in one master form. If that becomes to large, just use JavaScript to hide the parts that are inactive and have the next/back buttons open and close those parts.
Don't use "Back" because you are telling the browser to resubmit the original page 1 to page 2.
I can recommend that you adopt a simple framework like Fusebox (http://www.fusebox.org/) because in my experience your CF app will quickly grow and this will make your life a lot simpler downstream.
If your goal is to have a "wizard" type interface where you step through pages, you could try putting all your code into a single page and render it inside a 'tab' using jQuery (http://jqueryui.com/tabs/)
I'm very new with JavaScript and I'm struggling to implement something which I don't think should be very complicated.
What I want to do is:
form is open in browser with a drop-down list of records in a database
if the desired option is not in the list, the user can click on a link next to it to add a new entry to the database
this will open a new window with an additional form for this entry
on clicking submit the processing script will run to insert this information into the database
when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)
Maybe that last thing with the list refreshing is quite complicated (unless the list only in fact loads from the db on click?) but everything else should be simple enough, I think. I've tried all sorts of things but nothing that's got close enough to working to be worth posting here.
Could someone please give me some sort of idea of the sort of functions I should be using and roughly how to implement them? I don't necessarily need precise code, just a framework to work from. (I'll learn more in that case anyway.)
ETA: I should add that I've been trying to work with window.open() and window.close(). I don't even really know if this is the best method?
No, that's not(at least relatively) complicated. What you'll need is jQuery and jQuery UI(these frameworks are just suggestions, you may chose any other if you like) to achieve that. So...
form is open in browser with a drop-down list of records in a database
This part is easy, just a simple html form with a select tag and a add link/button on it. You will need a JavaScript function to refresh the select options from database. For that I suggest this or this -there are many others on the web- post.
if the desired option is not in the list, the user can click on a link
next to it to add a new entry to the database
this will open a new window with an additional form for this entry
The easy way to do this is using jQuery UI Dialog Widget to open the popup with the new form.
on clicking submit the processing script will run to insert this information into the database
On that form you'll have to use jQuery Ajax to send data to database through your server language(PHP, ASP.Net, JSP, whatever...). Some examples here and here.
when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)
So when data processing was complete, you call the refresh select function that you created before and close the dialog on the ajax success callback. Example here.
And this is it. Now it's up to you. Hope it helps.