Create a link that automatically fills a field on the target page - html

I'm coding a newsletter and the guy that asked me to do it wants a link in it...all perfect no problems...
Now the problem is that when you click on this link it goes on a page with fields and the guy asked me if it's possible to automatically fill up one of the fields.
The page is a subscription page for some services and this guy wants me to fill up the referral field automatically when you land on the page with his email. Is it possible?
Thanks heaps

One way to do this is to place the field name and value in the query string. The "query string" is the part of a URL which contains field/value pairs. It is separated from the page address by a ? followed by field=value pairs separated by & characters. For example,
http://www.example.com
...would become...
http://www.example.com?fieldName=fieldValue
In order for this to work, the page must parse the field as part of the HTTP GET request and then return the value as a pre-filled field. If the form is properly validated at the server side then it usually already has this capability of parsing fields and retaining their values across multiple submissions of the same form. This is because doing so allows the page to be redrawn with an error message if some fields are blank or have invalid values.
This is very easy to test - just find the field name in the page source and extend the URL you are currently using as shown above. If it works you are done. If not, you may need to get the code on the server side updated to accept the field as part of the query string.
Other ways to accomplish the same thing are more dependent on the server-side code. For example, many sites embed the associate referral ID in the URL such as:
http://www.example.com/123456/
In this case, server-side code interprets the directory path as a field and parses it accordingly. Because this requires very specific server-side code to support it, the first option is probably your best bet.

Encountered this issue, and the following Javascript code did the trick.
Using #T.Rob query string parameters.
HTML CODE:
<input type="text" name="fillfield" id="fillfield" style="width: 350px;" class="input" value=""/>
JAVASCRIPT CODE:
window.onload=function(){
function querySt(ji) {
hu = window.location.search.substring(1);
gy = hu.split("&");
for (i=0;i<gy.length;i++) {
ft = gy[i].split("=");
if (ft[0] == ji) {
return ft[1];
}
}
}
var fieldName = querySt("fieldName");
if( fieldName==null){
}else{
document.getElementById('fillfield').value = fieldName;
}
}
When you visit http://www.example.com?fieldName=fieldValue it would automatically fill in fieldValue to the fillfield input.

Using php
<?
$passthis = "See you on the other side";
echo '<form action="whereyouwantittogo.php" target="_blank" method="post">'.
'<input type="text" name="passthis1" value="'.
$passthis .' " /> '.
'<button type="Submit" value="Submit" >Submit</button>'.
'</form>';
?>
The script for the page you would like to pass the info to:
<?
$thispassed = $_POST['passthis1'];
echo '<textarea>'. $thispassed .'</textarea>';
echo $thispassed;
?>
Use this two codes on seperate pages with the latter at whereyouwantittogo.php and you should be in business.

Related

Promo Code Validation

I need to validate a Promo Code for one of my html Booking form field. If the entered promo code is correct, users can submit the Booking details. Only one unique promo code. Something like "15OFFNOW" How should I do it? Please help.
Thanks.
First, don't put the promo code in your page. Anyone can see it.
I would do this, but it depends on actually functionality.
Do client side check (this can be bypassed by a malicious user)
Do server side check
Do client side check
Use a good non-reversible hashing algorithm and verify what you have in the prom text box to the hash you have stored in a JavaScript variable or in a data-hash attribute.
So if hash(text box value) == valueOf(data-hash), then proceed to sever validation.
Do server side check
In server no need of hash. Just check the post string with the promo code you have.
i try your code
<form method="post">
<input class="form-control form-control-light bdr-2 rd-0" required
data-label="Promo Code"
data-msg="Please enter a valid promo code."
type="text" name="promo-code"
placeholder="Promo Code"
pattern="15OFFNOW" required>
<input type="submit" value="submit"/>
</form>
validation is work . show this message .
You can use Javascript for that , I fyou want to match promocode or you can validate it at backend using any backend language like PHP or java
for JQuery
//previous Ajax code here
if($("#input_id").val() !== "15OFFNOW"){
return false ;
}
// here you can proceed for Ajax request
You are looking for an input pattern, also called regexp (though I would instead suggest doing it js way (but not global) or on server side as advanced users can simply inspect html code). Most probably something like this
<input type="text" name="promo" pattern="15OFFNOW" required >
Also, please try googling it, there're similar questions like this answered also on StackOwerflow, e.g.
html: Can we match an exact string using html pattern attribute only?
js & php: check if input value not equal to integer then don't submit form

HTML Tag security in codeigniter

I am working with codeigniter,
I enter the following value in a text box
'>"><script>alert(document.cookie)</script>
And save it with, geting that value using $this->input->post();
When we try to show the string in a text box,the text will be closed and showing like,
<input name="field_14" id="field_14" type="text" value="'>">[removed]alert([removed])[removed]" />
in my config file
$config['global_xss_filtering'] = TRUE;
How to overcome this situation?
Anyone know?
Check your POSTDATA as GET or POST (Depends what method is used in the form) in your controller or model. If you are recordering in database you can filter data with escape function:
$field_14 = $this->db->escape($field_14));
Anyway, full code should be checked...

