I am building a forum app in node and I would like to create big bright buttons on my home page that would route users to another /view (topic) when clicked on.
I would like to gather the value of the button pushed inside of an object, so that I can use it within a dynamic route to be able to render to a specific view. I will also need that value to query with. Unfortunately I am having trouble getting the value of the button clicked.
Here are my buttons/inputs:
<form action='/topics' method="GET">
<input type="submit" value="boy" id="boy" class="bounce topics">
<button type="submit" value="girl" id="girl" class="bounce topics"><h2 class='topic'>Girl</h2></button>
</form>
when I console log req.body neither method gives me anything, I only get an empty object. I have read the two other threads I could find that were similar, but even though my code is comparable, I am getting nada.
I believe the method attribute in your form element needs to be POST instead of GET
You may use either GET or POST in the method. The difference is that you will be retrieving them from the $_GET or $_POST global variables on the server side in PHP (or similar variables in the language of your choosing).
Instead of using "id" for each input element, you must specify names:
<input type="submit" name="boy" value="boy">
<input type="submit" name="girl" value="girl">
You should be able to access URL / GET variables via req.query.<variablename>.
Related
I would like to know if any script with readonly elements is editable through bypassing. Im practicing an ejs template where I used the below script. People suggested me not to go with this action and mentioned it might not be secure.
For instance;
<input
type="text"
id="name"
name="name"
class="form-control"
value=<%= name %>
readonly/>
the name in the value will be the default value from the database. Is it possible for any malicious actors to edit the name even if it is non-editable? or if I use disabled elements, How could I make the value posted to the database?. I would like to know If there is any work around.
Could you please advice?
Thanks.
Yes, if you send values directly from this input, user can delete the readonly part and change the value. This can lead to undesirable results.
1. You can create a short-term Session[] for the value you want to send.
2. You can call it from where that you want to post it. (So there will be no link between the input field and the value you call there. The İnput field will only be used for view. You can also delete it or change readonly to disabled if you want.
my point of view 2>1.
You need to check value on the backend/server side too. You can't know if attacker is submitting value via your form or specially crafted request.
I am making webpage about ride sharing/selling bus tickets using JSF.
On one particular page, logged users can publish their ad (offering or looking for ride).
They should enter info like: ad title, origin city, destination city, departure time, etc.
What I want is, that users get weather forecast of destination city showed in popup after they hit submit.
This also means I am consuming service like openweathermap.
Basically, I have one h:form and h:commandButton like this:
<h:commandButton value="Publish" action="#{adBean.publishAd}" type="submit" onclick="showPopup()">
</h:commandButton>
The problem is that I don't know how to pass bean value of
<h:inputText value="#{adBean.ad.destinationCity}"/>
to JavaScript method showPopup().
I've tried this, but destinationCity turns out to be null.
<h:commandButton value="Publish" action="#{adBean.publishAd}" type="submit" onclick="showPopup(#{adBean.ad.destinationCity})">
</h:commandButton>
Why is this happening and how can I pass its value to JavaScript code?
It is null because it is put in an attribute (onclick) that is used for javascript. Attributes like these are 'rendered' at the time the page is displayed, not (again) at submission time or other moments. So if it is initialized null at that time, what is transferred from the server to the client is
<button value="Publish" ... onclick="showPopup(null)" />
A quote from #BalusC about this in How to invoke a bean action method using a link? The onclick does not work:
In JSF, only the attributes which interpret the EL expression as a MethodExpression can be used to declare action methods. All other attributes are interpreted as ValueExpression and they are immediately executed when the HTML output is generated by JSF. This covers the onclick attribute, whose value should actually represent a JavaScript function.
The (h:?)inputText on the client-side is rendered as a plain html inputText, so if you want access to its value before submitting (like I suspect you want to), you can do so in the showPopup like you would in plain html/javascript.
How to do this is mentioned in many stackoverflow Q/A so either pick one that suites you best e.g. How do I get the value of text input field using JavaScript?, but make sure to also read How can I know the id of a JSF component so I can use in Javascript
I have this code: http://jsfiddle.net/Zx8hc/9/.
It's a form where a user can add input-text dynamically, he can add and delete as many as he wants (only and the first being mandatory). And since he can add and delete the ones he likes their ID's may not be consecutive.
My question is how can I collect the data from the newly created inputs with PHP and store it in vars, each input in it's own var, independently ([input_1] > $input_1, so on). My idea was to create a for loop and go through all the elements from 0 to n, and those who contain data would be stored and those who don't wouldn't. Would that be an appropriate approach?
I am sorry that I don't have any PHP code to show but I don't even know where to start with this one, so thank you very much in advance if you can help me with this one.
I have checked your fiddle, and you have the next HTML as input element.
<input type="text">
If you want to send form data to a server, you have to wrap it in a form element. Here below is an example of a simple form
<form action="url_to_php_file.php" method="post">
<input type="text" name="age[]" />
<input type="submit" value="submit" />
</form>
Here, you see a <form> element, which you can use to pass form data to the server. It has several attributes. Here, action is the URL to where the form content should be sent to. Pick it the PHP file where the form should be handled. If it's on the same page as the display, just use # as field.
Then method-attribute is to send the form by POST data. The other option is using GET, but it's not secure because using GET will send in the form data in the URL too. While POST will wrap it in the request.
If you have a form element, it's necessary to have a button to submit the form. By submitting, you're activating the trigger to send the form to the address described in action-attribute of the form. That's the input-submit element.
Now, the data itself. Each input has to be assigned with a name-attribute. The content of it will be associated to that name when submitting the form. If you want to send in multiple data as one name field, you have to use an array, the [] in the form name.
For example, age will only hold one data-entry. While age[] can hold multiple values.
If you want to add the element, just clone the said object, only if it doesn't have id with it. If you have multiple elements with same id, you can get unpredictable results. It's advisable to keep id's unique.
And on your PHP file, read the $_POST['name'] as an array.
...... edited.
I suggest to create these new inputs with name tags. These name tags must be unique e.g. cool_input1, cool_input_2, ... OR use as array: cool_input[].
As result - you can get incoming info in php and parse received data from POST/GET.
For the first idea you don't need to know real count of the generated inputs. You just can use 'foreach element in POST' and if its name matches your pattern - this is what you need.
I hope this question has an obvious answer to anyone who knows his way around JS and HTML :)
I have a very specific problem. I am trying to add to the header on a site buttons that will function like 'quick searches' which will basically on click send pre-filled form values to my search page and have the search page also populate these values in the ajax form inside.
Here is a sample search page that's outside of the results page:
http://www.thediamondsexperts.com/index.php?route=product/diamondsearch/jewelry
You'll notice that when you change the values there and click Search, the values also appear in the ajax form on the sidebar of the search results page.
What I simply want to do is create different variations for pre-set searches, and put them as buttons in the header.
When I try to put a few invisible forms in it won't work because of the multiple form values with the same ids but in general I think there must be a simple way to do this server side.
For instance, copy the current function that accepts the search, have it with pre-set values instead of populating the values from the form and then simply calling that function onClick. Does that make sense?
I need to create something simple enough though that would be easy for the admin to later change and customize more buttons so a client-side solution would be best.
Your help is much appreciated!
All you need is a form with hidden inputs and a submit button:
<form>
<input type="hidden" name="param1" value="Predefined value 1" />
<input type="hidden" name="param2" value="Predefined value 2" />
<input type="hidden" name="param3" value="Predefined value 3" />
<button type="submit">Search!</button>
</form>
This will only show the button, but the values will still be sent to your form's action.
...there must be a simple way to do this
server side
...a client-side solution would be best
...copy the current function that accepts
the search, have it with pre-set
values instead of populating the
values from the form and then simply
calling that function onClick. Does
that make sense?
Not really, not to me at least. If you can clarify I'd be glad to help more.
When you say "multiple form values with the same ids", I fear you may be confused: There is no requirement for a form input to have an "id", I think you mean "name", and there's no need to have multiple inputs with the same name in a form unless you want to send an array of values.
I didn't want to go overboard and talk about how the ajax works on that site, because that's another thing altogether and all you seemed to be concerned about was the preset search buttons. Hopefully this helps you figure it out, GL.
EDIT: I'm having a tough time figuring out what you're really asking, if you are trying to duplicate the behavior on that site, please tell us what server side language is available to you, if you're using or open to using any javascript libraries, and what you have tried so far. A full fledged spoon-feeding tutorial is really out of scope, you will get better, clearer help if you share the code from your current attempts.
If you want to pass values from one page to another and handle it client-side, use "get" for the form submit method, and use the handy "gup()" function to grab the param values. You can get more info on gup() here:
function gup( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
On your initial page, you can either use inputs with type="hidden" or just get the values from the visible inputs (as on your sample page). Then submit to your results page. Given an initial page with something like this...
<form method="get" action="results.html">
<input type="text" name="caratFrom" value="0.7" />
<input type="submit"/>
</form>
... here's sample usage for the results page:
var caratFrom = gup('caratFrom');
// etc.
Then simply assign those values to whatever elements you want, e.g. an input:
<!-- HTML -->
<input type="text" name="caratFromResult" value="" />
// Javascript
document.getElementById('caratFromResult').value = caratFrom;
I have a included a Dojo star rating widget (dojox.form.Rating) in a Dojo form but when submitted, it doesn't appear.
<div dojoType="dojox.form.Rating" numStars="5" id="field_3177" value="3"></div>
The documentation doesn't mention adding a name attribute, but even if I add one, it doesn't help.
<div dojoType="dojox.form.Rating" name="field_3177" numStars="5" id="field_3177" value="3"></div>
Examining the rendered HTML in Firebug, it seems the hidden input field has no name attribute - which would explain why it doesn't appear in the POSTed data.
<input type="hidden" dojoattachpoint="focusNode" value="3" id="field_3177" tabindex="0">
Is there something I should do before submitting?
You just need to add a name to the widget, i.e.
<div dojoType="dojox.form.Rating" numStars="5" id="field_3177" name="field_3177" value="3"></div>
This is nothing special to Dojo. All input elements must have a name in order to be submitted back to the server, see http://www.w3schools.com/tags/att_input_name.asp.
UPDATE:
Sorry, didn't see that you'd already tried adding a name param. I'd argue this is a bug in either the Form or (more likely) the rating widget. If you submit your form via XHR using dijit.form.Form.getValues() then you'll get the rating widget included - if you have a name. But if you use the native form submit then you don't.
I've created a test case at hhttp://telliott.net/dojoExamples/dojo-ratingInFormExample.html. You can get this to work for non-XHR form submission by quickly iterating through the values returned by getValues() and building the query string yourself. Not ideal. I suspect the template for the rating should be updated to put the name attribute onto the input node rather than the top level node.
Silly question:
have you added dojo.require("dojox.form.Rating"); to your code?
Hope it helps you.
//Daniel