Thank you for the help in advance, this platform has always been very helpful. I have a question that is probably real simple but I am just missing it. On a previous thread I learned how to use check boxes to populate a text area. I almost have exactly what I need but the content in the text area is populating stacked and separated by comas and i just need it in paragraph form separated by comas. My holy grail is to be able to add a copy button below the text area to grab the produced content but I will take just the first task for now.
I apologize in advance for incorrect formatting.
Thanks Levi
Here is a link to the current working model
https://blog.autolinepreowned.com/levi/
This is the previous thread
How to add value to textarea when checkbox is checked
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
function updateTextArea() {
var allVals = [];
$('.taglist :checked').each(function(i) {
allVals.push((i!=0?"\r\n":"")+ $(this).val());
});
$('#video0_tags').val(allVals).attr('rows',allVals.length) ;
}
$(function() {
$('.taglist input').click(updateTextArea);
updateTextArea();
});
</script>
</head>
<body>
<div class="taglist">
<p>Section One</p>
<label><input type="checkbox" value="One Owner">One Owner</label>
<label><input type="checkbox" value="Factory Warranty">Factory Warranty</label>
<label><input type="checkbox" value="4x4">4x4</label>
<label><input type="checkbox" value="All Wheel Drive">All Wheel Drive</label>
<label><input type="checkbox" value="Leather">Leather</label>
<label><input type="checkbox" value="Navigation">Navigation</label>
<label><input type="checkbox" value="Sunroof">Sunroof</label>
<label><input type="checkbox" value="Panoramic Sunroof">Panoramic Sunroof</label>
<label><input type="checkbox" value="3rd Row">3rd Row</label>
<p>Section Two</p>
<label><input type="checkbox" value="HDR">HDR</label>
<label><input type="checkbox" value="High Speed">High Speed</label>
<label><input type="checkbox" value="Illustration">Illustration</label>
<label><input type="checkbox" value="Live Action">Live Action</label>
<label><input type="checkbox" value="Macro">Macro</label>
<label><input type="checkbox" value="Motion Design">Motion Design</label>
<label><input type="checkbox" value="Motion Graphics">Motion Graphics</label>
<label><input type="checkbox" value="Moving Installation">Moving Installation</label>
</div><br>
<textarea class="textfield" id="video0_tags" name="video0_tags" rows="10" cols="100"></textarea>
</body>
</html>
also here is the script
function updateTextArea() {
var allVals = [];
$('.taglist :checked').each(function(i) {
allVals.push((i!=0?"\r\n":"")+ $(this).val());
});
$('#video0_tags').val(allVals).attr('rows',allVals.length) ;
}
$(function() {
$('.taglist input').click(updateTextArea);
updateTextArea();
});
Related
I'm trying to get filtered data from a webform more quickly. Basically I want to use URL input to specify a date and to precheck a checkbox. I'm getting stuck with how to specify the check box as I'm not sure what the value should be.
<form action="/xxx/yyy" class="form-inline d-flex justify-content-end" method="get"> <div class="input-group input-group-lg mb-2">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</div>
<input type="text" name="from" value="" class="form-control datetimepicker-input" id="datetimepicker7" data-toggle="datetimepicker" data-target="#datetimepicker7" autocomplete="false">
<div class="input-group-append">
<button type="submit" class="btn btn-dark"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
</form>
####snip and skip to the part of the form I wish to pre-check####
<fieldset id="departureGatewayFilters">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="AMS" id="departureGatewayCheck_AMS">
<label class="form-check-label" for="departureGatewayCheck_AMS">
AMS
</label>
</div>
So far I'm using URL string: /xxx/yyy?from=2020-03-05 - what would I need next to pre-check the checkbox as well?
Thanks in advance!
Clare
Getting your checkbox checked and also getting value of the checkbox just through URL string is little bit troublesome. But you can try this :
You can assign unique name to the checkbox.
<input class="form-check-input" type="checkbox" name="checkbox_1" id="departureGatewayCheck_AMS">
And then what you can do is pass the value of checkbox through URL string. For example :
/xxx/yyy?from=2020-03-05&checkbox_1=test.
Now, using javascript you can parse URL strings and get your search params, compare it and get your checkbox checked.
<script lang="javascript">
var url_string = window.location.href ; //gets current URL
var url = new URL(url_string); // instantiate string as URL object
var c = url.searchParams.get("checkbox_1"); //get the params
if(c == "test") {
document.getElementById("departureGatewayCheck_AMS").checked = true; //checks your checkbox
}
</script>
Hope it helps ! Have a good day!
I think all you need to do is add a (checked="true") argument to your input tag your code should look like this then:
<div class="form-check">
<input class="form-check-input" checked="true" type="checkbox" value="AMS" id="departureGatewayCheck_AMS">
<label class="form-check-label" for="departureGatewayCheck_AMS">
AMS
</label>
</div>
Hope this helps
If you want to make the checkbox departureGatewayCheck_AMS checked by default, it is sufficient to edit its code like this:
<input class="form-check-input" type="checkbox" value="AMS" name="departureGatewayCheck_AMS" id="departureGatewayCheck_AMS" checked> AMS
If the checkbox is selected, since its "value" attribute is "AMS",your url (if you submit the form via GET) would be something like:
/xxx/yyy?from=2020-03-05&departureGatewayCheck_AMS=AMS
Complete solution for your requirement:-
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" integrity="sha256-yMjaV542P+q1RnH6XByCPDfUFhmOafWbeLPmqKh11zo=" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
<div class="container">
<form class="form-inline d-flex justify-content-end" method="get"> <div class="input-group input-group-lg mb-2">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</div>
<input type="text" name="from" value="" class="form-control datetimepicker-input" id="datetimepicker7" autocomplete="false">
<div class="input-group-append">
<button type="submit" class="btn btn-dark"><i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
<fieldset id="departureGatewayFilters">
<div class="form-check">
<input class="form-check-input" name="checkname" type="checkbox" value="AMS" id="departureGatewayCheck_AMS">
<label class="form-check-label" for="departureGatewayCheck_AMS">
AMS
</label>
</div>
</fieldset>
</form>
</div>
</body>
<script type="text/javascript">
$(function () {
var url_string = "https://www.example.com/page?from=2020-12-12&checkname=1";//window.location.href ; //gets current URL
var url = new URL(url_string); // instantiate string as URL object
var date=url.searchParams.get("from");
var check = url.searchParams.get("checkname"); //get the params
alert(date);
alert(check);
if(check) {
$( "#departureGatewayCheck_AMS" ).prop( "checked", true );
}
$('.datetimepicker-input').datetimepicker({
format: 'YYYY-MM-DD',
defaultDate: date,
});
});
</script>
I'm building an express app which comprises ejs and bootstrap for rendering views, node and express for server side and mongodb for storage.
I have a form (contained in a modal) in which I can post data. After submitting the form, the values are saved to mongodb.
Here's the snippet for edit:
<td><%= cats.image %></td>
<td><a type="button" data-toggle="modal" data-target="#editCategory" href="#">Edit</a>
// without using the modal above, I'll have to create a new page to edit only one item
// I think it's a waste of page space and bad UX, so I am going with the modal
<!--<a href="/admin/categories/edit-category/<%= cats._id %>">--> // I want to get the values from this id and show in the modal
<!--<button type="button" class="btn btn-primary btn-sm">Edit</button>-->
<!--</a>-->
</td>
When I click on the edit button, I want to get the id of the item and retrieve it's values to display in the modal.
Here's the full modal view:
<!-- Edit Category Modal -->
<div class="modal fade" id="editCategory" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form action="/admin/categories/edit-cateory/<%= %>" method="post" enctype="multipart/form-data">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
<h4 class="modal-title" id="myEditCategoryLabel">Edit Category</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Title</label>
// this value should come from the category id but don't know how to pass it
<input value="<%= %>" name="title" class="form-control" type="text" placeholder="Category Title"> <br>
<label>Upload Image</label>
<input class="form-control selImg" type="file" accept="image/*" onchange="showImage.call(this)">
<img src="#" class="imgPreview" style="display: none; height: 100px; width: 100px">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Save Edits</button>
</div>
</form>
</div>
</div>
</div>
How can I pass the data from mongodb to the modal using ejs?
Any help will be much appreciated.
Store your ID somewhere: hidden inputs or data-attributes.
<tr data-id="<%= cats.id %>">
<td><%= cats.image %></td>
<td>
<a type="button" class="edit" href="#">Edit</a>
</td>
</tr>
Then, create an onclick event handler such that, upon clicking on the button,
it will fetch the extra data via AJAX and open the modal dynamically after you get a response.
$('a.edit').click(function (e) {
e.preventDefault();
var tr = $(this).closest('tr'),
modal = $('#editCategory');
// make AJAX call passing the ID
$.getJSON('/admin/categories/get-cateory/' + tr.data('id'), function (data) {
// set values in modal
modal.find('form').attr('action', '/admin/categories/get-cateory/' + tr.data('id') );
modal.find('[name=title]').val( data.title );
// open modal
modal.modal('show');
});
});
You will need to create a route for fetching a single object (I'll leave that to you)
app.get('/admin/categories/get-cateory/:id', function (req, res) {
// TODO: fetch data using passed ID
// once you have the data, simply send the JSON back
res.json(data);
});
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.
when I am using two button sets, they do not display on same line. Is there a way to display both of these on the same line? Here is my code
html:
<div id="view">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Regular</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Investments</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">All</label>
</div>
<div id="lod">
<input type="radio" id="lod_S" name="radio" checked="checked" /><label for="radio2">Summary</label>
<input type="radio" id="lod_D" name="radio" /><label for="radio3">Detail</label>
</div>
javascript:
$('#view,#lod').buttonset();
Thanks in advance for the help.
The default styling for div elements causes one to be below the other. You can substitute span here.
jsFiddle
Or use CSS to change the styling of your divs:
<style type="text/css">
#view, #lod {
display: inline;
}
</style>