Develop Reference

javascript function sets the value of a form input field, but then the value disappeared

I'm trying to do a live database search using ajax with a form input field.
The whole thing runs so far that i can select a text from the proposed list.
The corresponding event "livesearchSelect" is also addressed, the value of the input field is set. Unfortunately the set value is missing in the form.
I have no clue what is going on, someone can throw some hints at me pls ?
screenshot
html:
<form name="demoform" id="demoform" action="" method="post" >
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-4">
<input type="text" name="name" id="name" value="a value" class="form-control" >
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-4">
<input type="text" name="email" id="email" value="" class="form-control" >
</div>
</div>
<div class="form-group row">
<label for="search" class="col-sm-2 col-form-label">Live Search</label>
<div class="col-sm-4">
<input type="search" name="search" id="search" value="" class="form-control" oninput="livesearchResults(this, '/livesearch/Album');">
<ul class="list-group" id="search-results" style="display:none">
<li class="list-group-item">?</li>
</ul>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"></label>
<div class="col-sm-4">
<input type="submit" name="submit" value="Submit" id="submit" class="btn btn-primary" />
</div>
</div>
</form>
javascript:
function livesearchResults(src, dest){
var results = document.getElementById(src.id + '-results');
var searchVal = src.value;
if(searchVal.length < 1){
results.style.display='none';
return;
}
var xhr = new XMLHttpRequest();
var url = dest + '/' + searchVal;
// open function
xhr.open('GET', url, true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var text = xhr.responseText;
results.style.display='inline';
results.innerHTML = text;
console.log('response from searchresults.php : ' + xhr.responseText);
}
}
xhr.send();
}
function livesearchSelect(src) {
var input_element = document.getElementById(src.parentElement.id.split("-")[0]);
input_element.defaultValue = src.text;
input_element.value = src.text;
}
php controller:
<?php
namespace controller;
use database\DBTable;
class livesearch extends BaseController {
public function index() {
echo "nothing here";
}
public function Album($input) {
$table = new DBTable('Album');
$results = $table->where('Title',$input.'%', 'like')->findColumnAll('Title', '', 6);
foreach ($results as $key => $value)
echo ''.$value.'';
}
}

