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?
Related
The form works fine with the parameter action= "(path to php file)", but when I try to use the XMLHttpRequest instead I don't get any response.
The reason I want to use XMLHttpRequest is that I want to save the response (text) into an array.
function receivedData(serverReply) {
if (serverReply.readyState == 4 && serverReply.status == 200) {
document.getElementById('main').innerText = serverReply.responseText;
}
else {
console.debug('problem ' + serverReply.errorCode);
}
}
function sendRequest() {
let myForm = new FormData(document.getElementById('timeDateFormId'));
let xhr = new XMLHttpRequest();
xhr.open("POST", "get3.php");
xhr.addEventListener('readystatechange', function () { receivedData(xhr) }, false);
xhr.send(myForm);
}
document.getElementById('timeDateFormId').addEventListener('submit', sendRequest, false)
<form id="timeDateFormId" method="post">
<label>From date (YYYYMMDD)</label>
<input type="text" name="fDate">
<br>
<label>To date (YYYYMMDD)</label>
<input type="text" name="tDate">
<br>
<label>From time (HH:MM)</label>
<input type="text" name="fTime">
<br>
<label>To time (HH:MM)</label>
<input type="text" name="tTime">
<br>
<input type="submit" name="submit" value="go">
</form>
You call the sendRequest method when you submit the form.
Submitting the form causes the browser to navigate to the response from the form submission.
This loads a new page which cancels the Ajax request.
You need to prevent the default behaviour of form submission if you want to run JavaScript instead.
function sendRequest(evt) {
evt.preventDefault();
// etc
I want to use (base64 encoded key) as URL parameter
like:
mydomain.com/?key=cHVyY2hhc2VwcmljZT0zNCQ=
that returns: purchaseprice=34$
I read How to get base64 encoded... but it did not help.
here is my working code without base64:
<input type="text" id="price" />
<script>
const url = new URL(window.location);
document.querySelector('#price').value = url.searchParams.get('purchaseprice');
</script>
and in Codepen
If you're expecting the return value of purchaseprice to be base64 encoded then you'll need to use the atob() function:
<input type="text" id="price" />
<script>
const url = new URL(window.location);
document.querySelector('#price').value = atob(url.searchParams.get('purchaseprice'));
</script>
Details here: Base64 Encoding / Decoding in JavaScript.
Example: CodePen
thanks to cptcoathanger
i did it With this Simple code.
var fdurl = new URL(window.location);
var fdunc = fdurl.searchParams.get('key');
var url = "https://codepen.io/shahabarvin/pen/JmzyZq?" + window.atob(fdunc);
document.querySelector('#price').value = new URL(url).searchParams.get("purchaseprice");
<input type="text" id="price" />
Codepen
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/
If click the submit button or a-element then automatically the input text is clicked.
function send()
{
var txt = document.getElementById("textbox");
txt.click();
}
<input type="text" id="textbox" name="textbox" style="width:90%;">
<a id="send" style="display:none;" onclick="send()" href="">Send</a>
If you want to get the value of "textbox" with the following instruction:
var txt = document.getElementById("textbox");
Then you need to correct it like this:
var txt = document.getElementById("textbox").value;
I'm having trouble passing my textbox data to a controllers action parameters.
I'm trying to get the url to look like:
http://localhost:51124/gifts?searchTerm=test
but when I enter in text into the text box I get a url that looks like:
http://localhost:51124/gifts
Here is the code I have for the route:
routes.MapRoute("Gifts",
"gifts",
new { controller = "Gifts", action = "Search" });
here is the code for the page with the text box and button to submit the text box data:
<form method="GET">
<input type="search" name="searchTerm"/>
<input type="button" value="Search By Category" onclick="location.href='#Url.Action("Search", "Gifts")'" />
</form>
here is the code for the controller that I'm trying to pass data to unsuccessfully:
public ActionResult Search(string searchTerm = null)
{
var model = db.Gifts.ToList();
return View(model);
}
"searchTerm" never gets any parameter that I pass into the text box. It's always null.
Create a form element in you view with an input (i.e. the search box) that has a name attribute matching the parameter and a submit button.
#using (Html.BeginForm("Search", "Gifts") {
<input type='text' name='searchTerm' value='' />
<input type='submit' value='search' />
}
This will post back to the Search method in the Gifts controller, passing the vale of the search box to the parameter 'searchTerm'
you have to build this with jquery. add a class to the inputs to use as a selector
<input type="search" name="searchTerm" class="txtSearch" />
<input type="button" value="Search By Category" class="btnSearch" />
then in your script
$('.btnSearch').on('click', function(){
var url = '#Url.Action("Search", "Gifts", new { searchTerm = "----" })'.replace("----", $('.txtSearch').val());
window.location(url);
});