Testing Form Submit - html

I'm setting up a FORM and need to test it without processing the php... how do I make the submit bottom take me to the next padro
<form action="test.html" method="POST" id="acct_access">
...
</form>

In case you want to make some client-side validation (hope I get the question correctly) you need the onsubmit event of the form to be extended:
HTML
<form action="test.html" method="POST" id="acct_access" onsubmit="validateForm();">
...
</form>
JavaScript:
function validateForm () {
//do your validation here
//you need to return 'true' if everything is valid
//or 'false' if something went wrong - this will not make the POST call
return true;
}

You need to change your action to point to the new file.
<form action="access.html" method="POST" id="acct_access">
...
</form>
Optionally, in the php file, write some short bypass code that will send the user on to the follow-up page.
<?php
header( 'Location: access.html' ) ;
?>

Related

using a variable to populate the "mailto:" value using "form action"

Newbie question no.2, sorry in advance!
I have somehow managed to create a form with various selection boxes, one of which is the email that the form should send the email to (using mailto:). I've managed to get the value of the email field stored as a variable ("emailtouse"), and now I am trying to use the variable in the "mailto:" code but it's not having it, I either get blank or the variable name itself when I attempt the process.
Thanks
Ian
***variable setting within script in header***
var emailtouse = "mailto:"+emailgoto[value]
***form action***
<form action='+emailtouse+'?
cc=u16#myleague.co.uk&subject=Match%20Postponement/%20Cancellation%20Request" method="post"
enctype="text/plain">
Even if your variable is updated, the "action" is not updated after the variable changes, so it contains the original value, calculated upon rendering the page.
Please see the following CodePen example on how to update the form action before submit:
<form
id="form1"
onsubmit="return updateAction(this)"
action="javascript:;"
method="post">
<button type="submit">Do it!</button>
</form>
... and the JS to update the form action, and to test that it really worked:
let emailtouse = "testemail#somewhere.com";
function updateAction(element) {
element.action =
emailtouse +
"&cc=u16#myleague.co.uk&subject=Match%20Postponement/%20Cancellation%20Request";
checkIfItReallyWorks();
return false; // change to true to submit!!!
}
function checkIfItReallyWorks() {
let form = document.getElementById("form1");
alert(form.action);
}
The above code on CodePen: https://codepen.io/cjkpl/pen/vYxPJQd

Getting value of form textbox via Id on click of button

I would like to click a button and have it go to a link that concatenates mypage.html with the value entered in the search box, but it doesn't seem to recognize it as a variable. What can I do to get the value of the text box?
<html>
<form role="search" action="mypage.html/'#searchterm'">
<input type="text" placeholder="Search" id="searchterm">
<button type="submit">Search</button>
</form>
</html>
Change the form element to this:
<form role="search" id="myForm" action="mypage.html">
The javascript (this is jQuery) would be something like this:
$( "#myForm" ).submit(function( event ) {
// Get the search term
var searchTerm = $('#searchterm').val();
// Append the search term to the root URL
var url = "mypage.html/" + searchTerm;
// Redirect the page to the new URL
window.location.href = url;
// Prevents the default behavior of the form
event.preventDefault();
});
It depends on how you would like to achieve this, you can send it directly using PHP, or you can send it using javascript and AJAX to a PHP page. As you can see in this small tutorial you can send the value of the entered input. AJAX will avoid the page from being refreshed while you search the data, so it will look better. It all depends on what you would like to achieve.
Please take into account that the value of the input cannot be sent on the ¨action¨ property of the form.
Thanks to everyone who submitted answers, I actually figured this one out.
<html>
<input type="text" id="myInput">
<button onclick="go()">Click me</button>
<script>
function go(value)
{
window.open("mypage.html/" + document.getElementById('myInput').value)
}
</script>
</html>

Saving vs. submitting a form

