I am having problems getting user input from form.
could you please tell where am I going wrong??
here's the add-employee.html code
<!DOCTYPE HTML>
<html>
<head>
<title>Add Employee</title>
<!--<script type="text/javascript" src="main.js"></script> -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<form action="/form" method="post">
<tr>
<th>
<label>Name:</label>
<input type="text" name="name">
</th>
<th>
<label>Designation:</label>
<input type="text" name="designation">
</th>
<th>
<label>PAN No:</label>
<input type="text" name="pan">
</th>
<th>
<label>Aadhar No:</label>
<input type="text" name="aadhar">
</th>
<th>
<label>Bank A/c:</label>
<input type="text" name="bank">
</th>
<th>
<label>Basic Salary:</label>
<input type="text" name="basicsalary">
</th>
<th>
<label>Other Allowance:</label>
<input type="text" name="allowance">
</th>
<th>
<label>ESI No:</label>
<input type="text" name="esi">
</th>
<th>
<label>UAN No:</label>
<input type="text" name="uan">
</th>
</tr>
<tr>
<td>
<input type="submit" name="submit_button">
</td>
</tr>
</form>
</table>
</body>
</html>
And here's the link to the server.js code which I am using to run the app.
https://github.com/silentarrowz/payroll/blob/master/server.js
when I submit the form I am expecting to get a response of
'employee' + name + 'added'
But I am getting the result as " employee undefined added ".
now, why is this happening?
where am I going wrong?
In your server.js you have the line.
app.use(bodyParser.json());
This means that your server can only read JSON data in requests. However, unless you are using javascript/jquery to send the form to the server, the data is never formatted as JSON. Instead browsers use urlencoded or multipart formats to send the form. multipart is normally only used when you are sending files with your form so it is most likely using urlencoded format.
That means that you need to include a body parser for the urlencoded format.
Simply change it so we have the urlencoded parser below the json parser like this:
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
However if you will be sending files with your forms, you must parse the request using a module like multiparty.
Related
I trying to submit items in a shopping cart to a database table but I can't get a clear understanding or how to implement it using the documentation on WTFORMS and other online materials I came across.
I have this forms in my forms.py:
class CartForm(Form):
amount = IntegerField('Price')
item_name = StringField('Product Name')
quantity = IntegerField('Quantity')
item_total_amount = IntegerField('Item Total')
class MainForm(FlaskForm):
total_amount = IntegerField('Total Amount')
cart_items = FieldList(
FormField(CartForm),
min_entries=1,
max_entries=20)
and this is the form in my template:
checkout.html
<form name="cart" action="{{ url_for('posts.checkout') }}" method="post"
enctype="multipart/form-data">
<table class="timetable_sub">
<thead>
<tr>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{% for item in user_cart %}
</tr>
<tr name="line_items">
<td><input type="text" name="item_name " value="{{item.item_name }}"></td>
<td><input type="number" name="quantity " value="{{item.quantity}}"></td>
<td><input type="number" name="amount" value="{{item.amount}}"></td>
<td>
<input type="number" name="item_total_amount "value="item_total_amount
</td>
</tr>
{% endfor %}
</tbody></table>
<input type="number" name="total_amount" value="total_amount">
<input type="submit" value="Register">
</form>
I will appreciate a tutorial link or code base that can help me send this looped for fields to the database table
I have a form that uses jBox to provide additional info for some fields in tooltips. The text that is displayed depends on the value of the closest select-tag. jBox is executed on PageLoad (I create a single jBox which uses data-attributes to get title and content) and I then update the data-attributes in response to the change-event on the select-control.
Unfortunately that does not work, the tooltip stays with the initial value.
I have a cut-down repro with tooltip that illustrates the behaviour of not being updated (alertis used to show actual values of data-attributes after a change-event)
$(function() {
$("[data-jbox-content]").jBox("Tooltip", {
theme: "TooltipDark",
id: "jBoxTooltip",
getTitle: "data-jbox-title",
getContent: "data-jbox-content"
});
});
<link href="https://cdn.jsdelivr.net/gh/StephanWagner/jBox#v1.0.5/dist/jBox.all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/jBox#v1.0.5/dist/jBox.all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<body>
<table>
<tbody>
<tr>
<th>Variable</th>
<th colspan="2">Type</th>
<th>Description</th>
</tr>
<tr>
<td><label for="dt1">Car</label></td>
<td><select id="dtCar" class="form-control select2 font-fas" name="dtCar" onchange="$('#infoCar').data('jbox-title','blabla');$('#infoCar').data('jbox-content','dummy');alert($('#infoCar').data('jbox-title')+' / ' + $('#infoCar').data('jbox-content'))">
<option>Key</option>
<option selected="selected">Boolean</option>
<option>Ordinal</option>
<option>Nominal</option>
<option>Interval</option>
<option>Ratio</option>
</select>
</td>
<td><span id="infoCar" data-jbox-content="This field can have one of two values: On or Off, Yes or No, 1 or 0." data-jbox-title="Description of the Boolean Scale">
<i class="fas fa-info-circle"></i></span></td>
<td><input id="inCar" class="form-control" name="inCar" type="text" value="Do you own a car?"></td>
</tr>
<tr>
<td><label for="dt2">Age</label></td>
<td><select id="dtHouse" class="form-control select2 font-fas" name="dtAge" onchange="$('#infoAge').data('jbox-title','blabla');$('#infoAge').data('jbox-content','dummy');alert($('#infoAge').data('jbox-title')+' / ' + $('#infoAge').data('jbox-content'))">
<option>Key</option>
<option>Boolean</option>
<option>Ordinal</option>
<option>Nominal</option>
<option selected="selected">Interval</option>
<option>Ratio</option>
</select>
</td>
<td><span id="infoAge" data-jbox-content="This field can values from a defined interval, i.e. 0..200" data-jbox-title="Description of the Interval Scale">
<i class="fas fa-info-circle"></i></span></td>
<td><input id="inHouse" class="form-control" name="inAge" type="text" value="How old are you?"></td>
</tr>
</tbody>
</table>
</body>
There is a common misunderstanding of how jQuery uses .data() and .attr() methods.
.data() adds some internal data to the element itself and will not set an attribute.
To set a data-xxx attribute you need to use .attr(). See more here: https://api.jquery.com/attr/
Also, check out updated snippet:
$(function() {
$("[data-jbox-content]").jBox("Tooltip", {
theme: "TooltipDark",
id: "jBoxTooltip",
getTitle: "data-jbox-title",
getContent: "data-jbox-content"
});
});
<link href="https://cdn.jsdelivr.net/gh/StephanWagner/jBox#v1.0.5/dist/jBox.all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/jBox#v1.0.5/dist/jBox.all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<body>
<table>
<tbody>
<tr>
<th>Variable</th>
<th colspan="2">Type</th>
<th>Description</th>
</tr>
<tr>
<td><label for="dt1">Car</label></td>
<td><select id="dtCar" class="form-control select2 font-fas" name="dtCar" onchange="$('#infoCar').attr('data-jbox-title','blabla');$('#infoCar').attr('data-jbox-content','dummy');">
<option>Key</option>
<option selected="selected">Boolean</option>
<option>Ordinal</option>
<option>Nominal</option>
<option>Interval</option>
<option>Ratio</option>
</select>
</td>
<td><span id="infoCar" data-jbox-content="This field can have one of two values: On or Off, Yes or No, 1 or 0." data-jbox-title="Description of the Boolean Scale">
<i class="fas fa-info-circle"></i></span></td>
<td><input id="inCar" class="form-control" name="inCar" type="text" value="Do you own a car?"></td>
</tr>
<tr>
<td><label for="dt2">Age</label></td>
<td><select id="dtHouse" class="form-control select2 font-fas" name="dtAge" onchange="$('#infoAge').attr('data-jbox-title','blabla');$('#infoAge').attr('data-jbox-content','dummy');">
<option>Key</option>
<option>Boolean</option>
<option>Ordinal</option>
<option>Nominal</option>
<option selected="selected">Interval</option>
<option>Ratio</option>
</select>
</td>
<td><span id="infoAge" data-jbox-content="This field can values from a defined interval, i.e. 0..200" data-jbox-title="Description of the Interval Scale">
<i class="fas fa-info-circle"></i></span></td>
<td><input id="inHouse" class="form-control" name="inAge" type="text" value="How old are you?"></td>
</tr>
</tbody>
</table>
</body>
Given the HTML snippet below how can I, using page-object field accessors, get the second input field, the one with id="333:".
I can't use the id to identify the field as it's auto-generated.
Using page-object accessors I can get the embedded table and the correct cell but the cell object is a PageObject::Elements::TableCell which doesn't seem to have any methods that allow access to the embedded span and input field.
I can get the input field using native Watir accessors - i.e., browser.div( ... etc ...) but would prefer to use just page-object accessors if possible.
If not possible then I'll live with native Watir. Thanks
<div class="modalContent">
<table role="presentation" id="324:_layoutTbl" class="axial">
<tbody>
<tr>
<td>
<input id="326:" name="" value="" onchange="juic.fire("326:","_change",event);" onfocus="juic.fire("326:","_focus",event);" onblur="juic.fire("326:","_blur",event);" type="text">
</td>
</tr>
<tr>
<td class="sfTH">
<label for="332:">Users:</label>
</td>
<td>
<table class="noborder" role="presentation">
<tbody>
<tr>
<th>
<label id="336:" class="rcmFormLabel">Hiring Manager</label>
<label id="337:" for="333:" class="rcmFormLabe">Users, Hiring Manager</label>
</th>
<td><span class="autocompspan ">
<input class="autocompinput" id="333:" name="333:" onfocus="juic.fire("333:","_focus",event);" size="20" value="Bill Murray" role="combobox" type="text">
<input value="111111" id="333:_hidden" name="333:_hidden" type="hidden">
</span>
<div id="335:" style="display:none"><img alt="" class="globalFloatLeft">
<div id="335:_error" style="color:#ff0000">undefined is required</div>
<div style="clear:both;"></div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
After more experimenting I found the answer to my question. I declared the table accessor, e.g., div(:my_table, :class => 'modalContent').table.table then in the code, to get the input field in the first row I did my_text_field = my_table_element[0].text_field_element which returned the PageObject::TextField object in column 2 of row 1
I currently have two different forms on one inven.ejs file:
One for simple description:
///inven.ejs
<form method="POST" value="inven">
<div id="some-form" style="display: none;">
<table>
<tr>
<td><label for="item">Item</label></td>
<td><input type="text" name="item" required/></td>
</tr>
<tr>
<td><label for="text-box-value">Value</label></td>
</tr>
<tr>
<td><label for="comments">Comments</label></td>
<td><textarea rows="4" cols="50" required></textarea></td>
</tr>
<tr>
<td><input type="submit" /></td>
</tr>
</table>
</div>
</form>
and another for file upload:
///inven.ejs
<div id="fileUp">
<form id="fileUpload" name="fileUpload" enctype="multipart/form-data" method="post">
<fieldset>
<input type="file"id="fileSelect">
<input type="submit" name="upload" value="upload">
</fieldset>
</form>
</div>
In express, how can I differentiate between these two posts in my list.js file?
router.post('/list', function(req,res){
// ???
});
Do I need two routers? Am I completely doing this incorrectly?
Thank you!
EDIT:
Included an image, if it helps?
It makes sense to have forms post to a different address.
That is, <form id="fileUpload" action="file_upload" ... >
Then, if the form is found at http://server/my_form, it will post to http://server/file_upload
In your Node.js router you need to catch that and done.
If you still desire to send both forms to the same address, you can then use hidden fields.
Example: <input type="hidden" name="form_type" value="file_up_form">. Then in your Node.js you check for the argument form_type and check its value.
I know you like to see code, so here it is. All I want to do is to encrypt the password using SHA as it is entered. I have managed to encrypt the mysql database field to match it already.
I can't seem to find the correct syntax so I get a row of blobs instead of the password in clear text, which means it is not being sent to the server encrypted.
Thanks
<body>
<div id="container">
<div id="logo"><img src="images/Logo.jpg" alt="mycena" />
<div id="banner">
<h1>Shropshire Fungus Group</h1>
<p> </p>
</div>
</div>
<div id="ruler">
<hr />
</div>
</div>
<div class="menu"><ul class="nav" >
<li>Home</li>
<li>Membership</li>
<li>Resources</li>
<li>Gallery</li>
<li>Newsletters</li>
<li>Fixture List</li>
<li>Useful Links</li>
</ul>
</div>
<div id="intro">
<h2>Please complete your details to log in</h2>
<table>
<tr>
<td> Username: </td>
<td><input type="text" name="user" id="user" size="35" maxlength="50"/></td>
</tr>
<!-- password should be 8 characters or more in length -->
<tr>
<td> Password: </td>
<td><input type="text" name="upword" id="upword" size="40" maxlength="40"/></td>
</tr>
</table>
<p> </p>
<form action="loginphp170114.php" method="post" id="demo">
<input type="submit" value="Submit form" />
</form>
You'll need to use an external library such as this one, or else implement the sha1 algorithm yourself.
Note that sha1 is hashing, not encryption, and it's not a hash algorithm designed for storing passwords, so it's easily broken.