如何获取数组中的文本框值.....存储在数据库中

时间:2011-06-06 13:11:32

标签: javascript html

这是我的代码......

如何将文本框数组值存储在数据库中...

<html>
    <head>
        <script type="text/javascript">
            var max = 4; //highest number to go to
            var currentIndex = 0;
            function btnClick() {
                if(currentIndex < max){
                    currentIndex++;
                    postClick();
                }
            }
            function Previous(){
                if(currentIndex>0){
                    currentIndex--;
                    postClick();
                }
            }

            function postClick() {//whatever you want to happen goes here
                var sahans = new Array();
                sahans[currentIndex] == d;
                var d = document.getElementById("div");
                d.innerHTML   = "<p><input type='text' name='name"+currentIndex+"[]'>";
                d.innerHTML  += "<p><input type='text' name='topic"+currentIndex+"[]'>";
                document.getElementById("div").style.display = ""; 
            }
        </script>
    </head>
    <body>
        <form id="form1">
            <div>
                <input type="button" value="Previous" onclick="Previous();" />
                <input type="button" value="Next" onclick="btnClick();" />
                <div id="div"></div>
            </div>
        </form>
    </body>
</html>

2 个答案:

答案 0 :(得分:1)

<强> JavaScript的:

function store(form) {
    var input = form.getElementsByTagName('input');
    var myarray = Array();
    for (var i = 0; i < input.length; i++) {
        if (input[i].getAttribute('type') == 'text') {
            myarray[input[i].getAttribute('name')] = input[i].value;
        }
    }
    for (var i in myarray) {
        alert(i + ': ' + myarray[i]);
    }
}

<强> HTML:

<form onsubmit="store(this); return false">
    <p>
        <input type="text" name="name" /><br />
        <input type="text" name="topic" />
    </p>
    <p>
        <input type="submit" value="Store in database" />
    </p>
</form>

修改

好的,现在我用AJAX和实际保存到数据库做了一个完整的例子。 AJAX调用使用'POST'。只需在max变量中填写所需的字段数。

<强> JavaScript的:

var max = 10;
var current = 0;
function goto(form, pos) {
    current += pos;
    form.prev.disabled = current <= 0;
    form.next.disabled = current >= max - 1;
    var fields = form.getElementsByTagName('fieldset');
    for (var i = 0; i < fields.length; i++) fields[i].style.display = 'none';
    fields[current].style.display = 'block';
    form['name' + current].focus();
}
function store(form) {
    var input = form.getElementsByTagName('input');
    var data = '';
    for (var i = 0; i < input.length; i++) {
        if (input[i].getAttribute('type') == 'text')
            data += '&' + input[i].getAttribute('name') + '=' + input[i].value;
    }
    data = encodeURI('n=' + max + data);
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    xhr.open('POST', 'store.php', true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.setRequestHeader('Content-length', data.length);
    xhr.setRequestHeader('Connection', 'close');
    xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            if (this.responseText != '')
                alert(this.responseText);
            else {
                form.submit.value = 'Saved!';
                setTimeout(function() { form.submit.value = 'Save to database' }, 500);
            }
        }
    }
    xhr.send(data);
}
window.onload = function() {
    var form = document.forms[0];
    var container = form.getElementsByTagName('div')[0];
    container.innerHTML = '';
    for (var i = 0; i < max; i++)
        container.innerHTML += '<fieldset><legend>Entry ' + (i + 1) + ' / ' + max + '</legend><input type="text" name="name' + i + '" /><br /><input type="text" name="topic' + i + '" /></fieldset>';
    goto(form, 0);
}

<强> HTML:

<form action="submit.php" method="post" onsubmit="store(this); return false">
    <p>
        <input type="button" name="prev" onclick="goto(this.form, -1)" value="Previous" />
        <input type="button" name="next" onclick="goto(this.form, +1)" value="Next" />
    </p>
    <div>
        <noscript>Please enable JavaScript to see this form correctly.</noscript>
    </div>
    <p>
        <input type="submit" name="submit" value="Store in database" />
    </p>
</form>

禁用JS的用户将看到<noscript>标记中的内容,否则将替换为字段集。此外,为已禁用JS的用户创建备用提交页面(submit.php)也很不错。下面是store.php,即AJAX提交脚本。

PHP (store.php):

<?php
if (empty($_POST['n']) || $_POST['n'] < 1) die('Invalid request!');

$fields = array('name', 'topic');
$errors = '';

for ($i = 0; $i < $_POST['n']; $i++) {
    foreach ($fields as $field) {
        if (empty($_POST[$field . $i]))
            $errors .= '- ' . $field . ' ' . ($i + 1) . "\n";
    }
}
if ($errors != '')
    die("Please fill in the following fields:\n" . $errors);

$db = mysql_connect('localhost', 'root', '');
mysql_select_db('mydb', $db);

for ($i = 0; $i < $_POST['n']; $i++) {
    $name = mysql_real_escape_string($_POST['name' . $i]);
    $topic = mysql_real_escape_string($_POST['topic' . $i]);
    mysql_query('   INSERT INTO entries (id, name, topic) VALUES (' . $i . ', "' . $name . '", "' . $topic . '")
                    ON DUPLICATE KEY UPDATE name = "' . $name . '", topic = "' . $topic . '"
    ') or die('Database error!');
}

mysql_close($db);
?>

此脚本的输出文本(如果有错误)显示在JavaScript alert中。

我希望它现在适合你。

答案 1 :(得分:0)

这对你有帮助


    <input type="textbox" name="Tue[]" />
    <input type="textbox" name="Tue[]" />
    <input type="textbox" name="Tue[]" />
    <input type="textbox" name="Tue[]" />
    <script type="text/javascript">
        function validateText(event){
            var tar_ele = $(event.target);
            if(tar_ele.val() is not valid)
                tar_ele.focus();
        }
    </script>


<input type="text" name="Tue[]" onblur="validateText(event)"/>

javascript text box array and get values and focus on particular field