Laravel redirect with javascript - javascript

I have a form where a user can select a number ranging from 2 to 10. Based on the selected number I'd like to redirect to '/mypage?number=[2..10]' like the way Laravel's redirect() function does. Thus, flashing the old input values to fill the form accordingly. Based on the $_GET['number'] parameter a for-loop is executed printing 2 to 10 input fields.
How can this be done in the most efficient (and meant to be) way? Or do I have to set up a new route like Route::post('mypage/{number}', 'myController#redirectMethod')?

You are probably over-thinking this. If this is in a form, just have the form action be /mypage and set the name of the select to number and the form's method to get. When the form is submitted, it will bring the user to the page. If you'd like it to auto-submit when the user modifies the dropdown, you can submit the form programatically via js/jquery $('#myForm').submit().
There should be no need for additional routes just to handle the number parameter. Use \Input::get('number') to grab the value on the server side.

How will the javascript get {number}
all you need to do in the javascript
location.href

1) Either redirect should take place on the server - when you send params on sever and it brings you the right page or redirects you to the right page.
2) Or you need to generate javascript in laravel_blade and set this logic in the Javascript. Say, generate input fields with extra data- attribute and make javascript to handle this attribute.
3) Or maybe, avoid redirects at all and make javascript generate variable amount of input fields on the same page judging on data-attributes of the button that was pressed.

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).

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.

simple way of setting up a 2 step form with html/javascript

I have an html form where the user fills in parcel details and then it outputs a price based on various fields. Then what I want is if the user is happy with the price they can fill in a few more fields such as name, contact info etc and then press submit and the form will get processed via php.
I thought of 2 ways of doing this. First is to have one form and when that is submitted it will generate another form asking for more info. But I need a way of passing variables from the first form to the second so that's not very good.
The second idea was to have a trigger in the form so that when a user changes the value in a certain field it will output the price and then show the other contact info fields. But I'm not sure if this approach is good either.
What's the simplest/smartest way to approach this on client side?
I'd go with the second option.
Step 1. Make a server-side processing page, say quote.php
Step 2. Using javascript, monitor changes to your form fields. Once you have a valid entry, send the post data to quote.php, which should reply back with the quote. Populate a div with the price quote.
JQuery Example:
//You'll have to call this function whenever the user input changes
//Call quote service
$.get("/quote.php",
{
//Pass javascript variables as POST/GET variables
zip: txtzip, weight: txtweight, ship_method: txtship_method
},
// Populate price div on this page with the quote response
function(data){
$("#calc-price").html(data);
});
Step 3: If the user likes the price, they fill out the rest of the form and you process it like a regular ol' form.
If the client has all the data required to perform the price calculation then I would suggest a single form with some show/hide functionality as per your second idea. Others may disagree but I only go back to the server when reading or writing. And even less so if there are webservices available.

remove params from form request

Upon user interaction, I need to remove certain input params from an HTML form before submission. Using javascript to remove the input fields from the DOM doesn't seem to actually remove the params from being sent through the request.
Is there a way to delete or clear the actual request params?
You could disable them.
formElement.disabled = true;
I am not sure if I am following your question exactly or not. But the way I read it, you have a set of fields in a form and when you submit, you are relying in the native form post behavior which places all the fields into the post.
My initial reaction would be to make the post yourself, using Ajax. Then you have complete control over what values are passed along and what are left behind.
That being said, if Ajax is not an option for whatever reason, what you could do is create a second, hidden form which is responsible for the actual posting. When you submit the visible form, you can copy the values you actually want submitted over to the hidden version, and them programatically post that one.

What is the best practice for passing variables from one HTML page to another?

I'm relatively new to web application programming so I hope this question isn't too basic for everyone.
I created a HTML page with a FORM containing a dojox datagrid (v1.2) filled with rows of descriptions for different grocery items. After the user selects the item he's interested in, he will click on the "Submit" button.
At this point, I can get the javascript function to store the item ID number as a javascript variable BUT I don't know how to pass this ID onto the subsequent HTML page.
Should I just pass the ID as an URL query string parameter? Are there any other better ways?
EDIT: The overall process is like a shopping cart. The user will select the item from the grid and then on the next page the user will fill out some details and then checkout.
I should also mention that I'm using grails so this is happening in a GSP page but currently it only contains HTML.
You could just use a hidden input field; that gets transmitted as part of the form.
<html>
<head>
</head>
<body>
<script type="text/javascript">
function updateSelectedItemId() {
document.myForm.selectedItemId.value = 2;
alert(document.myForm.selectedItemId.value);
// For you this would place the selected item id in the hidden
// field in stead of 2, and submit the form in stead of alert
}
</script>
Your grid comes here; it need not be in the form
<form name="myForm">
<input type="hidden" name="selectedItemId" value="XXX">
The submit button must be in the form.
<input type="button" value="changeSelectedItem" onClick="updateSelectedItemId()">
</form>
</body>
</html>
It's good one, but better is to use some script language such as JSP,PHP, ASP....and you can use simple POST and GET methods.
The best method (imho) is to include it in the URL
href="http://NewPage.htm?var=value";
encodeUriComponent a string Value
One way to send over variables using POST to another page is to make the link to the subsequent page a submit input on a form where the action attribute is your target page. For every variable you have, you can include using inputs of attribute type "hidden" in this form, making only the button visible.
Another option is to dynamically generate links on the page with something like PHP where you basically repopulate the current GET queries.
Finally, you can always store this information in the PHP $_SESSION array and not have to worry about continually passing these variables through site navigation.
Your choice will depend on how many navigational options there are where you'd like to keep the same variables. It will also depend on how secure you'd like your back end to be and the amount you'd like to disclose to the advanced web user.
If you are only going to need the ID on the subsequent pages, then you can pass the id as a query string parameter.
But there will be times when you need to relay more information and passing a variety of parameters to different pages and having to maintain different sets of parameters for different pages can get a little hairy. When this is the case I'd suggest that you keep a hidden field on the form and create an argument object that stores each of your parameters. Serialize the argument object with JSON and store this in you hidden field. Post the form back to the server. When the next page loads, deserialize the object and retrieve the values you need.
Assuming that you are limited to using html pages, I think the best approach would be to pass the id along on the query string to the next page. It is relatively easy to pull that value back off the query string on the next page. If you need to be a little more stealthy about passing the variable (or you need the variable to persist for more than one page), you could also set a cookie and retrieve it on the next page.
Since you are trying to do this in a Grails application you do have a choice of using Flash scope. This might not make any sense if you want to go directly from one HTML page to the next as the scope would be defined in a controller. If you do not need to do any sort of processing between requests, I'd suggest using a hidden form field to keep it simple.
http://grails.org/Controllers+-+Controller+Scopes

Categories

Resources