Develop Reference

Correct way to send data between html, JS and Node to MongoDB

I have a table in my view that is getting populated from the DB.
<td class='schedule-td' id='vname-<%=index%>'><%=name%></td>
<td class='schedule-td' id='vphone-<%=index%>'><%=phone%></td>
<td class='schedule-td' id='vmeal-<%=index%>'><%=mealDesc%></td>
Each row has the above 3 fields plus a button and when the button is clicked a pop-up comes up where the user can enter that info, if its empty and then I need to update the data on the DB for that entry.
The pop-up is a form which gets submitted to a post route at the pop-up itself.
<div class="popup-div hide" id='volunteerDiv'>
<form action="./<%= id %>" method="POST">
<input type="hidden" name="userID" id='userID'>
<h5 class='header'>Please enter your details</h5>
<div class="input-group">
<label for="name">name:</label>
<input type="text" name="name" id="name">
</div>
<div class="input-group">
<label for="phone">phone#:</label>
<input type="text" name="phone" id="phone">
</div>
<div class="input-group">
<label for="desc">Meal</label>
<input type="text" name="desc" id="desc"
placeholder="What will you be bringing?">
</div>
<button type="submit">Submit</button>
</form>
</div>
The thing is I need to know which row or entry needs to be updated at the moment what I am doing is storing the _id from mongo in a data-attribute on each button and then when the button is clicked I pass that value to the hidden field on the form and submit the form.
Button
<td class='td'>
<button class='btn' id='addBtn-<%=index%>'
data-user_id='<%= userID %>'>Add</button>
</td>
JS
userID.value = event.target.dataset.user_id;
For some reason though I feel like im doing this incorrect and too convoluted and like maybe its violating the MVC principles by having the DB id value in the html.
Also that the id from the db can be seen in the dev tools seems bad to me.
Is there a better way of knowing/identifying what db entry the table row that is being interacted belongs to and sending that to the back-end???
Ive thought of using the index of the row to match to the index of the db which would help with not showing the id from the DB in the view or handling the post with Javascript but both methods still seem like they would be missing something.

adding like button next to each list item ajax

I am trying to add a like button next to a list of 'destinations'. however, I'm having a really hard time figuring out how to place a button right next to each list item. any help???
Here is my dashboard.html.erb file:
<div class="destination-list">
<h1>Destinations</h1>
<table id="destTable">
<tr class="table-initial">
<td>Name:</td>
<td>Address:</td>
<span class="likebtn-wrapper" data-white_label="true" data-identifier="item_1" data-show_dislike_label="true" data-popup_disabled="true" data-share_enabled="false"></span>
<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
<!-- <td>Delete:</td> -->
</tr>
</table>
<div class="big create">+</div>
</div>
<div class="submit">
<h1>Create Destination</h1>
<form method="get" action="index.html" class="form">
<input type="text" placeholder="Name" class="name-input" name="name" />
<input type="text" placeholder="Address" class="address-input" name="address" />
<input type="submit" class="submit-input my-button" id="create-button"></input>
</div>

Your source parameter in your javascript function call is missing the http: protocol part.
You should edit the tags in your question, though. Your code shows no Rails or Ruby, and your question is purely about Javascript.
On a side note, you should look up unobtrusive javascript :
Rails guides
RailsCasts episode
and probably jQuery as well.

change focus on clicking enter javascript html form

I am very much new to HTML CSS and java script i have a personal query. I am creating a software in which i have few text boxes and drop downs. i want to change focus of the the text box automatically when enter button is pressed.It should travel in a specific way every time and once all text box are over it should submit automatically when enter is pressed. I am quite good in PHP so i can code the rest of the parts. Kindly help me in this please .
I have not tried anything on this so far
` <table class="labelboxs">
<tr>
<td class="name" colspan="2" style="width:219px; float:left; margin-left:20px;">
<input id="ph_number" type="text" required="" onblur="checkus(this.value)" style="width:200px;" placeholder="Phone Number" name="uname">
</td>
<td class="name" colspan="2" style="float:left; width:219px; margin-left:20px;">
<input id="Name" type="text" required="" onblur="checkpassstr(this.value)" style="width:200px;" placeholder="Name" name="pswd">
</td>
</tr> `
kindly check it and give me a solution

