Jquery datastring var is returning undefined

Question

I have searched on SO and couldn't find an appropriate answer.

Very simple. I am defining variables via form submission:

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();

Then defining the "dataString"

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

But having a problem if a form field is left empty, it returns "undefined".

I tried this, but it is not working:

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

I know this is simple, but simply can't get the right code to work on this example. Thanks!

Can you please try if(typeof obj.year != ‘undefined’) or please add entire code.. also you could always use try catch instead.. — estinamir, Feb 06 '19 at 20:14
if a "field like contact_last_name" is left EMPTY when the form submits — eberswine, Feb 06 '19 at 20:14
Here’s example of try/catch https://www.w3schools.com/js/js_errors.asp — estinamir, Feb 06 '19 at 20:27
I'm thinking I need to check if the variable is "issett" first ? Then if it is set, then I can use it.. — eberswine, Feb 06 '19 at 20:28
I like your thinking here, although it’s PHP function but if you can use it then great else https://stackoverflow.com/a/2281671/10634638 — estinamir, Feb 06 '19 at 20:55
@bestinamir thanks for this. I updated the code from above. Now it should read pretty clear. — eberswine, Feb 06 '19 at 20:56

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

!== ''

The value of an empty input is '' Use ternaries to change the value to '' when it is ''.

Demo

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>

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 06 '19 at 21:15

zer00ne

41,936
6
41
68

Is there a better way to declare these variables to see if the variable has any value ? It seems like when any variable = "" or null or undefined, it populates my database as undefined... – eberswine Feb 06 '19 at 21:42
@eberswine That sounds like a database question, unfortunately that is a new question and I'm frontend -- it's out of my scope. If your database gets the string from the demo in my answer it should get only that string not undefined, or null unless you are changing the string again for some reason. – zer00ne Feb 06 '19 at 21:54
@eberswine since you are getting this data `onsubmit` use the `required` attribute on the inputs that'll insure that your inputs have a value. – zer00ne Feb 06 '19 at 21:58
yeah, unfortunately the required attribute is unnecessary. Before it enters the data base, I have it "alert dataString" and the variables are "undefined" – eberswine Feb 07 '19 at 01:26
If you have required the form will not submit until that input has valid data entered by the user. Why are you checking the variables? The data in it's final form is a simple string with no undefined values i.e. `dataString` – zer00ne Feb 07 '19 at 01:30
Try `dataString.trim()` – zer00ne Feb 07 '19 at 01:36
I wonder if I can have multiple "var dataString =" based on conditions.. – eberswine Feb 07 '19 at 01:36
jQuery.ajax({ type: "POST", url: "#", data: dataString.trim(), – eberswine Feb 07 '19 at 01:38
Sure `var dataString1, dataString2,` etc. or an array – zer00ne Feb 07 '19 at 01:38
1

try `method: 'POST'`, `type: 'POST'` is pretty old. – zer00ne Feb 07 '19 at 01:46
@eberswine I've updated my answer with a live server, `serialize()` and an iframe that shows the response. BTW do you have `name` attribute on your inputs? – zer00ne Feb 07 '19 at 02:09
Great ! Yes, I have name attributes on each inputs! – eberswine Feb 07 '19 at 02:12
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/188032/discussion-between-zer00ne-and-eberswine). – zer00ne Feb 07 '19 at 02:13

Jquery datastring var is returning undefined

1 Answers1

!== ''

Demo