Jquery datastring var 返回未定义

Question

我搜索过 SO，但找不到合适的答案。

非常简单。我通过表单提交定义变量:

var first_name=jQuery("#contact_first_name_1").val();
var last_name=jQuery("#contact_last_name_1").val();
var email=jQuery("#contact_email_1").val(); 

然后定义“dataString”

var dataString =
'first_name='+ first_name + 
'&last_name=' + last_name + 
'&email=' + email + 

但是如果表单字段留空，则会出现问题，它会返回“未定义”。

我尝试过这个，但它不起作用:

if (last_name != undefined) {
   '&last_name=' + last_name + 
}

我知道这很简单，但根本无法获得正确的代码来处理这个示例。谢谢!

Answer 1

!== ''

空输入的值为 '' 当值为 '' 时，使用三元组将值更改为 ''。

演示

var dataString = '';
var clean = '';

$('#main').on('change', function() {
  var first_name = $('#contact_first_name_1').val();
  var last_name = $("#contact_last_name_1").val();
  var email = $("#contact_email_1").val();
  var mobile = $("#contact_mobile_1").val();

  var first = first_name !== '' ? `&first_name=${first_name}` : '';
  var last = last_name !== '' ? `&last_name=${last_name}` : '';
  var mail = email !== '' ? `&email=${email}` : '';
  var tel = mobile !== '' ? `&mobile=${mobile}` : '';

  dataString = `dataString: ${first}${last}${mail}${tel}`;

  console.log(dataString);
});
$('form').on('submit', function(e) {
  e.preventDefault();
  var clean = $(this).serialize();
  console.log(`clean: ${clean}`);
  this.submit();
});

<form id='main' name='main' action='https://httpbin.org/post' method='post' target='response'>
  <input id='contact_first_name_1' name='first'>
  <input id='contact_last_name_1' name='last'>
  <input id='contact_email_1' type='email' name='email'>
  <input id='contact_mobile_1' type='tel' name='mobile'>
  <input type='submit'>
</form>
<iframe src='about:blank' name='response'></iframe>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>