如何使用ajax获取动态创建的文本框的值从javascript到php?

时间:2014-03-28 06:22:09

标签: javascript php ajax

我正在研究Joomla。我创建了一个第一次显示单行的表。单击按钮"添加新行" 将一行附加到表中。在该行中有文本框和下拉列表。

我想将动态创建的文本框和下拉列表的值存储在变量中。我已将值存储在javascript变量中,但无法在php变量中获取这些值。

在某处我读到这可以使用AJAX完成。但由于我是一个非常新的PHP,并且不知道如何使用AJAX。

请帮我解决这个问题。 提前致谢。 这是我的javascripts和html代码..

  <?php

$db=JFactory::getDBO();
$ses_id = session_id();

$flagquery="select * from flag";
$db->setQuery($flagquery);
$resultflag=$db->loadObjectList();
foreach($resultflag as $dataflag)
{   
    if($dataflag->userid == $ses_id)
    {   
        $flag=$dataflag->flag;
    }
}
if($flag=='0')
{
    $mat="select mat_name from mat_den";
    $db->setQuery($mat);
    $matname=$db->loadObjectList();
    $rowsize="select DISTINCT nps_si from std_pipe_data";
    $db->setQuery($rowsize);
    $rowsize_si=$db->loadObjectList();
}
else if($flag=='1')
{
    $mat="select mat_name from mat_den";
    $db->setQuery($mat);
    $matname=$db->loadObjectList();
    $rowsize="select DISTINCT nps from std_pipe_data";
    $db->setQuery($rowsize);
    $rowsize_fps=$db->loadObjectList();
}
    $rowrating="select DISTINCT rating from flang_schedule";
    $db->setQuery($rowrating);
    $fillrating=$db->loadObjectList();

?>

<html>
<head>
<script type="text/javascript" language="javascript">
    var i=0;
 function addNewRow()
 {  
    i++;
    document.getElementById("varValue").value=i;
    var table = document.getElementById("table1");
    var tr = table.insertRow(-1);
    var cell0 = tr.insertCell(0);
    cell0.innerHTML= '<input class="tab" type="text" name="des'+i+'" id="des'+i+'"  value="" size="10"/>';

    var cell1 = tr.insertCell(1);
    cell1.innerHTML= '<select class="drop" name="size'+i+'" id="size'+i+'"> <?php foreach($rowsize_si as $size_si) { ?><option value="<?php echo $size_si->nps_si; ?>"> <?php echo $size_si->nps_si;?> </option> <?php } ?> </select>';


    var cell2 = tr.insertCell(2);
    cell2.innerHTML= '<select class="drop" name="schedule'+i+'" id="schedule'+i+'"> <option value="10">10</option><option value="30">30</option><option value="40">40</option><option value="STD">STD</option><option value="80">80</option><option value="XS">XS</option> </select>';

    var cell3 = tr.insertCell(3);
    cell3.innerHTML= '<select class="drop" name="fl_type'+i+'" id="fl_type'+i+'"><option value="WNRF">WNRF</option><option value="SORF">SORF</option><option  value="SOFF">SOFF</option><optionvalue="WNFF">WNFF</option><option value="LJ">LJ</option></select>';


    var cell4 = tr.insertCell(4);
    cell4.innerHTML= '<select class="drop" name="rating'+i+'" id="rating'+i+'"> <?php foreach($fillrating as $rating) { ?> <option value="<?php echo $rating->rating; ?>"> <?php echo $rating->rating; ?></option><?php } ?></select>';

    var cell5 = tr.insertCell(5);
    cell5.innerHTML= '<input type="checkbox" name="chkbox'+i+'" id="chkbox'+i+'"/>';

 }
