我的代码向MySql提交了错误的数据

Question

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

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.

All works as they should and it 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"

<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"> 

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>

Hope someone can help me solve this.

Thanx.

Answer 1

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

this sets the value of the element to eventdate|venuename , you read this and split it out to set your other values but you don't do anything with it. As in the comment if you want the value of the option to be event name you need to put this in the value (or leave the value blank and then it will take whatever is being displayed.

I think the best thing to do would be to use the data- attribute to clean up your code and simplify it like this:

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

then you can access the values - look at this link here for a start on how to do this https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

If you use the data attribute then you don't have to have the complication of trying to give a value, split it out and somehow get a new value which at best is hacky. I'd also recommend switching to jQuery

--update --

In the interests of helping a new coder let me expand a little.

now that you have the correct option value: <option value="<?php echo $event['eventname']?>" you can access this by saying:

   var selected = document.querySelector('#eventname');

then you can use this to access the different attributes you need

var date = selected.dataset.eventdate;
var venue = selected.dataset.venuename;

document.getElementById("eventdate").value=date;
document.getElementById("venuename").value=venue;

so your final function would look something like this:

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

//it's worth noting that if you changed the options back to
//unselected then this would be undefined, so you probably want
//to do an if statement like if(date=='') date = ... some sensible default //for your date field
}             
</script>

this is not tested, but gives you a clearer idea of what I was suggesting. Also I work in jQuery which would have a slightly different syntax so you may need to tweak this code a little