Update or append URL parameters rather than replace entire URL - javascript

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();
}

Related

Multiple form filter GET paramaters

I have 2 forms GET to filter data, when I submit the first form I have this url
test.com?form1_filter['year']=2022
It works, but now if I want to submit the other form I would like to have
test.com?form2_filter['users']&form1_filter['year']=2022
The problem is when I submit a form, the parameters of the second form were remove
How can I keep all parameters in url ?
I tried in javascript with the event submit when it still remove my parameters.
<form id="form1" method="get">
<div>
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required>
</div>
<div>
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" required>
</div>
<div>
<input type="submit" value="Filter">
</div>
</form>
<form id="form2" method="get">
<select name="users" id="user-select">
<option value="1">Dad</option>
<option value="2">Mom</option>
</select>
<div>
<input type="submit" value="Filter">
</div>
</form>
It's 2 form on the same page
The form needs to have inputs for all the data you want to appear in the query string.
If you want to copy existing values without displaying a UI control for them, add them as hidden inputs.
<input type="hidden" name="form1_filter['year']" value="2022">
When you have two form on page that was loaded with URL query string, the newly sent form replaces all the parameters.
The solution is simple: Add hidden fields to the form dynamically (using server-side code) that will add the parameters back to the url.
<input type=hidden name=field-name value=field-value>
You can also do it using JS (not recommended).
Probably better solution is to redirect all requests to other URL that does not use the query string parameters. When query string is added to this URL, also redirect it (to URL that combines both). Example:
/foo?field1=bar
→ /foo/field1=bar
/foo/field1=bar?field2=baz
→ /foo/field1=bar,field2=baz
The only downside of this approach is that it is more complex on the server side.

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

getElementById() and input form

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.

How do I set my HREF to text from an input field and a select list?

I am trying to set my HREF of my button to the text that was in the input field and the selected option from my select list, when the user clicks the Search button.
<div>
<div>
<input type="text" value="Keywords" style="width:206px" />
</div>
<div style="clear:both">
<select>
<option value="Test">Test</option>
</select>
</div>
<div>
<button>Search</button>
</div>
</div>
How do I set the href from the value of the input box and the selected value of the select list? I might need to create a form for this but I thought I could get away with something a little simpler. I just need to compile the search string and redirect the user to the appropriate page, since the search engine is already built.
Thanks!
Edit 1
Sorry guys I am using php to load the select list but I am not able to provide the code for how the select list gets populated since it has company sensitive information in it. I shouldn't have included that.
Using javascript, you can retrieve and value of a form field and handle it to what you need.
Suppose the select ID's select and the link ID's is link:
var value = document.getElementById('select').value;
document.getElementById('link').setAttribute('href', value);
With PHP only (no jQuery, no Javascript) you would use a submit-button in your form and work with $_POST:
1st your form (stripped down to basics):
<form method="post">
<input name="keywords" type="text" value="Keywords" style="width:206px" />
<select name="options">
<option value="Test">Test</option>
</select>
<input type="submit" name="ok" value="ok" />
</form>
2nd, on the beginning of your php-page that holds that form:
if (isset($_POST['ok'])) { // submit has been clicked...
if (isset($_POST[keywords])) { // there's input in keywords
$keywords = $_POST['keywords'];
// sanitize $keywords to prevent sql-injection
// go to the page you want to call...
// assuming there's no output before header ...
// and $keywords is in the right format ...
// and you retrieved $_POST['options'] to do sth with that, too
header('Location: http://www.url.com/page.php?key=$keywords');
} else exit('no keywords entered!');
}

Categories

Resources