表单不提交javascript设置值

时间:2018-06-06 17:25:21

标签: javascript jquery

我有这样的表格:

<form id="form-new" data-target="#quote-modal">
    <input type="text" name="zip" placeholder="Enter a Zip Code" class="required" />
    <input type="submit" value="Search Homes" />
</form>

提交此表单后,我运行以下代码:

$('#form-new').on('submit', function(e) {
    e.preventDefault();

    var modal = $($(this).data('target')),
        zip = $(this).find('input[name=zip]').val();

    modal.toggleClass('open');

    if(zip) {
        //Here's all the variations I tried
        // 1
        $('#zip-input').val(zip);

        // 2
        $('#zip-input').attr('value', zip);

        // 3
        document.getElementById('zip-input').value = zip;
    }
})

此代码会弹出一个表单,其中包含用户填写的更多字段,并在用户设置时自动填充邮政编码输入。

问题是提交弹出窗体的时间。如果邮政编码输入填充了javascript,则表单中的所有值都会被提交,但邮政编码除外。如果我输入一个值,那么它提交就好了。

我已经测试并确保在使用document.getElementById('zip-input').value = zip;设置值后,该值实际上是使用console.log(document.getElementById('zip-input').value)设置的。提交弹出窗体后,该值仅为空白。

我不确定我错过了什么或导致了什么。这是一个错误,还是浏览器是故意这样做的?我该怎么做才能解决这个问题,或者我需要采取不同的方法?

如果有任何不清楚的地方,请告诉我,我可以澄清一下。

编辑:这是弹出窗体html结构

<form id="quote-form">
    <input type="text" class="input-element" placeholder="First Name" name="fname" required>
    <input type="text" class="input-element" placeholder="Last name" name="lname" required>
    <input type="text" class="input-element" placeholder="Address" name="address" required>
    <input id="zip-input" type="text" class="input-element" placeholder="Zip Code" name="zip" required>
    <input type="text" class="input-element" placeholder="Email Address" name="email" required>
    <input type="submit" id="next-4" class="btn submit" value="Submit">
</form>

在转储数据之前,这就是它所经历的一切

$_POST['fname'] = @trim($_POST['fname']);
$_POST['lname'] = @trim($_POST['lname']);

$_POST['phone'] = preg_replace('/[^0-9]/', '', $_POST['phone']);
$_POST['phone'] = preg_replace('/^[01]*/', '', $_POST['phone']); //No prepending 0/1's
$_POST['phone'] = substr($_POST['phone'], 0, 10);

var_dump($_POST);
die;

我最近刚试过这个:

$('#quote-form').on('submit', function(e) {
    console.log($(this).serializeArray());
    e.preventDefault();
})

并且邮政编码数据是空字符串。因此,该值甚至没有发布到服务器。

0 个答案:

没有答案