Try adding this to your code
onkeydown="javascript:if (event.keyCode == 13) document.getElementById('name').focus()"
where 'name' is the ID of the next input box.
There are probably better options using jquery, but if you're trying to keep it simple, this should work.

Edit one row in a list of records?

I have a list of records, e.g. addresses. It's displayed using the following html5/knockout code.
<section id="lists" data-bind="foreach: addresses, visible: addresses().length > 0">
<article>
<div>
<button>Edit</button>
<span data-bind="text: DisplayAddress"></span>
</div>
<p class="error" data-bind="visible: ErrorMessage, text: ErrorMessage"></p>
</article>
</section>
I want to show a table of editable input boxes () under the row after Edit button is clicked. Is there any way without generate a big html5 code?
I want to show the following editing html below the <div> after click the Edit button. (not completed)
<div>
<table>
<tr>
<th>Street address</th><th>Apt#</th><th>City</th><th>State</th><th>Zip</th>
</tr>
<tr>
<td><input type="text" class="col1"/></td>
<td><input type="text" class="col2"/></td>
<td><input type="text" class="col3"/></td>
<td><input type="text" class="col4"/></td>
<td><input type="text" class="col5"/></td>
</tr>
</table>
<button data-bind="click: saveAddress">Save</button>
<button data-bind="click: cancelAdding">Cancel</button>
</div>

There are a few reasonable options:
1) Use the if binding to control the rendering (not just visibility) of a block of HTML. Each row of data would have an observable property called isEditing. Then, add behavioral functions to control edit/cancel/etc. Your article template would include something like the following:
<div data-bind="if:isEditing">
<input type="text" data-bind="value: DisplayAddress" />
</div>
2) If it's just one field, you might want to create a custom binding handler that adds the behavior you want to an element (it would dynamically add/remove a field). There are a few good examples on Stackoverflow of this technique.

How to hide a file input item in a form?

I'm developing a web page that lets user upload a font file, but the requirement is to display the font name after user selects a file, then he can decide to upload it or not, the font name is a property in the font file, the file name might be "123.ttf", but when you right click on the font file and look into it "Title" preperty, it's called "ACME Explosive Bold", so my Javascript should ideally find the "tilte" property of this font, but after lots of research, I was told JS can't get this property, while on the other hand I've found a piece of Java code that can get it.
So now I'm trying to hide a 2nd form on the page, with an input field whose value will be the user selected file from the first form, when user selected a file but before he clicks the first form's submit button, my JS calls the 2nd form with user selected file, submit it and run a servlet to find it's "Title" and come back and display it on the page, then delete that file on the server, because user has never officially submitted it.
So my question is how to hide this 2nd form with it's own input file field and browse button on the page, I need the form tag so I can simulate a submit. But I don't want users to see it ?
Here is my code so far :
![<div class="body">
<h1>Upload Font</h1> <%-- \[+\] --%>
<s:form namespace="/font" action="add" method="POST" enctype="multipart/form-data">
<div class="dialog">
<table>
<tbody>
<tiles:insertAttribute name="form" />
<tr class="prop">
<td valign="top" class="name required">
<label for="description">Font File:</label>
</td>
<td valign="top">
<s:file name="file" size="62" theme="simple" id="fname" onchange="fileUpload('/pages/font/getFontTitle.jsp',value,this.files\[0\])"/>
</td>
</tr>
<tr class="prop">
<td>
<span class="button"><s:submit/></span>
</td>
</tr>
</tbody>
</table>
</div>
</s:form>
<s:form namespace="/font" action="hiddenForm" method="POST" enctype="multipart/form-data">
<div class="dialog">
<table>
<tbody>
<tr class="prop">
<td valign="top">
<s:file name="file" size="62" theme="simple" id="fname_1"/>
</td>
</tr>
</tbody>
</table>
</div>
</s:form>
</div>]

You can hide the second form using CSS property visibility : hidden.
<s:form namespace="/font" style ='visibility:hidden' action="hiddenForm" method="POST" enctype="multipart/form-data">