getElementById() and input form - javascript

I have a
function calcRoute() {
var start = document.getElementById('start').value;
}
And then a
<select id="start" onchange="calcRoute();">
<option value="somevalue">Dropdown 1</option>
<option value="somevalue">Dropdown 2</option>
<option value="somevalue">Dropdown 3</option>
</select>
Everything works properly. Now, instead of a dropdown list I need an input box. The problem is that I tried with
<form onsubmit="calcRoute();" method="get" id="start" action="#">
<input type="text" id="start" name="start">
<input type="submit" value="Go">
</form>
But it doesn't work (it's submitting the form to the server).. you can see a demo here. Remember that I don't need the dropdown list (it's there only to prove everything works), so it can go (there's no problem of double-called function). Thanks in advance :-)

You should change from:
<input type="text" id="startText" name="start">
To:
<input type="text" id="start" name="start">
As Javascript is searching for ID, not for name. (and in your code the ID is different from what Javascript is searching)
If you want use the input and the dropdown list in the same page, you just change your variable definition to something as:
var start = document.getElementById('startText').value || document.getElementById('start').value;
As if the input is empty, Javascript uses the value from the dropdown list.
Update
In adition to the change of the ID, change your form to something as:
<form>
<input type="text" id="start" name="start">
<input type="button" onclick="calcRoute();" value="Go">
</form>
To not allow form submission.

Related

Javascript handle 2 forms in one page

I have 2 forms. I ask for an API-KEY int he first form to load values account in some inputs of the second form and submit it.
The first form:
<form id="formAPI" name="formAPI">
<label for="" >API-KEY</label>
<input type="text" class="form-control" id="inputApi" placeholder="XXX-XXX>
<input id="continue" type="submit" value='Continue' onclick="submit_api()"/>
</form>
The second is like this:
<form id="form2" >
<label for="inputName3" >Name</label>
<input type="text" id="inputName3">
<label for="selectDevices" >Device</label>
*here devices have to be loaded automatically due to the API KEY*
<select class="form-control" name ="device_s" id="id_devices">
<option value="1"> Device 1 </option>
<option value="2">Device 2</option>
<option value="3">Device 3</option>
</select
<input id="rule1" type="text" placeholder="Give a rule" />
<input id="btn2" type="submit" value='Submit' />
</form>
I have no choice if the page is reloaded outright or not. the essential is to preload some data from the second form via the API KEY of the first form.
You can use LocalDB js in your form1.
Create a js to write your api values and when submit the form2... receive this infos and fill where you need it.
Localdb support refresh and don't loose data.
Example:
https://www.codeproject.com/Tips/1021483/Localdb-js

Update or append URL parameters rather than replace entire URL

I am attempting to build a week calendar. Currently the calendar has forward and backward links that work by building a new URL with ?date= appended to the end. Example:
Next week
Prev week
I would also like to add a filter the calendar, allowing only certain event types to be displayed on the calendar. I have come up with the following using the GET method:
<form method="GET" action="">
<select name="type">
<option selected disabled value=''>Type</option>
// event option stuff
</select>
<input type="submit" value="submit">
</form>
When submitted, this form simply rebuilds a new URL with ?type=<something> added to the end. If the URL already has a date parameter, my form ignores it. For example:
http://www.example.com/?date=2014-07-16
Becomes:
http://www.example.com/?type=dinner-date
Likewise, the week navigation ignores the filter.
Is there a simple way to get the filter and the navigation links to work together?
For example, if ?date= already exists, then &type= is appended to the URL. And if one or both parameters already exist then the values are simply updated.
I make the assumption that you could use jQuery:
<form method="GET" action="http://www.example.com">
<input type="hidden" name="date" id="date" value="<?php echo date;?>" />
<select name="type">
<option selected disabled value=''>Type</option>
<!-- event option stuff -->
</select>
<input type="submit" value="submit" onclick="buildLink($('#date').val());">
<br>
<input type=button onclick="buildLink('2014-07-23');" value="Next week" />
<input type=button onclick="buildLink('2014-07-09');" value="Prev week" />
</form>
And then this is a simple Javascript function that submits the form, and depending on what you choose, the date is changed in the form before it is submitted:
function buildLink(date) {
$('#date').val(date);
$('form').submit();
}

Calculate then change form field value onselect

I have a form that has some field values pre-populated from a PHP query. I am trying to change the value of the AMOUNT field by adding $2.00 to the existing value if a selection made in field "os0" contains "XX" anywhere in the selected value. I am having trouble getting the javascript code correct to make this work, i think im using the DOM wrong but not sure. The remote URL is only receiving the value set by the PHP echo on submit, regardless of the option/value selected for field "os0". Any help please.
<form method="post" action="remote-url" name="ppal">
<input type="hidden" name="amount" value="<?=$res[0]?>">
<input type="hidden" name="SKU" value="<?=$res[1]?>">
<select id="os0" name="on0" onChange="setval()">
<option value="Small">Small</option>
<option value="Medium">Medium/option>
<option value="Large">Large</option>
<option value="XL">X-Large</option>
<option value="XXL">XXL</option>
<option value="XXXL">XXXL</option>
<input name="submit" type="submit" value="submit">
</form>
My Javascript:
<script type="text/javascript">
function setval()
{
if (document.forms["ppal"].os0.value.indexOf("XX") > -1) {document.getElementById("amount") = document.getElementById("amount")+2};
}
</script>
There are a couple of problems with the script. First, it is calling document.getElementById("amount"), but there is no element with an ID "amount". You might want to change this:
<input type="hidden" name="amount" value="<?=$res[0]?>">
to this:
<input type="hidden" id="amount" name="amount" value="<?=$res[0]?>">
Second, when the script calls document.getElementById("amount"), it gets a reference to the input element, not the value the user typed into the element. You'll need to use the .value property of the input element to get what the user typed. See http://www.w3schools.com/jsref/prop_text_value.asp for more information about the /value property.
Keep in mind that the value property is a string, not a numeric, so you'll also have to convert using something like parseInt() before doing arithmetic.

Paypal Upload Command - How to encrypt/secure dynamically generated payment amounts?

Alright so I saw a question similar to this but thought my situation was a little different and warranted a question. So I am working on a site that allows you to select from two dropdowns. I'm using jQuery to keep track of when these drop downs change. Then based off of the change I update the PayPal hidden form(Cart Upload Command).
Then once the user is done selecting the options they click the checkout button which takes them to the PayPal page that shows them the items they selected and they can begin the checkout process through PayPal. It sounds so easy when I say it like this but then I read that it needs to be encrypted. My question is how do I go about encrypting a dynamically generated form. They suggest using the PayPal button creation tool. Well that would make sense if I had a static amount, but I do not.
HTML
<label for="space-selector">Select Space</label>
<select class="form-control" id="space-selector" name="space-selector">
<option value="150">10' x 10'</option>
<option value="225">20' x 10'</option>
<option value="300">30' x 10'</option>
<option value="500">Custom</option>
</select>
<label for="parkingpass-selector">2 Day Parking Pass - $50</label>
<select class="form-control" id="parkingpass-selector" name="parkingpass-selector">
<option value="0">No</option>
<option value="50">Yes</option>
</select>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<input type="hidden" name="business" value="jestewart.11#gmail.com">
<input type="text" name="item_name_1" value="Space Selected" readonly>
<input type="text" name="amount_1" value="1.00"readonly>
<input type="hidden" name="shipping_1" value="1.75">
<input type="text" name="item_name_2" value="Parking Pass" readonly>
<input type="text" name="amount_2" value="2.00" readonly>
<input type="hidden" name="shipping_2" value="2.50">
<input type="submit" value="Checkout">
</form>
jQuery
$(function (){
//space selector change
$("select[name=space-selector]").change( function () {
//update the hidden form values based off of selectors
$("input[name=item_name_1]").val($(this).find(":selected").text());
$("input[name=amount_1]").val($(this).find(":selected").val());
});
//parking pass selector change
$("select[name=parkingpass-selector]").change( function () {
//update the hidden form values based off of selectors
$("input[name=item_name_2]").val($(this).find(":selected").text());
$("input[name=amount_2]").val($(this).find(":selected").val());
});
});
Here is the fiddle to show you functionality. Fiddle
You do not need encrypting the amount and others. The only important thing is to make ALL verifications on the server.
Paypal has an API who permise that. IPN
Some links :
https://developer.paypal.com/webapps/developer/docs/classic/products/instant-payment-notification/
http://www.micahcarrick.com/paypal-ipn-with-php.html

JavaScript - Form validation loop through specific fields

I'm wondering, what would be a short/good way of performing form validation in JavaScript by looping through all input-text as well as <select>, however, the condition on the select is that out of the 2 selects, ONLY one needs to be selected.
<form id="daform">
<input type="text" value="" name="name" id="name" />
<input type="text" value="" name="last" id="last" />
<select id="choice1" name="choice1">
<option>Bye</option>
<option>Hello</option>
</select>
<select id="choice2" name="choice2">
<option>Bye</option>
<option>Hello</option>
</select>
<input type="submit" />
</form>
Look into,document.getElementsByTagName().
You really should use some javascript toolkit for help with this, but if not this might help:
validateSelectChoices = function(){
return document.getElementById('choice1').selectedIndex || document.getElementById('choice2').selectedIndex;
}
This will check to see if one of the select boxes has the 'hello' value selected (keep in mind that dropdowns will always default to the first option in the list, in your case 'bye'.
Have you tried the jQuery validation plugin?
You can see a demo here.

Categories

Resources