I have the following form. I want to change the form action to include the variables inside this form, 500pxuserid. Is there a way to do this? For the user experience, I want to prevent a re-direct. Currently, I get the variable on the other side, and then re-route them a new url, but this required a re-direct.
<form action="importphotos.php?view=500&mode=upload&page=1&u=&u2=&500pxuserid=" method="post">
<div style="width:100%;height:45px;background-color:rgb(2,173,234);">
<img style="width:30px;padding:10px;float:left;" src="https://photorankr.com/graphics/import_500pxicon.png" />
<h3 style="font-weight:300;font-size:20px;text-align:left;padding-left:40px;margin-top:8px;color:white;float:left;">Login to 500px</h3>
</div>
<div style="width:90%;height:150px;border-bottom:1px solid rgba(255,255,255);float:left;margin-top:-5px;">
<input style="outline:none;padding:8px;border-radius:3px;font-size:18px;width:263px;float:left;border:1px rgb(100,100,100);border-style:solid; margin:8px; margin-left:16px;" placeholder = "Enter your 500px id" type="text" name="500pxuserid" />
<input type="password" style="outline:none;padding:8px;border-radius:3px;font-size:18px;width:263px;float:left;border:1px rgb(100,100,100);border-style:solid; margin:8px; margin-left:16px;" placeholder = "Enter your 500px password" type="text" name="500pxuserpassword" />
<input class = "submitbox" type="submit">
</div>
</form>
</div>
Using javascript you could change the form action on form submit (onsubmit).
<script type="text/javascript">
function get_action(form) {
var user = document.getElementById('userid').value;
form.action = "importphotos.php?view=500&mode=upload&page=1&u=&u2=&500pxuserid=" + user;
}
</script>
<form action="" method="post" onsubmit="get_action(this);">
...
// add id=""userid" to input
<input ... type="text" name="500pxuserid" id="userid" />
</form>
Three things:
Add an id attribute to your form. For example, foo.
Add an onsubmit attribute to your form, onsubmit="foo()"
Add an id attribute to your 500pxuserid input. For example, bar.
It should look like this:
<form id="foo" onsubmit="foo();" ...
And your input:
<input id="bar" ...
And in your JavaScript add the following function:
function foo()
{
var form = document.getElementById('foo'),
bar = document.getElementById('bar');
form.action = 'importphotos.php?view=500&mode=upload&page=1&u=&u2=&500pxuserid=' + bar.value;
}
Also, keep in mind that this would only work if the user's browser has JavaScript enabled.
Related
I have some numbered pages:
1.php
2.php
3.php
etc.
I want to create a textbox that the user enter any number: 2 for example, and hit enter or Go button, and they will go to the page 2.php depending on the number entered.
I know how to link to a specific page as in form action="....", but I am not sure how to echo the user input and translate it as link (whether using html or php).
Ex:
<form method="POST">
<input type="number" value="" />
<input type="submit" value="Go" />
</form>
You need to add an action attribute to your form and a name attribute to your number input. The file from your action attribute will "catch" the POST variables and do the logic needed to redirect your user. Change your form tag to:
<form method="POST" action="redirect.php">
<input type="number" value="" name="redirect" />
<input type="submit" value="Go" />
</form>
Then create the redirect.php file that gets the POST variables and does the redirection:
<?php
$redirectPage = (int) $_POST['redirect'];
$redirectUrl = "http://www.example.com/{$redirectPage}.php";
header("Location: $redirectUrl");
printf('moved.', $redirectUrl);
Beware that there's no input validation nor error handling included.
I think, the best available option in your case would be the one using client-side javascript to dynamically change the form's action attribute base on the number entered in the input box.
A quick and dirty solution to fulfil such a task might look like this
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function submitAction(formElement) {
var // get the input box element
el = document.getElementById('form-action-number'),
// get a number specified by user in the input box
num = parseInt(el.value),
// validate that it's really a number and is greater than zero
// (you don't want someone to request -666.php right? :)
// build a page url using the correct number
page = !isNaN(num) && num > 0 ? num.toFixed(0).toString() + '.php' : undefined;
if (page) { // the page url is valid
// set form's action attribute to an url specified by page variable
formElement.setAttribute('action', page);
// returning true will allow the form to be submitted
return true;
}
// you might think of a better way to notify user that the input number is invalid :)
console.error('INVALID NUMBER SPECIFIED!');
// returning false will prevent form submission
return false;
}
</script>
</head>
<body>
<!-- When user clicks Go, the return value of submitAction function will be used to decide if the form should be submitted or not -->
<form method="POST" onsubmit="return submitAction(this)">
<input id="form-action-number" type="number" value="" />
<input type="submit" value="Go" />
</form>
</body>
</html>
With PHP you can do something like this:
<?php
// Check if the POST value has been set
if(isset($_POST['my_number'])) {
// Redirect to the corresponding page
header('Location: ' . $_POST['my_number'] . '.php');
}
?>
<form method="POST">
<input name="my_number" type="number" value="" />
<input type="submit" value="Go" />
</form>
This is like DaMeGeX's answer but uses javascript to go to the new page.
<?php
// Check if the POST value has been set
if(isset($_POST['my_number'])) {
// Redirect to the corresponding page
echo "<script> window.location.href = '".$_POST['number'].".php' </script>";
}
?>
<form method="POST">
<input name="my_number" type="number" value="" />
<input type="submit" value="Go" />
</form>
I want to make a website that has a text box and if an user enters "hello" and clicks submit I want to show example.com/test.php?link=hello
How can I do that? The php is already written I just need to make something with html or php to be able to show example.com/test.php?link=whatUserEnters
Thanks!
The form should have the method "get" defined. Then on the test.php page you just
<form method="get" action="test.php">
...
<input type="text" name="link"/>
</form>
and on the test.php
<? echo $_GET['link']; ?>
or
<?= $_GET['link']?>
Edit with the POST solution:
<form method="post" action="test.php">
...
<input type="text" name="link"/>
</form>
and on the test.php
<? echo $_POST['link']; ?>
<!DOCTYPE html>
<html>
<body>
<!--just create a text box, give an id to it.-->
<input type="text" id="text_to_display" />
<input type="button" value="Submit" onClick="concat();" />
<!--Create a label or div assign a separate id to it too.-->
<p id="concatenated_text"></p>
<script>
//Create a function in javascript.
function concat() {
//Get the value in function using that id.
var text = document.getElementById("text_to_display").value;
//Concatenate the value with the string and put it in div using id.
var final_text = "example.com/test.php?link="+text;
// you can use location.href to use it for link purpose
location.href = final_text;
}
</script>
</body>
</html>
<script>
function funcGet(val)
{
if(val=="Create new category")
{
var element = document.createElement("input");
element.setAttribute("type", "input");
element.setAttribute("name", "new_cat");
element.setAttribute("placeholder", "Enter a new category name");
var foo = document.getElementById("cat");
foo.appendChild(element);
}
}
</script>
<div id="cat">
<form method="post" action="">
<input type="text" placeholder="Enter a topic name" name="word"><br/><br/><br/>
<input type="input" name="link" placeholder="Enter a link here"><br/><br/><br/>
<select name ="category" onchange="funcGet(this.value);">
<?php
displayCat();
?>
</select>
<br/><br/>
</div>
<select name="site_type">
<?php
displaySitetype();
?>
</select><br/><br/><br/>
<input type="submit" value="Submit data">
</form>
<?php
if($_POST['category']=="Create new category") {
if($_POST['new_cat'])
{
$new_cat=mysql_real_escape_string($_POST['new_cat']);
create_new_catentry($new_cat);
$catname=$new_cat;
}
?>
I am not able to get the value of new_cat using $_POST in the same page. What am i doing wrong? I am not able to solve it. I am able to get every other post data from the page without any fault, is there any naming stuff gone wrong? I am not sure what the problem is, is my Javascript wrong?
Update: Please note that the php script down at the bottom is just a small part of a system not the whole part.
In your JS code you're appending the new <input> within the cat div, but this way it will be outside the <form>. Append your field to the form, assigning it an id, like this:
HTML:
<form method="post" action="" id="catform">
JS:
var foo = document.getElementById("catform");
foo.appendChild(element);
In your javascript add new attribute:
element.setAttribute("id", "new_cat");
I have a simple php - password protecton / login based on a form which works. PHP-code is in page "secure.php" and includes the html-file "accessed.html" when user + pass is correct.
But i want the form to hide when hidden page (accessed.html) is shown.
I have tried wrapping the form in a div and using javascript and display: none to hide, but it doesnt work - not locally or on server.
What am i doing wrong? It doesnt have to be js hiding the form after login..
PHP in top
<?php
$user = $_POST['user'];
$pass = $_POST['pass'];
if($user == "a"
&& $pass == "a")
{
include("accessed.html");
echo "<script>
document.getElementById('wrap').style.display = 'none';
</script>";
}
if(isset($_POST))
?>
And the form in the body:
<div id="wrap">
<form method="POST" action="secure.php">
User <input type="text" name="user"></input>
Pass <input type="text" name="pass"></input>
<input type="submit" name="submit" value="access page"></input>
</form>
</div>
Move the <script> to after wherever you display "#wrap"
If you want to do it on the server side (PHP) just use an if statement.
I think this is what you are looking for my friend
<html>
<body>
<div id="wrap">
<form method="POST" action="temp.php" target = "hidden">
<input type="text" name="user">User</input>
<input type="text" name="pass">Pass</input>
<input type="submit" name="submit" value="access page" onclick = "closediv()"></input>
</form>
</div>
<iframe name = "hidden" id = "hidden" style = "display: none"></iframe>
<script>
function closediv(){
document.getElementById("wrap").style.display = "none";
}
</script>
</body>
</html>
With the above code, you'll need to do your PHP processing on the current page. If this isn't doing what you want it to do and I misread your question, let me know and we can work on your predicament.
I need jquery to check if my posted filename (up_image) is empty or not.
if it's empty i need a div tag to be shown and come with some kind of alert message.
if not, just do the
$("#submit").submit();
<form action="/profile/" method="post" enctype="multipart/form-data" id="submit">
<p>
<label for="up_image">image:</label>
<input type="file" name="up_image" id="up_image" />
</p>
Upload
</form>
$(function() {
$("#post_submit").click(function() {
var fil = $("#up_image");
if($.trim(fil.val()).length == 0) {
alert("Choose a file!");
fil.focus();
return false;
}
$("#submit").submit();
});
});
1: use a standard submit button to submit your form rather than a javascript-dependent link, for accessibility reasons, and to prevent brokenness if someone tries to right-click-open-in-new-window or other similar action on the link. If you want it to look like a link, you can still use a button, just apply some CSS to make it no longer look like a button.
2: use the form.onsubmit event to do validation rather than relying on a submit button click (forms can also be submitted by pressing enter, which may not always generate a button click)
<form id="uploadform" method="post" action="/profile/" enctype="multipart/form-data">
<p>
<label for="up_image">image:</label>
<input id="up_image" type="file" name="up_image" />
</p>
<p>
<input type="submit" value="Upload" />
</p>
</form>
<script type="text/javascript">
$('#uploadform').submit(function(e) {
if ($('#up_image').val()=='') {
alert('Please choose a file to upload.');
e.preventDefault();
}
});
</script>