We Keep Coding

i try to make a form in NodeJs for searching a user in mongodb by telephone number using query routing, i don't know why this not working?

What is the wrong with this code? I got the exactly mobile number on the console but not on query routing on /search_user?mob ?
<input type="tel" name="message" id="mobile_input" value="">
<!--getting mobile no. from the input tag -->
<script type="text/javascript" defer>
e => {
e.preventDefault();
var mobInput = document.querySelector('#mobile_input');//get the input tag.
var moby = mobInput.value;//get mobile no.
console.log(moby);//be sure from the variable mob
mobInput.value='';//reset the input tag.
return moby;
}
</script>
<!-- query routing on /search_user?mob -->
Search

I tried something like this and this seems to work.
<form>
<input type="tel" name="message" id="mobile_input">
<button type="submit" onclick="handleSearch(document.getElementById('mobile_input').value)">Search</button>
</form>
<!--getting mobile no. from the input tag -->
<script type="text/javascript" defer>
// const handleChange = (value) => {
// var mobInput = value
// console.log(mobInput)
//
// }
const handleSearch = (input) => {
var searchValue = input;
console.log("This is the search value " + searchValue)
var url = '/search_user?mob=' + searchValue;
console.log(url)
window.location.href = url;
}
</script>
Explanation: I changed the a href element for a button element. Every time the button is clicked (onclick) the function handleSearch is called. This function takes as input the value of the input element with ID "mobile_input". Of course, you can clean up the function a bit more. After merging the url basis ('/search_user?mob=') with the input value (searchValue), the handleSearch function should redirect to the url (calling window.location.href). This last one you can of course change for the correct call to the server. Hope this helps.
Side note: you will see that there is a commented-out handleChange function. You could call this function in the input element to keep track of your changes in the console. this function is called using onChange, just like you use onClick with the search button.
For more info:https://www.w3schools.com/jsref/event_onchange.asp

Send selected data back to original window

