Recently I've started a new project and would like to do some angularjs magic. The problem is i'm not skilled enough in angularjs or javascript to know how I could do it. One requirement is that it has to be in realtime without reloading a page.
So let me start with my questions now. I've got a simple input field and a display section that instantly shows everything that I type in. However I want the display part to be modified on the fly.
<div id="form" class="form-wrap" ng-app="" />
<form action="index.php" method="post" id="form" />
<input type="text" name="url" id="url" value="" ng-model="name" />
<input type="submit" name="form_submit" id="form_submit" value="GOTO" />
</form>
https://example.com/index.php?url={{name}}
</div>
I'm already doing a validation in javascript but I dont know if it needs to be done in javascript or somehow in de anguarjs code itself. Just to be sure my javascript validation code:
<script>
$('<div class="loading"><span class="bounce1"></span><span class="bounce2"></span><span class="bounce3"></span></div>').hide().appendTo('.form-wrap');
$('<div class="success"></div>').hide().appendTo('.form-wrap');
$('#form').validate({
rules: {
url: { required: true, url: true }
},
messages: {
url: {
required: 'Address is requ!red',
url: 'Address is not val!d (https://www.nu.nl)'
}
},
errorElement: 'span',
errorPlacement: function(error, element){
error.appendTo(element.parent());
},
});
</script>
As you might guess by now I want the {{name}} value to be urlencoded realtime so that an url like: https://www.google.nl/?q=a b c will be changed to https://www.google.nl/?q=a%20b%20c However, how should I do this?
Thanks in advance!
Hi you can call a function on ng-change to encode name into url format like below.
I have create a function urlFormat which take name value and convert it to url format and push new variable urlname back.
<div id="form" class="form-wrap" ng-app="" />
<form action="index.php" method="post" id="form" />
<input type="text" name="url" id="url" value="" ng-model="name" ng-change="urlFormat(name)" />
<input type="submit" name="form_submit" id="form_submit" value="GOTO" />
</form>
https://example.com/index.php?url={{urlname}}
</div>
And create that function inside your controller like
$scope.urlFormat = function (name) {
$scope.urlname = encodeURI(name)
}
Related
I've a question about the method to make a ajax search request.
My form, the ajax call and the query is working, but i don't know, what's the best way to return the results.
I want to 'update' a existing table. What's the best and cleanest method to do this?
I don't want to recreate the whole table. But should i use JSON object or directly return the result with the html code.
Thanks for helping! I would appreciate it, when you also send example codes for your solution.
Greez Thandor
this code is for auto complete search
<script type="text/javascript">
function autocompelete(value)
{
$.ajax({
method: "POST",
url: "autocomplete.php",
data: { id: value }
})
.done(function( msg ) {
$('#autocomplete').html(msg);
$('#autocomplete').show();
});
}
</script>
html
<div id="search-bar">
<form action="youpage.php" method="POST">
<input type="submit" name="search" class="search-btn" value="" />
<input type="text" name="brand" autocomplete="off" onkeyup="autocompelete(this.value)" id="search" class="search-field" placeholder="Model Number, Brand, Company ..." />
</form>
<div style="display:none" id="autocomplete"></div>
</div>
How do i replace variables in a javascript file by using a web form such as below.
The idea is that i can make changes to the javascript variables by submitting changes through a web form.
Thanks in advance
HTML FIle
<html>
<body>
<FORM action="auction_time_var.js" method="post" id="adminForm">
<P>
<LABEL for="name">Name: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="price">Price: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="dueTime">Due Time: </LABEL>
<INPUT type="text" id="email"><BR>
<LABEL for="location">Location: </LABEL>
<INPUT type="text" id="location"><BR>
<LABEL for="urlPhoto">Photo url: </LABEL>
<INPUT type="text" id="photo_url"><BR>
<LABEL for="description">Description: </LABEL><br>
<textarea rows="4" cols="50" name="comment" form="adminForm">
Enter text here...</textarea>
<INPUT type="submit" value="Send">
</P>
</FORM>
</body>
</html>
Javascript file
var data = [
{name: "Title 1", price:"$100", countdown: "April 2, 2014 15:41:00", location:"Brisbane", description:"awesome stuff", highestBidder: "Highest bidder 1", },
];
You should use jQuery Populate plugin to fill form data.
You need to do 3 things to have Populate automatically fill an HTML form with the correct values:
Include the blank HTML form in the body of the page
Get the relevant form data, e.g. user information, into JSON format
Output the JSON format as the first agument of the Populate call
The basic form for using Populate is:
Syntax
$(selector).populate(JSON, options)
to populate a very simple form, you might output the following code after the form body:
Example
$('#form-simple').populate({
'name':'Title 1',
'price':'$100',
...
...
});
Check this Demo
you put your JSON data to show you result. Hope this help you!
To access variables from <input> (if you mean this)
var data = [document.getElementById("firstname").value,
document.getElementById("lastname").value,
document.getElementById("email").value,
document.getElementById("location").value,
document.getElementById("photo_url").value];
To edit them:
data[0]="new_value"; //firstname
data[1]="new_value"; //lastname
data[2]="new_value"; //email
data[3]="new_value"; //location
data[4]="new_value"; //photo_url
It's hard to understand exactly what you're trying to do, but I think if you're wanting to convert a form to a JavaScript object you could try using the serializeArray function with a small jQuery extention serializeObject.
function getVariables() {
var formObj = $('#adminForm').serializeObject();
console.log(formObj);
}
This will return an object like:
formObj.comment = "A test entry"
formObj.email = "01/01/2014"
formObj.firstname = "Mark"
formObj.lastname = "10.00"
formObj.location = "Town"
formObj.photo_url = "http://www.example.com"
JSFiddle: http://jsfiddle.net/7FZCf/
Inspired from this post:
Convert form data to JavaScript object with jQuery
I used to be able to log in with the following code to a URL. It alerts me if the log in details are wrong and logs me in when it is correct.
The URL changed slightly and right now, I am not able to log in. I do not even get the alert message saying the input is wrong. Nothing happens.
Old URL where it was working fine:
http://softwarehuttest.x10.mx/public/account/login/?id=notmyid&password=notmypassword
new URL where nothing happens:
http://softwarehuttest.x10.mx/public/account/login/?id=notmyid&password=notmypassword&rank=22
Rank is always going to be a same number (22 is just an example); thus, I don't want the user to have to input that. I just added an input for rank to test if that is the issue, but the problem persists.
If I directly input the URL with the log in details to a browser, it works.
I don't get what went wrong considering the codes were working fine prior to the URL change. Please advice. Thank you.
<html>
<script>
$(document).on("pageinit", "#loginForm", function () {
$("#form1").on("submit", function (event) {
event.preventDefault();
$.ajax({
type: "GET",
url: "http://softwarehuttest.x10.mx/public/account/login/",
data: $("#form1").serialize(),
success: function (data) {
console.log(data);
if (data.loggedIn) {
$.mobile.changePage("#home");
} else {
alert("You entered the wrong username or password. Please try again.");
}
}
});
});
});
</script>
<div data-role="page" id="loginForm" data-theme="e">
<!--Start of Log In Page-->
<header data-role="header">
<h1>Log In</h1>
</header>
<!--OLD FORM-->
<form id="form1" name="form1" method="GET" action="http://softwarehuttest.x10.mx/public/account/login/">
<label for="id">Username </label>
<input type="text" name="id" id="id" />
<label for="password">Password </label>
<input type="password" name="password" id="password" />
<label for="rank">Rank </label>
<input type="rank" name="rank" id="rank" />
<input type="submit" name="submit" value="Login"/>
</form>
<footer data-role="footer" data-position="fixed">
<h1></h1>
</footer>
</div>
</html>
I tested your code on JSFiddle and it apparently works. I got the response:"{"loggedIn":false}"
If you want to simply "hide" the Rank input, you can use input type HIDDEN instead of TEXT with the value set to 22.
<input type="hidden" name="rank" id="rank" value="22">
I'm working on phonegap, basically its like making mobileapps crossplatform by using HTML, JS and CSS. On the device i currently have the JS and the HTML (form) in same document.
What I'm trying to do is to pass email and password to my server, and then process it there through a login. I've tested the login script on the server and it works with hardcoded data. So I'm guessing somewhere when sending the data from the device its failing.. I'm fairly new to JS too.
I tried to hardcode the data in the AJAX but it doesnt seem to work. Preferebly I would like to use something like var pdata = $('#form').serialize(); or something else if its better.
Any ideas?
EDIT: Forgot to say that the PHP on the server auto submits by using JS when $_POST is set (isset)
The form
<form id="form" onsubmit="dologin()">
<div class="form-group">
<label for="email">Epost</label>
<input type="email" class="form-control" name="email" value="" placeholder="Epost">
</div>
<div class="form-group">
<label for="password">Passord</label>
<input type="password" class="form-control" name="password" value="" placeholder="Passord">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember_me">
Husk meg
</label>
</div>
<button type="submit" class="btn btn-primary">Logg inn</button>
</form>
The javascript
<script>
function dologin() {
//var pdata = $('#form').serialize();
//alert(pdata);
$.ajax({
type: 'POST',
data: {email:"test#test.no",password:"test"},
url: 'LINK',
success: function(data) {
alert(data);
},
error: function() {
alert("error");
}
});
return false;
};
</script>
The PHP
<form id="form" method="post">
<!-- {{ Form::label('email', 'Email Address') }} -->
<div class="form-group">
<input type="text" name="email" value="<?php if(isset($_POST["email"])) echo $_POST['email'];?>">
</div>
<div class="form-group">
<!-- {{ Form::label('password', 'Password') }} -->
<input type="text" name="password" value="<?php if(isset($_POST["password"])) echo $_POST['password'];?>">
</div>
</form>
Are you able to hit your server via through phonegap?
If no then please check your config.xml for white list urls - change access control property to
access origin = "*"
Hopeful you will be able to hit your server with data.
You can use weinre to debug your app. That way you will be able to see if the request was placed from the app or not.
http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html
I am using Jquery validate to provide feedback to a user and provide them updates on the validity of the details they enter in the form. But I am having trouble customising the behaviour Jquery validate creates.
I have a simple form like this:
<form id="form1">
<label for="input1" />
<input name="input1" />
<input type="submit" />
</form>
When the user enters invalid information I want Jquery validate to output something like this:
<form id="form1">
<label for="input1" />
<input name="input1" class="error"/><span class="errorIcon">Error</span>
<p class="errorText">Error message</p>
<input type="submit" />
</form>
When the user fills out the field with valid information I want Jquery validate to output:
<form id="form1">
<label for="input1" />
<input name="input1" /><span class="successIcon">Success</span>
<input type="submit" />
</form>
I have set up the required rules and custom validation messages so they fire fine but I am having trouble getting the behaviour described above.
I have this currently:
$('#form1').validate({
showErrors: function(errorMap, errorList) {
if (errorList < 1 ) {
$('span.errorIcon').remove();
$('p.errorText').remove();
$('input.error').removeClass('error');
$('select.error').removeClass('error');
return;
}
$.each(errorList, function(index, error) {
if ($(error.element).siblings('.errorText').length === 0 && $(error.element).siblings('.errorIcon').length === 0) {
$(error.element).next('p.errorText').remove();
$(error.element).addClass('error');
$(error.element).after(
$('<p/>')
.addClass('errorText')
.append(error.message)
);
$(error.element).after(
$('<span>There is an issue with this field</span>')
.addClass('errorIcon')
);
}
});
},
//rules and messages defined here
);
So the above doesn't achieve what I want need currently and it also feels like I might be over complicating this issue. I am fairly inexperienced with javascript and Jquery. Any guidance in getting this sorted would be appreciated.
Cheers
EDIT:
Here is a link to a jsfiddle: http://jsfiddle.net/WJ9Vt/4/ with the sample form.
Could also post you css file, or do a jsfiddle on it ? Because you errorIcon is probably not shown because <span> will not display something as long as it has no content or you set display:block; and a special height and width.