cantrush Posted July 23, 2019 Share Posted July 23, 2019 I have 3 fields that are the same name as corresponding column in MySQL database. First field is a dynamic dropdown list called "eventname". Second field called "eventdate" is an input field that gets populated via choice made from "eventname" dropdown list / First field. 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 comment Share on other sites More sharing options...
justsomeguy Posted July 23, 2019 Share Posted July 23, 2019 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 comment Share on other sites More sharing options...
cantrush Posted July 23, 2019 Author Share Posted July 23, 2019 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 comment Share on other sites More sharing options...
Funce Posted July 23, 2019 Share Posted July 23, 2019 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 comment Share on other sites More sharing options...
cantrush Posted July 23, 2019 Author Share Posted July 23, 2019 WOW, thats Fantastic!!!!! Thanx heaps Funce, you rock! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now