I have a file called bpSearch. Inside bpSearch, I have a MODAL window, called addNewModal. Within addNewModal, I have 2 INPUT fields called partnerName and partnerCode. I have a button that once clicked, opens into another MODAL window, called searchPartnerModal.
Here is the a portion of the FORM inside addNewModal:
<form action="bpSearch.php" method="get">
<input type="text" readonly id="partnerName" name="partnerName" />
<input type="text" readonly id="partnerCode" name="partnerCode" />
Go
</form>
When the user clicks GO, it opens searchPartnerModal.
searchPartnerModal is where the user will enter either a code or a name (doesn't have to be both). But upon hitting SEARCH, I use an AJAX call that returns JSON that I parse and eventually return in a UL field called pNames. We're still inside searchPartnerModal.
Here is the FORM inside searchPartnerModal:
<form action="bpSearch.php" method="get">
<input type="text" id="pNameSearch" name="pNameSearch" />
<input type="text" id="pCodeSearch" name="pCodeSearch" />
<input type="button" class="btn" id="pSearch" name="pSearch" value="search" />
</form>
When the user enters a name, I use jquery to send it over to a PHP script that will then return the data in a UL tag.
Here is the jquery that will search if the user enters a name:
$('#pSearch').on('click', function()
{
var partnername = $('#pNameSearch').val();
if($.trim(partnername) != '')
{
$.post('api/pNameSearch.php', {partnername: partnername}, function(data)
{
var obj = JSON.parse(data);
$('#pNames').empty();
var htmlToInsert = obj.map(function (item)
{
return '<li><a id="getPInfo" href="javascript:;"
onclick="getPInfo()" data-selname="'+item.FULL_NAME+'"
data-selcode="'+item.PARTNER_CODE+'">'
+ item.FULL_NAME + ' - '
+ item.PARTNER_CODE + '</a></li>';
}).join('');
$('#pNames').html(htmlToInsert);
});
};
});
With this code, I am able to send the name to search the database table for a valid name. The data is returned via JSON and is parsed and displayed inside the UL tag (called pNames) as LI tags, each with an A tag with their own data-attributes, called data-selname and data-selcode.
Now what I need to do is once the user clicks on one of the returned data links inside pNames, I need to send it back to the previous modal window, addNewModal.
This is where I'm stuck.
If you look inside the Jquery above, after I parsed the JSON, you will see that I created another Javascript function inside the A tag of each returned piece of data, called getPInfo().
Here is what I got so far for the function getPInfo() :
function getPInfo()
{
var selname = ($('#getPInfo').attr('data-selname'));
var selcode = ($('#getPInfo').attr('data-selcode'));
}
At this point, I can alert both variables (selname and selcode) and get them to display in an alert window.
What I want to do is send both of those variables back to addNewModal in the respective INPUT fields, called partnerName and partnerCode.
So selname will go to partnerName and selcode will go to partnerCode.
I didn't display the PHP script that returned the data.

Change the anchor id=getPInfo to class=getPInfo since you have multiple anchors. Next, handle the click event of the anchor and extract the data attributes and set the corresponding form elements in the addNewModal form. Following should work based on the markup i see so far.
$(function(){
$('body').on('click', 'a.getPInfo', function (e) {
var $a = $(e.srcElement || e.target);
$('#partnerName').val($a.attr('data-selname'));
$('#partnerCode').val($a.attr('data-selcode'));
$('#searchPartnerModal').modal('hide'); //assuming bootstrap modal
});
});

Cannot trap undefined error in input form submission

Using parse.com and javascript/jquery.
The below code should capture the input from the user in the "friendsearch" input box.
Once the submit button is clicked, it should query the parse.com backend and find out if the user exists. At the moment I keep getting "undefined" returned in "friendName" which I cannot spot why or what is causing the error?
<form class="Find Friend">
<div class="error" style="display:none"></div>
<input type="text" id="friendsearch" placeholder="Find Friend" class="input-field" required/>
<button type="submit" class="btn btn-login">Find</button>
</form>
var friendName;
$('#friendsearch').on('keyup', function(e) {
friendName = $(this).val();
});
var friendFinder = Parse.Object.extend("_User");
var query = new Parse.Query(Parse.User);
query.equalTo("username", friendName); // find users that match
query.find({
success: function(friend) {
alert(friendName);
},
error: function (error) {
//Show if no user was found to match
alert("Error: " + error.code + " " + error.message);
}
});

Ok, I revised your code so that the friendName variable actually contains the contents of the input box on your form. The problem was that your original code was trying to get access to the contents of your input box before it was even loaded into the DOM.
Try this for your HTML:
<form class="Find Friend">
<div class="error" style="display:none"></div>
<input type="text" id="friendsearch" placeholder="Find Friend" class="input-field" />
<button id="find_button" type="submit" class="btn btn-login">Find</button>
</form>
And this for your javascript:
var friendName;
function findFriend(){
friendName = $('#friendsearch').val();
alert(friendName);
var friendFinder = Parse.Object.extend("_User");
var query = new Parse.Query(Parse.User);
query.equalTo("username", friendName); // find users that match
query.find({
success: function(friend) {
alert(friendName);
},
error: function (error) {
//Show if no user was found to match
alert("Error: " + error.code + " " + error.message);
}
});
}
$('#find_button').click(function(e){
findFriend();
});
I updated the live jsFiddle example here: http://jsfiddle.net/LWA48/2/
In the jsFiddle example, the Parse object prints {"error": "Please use POST request"} when you click the button, but at least your friendName variable contains the name you typed in the box! Hopefully, this can take you the rest of the way.

I believe the problem is where you're assigning friendName = $(this).val();
Try using e.target to get a reference to the value currently in the text input box. I'm not sure if it's e.target off the top of my head but I'm fairly certain that you want a property contained inside the e argument.
Try $(e.target).val() or $(e.currentTarget).val() something like that instead of $(this).val();
What I also like to do when I'm trying to figure out why something isn't being set properly is to set a breakpoint in the chrome debugger. In this case, you can put 'debugger' in your code where you want the browser to break on. So in your example, you could write this:
$('#friendsearch').on('keyup', function(e) {
debugger
friendName = $(this).val();
});
And in your Chrome Dev Tools you can inspect the value of e and determine what properties and values are available.

How do I remove an upload item from a form?

I have a form in which I allow files to be loaded using file input. I want to allow users to delete the upload item but I wasn't able to figure it out. Here is what I have tried to do so far:
<form action="insert.php" method="POST" align="right" id="post_form">
<input type="file" id="upload_file" onChange="display()">
<div id="show_button" onClick="remove_pic()"> remove </div><br>
</form>
function remove_pic() {
alert('check');
var file_loaded = document.getElementById("upload_file");
file_loaded = null; // here i try to remove the object
}

Upon running your code through JSFiddle and checking the Chrome dev console, I kept receiving a "Function not defined" error message.
I found that explicitly putting the function you're trying to call directly into the global scope allowed it to be recognized as defined. You'll also want to use a blank string instead of null and append a change to the ".value" property to your "file_loaded" variable.
Instead of
function remove_pic() {
alert('check');
var file_loaded = document.getElementById("upload_file");
file_loaded = null; // here i try to remove the object
}
try
window.remove_pic = function() {
alert('check');
var file_loaded = document.getElementById("upload_file");
file_loaded.value = ""; // here i try to remove the object
};
Example JSFiddle: http://jsfiddle.net/xu6SD/1/

refresh text box when a particular value is matched

I have a text box in index.jsp and after writing something i am calling a jsp by jquery. But my requirement is if a particular value will be matched in server side then how can i auto refresh that text box? It means suppose i entered apple then by onkeyup event i am sending the name(apple) to check.jsp and in this jsp page, I have kept apple in a string. So now an alert will come in index.jsp that apple already exists and simulatenously that text box will be auto refreshed. How can i do it? I am a beginner to this field.
index.jsp
<script type="text/javascript">
$(document).ready(function() {
$("#textbox").keyup(function () {
$.getJSON('check.jsp', {
textboxname: this.value
});
});
});
</script>
inside body
<input type="text" id="textbox" name="textboxname"/>
check.jsp
String textboxname=request.getParameter("textboxname");

on keyup send the value to the server and if it matches return true or false, then in the success handler check what is returned if its true refresh and not do something
$("#textbox").keyup(function () {
$.getJSON('check.jsp', {
textboxname: this.value
},function(data){
if(data.isTrue){
alert("the value already exists");
$("#textbox").val(''); //clear the text box
}
else
//do something
});
});
});
on the server not the exact servlet code but you'll get the idea
JSONObject match = new JSONObject();
//if value matches
match.put("isTrue","true");
else
match.put("isTrue","false");
response.setContentType("application/json");
response.getWriter().write(match.toString());true