</script>
<script type="text/javascript">
        function show1()
        {
            var table = document.getElementById("table1");
            var i;
            var tr = table.getElementsByTagName('tr');
            for (i = 2; i < tr.length; i++)
            {
                var td = tr[i].getElementsByTagName('td');
                var td1 = td[0].childNodes[0].value;
                var td2 = td[1].childNodes[0].value;
                var td3 = td[2].childNodes[0].value;
                var td4 = td[3].childNodes[0].value;
                var td5 = td[4].childNodes[0].value;
                var td6 = td[5].childNodes[0].value;
                var val = td1+td2+td3+td4+td5+td6;
                alert(val);

            }
        }
</script>

</head>

<body>


        <div class="tableHolder3">

          <table border="1" cellspacing="0" cellpadding="0"  id="table1">
            <tr style="background-color:#C0504E;">
              <td align="center"><label class="label">Nozzle Mark </label></td>
              <td align="center"><label class="label">Size </label></td>
              <td align="center"><label class="label">Schedule</label></td>
              <td align="center"><label class="label"> Flange Type</label></td>
              <td align="center"><label class="label">Rating </label></td>
              <td align="center"><label class="label">With Blind</label></td>
            </tr>
            <tr>
              <td align="center"><input class="tab" type="text" value="" size="10"/></td>
              <td align="center">
                    <select class="drop" width="100%">
                            <?php
                            if($flag=='0')
                            {
                            foreach($rowsize_si as $size_si)
                            {
                            ?>
                            <option value="<?php echo $size_si->nps_si;?>"><?php echo $size_si->nps_si;?></option>
                            <?php
                            }
                            }
                            else
                            {
                            foreach($rowsize_fps as $size_fps)
                            {
                            ?>
                            <option value="<?php echo $size_fps->nps;?>"><?php echo $size_fps->nps;?></option>
                            <?php
                            }
                            }
                            ?>
                    </select>
              </td>
              <td align="center">
                        <select class="drop">

                            <option value="10">10</option>
                            <option value="30">30</option>
                            <option value="40">40</option>
                            <option value="STD">STD</option>
                            <option value="80">80</option>
                            <option value="XS">XS</option>
                        </select>
            </td>
              <td align="center">
                <select class="drop">
                    <option value="WNRF">WNRF</option>
                    <option value="SORF">SORF</option>
                    <option value="SOFF">SOFF</option>
                    <option value="WNFF">WNFF</option>
                    <option value="LJ">LJ</option>
                </select>
              </td>
              <td align="center">
                    <select class="drop">
                        <?php
                            foreach($fillrating as $rating)
                            {
                            ?>
                            <option value="<?php echo $rating->rating;?>"><?php echo $rating->rating;?></option>
                            <?php
                            }
                            ?>
                    </select>
              </td>
              <td align="center"><input type="checkbox" /></td>
            </tr>

          </table>
          <input type="submit"  onclick="addNewRow();" name="Add New Nozzel" value="Add New Nozzel" /> 
           <input type="submit"  onclick="show1();" name="submit" value="submit" /> 
          <input type="text" value="" name="varValue" id="varValue" />
          </div>



   </body>


</html>

1 个答案:

答案 0 :(得分:0)

您可以使用jQuery post函数。 根据官方jQuery文档,它看起来像这样:

的JavaScript / jQuery的:

var inputField = jQuery('input[name=inputName]').val(); //Get the InputField value
var checkBox = jQuery('input[name=checkboxName]').is(':checked'); //Determin if checkbox is checked
checkBox = (checkBox == true?jQuery('input[name=checkboxName]').val():''); //get checkbox value

$.post( "ajax/process.php",{input1: inputField, inpu2: checkBox}, function( data ) {
       $( ".result" ).html( data );
});

PHP - &gt; AJAX / process.php:

if($_POST){
     echo $_POST['input1'].' <= inputValue';
     echo $_POST['input2'].' <= checkboxValue';
     //Do your PHP/Mysql Query stuff
}

可在此处找到更多内容:https://api.jquery.com/jQuery.post/或此处https://api.jquery.com/jQuery.ajax/

万一你不想使用jQuery,你可以看一下:http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp