简体   繁体   中英

Javascript - How to get the value from a accordion into the form

I have this function, where when a user presses a button, a accordion with content goes down. Then a user is able to add a value from a textbox into the mysql db. But, I want the value fro the button to be added in the db as well, which it does not right now. The value of the button (Day) is always empty.

My function to add a value to the day input into the database works as long as the day input is not hidden. But I want the vale from the accordion button to be the value that is inserted in the db when the user fills in the form.

All help is appriciated!

function:

var showDate = new Date();
var theForm = `<form class="" action="insertIntoCalendar.php" method="post"> 
                  <input id="day"type="hidden" name="day" value=""><br>
                  <input id="formInputPwd" type="text" name="message" value="" placeholder="Message"><br>
                  <input  id="formInputPwd" type="number" name="hours" value="" placeholder="Hours"><br>
                  <input id="btnCreateUser"  type="submit" name="" value="Send">
               </form>`;

function drawTable(forDate) {
    var daysInMonth = new Date(forDate.getFullYear(),forDate.getMonth()+1,0).getDate();
    var cellsToDraw = daysInMonth;
    var newdate = forDate.getFullYear() +"-"+ ("0"+ (forDate.getMonth() + 1)).slice(-2);
    var calendar = document.getElementById("calendar");
    calendar.innerHTML = "";
    for (var r = 0; r < (daysInMonth / 7); r++) {
        var newRow = document.createElement("tr");
        calendar.appendChild(newRow);
        for (var c = 0; c < 31 && cellsToDraw > 0; c++) {
            var day1 = ("0" + (c + 1)).slice(-2);
            var textarea = document.createElement("button");
            textarea.setAttribute("placeholder", day1 );
            textarea.setAttribute("class", "row");
            newRow.appendChild(textarea);
            textarea.setAttribute("name", "day");
            textarea.setAttribute("id", "day");
            textarea.setAttribute("day",  newdate + "-" + day1 );
            textarea.setAttribute("value", newdate + "-" + day1);
            textarea.innerHTML = day1; 
            var textarea1 = document.createElement("div");
            textarea1.setAttribute("class", "content");
            newRow.appendChild(textarea1);
            textarea1.innerHTML = theForm;
            cellsToDraw--;
        }
    }
    var acc = document.getElementsByClassName("row");
    var i;
    for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function() {
            var content = this.nextElementSibling;
            var active = checkIfAnyVisible();
            if (active) {
                active.className = 'content';
                active.style.maxHeight = null;
            }

            if (content.style.maxHeight){
                content.style.maxHeight = null;
                content.className = 'content';
            } else if (!checkIfAnyVisible()) {
                content.style.maxHeight = content.scrollHeight + "px";
                content.style.width = "100%";
                content.className = 'content active';
            }
        });
    }

Why You don't take another element to send action parameter?

<input type="hidden" name="actionName" value="send">

It is easy otherwise you have to make Ajax to trigger action and send parameters what you want.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM