Question

我有一个注册表单（简单的html表单），它将注册用户插入到数据库表中，此表单使用jQuery validation插件进行验证，我需要在注册成功后重置表单，但我不能和不知道为什么。

这是我用于ajax表单提交的javascript（jquery）片段，根据jQuery validate way

submitHandler: function() {
                $.ajax({
                    url: "registration_form.php",
                    type: "POST",
                    data: $("#form").serialize(),
                    success: function (result) {
                        console.log(result);
                        if(result == '') {
                            $('#form')[0].reset() /*this doesn't work'*/
                            $("#errors").empty(); /*this doesn't work'*/
                        }
                        else {
                            $("#errors").text(result);
                        }
                    }
                });
            }

这是我的registration_form.php文件。

<?php

date_default_timezone_set('UTC');

$name = htmlspecialchars($_POST['name']);
$s_name = htmlspecialchars($_POST['s_name']);
$email = htmlspecialchars($_POST["email"]);
$ticket = htmlspecialchars($_POST['ticket']);

$date = date('d_m_Y');

$valid_email = filter_var($email, FILTER_VALIDATE_EMAIL);

$table_name = 'registration_' . $date;

if(!$valid_email) {
    die ("Fill the correct email");
}

if((strlen($name) <= 1) || (!$s_name) || (!$email) || (!$ticket)){
    die ("All the fields should be filled");
}

$connect = mysqli_connect('localhost', 'root', 'password') or die('Connection error');

$create_db = mysqli_query($connect, "CREATE DATABASE IF NOT EXISTS kultprosvet");

$connect_db = mysqli_select_db($connect, "kultprosvet");

$table = "CREATE TABLE $table_name (
            id INT(10) NOT NULL AUTO_INCREMENT, 
            name VARCHAR(100) NOT NULL DEFAULT '',
            s_name VARCHAR(100) NOT NULL DEFAULT '',
            email VARCHAR(100) NOT NULL DEFAULT '',
            ticket VARCHAR(100),
            PRIMARY KEY (id)
        )";

$result = mysqli_query($connect, "SELECT email FROM $table_name");

while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
    if($row['email'] == $email){
        die('this email is already registered');
    };
}

$query_table = mysqli_query($connect,$table);

$query = mysqli_query($connect,"insert into $table_name(name, s_name, email, ticket) values ('$name', '$s_name', '$email','$ticket')");

if(mysqli_errno($connect) > 0){
    echo mysqli_errno($connect). ": " . mysqli_error($connect);
}

mysqli_close($connect);

?>

所以，现在一切正常，除了表单重置。有人可以证明我的错误并帮助我解决这个问题吗？

P.S。最近我做了相同的javascript，但所有数据都插入到.txt文件中，一切都很好，我不知道为什么这段代码不适用于数据库变种。

Answer 1

添加此行代码以重置所有文本框，复选框元素以

形式显示您的值

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { Field, reduxForm, formValueSelector } from 'redux-form'
import { withStyles } from 'material-ui/styles'
import Button from 'material-ui/Button'
import Dialog, {
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
} from 'material-ui/Dialog'
import { TextField } from 'redux-form-material-ui'

const styles = theme => ({
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
  },
  commentField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    paddingRight: theme.spacing.unit,
  },
})

const propTypes = {
  classes: PropTypes.object.isRequired,
  open: PropTypes.bool.isRequired,
  commentData: PropTypes.object,
  body: PropTypes.string.isRequired,
  onCancel: PropTypes.func.isRequired,
  onSubmit: PropTypes.func.isRequired,
}

class CommentDialog extends Component {

  renderAuthorField = () => {
    const { classes, comments, selectedCommentId } = this.props

    const data = (comments) ? comments[selectedCommentId] : undefined
    const author = data ? data.author : ''

    return (
      <TextField
        margin="normal"
        id="author"
        className={classes.textField}
        label="Author"
        type="text"
        fullWidth
        disabled={true}
        value={author}
      />
    )
  }

  renderBodyField = ({ input, children, ...custom }) => {
    const { classes, comments, selectedCommentId } = this.props

    const data = (comments) ? comments[selectedCommentId] : undefined
    const body = data ? data.body : ''

    return (
      <TextField
        margin="normal"
        id="body"
        label="Comment"
        className={classes.commentField}
        type="text"
        multiline={true}
        rows={4}
        rowsMax={8}
        fullWidth
        value={body}
        onChange={this.updateBody}
      />
    )
  }

  updateBody = (event) => {
    // can't get this to do anything
  }

  render() {
    const {
      open,
      handleSubmit,   // This is added by redux-form
      onSubmit,
      onCancel,
      comments,
      selectedCommentId,
    } = this.props

    const data = (comments) ? comments[selectedCommentId] : undefined

    return (
      <Dialog
        open={open}
        onClose={onCancel}
        aria-labelledby="form-dialog-title"
      >
        <form onSubmit={handleSubmit(onSubmit)}>
          <DialogTitle id="form-dialog-title">
            'Edit Comment'
          </DialogTitle>
          <DialogContent>
            <DialogContentText>
              'Modify the post content.'
            </DialogContentText>
            <Field
              name="author"
              component={this.renderAuthorField}
            />
            <Field
              name="body"
              component={this.renderBodyField}
            />
          </DialogContent>
          <DialogActions>
            <Button onClick={onCancel} color="primary">
              Cancel
            </Button>
            <Button type="submit" color="primary">
              Submit
            </Button>
          </DialogActions>
        </form>
      </Dialog>
    )
  }
}

CommentDialog.propTypes = propTypes

const selector = formValueSelector('comment')

CommentDialog = connect(state => ({
  comment: selector(state, 'comment'),
  comments: state.comments.commentsByPost,
  selectedCommentId: state.comments.selectedCommentId,
}))(CommentDialog)

export default reduxForm({
  form: 'comment',
  fields: ['author', 'body'],
  initialValues: { author: '', body: '' }
})(withStyles(styles)(CommentDialog))

Answer 2

更改

if(result == '') { ... }

到

if(result) { ... // show error } else { // reset }

使用ajax在submittig之后重置表单

2 个答案: