Variable Transfer: Web Form that connects with PHP to Database

Question

Hello and thank you for viewing my question. I am a complete beginner and am looking for simple ways to do the following...

What I have in seperate linked documents: HTML, CSS, Javascript, PHP

What I am having trouble with:

I need to use something like JSON (although I would also accept XML requests or Ajax at this point if they work) to transfer variables from Javascript to PHP. I need the variables to search in a database, so they need to be literally available within PHP (not only seen on a pop-up message or something).

I have seen a LOT of different ways to do this, I have even watched tutorials on YouTube, but nothing has worked for me yet. The things I am having the biggest problem with is that when I add a submit button to my form it doesn't submit my form and I don't know why.

Form code snippet:

<form id="form" name="input" method="post" action="javascript:proofLength();">
<input id="userinput" type="text" autofocus />
<input id="submit" type="button" value="submit" onsubmit="post();">
</form>

The second to last line there doesn't work. Do I need javascript to submit the form? Because I really thought that in this case it was part of the functionality of the form just like method="post"...

The other thing is that for JSON, I have no idea what to do because my variables are determined by user input. Therefore, I cannot define them myself. They are only defined by document.getElement... and that doesn't fit the syntax of JSON.

Those are really my main problems at the moment. So if anyone could show me a simple way to get this variable transfer done, that would be amazing.

After this I will need to search/compare in my database with some php/sql (it's already connecting fine), and I need to be able to return information back to a in HTML based on what I find to be true. I saw one example, but I am not sure that was very applicable to what I am doing, so if you are able to explain how to do that, that would be great also.

Thank you very, very much. April

score 0 · Answer 1 · edited May 23 '17 at 11:49

0

The problem is in this line

<form id="form" name="input" method="post" action="javascript:proofLength();">

The action should be a PHP page (or any other type of server script) that will process the form. Or the proofLength function must call submit() on the form In the php page you can obtain variable values using $_GET["name"] or $_POST["name"] To summarize; your code should look like this

<form id="form" name="input" method="post" action="yourpage.php">
<input id="userinput" type="text" autofocus />
<input id="submit" type="button" value="submit">
</form>

and for your php page:

<?php
$userinput = $_POST["userinput"];
//Do what ever you need here
?>

If you want to do something in your javascript before submitting the form, refer to this answer

edited May 23 '17 at 11:49

Community

1
1

answered Mar 15 '14 at 17:05

Ahmed Qasid

293
2
9

Thank you, but I am not exactly sure how that is supposed to fix the problem. I have quite a few things that I need to do first in JavaScript before taking my variables to PHP... unless you mean that my variables should be going directly to PHP first and then into JS? But I also don't know how to do that... – April Mar 15 '14 at 17:14
No, you can do whatever you need in proofLength function, but at the end of the function you MUST call form.sumbit(). If you have other variables you want to be sent to the server you can use [hidden input fields](http://www.echoecho.com/htmlforms07.htm) – Ahmed Qasid Mar 15 '14 at 17:17
I mean variables that are calculated and you do not want them to be visible to the user in you GUI – Ahmed Qasid Mar 15 '14 at 17:19
I have updated my answer with how to do javascript before sumbit – Ahmed Qasid Mar 15 '14 at 17:24
The comment is missing what you need to do :) – Ahmed Qasid Mar 15 '14 at 17:32
Well, form.submit() might be something I need, but I am still not sure of how I should impliment what you are saying... Here's what I need to do: Form -> JS function that determines if the input is valid -> variables are only saved if the input was correct -> sent to php to search database for matches -> results are posted back to form. I need to still learn how to transfer my variables and do what I need to with the Submit button, since that seems to be a key factor in many of the samples I have seen... also I am not even sure how to post the result back to my form. – April Mar 15 '14 at 17:33
You do not post the result back to your form; unless you want to use AJAX. Here is what you can do: In your php page, create the response html using echo "The result of the search is .....". This will create the response page. If you want to fill the form with the data the user enetered in the orginal request, just add the form to your response by re-creating its html, but this time with values assigned instead of balnk – Ahmed Qasid Mar 15 '14 at 17:35
As an example of how to create your form with values `$userinput = $_POST["userinput"]; echo '';` – Ahmed Qasid Mar 15 '14 at 17:40

score 0 · Answer 2 · answered Mar 15 '14 at 17:12

You don't need ajax to submit this form. You don't even need javscript. Just do this:

<form id="form" name="input" method="post" action="mytarget.php">
<input id="userinput" name="userinput" type="text" autofocus />
<input id="submit" type="submit" value="submit" />
</form>

This will send the form data to mytarget.php (can be changed of course)

See that i have added the name attribute to your text-field in the form and i changed the type of the button to submit. Now you can work the Data in mytarget.php like this:

<?
$username = $_POST['userinput'];
echo "Your name is: ".$username;
?>

You wanted to have a check for length in the submit. There are two ways to this:

Before the input is send (the server is not bothered)
Let the server Check the input

for 1 you will have to append a event listener, like this:

var form = document.getElementById("form");
form.addEventListener("submit", function(event){
    console.log("test");
  var name = form.elements['userinput'].value;
    if(name.length < 3){
        alert("boy your name is short!");
        event.preventDefault();
    }
});

Enter a name with less then 3 characters and the form will not be submitted. test here: http://jsfiddle.net/NicoO/c47cr/

Test it Serverside

In your mytarget.php:

  <?
    $username = $_POST['userinput'];
    if(strlen($username) > 3)
        echo "Your name is: ".$username;
    else 
        echo "your name was too short!";
  ?>

You may also do all this with ajax. You will find a lot of good content here. But I'd recommend a framework like jQuery to do so.

This is increadibly helpful! Thank you. But I unfortunately do need JS - it's part of an assignment... — April, Mar 15 '14 at 17:39
There is even a demo of the javascript part. You can clearly see how to retreive the form elements with JS and work with it. What else fo you want? — Nico O, Mar 15 '14 at 17:41
Sorry, didn't realize you went on to explain JS. I already have a function that works. What I am still not understanding is how to transfer variables from JS to PHP... unless what everyone is trying to say is that I don't need my variables in JS at all...but I think I do? Anyways, it's part of the assignment. An XML request would probably be the best, but I am not sure how to make it happen. — April, Mar 15 '14 at 17:52
Read this: http://stackoverflow.com/questions/19029703/jquery-using-ajax-to-send-data-and-save-in-php and this: https://api.jquery.com/jQuery.ajax/ — Nico O, Mar 15 '14 at 17:54

Variable Transfer: Web Form that connects with PHP to Database

2 Answers2