I'm trying to set up an input with autocomplete places list. I want to use Here autosuggest tool.
https://developer.here.com/documentation/geocoding-search-api/dev_guide/topics/endpoint-autosuggest-brief.html
For this I did this code :
<div class="autocomplete input-group has-warning">
<input id="search-where" name="w" type="text" class="form-control input-lg" placeholder="A quel endroit?" required="required" value="" autocomplete="on" onkeyup="mySearch(this.value)" />
<span class="input-group-btn">
<button type="submit" class="btn btn-lg btn-warning"><span class="glyphicon glyphicon-screenshot"></span></button>
</span>
</div>
{literal}
<script type="text/javascript">
function mySearch(e){
$.ajax({
url: "https://places.ls.hereapi.com/places/v1/suggest",
type: 'GET',
data: {
at: '44.771079,5.742806',
q: 'savoie',
app_id: '2FXOZOY',
app_code: 'b_9sMKgQmSjWUj1rlyY0wI'
},
headers : { "Authorization": "Bearer" + $('b_9sMKgQ5qzJF0SusExJJx9irrHHimSjWUj1rlyY0wI').val()},
beforeSend: function(xhr){
xhr.setRequestHeader('Accept', 'application/json');
},
success: function (data) {
alert(JSON.stringify(data));
}
});
$( "#search-where" ).autocomplete({
source: mySearch
});
}
</script>
{/literal}
But I get this error when I try to write in the input :
I'm clearly completely lost ... If anyone can help me it would be much appreciated.
Thanks for reading me anyway
I think you are doing an XMLHttpRequest to a different URL than the page you are on. In such scenarios, browser blocks it completely giving CORS error due to security reasons. There are a lot of ways to set this. A tutorial is available here.
Related
I have a HTML form with a button which allows me to send HTTP requests in "text/plain" or "application/x-www-form-urlencoded" format.
text/plain:
stateMachineArn=arn:aws:states:us-east-1:0111111165:stateMachine:MyStateMachine
name=ExecutionName
first_name=test
last_name=test2
application/x-www-form-urlencoded:
stateMachineArn=arn:aws:states:us-east-1:0111111165:stateMachine:MyStateMachine&name=ExecutionName&first_name=test&last_name=test2
But AWS API gateway receives only JSON format by default ("input" has to be escaped)
{
"input": "{\"first_name\" : \"test\",\"last_name\" : \"test2\"}",
"name": "ExecutionName",
"stateMachineArn": "arn:aws:states:us-east-1:0111111165:stateMachine:MyStateMachine"
}
How can I convert either formats to the above JSON?
If you have a form like this:
<form>
<input type="stateMachineArn" name="stateMachineArn" id="stateMachineArn" />
<input type="name" name="name" id="name" />
<label for="first_name">First name</label>
<input type="first_name" name="first_name" id="first_name" />
<label for="last_name">Last name</label>
<input type="last_name" name="last_name" id="last_name" />
<button type="submit">Submit</button>
</form>
You can handle submissions in js like this and log the response like you did - don´t know if that´s what you are doing:
function handleSubmit(event) {
event.preventDefault();
const data = new FormData(event.target);
const value = Object.fromEntries(data.entries());
console.log({ value });
}
const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);
At this point if you want to convert data object to json before sending it somewhere or just to log it, have you tried this?
console.log(JSON.stringify(data));
Or this?
console.log(JSON.stringify(value ));
EDIT
To send the request:
$.ajax({
type: "POST",
url: "/webservices/PodcastService.asmx/CreateMarkers",
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data){alert(data);},
error: function(errMsg) {
alert(errMsg);
}
});
This question already has answers here:
ng-model for `<input type="file"/>` (with directive DEMO)
(13 answers)
Closed 4 years ago.
Guyz i have an issue with my code i don't know why when i tried to get file from <input ng-model="form.userfile" id="itemImage" name="userfile" type="file">
that code will not give me the values.
my code:
HTML:
<div class="panel panel-default">
<div class="panel-body">
<form id="form" accept-charset="utf-8" ng-submit="sendmessage()">
<textarea ng-model="form.message" name="message"
onkeypress="process(event, this)"
id="text" class="form-control send-message" rows="3"
placeholder="Write a reply...">
</textarea>
</div>
<span class="col-lg-3 btn btn-file send-message-btn">
<i class="glyphicon glyphicon-paperclip"></i>Add Files
<input ng-model="form.userfile" id="itemImage"
name="userfile" type="file">
</span>
<button ng-click="sendmessage()" id="send"
class="col-lg-4 text-right btn send-message-btn pull-right"
type="button" role="button">
<i class="fa fa-plus"></i> Send Message
</button>
<div id="dvPreview" class="text-center"></div>
</form>
</div>
Angular:
$scope.sendmessage = function (){
var formData = $scope.form;
var friendid = $scope.friendid;
var req =
{
type: 'POST',
enctype: 'multipart/form-data',
data:formData,
url: "<?php echo base_url() ?>User/sendmessages/"+friendid,
headers: {
'Content-Type': 'application/json'
},
};
$http(req).then(function (response) {
$('#text').val('');
console.log(response)
}, function (response) {
});
};
here is what i have done before please help.
ngModel directive is not usable on file input.
If you don't care about being in debugInfoEnabled on prod, you can pass it true like this in your app.js.
$compileProvider.debugInfoEnabled(true);
You then will be able to access your scope from your html.
In you file input just add :
onchange="angular.element(this).scope().yourChangeFunction(this)
You can access your file in your js code with :
scope.yourChangeFunction = function(element){scope.file=element.files[0];}
I'm using ZK7, HTML5, CSS3 and I'm trying to validate below zk textbox element if it is a valid email:
<form id="validation-form">
<fieldset>
<div class="form-group">
<label class="block clearfix" for="email">
<span class="block input-icon input-icon-right">
<z:textbox id="emailInput" type="email" class="form-control" placeholder="${labels.login.email}"/>
<i class="icon-envelope"></i>
</span>
</label>
</div>
<div class="clearfix">
<button id="forgotPassword" type="button" class="width-35 pull-right btn btn-sm btn-danger">
<i class="icon-lightbulb"></i>
${labels.send}
</button>
</div>
</fieldset>
</form>
Here is the script:
<script type="text/javascript">
jQuery(function($) {
$('[data-rel=tooltip]').tooltip();
$(".select2").css('width','200px').select2({allowClear:true})
.on('change', function(){
$(this).closest('form').validate().element($(this));
});
var $validation = false;
//documentation : http://docs.jquery.com/Plugins/Validation/validate
$('#validation-form').validate({
errorElement: 'div',
errorClass: 'help-block',
focusInvalid: false,
rules: {
email: {
required: true,
email:true
}
},
messages: {
email: {
required: "Please provide a valid email.",
email: "Please provide a valid email."
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
$('.alert-danger', $('.login-form')).show();
},
highlight: function (e) {
$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
},
success: function (e) {
$(e).closest('.form-group').removeClass('has-error').addClass('has-info');
$(e).remove();
},
errorPlacement: function (error, element) {
if(element.is(':checkbox') || element.is(':radio')) {
var controls = element.closest('div[class*="col-"]');
if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
}
else if(element.is('.select2')) {
error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
}
else if(element.is('.chosen-select')) {
error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
}
else error.insertAfter(element.parent());
},
submitHandler: function (form) {
},
invalidHandler: function (form) {
}
});
$('#modal-wizard .modal-header').ace_wizard();
$('#modal-wizard .wizard-actions .btn[data-dismiss=modal]').removeAttr('disabled');
})
</script>
It is working when I change z:textbox to html input as:
<input id="emailInput" type="email" class="form-control" placeholder="${labels.login.email}"/>
How should I do the same by using zk textbox?
I'm not 100% sure if this is what you wanted, cause your question has a lot of javascript, jquery and the first code doesn't really looks like zk(only your internationalization is familiar).
If you use zk you can do the following :
<textbox value="#bind(vm.email)" id="email"
constraint="/.+#(.+\.[a-z]+|)/: Please enter a valid e-mail address"
type="email" placeholder="enter email" />
I did put a simpel email constraint there, but you can change the constraint to what you want.
Hope this helps you.
There is this nice example of integrating jquery masks with zk.
For client side validation this should be fine.
In addition, ZK offers form validation as well as constraints for InputElements
Seems there are a ton of answers to nearly identical questions, but I can't seem to solve this. Please forgive me if you've seen this a thousand times:
I have a form I need to submit using ajax, but I can't get it to do it properly. It needs to submt, and not refresh (as you'd expect), but it doesn't seem to matter what I do, all I can get it to do is append the POST to the current URL of the page. I've stripped the form down to the bare minimum, and am still getting this result, so I must be doing something really wrong. Any help is appreciated, thanks!
<html>
<body>
<form class="form horizontal" id="logForm">
<fieldset>
<div class="control-group">
<div style="float: left">
<label for="from">Start Date: </label>
<div class="controls">
<input type="text" id="from" name="from" />
</div>
<label for="to">End Date:</label>
<div class="controls">
<input type="text" id="to" name="to" />
</div>
</div>
</div>
</fieldset>
<div class="form-actions">
<button type="submit" class="btn btn-primary" id="subButton" style="float: left">Search!</button>
</div>
</form>
<script>
$("#logForm").submit(function() {
$.ajax({
url: 'logQuery.php',
type: 'get',
dataType: 'json',
data: $('form#logForm').serialize(),
success: function(html) {
alert('worked good');
return false;
}
});
});
</script>
</body>
</html>
Change your script add ready and return false on proper line. You return false when asynchronus operation is done which may be after the function returns. That is why you don't prevent the standard behaviour of submit event.
Return should be inside submit() function.
Hint:
You don't need to use form#logForm because there is only one element with id=logForm (it should be at least) #logForm is enough.
Also always use document.ready when you binding events to elements. This will make you sure that all elements on site are loaded so you can bind events to them.
You can use also preventDefault() but return false is good too.
$(function (){
$("#logForm").submit(function() {
$.ajax({
url: 'logQuery.php',
type: 'get',
dataType: 'json',
data: $('form#logForm').serialize(),
success: function(html) {
alert('worked good');
}
});
return false;
});
});
I haven't done front end HTML since I was 10 and that was drag and drop frontpage stuff. with static pages. As a result I'm really rusty.
What I need to do is put together a web client for a rest API that I wrote in NodeJS. My question is how, do you send a request from a form (say a log in form) to the server where the body of the POST request is a JSON of the email/password?
HTML form:
<form id="loginForm" action="" method="" class="form-horizontal">
<fieldset>
<legend>Log in</legend>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
<input type="text" class="input-xlarge" id="email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">Password</label>
<div class="controls">
<input type="password" class="input-xlarge" id="password">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button class="btn">Cancel</button>
</div>
</fieldset>
</form>
I suggest a lot of reading. To get you started with a very basic example, though, you will find a page with a sample form below that does what you need. You just need to replace the string your URL here with the actual URL you expect will be doing the handling.
The serializeObject() function was taken from here: Convert form data to JavaScript object with jQuery
<html>
<body>
<form id="loginForm" action="" method="">
Username: <input type="text" name="username" id="username" /> <br />
Password: <input type="password" name="password" id="password" /> <br />
<input type="submit" />
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function () {
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
$("#loginForm").bind("submit", function(evt) {
console.log(JSON.stringify($("#loginForm").serializeObject()));
$.ajax({
url: "your URL here",
type: "POST",
contentType: "application/json",
data: JSON.stringify($("#loginForm").serializeObject()),
success: function (data, textStatus, jqXHR) {
// do something with your data here.
},
error: function (jqXHR, textStatus, errorThrown) {
// likewise do something with your error here.
}
});
return false;
});
});
</script>
</body>
</html>
The problem with your form is that input elements don't have name attributes. The name attribute is essential in many ways, so I would fix your html by setting each element's name attribute to the same value as its id attribute. The serializeObject function relies on form elements having names.
Here's an example using jQuery:
<form name="myform" action="#" method="POST">
Username: <input type="text" id="user" name="username"/><br/>
Password: <input type="password" id="pass" name="password"/>
<input type="submit" id="login" value="Login"/>
</form>
<script type="text/javascript">
var user=$('#user').val(), pass=$('#pass').val();
$('login').bind('click', function() {
$.ajax('/my/url', {
type: 'POST',
contentType: 'text/json',
data: JSON.stringify({username:user, password:pass}),
complete: function() { /* Do something with the response. */ }
});
return false; // Prevent form submit.
});
</script>
This might help you. Here is the form below: If you notice there is action and method if you don't know what these are, just go on and search for it. Action is the target server file that handles the information you send and method is get which is retrieving not updating.
Existing Users Username: Password:
Keep Me
Logged In
Here is the jquery part to handle the ajax call:
$.ajax({
type: "GET",
url: action,
data: form_data,
success: function(response)
{
if($.trim(response) == 'success')
window.location.replace("profile.php");
else
$("#result").html(response);
}
});
return false; });
});