I have a HTTP Post form that receives info from AngularJS (that takes it from the PHP BE).
I use the following code sample:
<form method="post" action="{{aw('TI.sup');}}">
<input type='hidden' name='bla' value="{{aw('TI.sup');}}" />
<input type="submit" class="button s-button" value="bla" />
</form>
After page is loaded, I see the following result:
<form method="post" class="ng-pristine ng-valid">
<input type="hidden" name="bla" value="https://thisis.the/url">
Strings without 'https:' work fine.
Update
The problem was with $sce, and has slightly changed after I Added a function to the controller.
now I'm getting:
<form method="post" action="https://thisis.the/url" class="ng-pristine ng-valid">
Update, take 2
The form won't respond to submit because the previous URL was blank (before Angular changed it). I decided to take the info from PHP itself, but the following jquery will also do the trick:
$("#FormID").submit();
Thanks,
Dana.
You are facing a $sce:insecurl error , probably because the action URL is from other domain/protocol.
From $sce:insecurl error docs:
Processing of a Resource from Untrusted Source Blocked
...
To load templates from other domains and/or protocols, either adjust the whitelist/ blacklist or wrap the URL with a call to $sce.trustAsResourceUrl.
Here is an an example: http://jsbin.com/disef/2/edit
function ctrl($scope, $sce){
$scope.aw = function() {
return $sce.trustAsResourceUrl("https://thisis.the/url");
}
};
Related
I have a form to submit and send data to 2 pages via POST.
I have tried the code with javascript. One form submit is working but other submit is not working
<form id="add">
<input type="text" name="test">
<input type="submit" onclick="return Submit();">
</form>
javascript
function SubmitForm()
{
document.forms['add'].action='filecreate.php';
document.forms['add'].submit();
document.forms['add'].action='filecreate.fr.php';
document.forms['add'].submit();
return true;
}
The first submission is not working but 2nd submission is working.
Since you appear to send the exact same data to two different handlers, you can flip the coin - and say that you just submit one form, and process them both in filecreate.php.
As you are sending a form, you cannot send two separate forms in the same HTTP request - so you can either do them both through asynchronous methods, or process them both backend after the submission of one form.
Since you haven't shown any PHP code, I'm making some assumptions and writing some pseudo-code, but it should be enough to get you started.
So first off, set a static action-property to your form.
<form id="add" action="filecreate.php">
<input type="text" name="test">
<input type="submit">
</form>
If you are sending it over POST, then you need to specify the method as well,
<form id="add" action="filecreate.php" method="POST">
Then, in PHP, you can get both files executed if you include it to the other. Meaning, in your filecreate.php, you include the filecreate.fr.php. Once you do that, the contents of that file will be executed as well.
<?php
// Once you require the file, it will be executed in place
require "filecreate.fr.php";
// .. handle the rest of your normal execution here.
That said, if you are doing the very similar thing multiple times, just with different data, you may want to create functions for it instead - going with the DRY principle ("Don't Repeat Yourself"), you can probably create a function that handles the structure and processing, then send the data separately through that function.
Try this :
<form id="add">
<input type="text" name="test">
<input type="button" onclick="return SubmitForm();">
</form>
function SubmitForm()
{
if(document.forms['add'].onsubmit())
{
document.forms['add'].action='filecreate.php';
document.forms['add'].submit();
document.forms['add'].action='filecreate.fr.php';
document.forms['add'].submit();
}
return true;
}
I am using angularJS routing in PHP application
I have following situation:
I have main page named dashboard.php
and i am opening insertEmployee in ng-View insertEmployee page have form which contains few field. and form tag looks like
<form action="" method="post">
<!-- all fields -->
<input type="submit">
</form>
When clicked on submit, whole page is reloaded and $_POST['paraName'] shows undefined
I dont want whole page to get reloaded. I want to open the page in ngView with parameters.
There are 8-10 parameters and one of them is employee photo
Remove action="" method="post" attributes, you don't want browser to actually send POST request. Instead you subscribe to onsubmit event and handle it yourself:
<form ng-submit="save()">
<!-- all fields -->
<input ng-model="$ctrl.user.username" type="text">
<input type="submit">
</form>
In controller you would implement save method and do there whatever needs to be done, e.g. make AJAX POST request, and redirect to another route:
function save() {
// post xhr and redirect
$http.post('/api/user', this.user)
.then(response => response.data)
.then(user => $location.path(`/user/details/${user.id}`))
// or better with service
users.save(this.user)
.then(user => $location.path(`/user/details/${user.id}`))
}
References:
ngSubmit https://docs.angularjs.org/api/ng/directive/ngSubmit
$http.post https://docs.angularjs.org/api/ng/service/$http#post
$location https://docs.angularjs.org/api/ng/service/$location
I have a rails api that sends default input to an Angular app. The angular app receives json at localhost:9000/api/query, and then the view at localhost:9000/#/query styles that json into an unordered list.
If I send a POST request (from the browser javascript debugger) to the Rails app, and can send custom input and get desired output as a json string.
$.get('http://rails-app-url:3000/api/query', { 'input': 'my input goes here}
What I decided to do what build a form with an input box, and give it an ng-submit function that runs that javascript post request
<form ng-submit="sub()">
<textarea name="my_input"></textarea>
<button id="execute"></button>
</form>
Where the sub() function is defined in a jquery script that sets the queries variable to the desired json
$('#execute').click(function() {
queries = $.get('http://url-to-rails-app:3000/api/query', { 'input': 'my input here' });
});
to display the queries, I use markup like this
<div ng-controller="QueryCtrl">
<ul ng-repeat="query in queries">
<li>{{query}}</li>
</ul>
</div>
There are two problems with this:
the script does not execute unless it is written inline with the html for the view of this specific tab. I cannot attach it to index.html, as it can not find the #execute button.
even when the script is written inline with the html, the request is sent to the server, but the response from the server is not reflected in the html.
use ng-click
$scope.onSubmit = function() {
queries = $http.get('http://url-to-rails-app:3000/api/query', { 'input': 'my input here' });
};
<form ng-submit="onSubmit()">
<textarea name="my_input"></textarea>
<input type="submit"/>
</form>
EDIT
as per comments
<form ng-submit="onSubmit()">
<textarea name="my_input"></textarea>
<button type="submit" ng-click="onSubmit()"/>
</form>
You could do something like this (and use $http from AngularJS)
<form>
<textarea ng-model="my_input" name="my_input"></textarea>
<button id="execute" ng-click="sub()">Execute</button>
</form>
And in the controller:
$scope.sub = function(){
$http.get('http://url-to-rails-app:3000/api/query', {'input':$scope.my_input}).success(function(data){
$scope.queries = data;
}
}
I assume that your form and your display list are in the same controller (sharing the same $scope).
Why are you using GET, I think that a POST request should be better in this case.
I have a hidden iframe where the submission of a form is handled. It goes like this:
<iframe name="foo" style="display:none;"></iframe>
So, I was wondering, if it is possible that after the stuff has happened that needs to be within the iframe, I can use javascript or something to print out data on the parent page? Thanks
EDIT: here is my form code.
<form id="bar" name="bar" method="post" target="foo" action="include/database.php">
<input type="text" name="betamount">
<input type='text' name="multipler">
<input type="checkbox" name="hilo" value="High" checked>
<input type="submit" name="submit" value="Bet">
</form>
<iframe name="foo" style="display:none;"></iframe>
Database.php handles these POST requests inside the iframe. Now, there is this one thing inside database.php which goes like this
$betamount = $_POST['betamount'];
$multiplier = $_POST['multiplier'];
$payout = (int)$betamount*(int)$multiplier;
What I want to do is, I want to use AJAX or something to echo out the 'payout' variables inside a div present on index.php
For the purposes of my answer, I'm assuming that the actions you are doing in server side cannot be replaced by a simple client-side one (using javascript).
If you are expecting a return, why don't you use AJAX directly, without iframes? Simply post the data to your php page, and return it asynchronously.
JsFiddle: http://jsfiddle.net/ericwu91/28U8n/
HTML Code:
<input type="text" id="amount" name="betamount">
<input type='text' id="multiplier" name="multipler">
<input type="checkbox" name="hilo" value="High" checked>
<button onclick="submit();return false;">Submit</button>
JS Code:
var yourData = {multiplier:$("#multiplier").val(),betamount:$("#amount").val()};
$.post("yourUrl.php",yourData,function(result){
//Success: Use the "result" parameter to retrieve the data returned from server
alert(result);
});
I'm using jQuery's ajax post method. Documentation here: http://api.jquery.com/jquery.post/
The perks of doing it this way is that it does exactly what you wanted to, but simplifies it by using an almost-native javascript property (asynchronous responses).
EDIT: I forgot to put the real jsfiddle link... And after I pasted all the HTML and JS code, I realized how useless the fiddle is, as it won't return any respose at all... xD
I stumbled on this site and want to know how the url is able to update the input values and also update the src of the divs which the gif and iframe which video are in.
http://gifsound.com/?gif=img836.imageshack.us/img836/7826/tumblrlfihla6zaq1qb0ebk.gif&v=DR91Rj1ZN1M
How would this be done with javascript?
It looks like "v" is a variable set to "http://www.youtube.com/watch?"
and the gif is similar and equal to "gif"
I think this thread has some basis, is it the right direction?
Is it possible to update a url link based on user text input?
It isn't done by Javascript. The querystring parameters are interpreted by a server-side process. The <form> which has the textbox submits them via the querystring because it has <form method="get"> instead of post.
Explanation in detail
HTTP has two main request methods: GET and POST.
When you make a straightforward request for a webpage, such as by clicking a link or typing an address into the address bar, the browser will make a GET request, which consists of the path to the resource to get and some headers, that's it. There is no "request body".
A resource path looks like this: /foo/bar?name1=value1&name2=value2
POST requests are different and can only be triggered by a submission of a <form method="post"> (note that method="post" is implied if the method attribute is missing) or AJAX request. They also have a request-body, which is a block of data sent along with the request. This block of data consists of key/value pairs corresponding to each <input> element contained within the <form> element that was posted.
When you have a <form method="get"> (rather than post) each <input> in the <form> is instead converted into a querystring parameter rather than being sent in a request-body, also the method used is GET instead of POST.
In example, this...
<form method="post" action="Page.php">
<input type="text" name="Foo" value="bar" />
<input type="text" name="Baz" value="qux" />
</form>
...results in this being sent from the browser to the client:
POST Page.php
Content-Type: application/x-www-form-urlencoded
Content-Length: 15
Foo=bar&Baz=qux
(the "Foo=bar..." bit is the request body)
However, this...
<form method="get" action="Page.php">
<input type="text" name="Foo" value="bar" />
<input type="text" name="Baz" value="qux" />
</form>
...results in this being sent from the browser to the client:
GET Page.php?Foo=bar&Baz=qux
(note the lack of a request body)