将动态按钮的值传递给模式形式

时间:2019-06-14 14:42:43

标签: javascript php

我正在动态创建带有SOAP API输出的表。所有这一切。右侧的最后一个表格列创建一个按钮,该按钮的值由API输出动态创建。

按下按钮时,它会打开一个模态,该模态要求将按钮值传递给模态形式,然后在提交时将其传递回API进行设置。

除了将确切的按钮值从页面传递到模式之外,其他所有操作均有效。当我只是简单地向php变量添加调用时,它要么不添加按钮值,要么添加从API中提取的最后一个值。

动态创建表的PHP代码段

<?php
// Make API Call
$result = $client->getAllUnitTypes($sessionId, $argv[3]);
// Process Results
if($result['success'] == "true") {
    $xml = simplexml_load_string($result['xml']);
    foreach($xml->root as $item) :

        if($item->Total_Number_Vacant != 0 && $item->billingplansetname == "Small"){ 
?>
<tr>
        <td><? echo $unitName = $item->Type_Description; ?></td>
        <td><? echo $item->web_Description; ?></td>
    <td><? echo $item->Web_Promotion_Description;  ?></td>
    <td><? echo "$ ".$item->Minimum_Price.".00" ;  ?></td>
    <td><? echo $item->Climate;  ?></td>
    <td><? echo "<button class='button' id='Unit_Name' onclick=\"document.getElementById('reservation').style.display='block'\" style=\"width:auto;\" name='UnitType' value='".$unitName."'>Reserve</button>";  ?></td>
</tr>
<?php   } 
    endforeach;
    echo "</table>";
    } ?>

模块化HTML(仅标头部分)

<div id="reservation" class="modal">  
  <form class="modal-content animate" action="submitReservation.php" method="POST"> 
    <div class="container">
<span onclick="document.getElementById('reservation').style.display='none'" class="close" title="Close Modal">X</span>
<span style="text-align: center;"><h2>Apply for this unit</h2></span><span style="text-align: center;"><h3>Please fill out this form, and a manager will be in touch shortly to confirm your move-in date and payment details.<br>Applying for: <?php echo $_POST['unit_Name']; ?></h3></span><input id="facility" name="facility" type="hidden" value="<?php echo $argv[3]; ?>">

模态的Java语言

var modal = document.getElementById('reservation'); 
window.onclick = function(event) { 
    if (event.target == modal) { 
        modal.style.display = "none";   
    } 
}

在MODAL中,我需要从表中获取按钮的确切值,具体取决于HTML值(已在页面源中验证为正确)。

例如:
单位大小 | 价格/月 | (按钮)
大小1 | $ 10.00 | (按钮值=“大小1”)
大小2 | $ 20.00 | (按钮值=“大小2”)
大小3 | $ 30.00 | (按钮值=“大小3”)

预期:按下“尺寸1”的按钮时,模态将打开并显示:

  

您正在申请:1号尺寸

实际结果:按下“尺寸1”的按钮时,模态将打开并显示:
要么...

  

您正在申请:

OR

  

您正在申请:3号尺寸

我不确定问题出在哪里。

编辑:表单处理程序脚本

<?php //Submit Reservation
require("connect.php");

$reservationOptions = new stdClass();
    $reservationOptions->firstName = $_POST['fname'];
    $reservationOptions->lastName = $_POST['lname'];
    $reservationOptions->email = $_POST['email'];
    $reservationOptions->mobilePhone = $_POST['cell'];
    $reservationOptions->homePhone = $_POST['home'];
    $reservationOptions->street1 = $_POST['address'];
    $reservationOptions->city = $_POST['city'];
    $reservationOptions->state = $_POST['state'];
    $reservationOptions->zip = $_POST['zip'];
    $reservationOptions->moveinDate = $_POST['moveIn'];
    $reservationOptions->unitId = $_POST['unit-name'];



    // Get arguments
    if(!isset($argv[1]) || !isset($argv[2])) {
        print "Usage: ".$argv[0]." <<username>> <<password>>\n";
        return;
    }

    $client = new SoapClient("<<API URL>>");

    // Login    
    $sessionId = $client->authenticate($argv[1], $argv[2]);

    // Check Login
    if(!$sessionId) {
        print "Login Failed.\n";
        return;
    }
// Make API Call
    $result = $client->saveReservationWithOptions($sessionId, $_POST['facility'], $reservationOptions);

    print_r($reservationOptions);
?>

1 个答案:

答案 0 :(得分:1)

尝试一下:

<ul>
    <% for (var i = 0; i < newListItems.length ; i++) { %>
        <li> <%= newListItems[i] %> </li>
    <% } %>
</ul>

并创建一个函数以打开模式:

<ul>
        <% newListItems.forEach(function(item,index){ %>
            <li> <%= item %> </li>
        <% }) %>
    </ul>

更改按钮Applying for: <span id='unit-name'></span></h3> 以调用该函数:

function openModal(element)
{
     document.getElementById('reservation').style.display='block';
     document.getElementById('unit-name').innerText = element.value;
}