HTML输入表单-添加Javascript和PHP函数

Question

这个问题会让你觉得：D。 我有一个HTML输入表单，似乎功能太多。 有一个功能，因此在按Enter时它会提交数据。 还有其他功能可以检查是否输入了某些关键字，以便可以将用户重定向到其他URL。 这一切对于堆叠过度的人们来说都是完美的。 这是我的代码：

<script type="text/javascript"> 
<!-- 
function enter(e){ 
    if(e.keyCode == 13) 
    { 
        Login(); 
        return false; 
    } 
} 
//--> 
</script> 


    <script type="text/JavaScript"> 
     <!-- 
     function Login(){ 
     var keyword=document.getElementById("address").value; 
     var done=0; 
     keyword=keyword.toLowerCase(); 
     keyword=keyword.split(' ').join(''); 
     if (keyword=="example,example") { window.location="http://www.example.com"; done=1;} 
     if (keyword=="example1") { window.location="http://www.example1.com"; done=1;} 
     if (keyword=="example2") { window.location="http://www.example2"; done=1;} 
     if (done==0) { doSomethingElse(); } 
     } 
     //--> 
     </script>  

    <form name="enterkeyword" action="none"> 
        <input name="keyword" id="address" type="text" onkeypress="return enter(event);"/> 
        <div class="buttons"> 
        <button type="button" onclick="Login()">Submit</button> 
        </div> 
        </form>

这是问题所在。 我需要找到一种将每个提交的查询保存到excel或.CSV的方法。 我找到了一种使用PHP将输入数据保存到.CSV文件的方法。 我对其进行了测试，并且可以正常工作。 但是，当我尝试使用输入表单上的现有功能来实现该功能时，它会弄乱一切。 这是“查询保存功能”中的代码，这是HTML部分：

<html>
<head>
    <title>My Form</title>
</head>

<body>
    <form action="save.php" method="post">
        <p>
            What is your favorite movie?<br>
            <input type="text" name="formMovie" maxlength="50" value="<?=$varMovie;?>" />
        </p>
        <p>
            What is your name?<br>
            <input type="text" name="formName" maxlength="50" value="<?=$varName;?>" />
        </p>                
        <input type="submit" name="formSubmit" value="Submit" />
    </form>
</body>
</html>

这是PHP部分（save.php）：

<?php
if($_POST['formSubmit'] == "Submit")
{
    $errorMessage = "";

    if(empty($_POST['formMovie']))
    {
        $errorMessage .= "<li>You forgot to enter a movie!</li>";
    }
    if(empty($_POST['formName']))
    {
        $errorMessage .= "<li>You forgot to enter a name!</li>";
    }

    $varMovie = $_POST['formMovie'];
    $varName = $_POST['formName'];

    if(empty($errorMessage)) 
    {
        $fs = fopen("mydata.csv","a");
        fwrite($fs,$varName . ", " . $varMovie . "\n");
        fclose($fs);

        exit;
    }
}
?>

    <?php
        if(!empty($errorMessage)) 
        {
            echo("<p>There was an error with your form:</p>\n");
            echo("<ul>" . $errorMessage . "</ul>\n");
        } 
    ?>

两种代码都很好用，但我只是不知道如何实现它们，因此它们可以以相同的形式工作……BTW这个PHP函数有2个输入字段，我只需要1个，如果剩下字段，我真的不需要此错误消息空...我知道它很复杂，但是比我理解得更好的人可以帮忙吗？

Answer 1

完成更新

再次，我分离了功能，并使代码可读和可维护。

Index.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles/index.css"/>
    </head>
    <body>
        <input type="text" id="txt" value="example1"/><br/>
        <input type="button" id="btn" value="doQuery()"/>

        <script src="scripts/index.js"></script>
    </body>
</html>

Index.js

function processValue() {

    var inputText = document.getElementById("txt").value.toLowerCase().split(' ').join('');

    // Export query
    exportQuery( inputText );
}

function exportQuery( query ) {

    var script = document.createElement("SCRIPT");

    script.setAttribute( 'type', 'text/javascript' );
    script.setAttribute( 'src', 'exportQuery.php?query=' + query );

    document.head.appendChild( script );
}

var urlMapper = {

    "example,example": "http://www.example.com",
    "example1": "http://www.example1.com",
    "example2": "http://www.example2.com"
}

/**
 * Should be called when the PHP has finished execution
 */
function onPhpReady( query ) {

    var url = urlMapper[ query ];

    if( url !== undefined ) {

        goToUrl( url );

    } else {

        codeAddress();
    }
}

function goToUrl( url ) {

    window.location = url;
}

function codeAddress() {

    alert( "Access Denied" );
}

( function() {

    // Selfexecuting code.

    function addButtonClickListener() {

        var btn = document.getElementById("btn");

        btn.addEventListener( "click", processValue, false );
    }

    function processKeyPress( e ) {

        if( e.keyCode == 13 ) {

            processValue();
        }
    }

    function addInputKeyPressListener() {

        var input = document.getElementById("txt");

        input.addEventListener( "keypress", processKeyPress, false );
    }

    addButtonClickListener();
    addInputKeyPressListener();

}() );

exportQuery.php

<?php
    // Get the request
    $query = $_GET['query'];

    if( !empty( $query ) ) 
    {
        writeToCSV( $query );
        notifyReady( $query );
    }

    function writeToCSV( $query ) {

        $fs = fopen( "storedQueries.csv", "a" );

        fwrite( $fs, $query . "\n" );

        fclose( $fs );
    }

    function notifyReady( $query ) {

        // print back as plain javascript
        print <<<ENDLINE
        onPhpReady( '$query' )
ENDLINE;
        // The ENDLINE ^ can't use spaces or it will give a parse error.
    }
?>

资料来源： DaniWeb

请不要因为我以Webkit为目标，所以为了兼容，您必须更改事件的附加方式等。

HTML输入表单-添加Javascript和PHP函数

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-10-16 11:52:36

HTML输入表单-添加Javascript和PHP函数

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-10-16 11:52:36

解决方案1
1 已采纳 2012-10-16 11:52:36