Will someone kindly give me a hand. Suppose I have a text box and a button. If I type a number say 5 in the text box, I want the numbers 1 to 5 appear in the result text box, one number per line. How should be modifying. Thank you.
<html><head>
<title>Temp proj</title>
<link rel = "stylesheet" type = "text/css"
href = "temp.css">
</head>
<body>
<div class = "container">
<form name = "myform">
<input type = "text" name = "first" class = "mytext" size = "4"><br>
<input class = "button" name = "" value = "Enter" onclick = "enter()"><br>
<input type = "text" name = "result" class = "mytext" size = "4">
</form>
<script type = "text/javascript">
function enter(){
first = parseInt(myform.first.value);
myform.result.value = result;
}
</script>
</head></html>
Related
This is an HTML form, which I need to capture the structure of the URL to send to the backend.
I have the example URL:
https://mywebsite.com/en/specialized-areas/agrifood
I would like to separate the URL into:
en
specialized-areas
agrifood
And send each of these URL snippets in a hidden field different from the form:
<input type="text" value="en" class="text">
<input type="text" value="specialized-areas" class="text">
<input type="text" value="agrifood" class="text">
So far I have this script, which takes the parts I need. but I don't know how to insert it into the form fields.
var pathArray = window.location.pathname.split( '/' );
var newPathname = "";
var newPathname = "";
for (i = 3; i < pathArray.length; i++) {
newPathname += pathArray[i] ;
if (i< pathArray.length-1){
newPathname += "/";
}
}
console.log(newPathname);
Can you help me with this script?
Getting started with knockout, I have been playing with the pattern found at http://knockoutjs.com/examples/cartEditor.html. I have cascading select menus where the second one's options depend on the state of the first -- no problem so far. But whatever I do, I haven't figured a way to change the out-of-the-box behavior whereby the second element is not visible -- not rendered, I would imagine -- until the first element has a true-ish value (except by taking out the optionsCaption and instead stuffing in an empty record at the top of my data -- more on that below.) The markup:
<div id="test" class="border">
<div class="form-row form-group">
<label class="col-form-label col-md-3 text-right pr-2">
language
</label>
<div class="col-md-9">
<select class="form-control" name="language"
data-bind="options: roster,
optionsText: 'language',
optionsCaption: '',
value: language">
</select>
</div>
</div>
<div class="form-row form-group">
<label class="col-form-label col-md-3 text-right pr-2">
interpreter
</label>
<div class="col-md-9" data-bind="with: language">
<select class="form-control" name="interpreter"
data-bind="options: interpreters,
optionsText : 'name',
optionsCaption: '',
value: $parent.interpreter"
</select>
</div>
</div>
</div>
Code:
function Thing() {
var self = this;
self.language = ko.observable();
self.interpreter = ko.observable();
self.language.subscribe(function() {
self.interpreter(undefined);
});
};
ko.applyBindings(new Thing());
my sample data:
roster = [
{ "language": "Spanish",
"interpreters": [
{"name" : "Paula"},
{"name" : "David"},
{"name" : "Humberto"},
{"name" : "Erika"},
{"name" : "Francisco"},
]
},
{"language":"Russian",
"interpreters":[{"name":"Yana"},{"name":"Boris"}]
},
{"language":"Foochow",
"interpreters":[{"name":"Lily"},{"name":"Patsy"}]
},
/* etc */
Now, I did figure out that I can hack around this and get the desired effect by putting
{ "language":"", "interpreters":[] }
at the front of my roster data structure, and that's what I guess I will do unless one of you cognoscenti can show me the more elegant way that I am overlooking.
After using both Knockout and Vuejs, I found Vuejs much easier to work with. Knockout is a bit out dated and no longer supported by any one or group.
Having said that, here is how I addressed your issue. The comments here refer to the link you provided not your code so I could build my own test case.
My working sample is at http://jsbin.com/gediwal/edit?js,console,output
I removed the optionsCaption from both select boxes.
Added the following item to the data (note that this has to be the first item in the arry):
{"products":{"name":"Waiting", "price":0}, "name":"Select..."},
I added the disable:isDisabled to the second selectbox cause I want it to be disabled when nothing is selected in the first selectbox.
added self.isDisabled = ko.observable(true); to the cartline model
altered the subscription to check the new value. If it is the select option the second one gets lock.
function formatCurrency(value) {
return "$" + value.toFixed(2);
}
var CartLine = function() {
var self = this;
// added this to enable/disable second select
self.isDisabled = ko.observable(true);
self.category = ko.observable();
self.product = ko.observable();
self.quantity = ko.observable(1);
self.subtotal = ko.computed(function() {
return self.product() ? self.product().price * parseInt("0" + self.quantity(), 10) : 0;
});
// Whenever the category changes, reset the product selection
// added the val argument. Its the new value whenever category lchanges.
self.category.subscribe(function(val) {
self.product(undefined);
// check to see if it should be disabled or not.
self.isDisabled("Select..." == val.name);
});
};
var Cart = function() {
// Stores an array of lines, and from these, can work out the grandTotal
var self = this;
self.lines = ko.observableArray([new CartLine()]); // Put one line in by default
self.grandTotal = ko.computed(function() {
var total = 0;
$.each(self.lines(), function() { total += this.subtotal() })
return total;
});
// Operations
self.addLine = function() { self.lines.push(new CartLine()) };
self.removeLine = function(line) { self.lines.remove(line) };
self.save = function() {
var dataToSave = $.map(self.lines(), function(line) {
return line.product() ? {
productName: line.product().name,
quantity: line.quantity()
} : undefined
});
alert("Could now send this to server: " + JSON.stringify(dataToSave));
};
};
I have a payment form as follows
<body>
<g:if test="${flash.message}">
<div class="message">${flash.message}</div>
</g:if>
<div class="content">
<h1>Secure Checkout</h1>
<g:form name="paymentForm"
method="POST"
action="processAcceptPayment" >
<input type="text" name="cardNumber" id="cardNumber" placeholder="cardNumber"/> <br><br>
<input type="text" name="expMonth" id="expMonth" placeholder="expMonth"/> <br><br>
<input type="text" name="expYear" id="expYear" placeholder="expYear"/> <br><br>
<input type="text" name="cardCode" id="cardCode" placeholder="cardCode"/> <br><br>
<input type="hidden" name="dataValue" id="dataValue" />
<input type="hidden" name="dataDescriptor" id="dataDescriptor" />
<button type="button" onclick="sendPaymentDataToAnet()">Pay</button>
</g:form>
</div>
<g:javascript>
function sendPaymentDataToAnet() {
var authData = {};
authData.clientKey = "valid key";
authData.apiLoginID = "valid id";
var cardData = {};
cardData.cardNumber = document.getElementById("cardNumber").value;
cardData.month = document.getElementById("expMonth").value;
cardData.year = document.getElementById("expYear").value;
cardData.cardCode = document.getElementById("cardCode").value;
var secureData = {};
secureData.authData = authData;
secureData.cardData = cardData;
// If using banking information instead of card information,
// send the bankData object instead of the cardData object.
//
// secureData.bankData = bankData;
Accept.dispatchData(secureData, responseHandler);
}
function responseHandler(response) {
if (response.messages.resultCode === "Error") {
var i = 0;
while (i < response.messages.message.length) {
console.log(
response.messages.message[i].code + ": " +
response.messages.message[i].text
);
i = i + 1;
}
} else {
paymentFormUpdate(response.opaqueData);
}
}
function paymentFormUpdate(opaqueData) {
document.getElementById("dataDescriptor").value = opaqueData.dataDescriptor;
document.getElementById("dataValue").value = opaqueData.dataValue;
document.getElementById("cardNumber").value = "";
document.getElementById("expMonth").value = "";
document.getElementById("expYear").value = "";
document.getElementById("cardCode").value = "";
document.getElementById("accountNumber").value = "";
document.getElementById("routingNumber").value = "";
document.getElementById("nameOnAccount").value = "";
document.getElementById("accountType").value = "";
document.getElementById("paymentForm").submit();
}
</g:javascript>
</body>
This generates the form as follows
I enter test credit card numbers and click Pay.
I get the following error in my javascript console.
I was just following the accept.js tutorial from the official page.
https://developer.authorize.net/api/reference/features/acceptjs.html
I appreciate any help as to the reason for this "Encryption Failed" error? Thanks!
UPDATE:
Ok so i did some more debugging. I put a test code "console.log("test");" inside responseHandler() function and noticed that it was called twice. I am now wondering why is responseHandler() being called twice.
When Accept.js triggers the callback function twice due to some other Javascript error occurring on the page, you can pretty quickly track down the source of that error on the by wrapping the contents of your callback function in a try/catch block:
Accept.dispatchData(secureData, responseHandler);
...
function responseHandler(response) {
try {
if (response.messages.resultCode === "Error") {
var i = 0;
while (i < response.messages.message.length) {
console.log(
response.messages.message[i].code + ": " +
response.messages.message[i].text
);
i = i + 1;
}
}
} catch (error) {
console.log(error);
}
}
Ok so i did some more debugging. I put a test code "console.log("test");" inside responseHandler() function and noticed that it was called twice. I am now wondering why is responseHandler() being called twice.
I repeated this test and can confirm that this is a common cause of this error. It is also true that Accept.js will mistakingly call your responseHandler() twice if it calls a function that has a Javascript error in it, or some other Javascript error is in the page. In my case, I had a sendOrder() AJAX function that was assuming a variable. Once I fixed that other function, the responseHandler() function was called only once.
The same error appeared to me too. Instead seeing the console, I go to the Network tab of Chrome browser and then see the success message has already appeared as below:
opaqueData
:
{dataDescriptor: "COMMON.ACCEPT.INAPP.PAYMENT",…}
Please note, while testing, enter the test cards for sandbox from https://developer.authorize.net/hello_world/testing_guide/
Given the following...
.html
<form (ngSubmit) = "onSubmit()"
#heroForm = "ngForm">
{{diagnostic}}
<div class = "form-group">
<label for = "name">Name</label>
<input type = "text"
class = "form-control"
required
[(ngModel)] = "model.name"
ngControl = "name"
#name = "ngForm"
#spy>
<p *ngIf = "name.dirty"
class = "alert alert-danger">
Name is required
</p>
<!--<p [hidden] = "name.dirty"-->
<!--class = "alert alert-danger">-->
<!--Name is required-->
<!--</p>-->
</div>
..
..is it possible to get the #name = "ngForm" (ngForm) reference in the .dart component to allow manipulation? Any suggestion and correction is welcome.
import this -
import {ViewChild} from 'angular2/core';
Just add this field with the annotation to the class
// Dart syntax
#ViewChild('heroForm') NgForm heroForm;
You can't use it in the constructor though because it is only set later. In ngAfterViewInit or event handlers for user input you can use it without limitations.
Dart CheckboxInputElement adds specified text between opening and ending input tags and the browser ignores this text. For example, the following dart code:
FormElement form = new FormElement();
CheckboxInputElement option = new CheckboxInputElement();
option.name = "text1";
option.value = "text1";
option.text = "text1";
form.children.add(option);
window.children.add(form);
creates the following html code:
<form>
<input type="checkbox" name="text1" value"text1">text1</input>
</form>
I end up with checkboxes without descriptors.
You have to add a Label with the descriptor text and link it to the Checkbox:
FormElement form = new FormElement();
CheckboxInputElement option = new CheckboxInputElement();
option.name = "text1";
option.value = "text1";
option.id = "text1";
form.children.add(option);
LabelElement label = new LabelElement();
label.htmlFor = 'text1';
label.text = "This is a checkbox label";
form.children.add(label);
window.children.add(form);
The for property will look for the input with the id specified and connect them (so that clicking on the label text will toggle the checkbox) .
You will end up with the following HTML:
<form>
<input type="checkbox" name="text1" value="text1" id="text1">
<label for="text1">This is a checkbox label</label>
</form>