Jump to content

My code is submitting wrong data


Recommended Posts

 

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.

 

Link to post
Share on other sites
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

Link to post
Share on other sites
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.

 

 

Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...