how to replace object values from input values with JavaScript - javascript

When I input values in input fields it has to set all values to my object but it doesn't do that.
So how can I set values of an object using input fields like this please make it workable...
Please make it as when I click the pay button it set all values of input to the object.
<input type="text" id="name"></input>
<input type="email" id="email"></input>
<input type="number" id="phone"></input>
<input type="text" id="billing"></input>
<input type="number" id="amount"></input>
<button id="rzp-button1">Pay</button>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
var nameUser = document.getElementById("name").value;
var emailUser = document.getElementById("email").value;
var phoneUser = document.getElementById("phone").value;
var billingAddress = document.getElementById("billing").value;
var amount = document.getElementById("amount").value;
var options = {
"key": "rzp_test_StY5fFXoMJvNaJ", // Enter the Key ID generated from the Dashboard
"amount": amount*100, // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
"currency": "INR",
"name": "Trendy Cart",
"description": "Test Transaction",
"image": "https://example.com/your_logo",
// "order_id": "order_9A33XWu170gUtm", //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
"handler": function (response){
alert(response.razorpay_payment_id);
alert(response.razorpay_order_id);
alert(response.razorpay_signature)
},
"prefill": {
"name": nameUser,
"email": emailUser,
"contact": phoneUser
},
"notes": {
"address": billingAddress
},
"theme": {
"color": "#F37254"
}
};
var rzp1 = new Razorpay(options);
document.getElementById('rzp-button1').onclick = function(e){
rzp1.open();
e.preventDefault();
}
</script>

Move the definition of options and rzp1 inside the onclick function. This way the values are only read when the button is clicked and the Razorpay constructor can be passed the values when they are filled in rather than as soon as the page loads.

Related

JS array find values

