staff data-input elements

[jimfog]

I am building an app where the business user will be able to enter staff names and subsequently be able to edit them(update table).

 

Suppose the user enters only one staff name and decides to edit it later.

 

An input box will be like this(HTML):

      <input class='text' id='staffname<?php echo $value['staff_ID']; ?>' size='40'  data-originalvalue='<?php echo $value['name']; ?>' value="<?php {echo $value['name'];} ?>" type="text" name="name">                 

$value['name'] is the current name of the staffmember as "taken" from the database and $value['staff_ID'] is the unique ID each staff mamber has in the db table-in other words it is the primary key and I am using it here to distinguish one staff member from the other.

 

In order to update the specific staffmember I will get the newly updated name by targeting the ID and sending it with ajax:

 var staffname = $("input#staffname5").val(); 

And here is were the problem appears.Suppose the user has to edit 2 staff names.That means each input element has an id with a different integer at the end of the staffname word.

 

input#staffname5

input#staffname8

 

The question is how am I going to target the above IDs with jquery so I can send their values to the server ?

Do not be confused with the intergers appearing in front of staffname,they can by anything,they are not standard,otherwise it would be easy to do the job.

 

Here is a fiddle link:http://jsfiddle.net/fiddlehunt/R5YtW/

Edited February 27, 2014 by jimfog

[justsomeguy]

I wouldn't set it up like that with the ID. Those elements probably don't need an ID at all, you can use names or classes to distinguish them instead. You can store the ID to update inside a data attribute.

[thescientist]

For cases like this, I usually provide the user with a dropdown where they could pick something to update. onchange, the dropdown populates the form with the editable values. Then they edit and save, and select again from the dropdown if they want to edit something else.

Edited February 27, 2014 by thescientist

[jimfog]

I wouldn't set it up like that with the ID. Those elements probably don't need an ID at all, you can use names or classes to distinguish them instead. You can store the ID to update inside a data attribute.

I guess you mean something like this:

<input class='staff' size='40' data-staffid='<?php echo $value['staff_ID']; ?>' value="<?php {echo $value['name'];} ?>" type="text" name="staffname1">

<input class='staff' size='40' data-staffid='<?php echo $value['staff_ID']; ?>' value="<?php {echo $value['name'];} ?>" type="text" name="staffname2">

 

Ok, the question remains how I will be able to access their values and IDs?I suppose it must be a for loop.

 

 

For cases like this, I usually provide the user with a dropdown where they could pick something to update. onchange, the dropdown populates the form with the editable values. Then they edit and save, and select again from the dropdown if they want to edit something else.

I do not know how this looks from a UX/UI perspective?I have to consult a designer first.

[justsomeguy]

Yes, of course it is a loop. With vanilla Javascript, you could use document.getElementsByTagName to get all input elements, and loop through them to see if they have the appropriate class.

[jimfog]

Well I know nothing of vanilla.Can jquery help me in what I want to achieve?

[thescientist]

Well I know nothing of vanilla.Can jquery help me in what I want to achieve?

umm... vanilla JS is just a way to refer to regular javascript, without any libraries or frameworks. But again, since they are all just JS anyway, there's always a way to do it like they do with just Javascript.

Edited February 27, 2014 by thescientist

[jimfog]

