My code is submitting wrong data

[cantrush]

 

I have 3 fields that are the same name as corresponding column in MySQL database.

 

1. First field is a dynamic dropdown list called "eventname".

2. Second field called "eventdate" is an input field that gets populated via choice made from "eventname" dropdown list / First field.

3. Third field called "venuename" is an input field that gets populated via choice made from "eventname" dropdown list / First field.

 

What this dynamic dropdown list does is select the eventname from database then there is an onchange function that pulls out corresponding data from same line for the eventdate and venuename and sets them in the corresponding input field.

 

All works as they should and data gets entered to the MySQL database.

 

 

Only one issue:

"eventname" choice from dropdown list should be submitted as "eventname" the displayed choice, what happens is my code enters data in MySQL as "eventdate | venuename" and my desired result should only be "eventname"

 

 

The PHP

<select id="eventname" onchange="eventFunction(eventname)">

<option selected="selected"></option>


<?php foreach ($event as $event) { ?>

<option value="<?php echo $event['eventdate'] .'|'. $event['venuename']?>"><?php echo $event['eventname'] ?></option>

<?php } ?>

</select>


Date: <input id="eventdate"> 

Venue: <input id="venuename"> 

 

and the JavaScript

 

<script>
function eventFunction(eventname){
var eventDetails = eventname.options[eventname.selectedIndex].value.split("|");
document.getElementById("eventdate").value=eventDetails[0];
document.getElementById("venuename").value=eventDetails[1];
}             
</script>

 

 

 

NOTE: If I touch the value attribute ie value="<?php echo $event['eventdate'] .'|'. $event['venuename']?>" the javascript wont work.

 

I am a begginer with coding using JavaScript, can someone help me solve this please with examples. Thanx.

 

[justsomeguy]

Quote

NOTE: If I touch the value attribute ie value="<?php echo $event['eventdate'] .'|'. $event['venuename']?>" the javascript wont work.

Then you need different Javascript, don't you, because that's the value that gets submitted to the server.  Put the eventname there if that's the value you want to submit to PHP, and use data attributes to store the other data instead of trying to cram all of the data in the value attribute.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

[cantrush]

2 hours ago, justsomeguy said:

Then you need different Javascript, don't you, because that's the value that gets submitted to the server.  Put the eventname there if that's the value you want to submit to PHP, and use data attributes to store the other data instead of trying to cram all of the data in the value attribute.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

 

 

Thanx for the reply.

 

This is what I have tried using data attribute method.

 

<option value="<?php echo $event['eventname']?>" data-eventdate="<?php echo $event['eventdate']?>" data-venuename="<?php echo $event['venuename']?>"><?php echo $event['eventname']  ?></option>

 

and the JS

 

<script>
function eventFunction(eventname){
   var selected = document.querySelector('#eventname');//get the selection element
   var date = selected.dataset.eventdate;//get the data attributes
   var venue = selected.dataset.venuename;

   document.getElementById("eventdate").value=date;//set the data
   document.getElementById("venuename").value=venue;


}             
</script>

 

 

although it comes back undefined on the eventdate and venuename field.

 

 

[Funce]

Ouch, yeah you're getting undefined because you're accessing the <select> element that has no data on it.

 

You'll need to put what you had earlier to access the <option> element.

<script>
function eventFunction(eventname){
   var selected = eventname.options[eventname.selectedIndex];//get the selected option
   var date = selected.dataset.eventdate;//get the data attributes of above
   var venue = selected.dataset.venuename;

   document.getElementById("eventdate").value=date;//set the data
   document.getElementById("venuename").value=venue;
}             
</script>

 

Hopefully this helps.

[cantrush]

WOW, thats Fantastic!!!!! Thanx heaps Funce, you rock!