I am working on an application process using Laravel 4.2.
Users applying with my form need to be able to save their form input for later, or submit it. So right now I have two different buttons, Save and Submit.
The key difference between saving and submitting would be a status. When a user saves their application, their application status will be marked as "in progress", when they submit their application the status would be marked as "completed".
My question is:
In terms of my form HTML structure, How do I differentiate between a saved and submitted application? Just checking whether or not they have filled out all the required inputs would not be reliable, because there is the possibility that the user wanted to add more to it later.
I tried doing a form inside of a form, but quickly realized this would not work.
Does anyone have an idea as to how to accomplish this?
You can have two submit buttons inside a form with different names and values:
<button type="submit" name="action" value="save">Save</button>
<button type="submit" name="action" value="submit">Submit</button>
You can then check the value in your controller action:
public function postSubmission()
{
if (Request::get('action') == 'save')
{
// Save form for later
}
elseif (Request::get('action') == 'submit')
{
// Immediately submit form
}
}
Lets say your code is something like this (this is from Laravel5 but as far as i remember it's mostly the same).
{!! Form::open(array('route' => array('admin.editApplication'), 'method' => 'PATCH')) !!}
....
<button type="submit" name="save" value="save">Save</button>
<button type="submit" name="edit" value="edit">Edit</button>
{!! Form::close() !!}
Then in your controller you can do something like this (check if the value is set in edit (you might want to call it something else than edit and save)
public function editApplication(Request $request) {
if(isset($request->input('save')){
// Your code to save here
}else{
// Your code to edit here.
}
}

Prevent HTML form action from being displayed on browser, or redirect to another page after the action being executed

Alright let's put it this way: How can I "redirect" a user to another page, "MyPage.php" after submitting a form that looks like this:
<form action="http://www.example.com/APageICanNotEdit.php" method="POST">
<input type="submit" name="send" value="Go" />
</form>
Please note that, I don't have control over the URL provided in the action attribute. It's an external source. Which means, I cannot edit the "APageICanNotEdit.php" file.
Here is what I want:
User will click on submit button (Labeled as Go)
action="http://www.example.com/APageICanNotEdit.php" - this action
must be performed, if possible, without displaying the contents of it.
I want the user to reach "MyPage.php" safely after
"APageICanNotEdit.php" is executed.
I need a solution without changing the URL in action, cause that
defeats the purpose.
use an hidden parameter like
<input type="hidden" name="action" value="1" />
Your form will look like this:
<form action="http://www.example.com/form-manager.php" method="POST">
</form>
Yout form manager will look like this:
if ($_POST['action'] == "1")
require_once('ThePHPFileIDoNotWantToBeLoadedOnBrowser.php");
Seeing your comment, you can do it with an AJAX call:
$(document).on('submit' , 'form[action="http://www.example.com/ThePHPFileIDoNotWantToBeLoadedOnBrowser.php"]' , function(e){
var formData = $(this).serialize(); // if you need any of the vars
$.ajax({
url:'someOtherURL.php',
type:'POST',
datatype:'json',
data: formData,
success : function(data){
for(var i = 0; i < data.length; i++){
console.log(data);
}
},
error : function(s , i , error){
console.log(error);
}
});
return true; // keep normal behavior
});

return variable from file executed from form action

Let's say that I have a file (file1.php) with a simple form with the action attribute:
echo'
<form action="foo.php" method="post">
Name: <input type="text" name="username" /><br />
Email: <input type="text" name="email" /><br />
<input type="submit" name="submit" value="Submit me!" />
</form>';
$another_var = $user_id+5;
Let's say the foo.php looks something like this:
$sql ... SELECT user_id, username... WHERE username = $_POST['username']; //or so
echo 'We got the user ID. it is in a variable!';
$user_id = $row['user_id'];
As you see, I need the variable $user_id made in foo.php actually to be used in the main file file1.php.
Is there any way to do this? I though that return $user_id would work but I was wrong :-/
Some notes to have into account:
in file1.php there are two forms: one to upload a file (example above) and another to save all the data into a database (that's the reason I need the variable name).
the example is just that, an example. I'm not really adding 5 to the variable requested, but I don't want to copy and paste 100 lines of code to overwhelm everybody.
the variable is also refreshed with javascript, So I see it there but I don't really know how to assign a javascript variable to a php variable (if possible).
THANKS!!!
Here's how I would do it.
The html:
<form id="form1" action="foo.php" method="post">
<!-- form elements -->
</form>
<form id="form2" action="bar.php" method = "post">
<input type="hidden" name="filename" value="" />
<!-- other form elements -->
</form>
The javascript
$('#form1').submit(function(){
var formdata = ''; //add the form data here
$.ajax({
url: "foo.php",
type: "POST",
data: formdata,
success : function(filename){
//php script returns filename
//we apply this filename as the value for the hidden field in form2
$('#form2 #filename').val(filename);
}
});
});
$('#form2').submit(function(){
//another ajax request to submit the second form
//when you are preparing the data, make sure you include the value of the field 'filename' as well
//the field 'filename' will have the actual filename returned by foo.php by this point
});
The PHP
foo.php
//receive file in foo.php
$filename = uniqid(); //i generally use uniqid() to generate unique filenames
//do whatever with you file
//move it to a directory, store file info in a DB etc.
//return the filename to the AJAX request
echo $filename;
bar.php
//this script is called when the second form is submitted.
//here you can access the filename generated by the first form
$filename = $_POST['filename'];
//do your stuff here
use the Jquery Form plugin to upload the file via Ajax
$(document).ready(function(){
$('yourform').submit(function(){ //the user has clicked on submit
//do your error checking and form validation here
if (!errors)
{
$('yourform').ajaxSubmit(function(data){ //submit the form using the form plugin
alert(data); //here data will be the filename returned by the first PHP script
});
}
});
});
As you'll notice, you haven't specified either the POST data or the URL of the PHP script. ajaxSubmit picks up the POST data from the form automatically and submits it to the URL specified in the action of the form
I can think of two ways off the top of my head.
1.
session_start();
$_SESSION['user'] = $row['user_id']
Then, you can refer to $_SESSION['user'] whenever until the session is destroyed.
Another way would be to include the file that defines $user_id (foo.php) into file1.php with:
include("file1.php");
It is probably easier to achieve this with sessions.
Actually, ONE MORE THING you could use is to pass the variable value through the URL if it isn't something that needs to be kept private.
echo "<a href='file1.php?userid=" .$userid. "' > LINK </a>";
or
<?php
echo "
<html>
<head>
<meta HTTP-EQUIV='REFRESH' content='0; url=file1.php?userid=" .$userid. "'>
</head>
</html>";
Then, on file1.php you would access that variable like this.
$userid = $_GET['userid'];
and you can use $userid as you please.