Please tell me why if you add a value to the search, then the span is not filled? If you leave only the if, then everything works.
I can't understand what the problem might be, since this is a common condition, if the code is found, then it displays the country in the span.
Without the else:
var phones = [{
"country": "UA",
"code": "+380"
},
{
"country": "RU",
"code": "+7"
},
{
"country": "MD",
"code": "+373"
}
];
$(".phone").keyup(function() {
var val = $(this).val();
phones.find(function(phones) {
if (phones.code == val) {
$("#county").text(phones.country);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="county"></span>
<input type="text" class="phone">
With else:
var phones = [{
"country": "UA",
"code": "+380"
},
{
"country": "RU",
"code": "+7"
},
{
"country": "MD",
"code": "+373"
}
];
$(".phone").keyup(function() {
var val = $(this).val();
phones.find(function(phones) {
if (phones.code == val) {
$("#county").text(phones.country);
} else {
$("#county").text("no");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="county"></span>
<input type="text" class="phone">
Because .find is looping through all your objects. If you search for lets say +7, it will show no then RU then no again, so it overwrites the value while without the else it gets in once and stays like that without replacing.
The solution here is to finish with your find first, and then do the if.
I would do something like this:
var phones = [{
"country": "UA",
"code": "+380"
},
{
"country": "RU",
"code": "+7"
},
{
"country": "MD",
"code": "+373"
}
];
$(".phone").keyup(function () {
var val = $(this).val();
var phoneObj = phones.find(x => x.code == val);
if (phoneObj == undefined) {
$("#county").text("no");
}
else {
$("#county").text(phoneObj.country);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="county"></span>
<input type="text" class="phone">
That is because the next value is not same as the input code, so the else loop is executed & shows no.
Explanation: The array method iterates all the object. So when the input matches it shows the country. But when the next object is under iteration it does not match with the input value. Hence the previous text is over written.
The input is +7 and matches with the code and showing the country. But immediately after that +7 is compared with next object and the code does not match. So else loop is executed.
When using only if nothing happens when the code and input value does not match.

How to validate dynamic values in postman

I want to validate some mandatory fields in my JSON response body. Until now I am using a static way of testing by using hardcoded values something like this
json_response = JSON.parse(responseBody);
x=json_response
pm.expect(x).to.equal("abc");
But I want to rerun my test scripts so I don't want to change my tests again and again to validate the values. Could anyone please suggest how can I validate my response body.
{
"Name": "John",
"Contact number": 9826363660,
"Address": "xyz"
}
As every time I will get new values in these keys "Names" "Contact number" "Address"
pm.response.json().hasOwnProperty("Name")
You can use hasOwnProperty to check whether the field exists
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
Do schema validation
var schema = {
type: "object",
properties: {
"NAME": {
"type":"string"
},
"ADDRESS": {
"type":"string"
},
"Contact Number": {
"type":"number"
}
}
};
pm.response.to.have.jsonschema(schema)
https://postman-quick-reference-guide.readthedocs.io/en/latest/schema-validation.html

JQuery autocomplete filter to search from beginning of line- input to display label but submit value

I have an array of towns - each town has a label and a value. Then there is an HTML input which should display the town label selected and on submit send the relevant value. A JQuery script with a filter that chooses the town based on the beginning characters of the label and not the characters in the rest of the label body. I need the script to, filter as designed, but when a town is selected, the HTML id #dtags must display the label and the #dtag must submit the value via a hidden input.
I have two scripts, each one does ONE of the above successfully, but I am battling to get one script to combine both "features".
I am looking for some assistance to create a single JQuery script to achieve the above. My JQuery skills are limited and the code below is what I have managed to find through searching and adapting - credit to the originators.
Please see code below:-
<div class="ui-widget">
<input id="dtags" class="form-control col-md-8" placeholder="Choose Delivery Town" required>
<input id="dtag" type="hidden" name="deltown">
</div>
<script>
(function() {
var towns = [
{ "label": "AANDRUS, Bloemfontein", "value": 1 },
{ "label": "AANHOU WEN, Stellenbosch", "value": 2 },
{ "label": "ABBOTSDALE, Western Cape", "value": 3 },
{ "label": "ABBOTSFORD, East London", "value": 4 },
{ "label": "ABBOTSFORD, Johannesburg", "value": 5 },
{ "label": "ABBOTSPOORT, Limpopo", "value": 6 },
{ "label": "ABERDEEN, Eastern Cape", "value": 7 },
{ "label": "ACKERVILLE, Witbank", "value": 8 },
{ "label": "ACORNHOEK, Mphumalanga", "value": 9 },
{ "label": "ACTIVIA PARK, Germiston", "value": 10 }
];
$("#dtags").autocomplete({
source: towns
});
// Overrides the default autocomplete filter function to search only from the beginning of the string
$.ui.autocomplete.filter = function (array, term) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
return $.grep(array, function (value) {
return matcher.test(value.label || value.value || value);
});
};
})();
//Uses event.preventDefault(); to halt the default and works as below
// $("#dtags").autocomplete({
//minLength: 1,
//source: towns,
//select: function(event, ui) {
//event.preventDefault();
//$("#dtags").val(ui.item.label);
//$("#dtag").val(ui.item.value);
//}
//});
//});
//});
//});
</script>
In case this could help anyone in the future, this is the script that I managed to get working successfully as per the question - slight change as to using an external data source:-
<script>
(function() {
var towns = [<?php require_once("towns.txt")?>];
$("#dtags").autocomplete({
source: towns,
select: function( event, ui ) {
$("#dtags").val(ui.item.label);
$("#dtag").val(ui.item.value);
return false;
}
});
// Overrides the default autocomplete filter function to search only from the beginning of the string
$.ui.autocomplete.filter = function (array, term) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
return $.grep(array, function (value) {
return matcher.test(value.label || value.value || value);
});
};
})();
</script>

How best can I querySelectorAll inputs by their name in Javascript

I'm trying to populate an array with html input field names then further match them to json object names to I can assign values into them at once as below
Kindly assist with a proper querySelectorAll(input) to get input fields by their name instead of their class names as the below is doing
var inputs = Array.prototype.slice.call(document.querySelectorAll('input'));
Then reuse in code below
Object.keys(recipient).map(function (dataItem) {
inputs.map(function (inputItem) {
return (inputItem.name === dataItem) ? (inputItem.value = recipient[dataItem]) : false;
});
});
My data looks like so:
"data": {
"type": "beneficiaries",
"id": "C9QV9ZNZ",
"attributes": {
"bank_name": null,
"last_name": "xcxc",
"beneficiary_type": "MT",
"mobile_money_msisdn": null,
"branch_name": null,
"recipient_type": "P",
"first_name": "dfgdf",
"middle_name": null,
"name": "dfgdf xcxc",
"mobile": null,
"account_number": "111111111"
}
The nested loops is overkill. Just loop over the inputs and see if the key exists in the object.
var data = {
name1: 123,
name2: 345,
name3: 678
}
document.querySelectorAll("input[name]").forEach( function (input) {
var name = input.name;
if (data[name]) input.value = data[name]
})
<form>
<input name="name1" />
<input name="name2" />
<input name="name3" />
</form>

How to Fill a Form with Data from a JSON

I have two file, a JSON storing some data and a simple html form.
I want to fill the form with random data taken from a JSON. Those data should be relative to the same object.
My form looks like:
<form id="first_form">
Name:<br>
<input id="name" type="text" name="name">
<br>
Phone:<br>
<input id="phone" type="number" name="phone">
<br>
City:<br>
<input id="city" type="text" name="city">
<br>
Pcode:<br>
<input id="pcode" type="number" name="pcode">
Note:<br>
<input id="note" type="text" name="note">
<br>
</form>
My JSON looks like:
users: [
{
"name": "name1",
"phone": "111111111",
"address": "address1",
"city": "city1",
"pcap": 1111,
"note": ""
},
{
"name": "name2",
"phone": "222222222",
"address": "address2",
"city": "city2",
"pcap": 2222,
"note": ""
},
{
"name": "name3",
"phone": "333333333",
"address": "address3",
"city": "city3",
"pcap": 3333,
"note": ""
},
{
"name": "name4",
"phone": "44444444",
"address": "address4",
"city": "city4",
"pcap": 4444,
"note": ""
}
]
Is there a way to do so in a no-jQuery way?
I hope it is users = rather than users :. Also change id 'pcode' to 'pcap'
In that case you can use the following code
var indx = Math.floor(Math.random()*users.length);
var randUser = users[indx];
for(prop in randUser) {
document.getElementById(prop).value = randUser[prop];
}
There are non-jquery (or other framework) ways to do this, but they are quite tedious (thats why these frameworks exists).
In addition: How would your fill a "single" form with an ARRAY of objects? you will either need to repeat the form or have some way of selecting which dataset you want.
One easy way to fill a form from a json is https://github.com/corinis/jsForm
(disclaimer: I am the author of that module)
If you really want to do it the hard way I suggest taking a close look at http://www.w3schools.com/js/js_htmldom.asp
You need to start processing the complete DOM and identify which form-fields match input and have to worry about the cross-browser dom implementation issues.
Basically you start with getting the "root" of where you want to start parsing:
var root = document.getElementById("first_form");
and then have a recursive function that goes through all children and its childrent to identify a form, which you can then check against your object:.
function replace(root, obj) {
var children = root.childNodes;
for(var i = 0; i < children.lenght; i++) {
var child = children[i];
// go deep
if(child.children) {
replace(child, obj);
}
// check if we have a name attribute - then assume its a form and set its value
if(child.getAttribute("name")) {
child.setAttribute("value", obj[child.getAttribute("name")]);
}
}
}
You can extend the code to also allow sub-objects or other peculiarities in your object.
Going the other way round (doing a for-in in your object and searching for fields) also works and is less code, but that only works for very simple objects.

Categories

Resources