This is the solution I reached-but with a slight problem:

  var staffnames = document.getElementsByName("staff");        var result={};        for( i=0;i<staffnames.length; i++)        {           var staffname = staffnames[i];           result[staffname.name] = staffname.value;//            alert(result[staffname.name]);        }

First of all I use alert to test what is contained in the result object,and indeed you can find there the values of the input elements,namely the staff names.

But the problem appears when I want to send th data to the server with ajax:

 

  $.ajax({          type: "POST",          url: "stafajax.php",            dataType:"json",          cache:false,          data:{"staffnames":  result[staffname.name]}        })

What is a actually sent to the server is the value of the last input element-meaning only one staff name.I can verify that by looking the network tab of chrome dev tools under form data heading.

 

Why that might be hapenning?

[justsomeguy]

Because you're running the ajax code outside of the loop, I imagine. After that loop ends result[staffname.name] has the last value that you put there.

[jimfog]

Because you're running the ajax code outside of the loop, I imagine. After that loop ends result[staffname.name] has the last value that you put there.

Yes...any idea how to deal with it?Puting the ajax request inside the loop solves the problem but only by sending 2 requests to the server-somethong impractical I think.

[justsomeguy]

So use the loop to gather all of the data into a variable, and then send the request with all of the data after the loop.

[jimfog]

So use the loop to gather all of the data into a variable, and then send the request with all of the data after the loop.

I do not quite understand what do you mean by saying "gather all of the data into a variable".

THis what I tried but again only the last value is kept...:

 

http://jsfiddle.net/fiddlehunt/VdhFJ/

 

I am still trying to see what changes I must do to the syntax to reach the desired outcome

Edited March 2, 2014 by jimfog

[dsonesuk]

overcomplicating

 

var staffnames = document.getElementsByName("staff"); var result1=""; for( i=0;i<staffnames.length; i++) { result1+=staffnames.value+" : " }alert(result1);

[jimfog]

overcomplicating

 

var staffnames = document.getElementsByName("staff"); var result1=""; for( i=0;i<staffnames.length; i++) { result1+=staffnames.value+" : " }alert(result1);

yes...your code work,the only thing I am thinking to pass staffnames into an array instead of just a string variable as you do.

 

Cause maybe it is more convenient to send an array with ajax.

[dsonesuk]

Ok! i get what you want now, try this.

            var results = [];            $(function() {                var staffnames = document.getElementsByName("staff");                for (i = 0; i < staffnames.length; i++)                {                    results[i] = staffnames[i].value;                }                $.ajax({                    type: 'POST',                    url: 'staffajax.php',                    dataType: 'json',                    data: {res: JSON.stringify(results)},                    success: function(response) {                        $('#result').html(response);                    }                });            });

staffajax.php

<?php$response = $_POST['res'];$message = '';$count = 0;foreach (json_decode($response) as $item) {    $count++;    $message.=$item;    if ($count < count(json_decode($response))) {        $message.= ', ';    }}echo json_encode('The sent data was: original data ' . $response . ' <br >no of records :' . count(json_decode($response)) . '<br> looped through :' . $message);?>

[justsomeguy]

the only thing I am thinking to pass staffnames into an array instead of just a string variable as you do.

...which is exactly what "gather all of the data into a variable" means. An array is a variable. Put all of the data into it instead of going through a loop and constantly overwriting the same variable.

[jimfog]

Before seeing posts 15,16 I tried this:

   var staffnames = document.getElementsByName("staff");        var result=[];        for( i=0;i<staffnames.length; i++)        { result.push(staffnames[i].value);          }        $.ajax({          type: "POST",          url: "stafajax.php",            dataType:"json",          cache:false,          data:{"staffnames":result }

Do you think the above is worse from the code in post 15.The question is directed-mostly-towards dsonesuk.

 

Is it really necessary to send the array as JSON?Why not send the array directly as I do above;

[dsonesuk]

??? You are sending it as json, so you have to send it as a format that json will be able to read.Looking into I read that cache setting is not required, if not useless, and if sending an array object you have to use the Json stringify so it can read.

[jimfog]

??? You are sending it as json, so you have to send it as a format that json will be able to read.

I still do not understand.Why it has to be json related code in the php script in the server and not array related?

[dsonesuk]

You are using

dataType:"json"

the format for json is { 0: 'tom' , 1 : '######', 2: 'harry'}

your array would produce ['tom', '######', 'harry']

[jimfog]

You are using

dataType:"json"

the format for json is { 0: 'tom' , 1 : '######', 2: 'harry'}

your array would produce ['tom', '######', 'harry']

Yes you are right about that.which make me think if must change the datatype expected from the server,if I am going to send an array in it-as is the case now.

What you would choose to send,an array or JSON?

[thescientist]

JSON. That's what it's there for as it's meant to be a data interchange format and PHP already has native support for it. Use the tools at your disposal and code your application around that.