Button to increment contents of html file by one each press

Im currently creating a website for my chickens that will have an "egg counter". I have a hidden part of the site that is password protected where I want to put a button that every time I press it, adds one to the egg value. Currently, I have an html file that has just the number in it which I have embedded into the site.
(this is the code that embeds the .html file)
<h2><b>Egg Counter!<b/></h2>
<p>So far our chickens have laid</p>
<font size="20" color="#FFFFFF"><embed src="./eggs.html"></embed></font>
I'm a novice programmer and I'm not sure whether this is the right approach but I have no idea how to make the button that changes the egg value.
Any help is greatly appreciated!
You can use the javascript onclick event to increment the number by 1 per click.
place this in your head section.
function incrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
}
Place this where you want the button to display.
<form>
<input type="text" id="number" value="0"/>
<input type="button" onclick="incrementValue()" value="Increment Value" />
</form>
I think you want the number to be stored, so it's always showing and you can update it as and when your hipster chickens lay eggs. The previous answer will allow you to increment the number but only while you have the browser open.
I think the best way to do this is with PHP.
So first of all you want your page to be .php , lets say admin/loggedin.php.
You want to create a blank file in the same directory called eggs.txt , with the permissions 0755.
Then you want your form to look like this
<form method="POST" action="loggedin.php">
<input type="text" name="num" value="0"/>
<input type="submit" value="Chicken came first" name="eggs">
</form>
To explain the method / action:
method
is how you want to send the data to the
action
page.
Options are $_POST and $_GET, I don't think going into too much detail here will help.
action= is to tell the form what page to send this data to, in this case we've chosen to send it to the same page the form is on (loggedin.php).
So now once you submit that form we will have a $_POST['num'] available to us which contains the number you entered into the form input field.
To get this, you want to add at the top of your page: EDIT (have changed the section of code below - file_put_contents should of been inside the if($_POST['eggs']) {
<?php
//this checks to see if the form was submitted by checking 'eggs' is set.
if($_POST['eggs']) {
// create a nicer variable for our egg number, it deserves a nice name.
$egg = $_POST['num'];
//this will put the new number of eggs in our eggs.txt file
file_put_contents('eggs.txt',$egg);
}
?>
file_put_contents() writes to a file
Next you want to be able to get that number from the file on your display page. To do this:
<div class="my_egg_count">
<?php echo file_get_contents('eggs.txt'); ?>
</div>
file_get_contents() reads a file, echo 'echo's' from the server to client side.
Let me know if you have trouble with this, you don't want to end up with egg on your face.
EDIT:: try this
if(is_writeable('eggs.txt')) {
if(file_put_contents('eggs.txt',$egg)) {
echo 'File Updated';
}else {
echo 'Error Updating File';
}
}else {
echo "Error: File Isn't Writeable [possibly named incorrectly, isn't in the correct location, or wrong permissions]";
}

How to remove trailing question mark from a GET form with no fields?

Example:
<form>
<input type='submit'>
</form>
When submitted results in:
http://example.com/?
How to make it:
http://example.com/
?
[This is a very simple example of the problem, the actual form has many fields, but some are disabled at times. When all are disabled, the trailing ? appears]
In my case I'm using window.location, not sure it's the best alternative, but it's the only one I could make it work:
$('#myform').submit(function()
{
... if all parameters are empty
window.location = this.action;
return false;
});
My real use was to convert GET parameter to real url paths, so here is the full code:
$('#myform').submit(function()
{
var form = $(this),
paths = [];
// get paths
form.find('select').each(function()
{
var self = $(this),
value = self.val();
if (value)
paths[paths.length] = value;
// always disable to prevent edge cases
self.prop('disabled', true);
});
if (paths.length)
this.action += paths.join('/')+'/';
window.location = this.action;
return false;
});
Without using Javascript, I'm not sure there is one. One way to alleviate the problem may be to create a hidden input that just holds some junk value that you can ignore on the other side like this:
<input type="hidden" name="foo" value="bar" />
That way you will never have an empty GET request.
This is an old post, but hey.. here ya go
if you are using something like PHP you could submit the form to a "proxy" page that redirects the header to a specific location + the query.
For example:
HTML:
<form action="proxy.php" method="get">
<input type="text" name="txtquery" />
<input type="button" id="btnSubmit" />
</form>
PHP (proxy.php)
<?php
if(isset($_GET['txtquery']))
$query = $_GET['txtquery'];
header("Location /yourpage/{$query}");
?>
I am assuming this it what you are trying to do
I was looking for similar answer. What I ended up doing was creating a button that redirects to a certain page when clicked.
Example:
<button type="button" value="Play as guest!" title="Play as guest!" onclick="location.href='/play'">Play as guest!</button>
This is not an "answer" to your question but might be a good work around. I hope this helps.
Another option would be to check the FormData with javascript before submitting.
var myNeatForm = document.getElementById("id_of_form");
var formData = new FormData(myNeatForm); // Very nice browser support: https://developer.mozilla.org/en-US/docs/Web/API/FormData
console.log(Array.from(formData.entries())); // Should show you an array of the data the form would be submitting.
// Put the following inside an event listener for your form's submit button.
if (Array.from(formData.entries()).length > 0) {
dealTypesForm.submit(); // We've got parameters - submit them!
} else {
window.location = myNeatForm.action; // No parameters here - just go to the page normally.
}
I know this is a super old question, but I came across the same issue today. I would approach this from a different angle and my thinking is that in this day and age you should probably be using POST rather than GET in your forms, because passing around values in a querystring isn't great for security and GDPR. We have ended with a lot of issues where various tracking scripts have been picking up the querystring (with PII in the parameters), breaking whatever terms of services they have.
By posting, you will always get the "clean url", and you won't need to make any modifications to the form submit script. You might however need to change whatever is receiving the form input if it is expecting a GET.
You will get a trailing question mark when submitting an empty form, if your server adding trailing slash to URL and your action URL of form - is directory (and not file) and:
Trailing slash in the action attribute URL (action="/path/").
With dot (with or without trailing slash after it) instead specific URL (action="." or action="./").
With empty action (action="").
Form without action attribute.
Try to specify an action-URL without trailing slash:
action="path"
or
action="./path/sub"
and
action="/path"
or
action="/path/sub"

HTML: Update page vs. Redirecting to a New Page After User Input

I'm trying to write some HTML code so that a table will be created on the current page after the user submits inputs into a form. That is, instead of entering in values into a form, clicking submit, and being redirected to a new page with the computed output values, I'd like for the output values to appear at the bottom of the current page. This way, the user inputs stay intact and the only change is that an output table is appended to the bottom of the current page. Here's an example of how I would ideally like the page to work:
http://amort.appspot.com/
Any help would be very much appreciated. Thanks!
You need your form action to point to same page. lets say the URL of your page is
http://example.com/page.php than you need to point your action to same page.
<form action='http://example.com/page.php'> and have inside your form a hidden field say
<input type='hidden' name='formSubmitted' value='1' > when this form is submitted to itself you can check if hidden field has a value through the get parameters.
Once you get that value you can make a condition check to show up a table. But ofcoursr you will need to use a server side language like jsp or php for that.
One alternate way is you do not submit your form. But instead have a javascript called when you click submit query button. This javascript will read the values from the filled in form boxes and will display them in the table below.
You can use PHP in your HTML file.
Example
simply create you form like so.
<form action="welcome.php" method="get">
Name: <input type="text" name="fname" />
Age: <input type="text" name="age" />
<input type="submit" />
</form>
When the user clicks the "Submit" button, the URL sent to the server could look something like this:
http://www.w3schools.com/welcome.php?fname=Peter&age=37
The "welcome.php" file can now use the $_GET function to collect form data (the names of the form fields will automatically be the keys in the $_GET array):
Then create a table and add the lines are the right places. so this would be your table for example and what you would write in the HTML file its as simple as that.
Welcome <?php echo $_GET["fname"];?>.<br />
You are <?php echo $_GET["age"]; ?> years old!
Hope that helps.
Let me know if it does. Thanks
PK
You need to use javascript to do this. If you provided the current code of your page and the specific goal you wish to accomplish then I could give an example script, however if you feel comfortable coding it yourself then just look up javascript tutorials.
You could easily do this with jQuery. Submit the form to the calculator page with .ajax(), and have the calculator output its results as JSON. You can then output that result in the bottom table without the user ever leaving/reloading the page.
Hope this helps.
You don't say what you're using to process the form, but you won't be able to process it with just HTML. So you'll need some sort of processing with another language.
As others have mentioned, you could do this with JavaScript. AJAX would be one way, but you could write your own code to do this if you really want to (but I wouldn't recommend it if you don't have to).
Another way to do this is with PHP. Have the page process itself when the form is submitted.
Similar to the PHP suggestion, you could do this via a CGI script/program. The action specified within the form would be to call the page itself. Here is a simple Python example, assuming the name of your script is so_self_call.py:
#!/usr/bin/env python
import cgi
import sys
def end_page():
print "</body>"
print "</html>"
def print_form():
print "<form action=\"so_self_call.py\">"
print "<input type=\"text\" name=\"theText\">"
print "<input type=\"submit\">"
print "</form>"
return
def start_page():
print "Content-Type: text/html"
print
print "<html>"
print "<head>"
print "<title>Example of Python CGI script which calls itself</title>"
print "</head>"
print "<body>"
return
def main():
start_page()
print_form()
the_form = cgi.FieldStorage()
if "theText" in the_form:
print "From last time, theText = %s" % (the_form["theText"].value)
end_page()
return
if __name__ == "__main__":
sys.exit(main())