Reputation: 113
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>
Upvotes: 2
Views: 380
Reputation: 12433
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>
Upvotes: 1
Reputation: 12341
Three things:
id
attribute to your form. For example, foo
.onsubmit
attribute to your form, onsubmit="foo()
"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.
Upvotes: 0