我有这样的表格:
<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();
})
并且邮政编码数据是空字符串。因此,该值甚至没有发布到服务器。