Clicking an anchor element with an href attribute, even when blank, will load the linked page, which is what you see happening here.
One solution would be to prevent the default action for the link (by e.g. returning false in the handler or calling Event.preventDefault), but a better design would be to replace the <a> elements (which aren't actually links) with something more semantically appropriate. Given that the consumer expects a sequence of <li>, the simplest solution is to replace the <a> in the PHP controller with <li>. The result would still have a higher degree of coupling than is desirable; the HTML classes and click handler couple the results tightly to the specific search form, rather than representing the resource as its own thing.
Not that text is not a DOM-standard property of HTML elements; you should be using textContent or innerText instead.

How to submit asp.net core razor pages form without reloading page

I have tried everything I have Googled to get this to work without success. I am working with a single page layout that has a contact form. The code seems to fire correctly and sends the form values to the page model but then it reloads the page. The expected outcome should be, submit the form values to the page model without reloading. Can someone show me how to do this?
Page Model
public class IndexModel : PageModel
{
[BindProperty]
public ContactModel Contact { get; set; }
public void OnGet()
{
}
public void OnPostSendEmail()
{
if (ModelState.IsValid == false)
{
}
else
{
}
}
}
Form
<form method="post" role="form" class="email-form">
<div class="form-row">
<div class="form-group col-md-6">
<label for="name">Your Name</label>
<input type="text" asp-for="Contact.Name" value="Gekko" name="name" class="form-control" id="name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validate"></div>
</div>
<div class="form-group col-md-6">
<label for="name">Your Email</label>
<input type="email" asp-for="Contact.Email" value="someone#email.com" class="form-control" name="email" id="email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validate"></div>
</div>
</div>
<div class="form-group">
<label for="name">Subject</label>
<input type="text" asp-for="Contact.Subject" value="Work" class="form-control" name="subject" id="subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validate"></div>
</div>
<div class="form-group">
<label for="name">Message</label>
<textarea class="form-control" asp-for="Contact.Message" name="message" rows="10" data-rule="required" data-msg="Please write something for us"></textarea>
<div class="validate"></div>
</div>
<div class="mb-3">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
</div>
<div class="text-center"><button id="submit">Send Message</button></div>
</form>
Javascript
$('form.email-form').submit(function (e) {
e.preventDefault();
...some form validation
$.ajax({
type: "POST",
url: '/index?handler=SendEmail',
data: str,
success: function(msg) {
if (msg == 'OK') {
this_form.find('.loading').slideUp();
this_form.find('.sent-message').slideDown();
this_form.find("input:not(input[type=submit]), textarea").val('');
} else {
this_form.find('.loading').slideUp();
this_form.find('.error-message').slideDown().html(msg);
}
}
});

Razor Pages are designed to be automatically protected from cross-site request forgery (CSRF/XSRF) attacks. So the first thing is to modify your ajax to include token in header:
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
And configure the antiforgery service to look for the X-CSRF-TOKEN header :
services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
Below article is for your reference :
Handle Ajax Requests in ASP.NET Core Razor Pages
And OnPostSendEmail is void type so no value returned, if you want to return something from server side and fill html in success function of ajax , you can return JsonResult in OnPostSendEmail method.

Node.js Sails html data using "POST" method can not pass to controller

I am new to MVC.
When I want to pass the form data from ejs file to controller, it does not work.
Create.ejs file
<!--create.ejs-->
<h2 class="col-sm-offset-1">Person Create form</h2>
<form action="/person/create" method="POST" class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">Name: </label>
<div class="col-sm-8">
<input class="form-control" name="Person[name]" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Age: </label>
<div class="col-sm-8">
<input class="form-control" name="Person[age]" type="number"
min="0" max="120">
</div>
</div>
<button class="btn btn-default col-sm-offset-2" type="submit" value="ADD">Submit</button>
PersonController.js
module.exports = {
create: function(req, res) {
if (req.method == "POST") {
Person.create(req.body.Person).exec( function(err, model) {
return res.send("Successfully Created!");
});
} else {
return res.view('person/create');
}
},
The result is that it cant get inside the (req.method == "POST") condition.
Give me 404 error.

A 404 is a not found result.
When POSTing ensure you are targeting your Controller functions try:
'POST /person/create': 'person/PersonController.create',
Though why do you have a subfolder named person when you are using a controller?
Using Actions
In Sails v1.0 you would separate your controller functions into more manageable actions. A sub folder api/controllers/person makes more sense now.
Your routes.js file would read 'POST /person/create': {action: 'person/create'},
For simplicity I have removed req.body.Person as an array...
<form action="/person/create" method="POST" class="form-horizontal">
<input type="hidden" name="_csrf" value="<%= _csrf %>" />
<div class="form-group">
<label class="control-label col-sm-2">Full Name: </label>
<div class="col-sm-8">
<input class="form-control" name="fullName" placeholder="John Johnson" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Age: </label>
<div class="col-sm-8">
<input class="form-control" name="age" type="number" min="0" max="120">
</div>
</div>
<button class="btn btn-default col-sm-offset-2" type="submit" value="ADD">Submit</button>
</form>
then your async function would be like...
module.exports = {
friendlyName: 'Create Person.',
description: 'Creating a new person.',
exits: {
success: {
description: 'Person Created successfully.',
viewTemplatePath: 'person/review',
}
},
fn: async function (inputs, exits) {
if (!this.req.me) throw {redirect: '/'};
let params = this.req.allParams();
let person = await Person.create(params).fetch();
return exits.success({person:person});
}
}

Like #Tejashwi suggested you need to change your route to a POST.
'POST /api/v1/create': { action: 'create/person-create-form' },

Save Image in JSON for Rest

I am currently coding on a project for school, which should be a picture sharing website.
Spring Framework is handling the database as well as the rest interface. On the rest interface I have a RemoteImage, which represents an Image saved in the Database. I also have Getters, Setters and Cunstructors in there, but did not copied it in here.
#XmlRootElement
public class RemoteImage {
private Long id;
private String name;
private String contentType;
private byte[] content;
private Date createdAt;
private String owner;
private String camera;
private String lens;
private String aperture;
private String focalLength;
private String shutterSpeed;
private String ISO;
private String description;
private Long ownerId;
private Long categoryId;
....
In the Rest Resource I have the addImage function which converts the RemoteImage from the Rest into a Image for storing in the Database. The RemoteImage does not contain votes.
#POST
#Transactional
public void addImage(RemoteImage remoteImage) {
try {
Image image = new Image(
remoteImage.getName(),
remoteImage.getContentType(),
remoteImage.getContent(),
remoteImage.getCreatedAt(),
remoteImage.getOwner(),
remoteImage.getCamera(),
remoteImage.getLens(),
remoteImage.getAperture(),
remoteImage.getFocalLength(),
remoteImage.getFocalLength(),
remoteImage.getISO(),
remoteImage.getDescription(),
remoteImage.getOwnerId(),
remoteImage.getCategoryId()
);
service.save(image);
} catch (DataIntegrityViolationException e) {
sendError(409, "Image could not be stored. " + e.toString());
}
}
I tested this function with following Test:
#Test
public void testImageUpload() throws URISyntaxException, IOException {
login(james.getEmail(), "password");
RemoteImage image = createTestRemoteImage("test", james);
List<Image> images = r.path("image")
.header(AUTHENTICATION_HEADER, createAuthenticationHeader("kai#ima.at", "password"))
.accept(MediaType.APPLICATION_JSON)
.get(new GenericType<List<Image>>() {
});
assertThat(images.size(), is(0));
r.path("image").header(AUTHENTICATION_HEADER, createAuthenticationHeader("kai#ima.at", "password")).post(image);
List<Image> images1 = r.path("image")
.header(AUTHENTICATION_HEADER, createAuthenticationHeader("kai#ima.at", "password"))
.accept(MediaType.APPLICATION_JSON)
.get(new GenericType<List<Image>>() {
});
assertThat(images1.size(), is(1));
}
private RemoteImage createTestRemoteImage(String name, Customer customer) throws URISyntaxException, IOException {
byte[] bytes = FileUtils.readFileToByteArray(new File(getClass().getResource("/images/test.jpg").toURI()));
RemoteImage image = new RemoteImage(name, "image/jpeg", bytes, bytes, new Date(), customer.getEmail(), "Samsung NX300M", "Minolta MD 1.4", "1.4", "50", "2000", "200", "Test Image description", customer.getId(), 1L);
return image;
}
This seems to work fine so far, but in the Front End, in my case AngularJS, where I have a controller for adding an Image.
controllers.controller 'ImageAddController', ['$scope','$routeParams','$location','Image', ($scope, $routeParams, $location, Image) ->
$scope.image = {name:"",description:""}
$scope.error = null
$scope.add = ->
Image.save $scope.image,
(text,headers,context) ->
$scope.error = null
$location.path('/images/')
(request) ->
$scope.error = request.data
]
The matching view for that controller is the following
<div class="body-content">
<h1>Add Image</h1>
<div class="panel col-lg-8 col-offset-2">
<div class="panel-heading">
<h3 class="panel-title">New Image</h3>
</div>
<div class="alert alert-danger" data-ng-bind="error" data-ng-show="error"></div>
<form novalidate name="imageForm" class="css-form">
<fieldset>
<div class="form-group" >
<label for="name" class="control-label">Name</label>
<input type="text" class="form-control" id="name"
data-ng-model="image.name" required name="name"/>
</div>
<div class="form-group">
<label for="description" class="control-label">Description</label>
<input type="text" class="form-control" id="description"
data-ng-model="image.description" required name="description"/>
</div>
<div class="form-group">
<label for="category" class="control-label">Category</label>
<input type="text" class="form-control" id="category"
data-ng-model="image.categoryId" name="category"
required />
</div>
<div class="form-group">
<label for="camera" class="control-label">Camera</label>
<input type="text" class="form-control" id="camera"
data-ng-model="image.camera" name="camera"
required />
</div>
<div class="form-group">
<label for="lens" class="control-label">Lens</label>
<input type="text" class="form-control" id="lens"
data-ng-model="image.lens" name="lens"
required />
</div>
<div class="form-group">
<label for="aperture" class="control-label">Aperture</label>
<input type="text" class="form-control" id="aperture"
data-ng-model="image.aperture" name="aperture"
required />
</div>
<div class="form-group">
<label for="focalLength" class="control-label">Focal length</label>
<input type="number" class="form-control" id="focalLength"
data-ng-model="image.focalLength" name="focalLength"
required />
</div>
<div class="form-group">
<label for="shutterSpeed" class="control-label">Shutter speed</label>
<input type="text" class="form-control" id="shutterSpeed"
data-ng-model="image.shutterSpeed" name="shutterSpeed"
required />
</div>
<div class="form-group">
<label for="ISO" class="control-label">ISO</label>
<input type="number" class="form-control" id="ISO"
data-ng-model="image.ISO" name="ISO"
required />
</div>
</fieldset>
<div class="btn-toolbar">
<button class="btn btn-primary" data-ng-click="add()"
data-ng-disabled="customerForm.$invalid">Save</button>
Cancel
</div>
</form>
</div>
</div>
My question is how do let the user upload a picture to save it in the JSON (byte[] content) and how would I be able to display that image from an JSON for the user?
PS: The controller is not writen in Javascipt, it is Coffeescript. But because I guess more of you understand Javascript, you can help me in that language.

Meteor.call method not found

I am working my way through the Microscope project in Discover Meteor and I have hit a problem. I am getting a 'Method not found' error for the following code:
HTML Template - microscope/client/templates/posts/post_submit.html
<template name="postSubmit">
<form class="main form">
<div class="form-group">
<label class="control-label" for="url">URL</label>
<div class="controls">
<input name="url" id="url" type="text" value="" placeholder="Your URL" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<input name="title" id="title" type="text" value="" placeholder="Name your post" class="form-control"/>
</div>
</div>
<input type="submit" value="Submit" class="btn btn-primary"/>
</form>
JS - microscope/client/templates/posts/post_submit.js
Template.postSubmit.events({
'submit form': function(e) {
e.preventDefault();
var post = {
url: $(e.target).find('[name=url]').val(),
title: $(e.target).find('[name=title]').val()
};
Meteor.call('postInsert', post, function(error, result) {
// display the error to the user and abort
if (error)
return alert(error.reason);
Router.go('postPage', {_id: result._id});
});
}
});
I am not sure how to debug this as I am getting no errors in the console. Please can anyone suggest where I am going wrong?

Very likely that you need to add the method postInsert to the server side. If you're following along in Discover Meteor, they do that in the next section - https://book.discovermeteor.com/chapter/creating-posts
For example, you put the method in a file called lib/collections/posts.js like this
Meteor.methods({
postInsert: function(postAttributes) {
check(Meteor.userId(), String);
check(postAttributes, {
title: String,
url: String
});