动态表ajax替换页面中所有行/表单中的元素

Question

<script type="text/javascript">
 $(document).ready(function() {
 $("#submit<?php echo $resultshome['hskid']; ?>").click(function() {


 $.ajax({
  type  : "POST",
  url   : "/scores/printPOST.php",
   data  : {             
    "subround" : $( document.forms["subround<?php echo $resultshome['hskid']; ?>"] ).serialize() 
    },
   datatype : 'html',
   success: function(data) {                     

    $(document.forms).trigger("reset");
    var x<?php echo $resultshome['hskid']; ?> = document.getElementById("roundid<?php echo  $resultshome['hskid']; ?>");
    if (x<?php echo $resultshome['hskid']; ?>.value = '0')
            {
                    document.subround<?php echo $resultshome['hskid']; ?>.roundid<?php echo $resultshome['hskid']; ?>.options[0]=null

            } 
                      }
        });
    });
});


 </script>

Hello, my first post, so a big hello and thanks for all the previous information I have gleaned from here as anon, you will never know how much I have learned from here. Thanks.

So my question is this:

The above php references are results from an sql query result in a (while $row = {} . They change as they are just UID in the DB.

I chose this method as a way around the fact the page is made up of rows which are each a form with a button at the end of the row (it helped me keep the form ID/NAME seperated for my limited programming ability..). I also benefit from capturing the UID in the POST for the tables.

It is essentially all wrapped up in a while loop..that gets sql, does the script below, creates a table with rows as indiviual forms, I hope you get what I am saying... Each user are the rows returned and are the form POST bits with the elements dynamically named with the rowid (hskid)...

Now the above code works from for the first $resultshome/row and the dropdown menu has the first OPTION null'ed so it does not show up in the list (no refresh needed etc) and it move on to ROUND2... the roundid of the FORM subround, great. But I need to update all the rows elements.

The code serializes the data and it goes to a POST which appears to work and the reset resets the little buttons that make part of the FORM(s).

What I want to do is make this "document.subround.roundid.options[0]=null" line happen to ALL the other elements in the rows in the while loop (there could be 20 results in the sql return result)

But do remember that the elements have the $resultshome['hskid'] appended to them to help me in the multiple forms on one page - with no refresh....etc...you know... so I dont know how to get hold of all of the already written out page, or my logic is wrong. Please advise.

Basically it is a sports match, after ROUND1 and the submit has been pressed for the player (row) that scored at the end of the round gets the points and the button is pressed to send the data to the DB (not shown in the code here , yet... using alert(data) shows the array is good for the POST) so as it is ROUND2 for ALL players in all the rows, it makes sense to update them all to ROUND2. No more scoring in ROUND1 possible.

I hope that all makes sense, I have been staring at the same 10 lines of code for what seems like forever.... I know you smart folks will wrap this up into about 20 chars, just as a side order :)

Well I hope so any way.

I have been programming php and this ajax for about 2 weeks now and I am pulling this all together on the fly.. is it possible?

Thanks guys.

WB.

UPDATE1: HTML row request:

 <td>
 <select name="roundid<?php echo $resultshome['hskid']; ?>" id="roundid<?php echo $resultshome['hskid']; ?>">


  <script type="text/javascript">
 // get reference to select element
 var sel<?php echo $resultshome['hskid']; ?> = document.getElementById('roundid<?php echo $resultshome['hskid']; ?>');
var opt<?php echo $resultshome['hskid']; ?> = document.createElement('option'); // create new option element
// create text node to add to option element (opt)

//Meaning below = new Option(text, value, defaultSelected, selected)     http://www.javascriptkit.com/javatutors/selectcontent.shtml
 document.subround<?php echo $resultshome['hskid']; ?>.roundid<?php echo $resultshome['hskid']; ?>.options[0]=new Option("ROUND1", "1", true, false)
 document.subround<?php echo $resultshome['hskid']; ?>.roundid<?php echo $resultshome['hskid']; ?>.options[1]=new Option("ROUND2", "2", false, false)
 document.subround<?php echo $resultshome['hskid']; ?>.roundid<?php echo $resultshome['hskid']; ?>.options[2]=new Option("ROUND3", "3", false, false)

The form (each row is basically a form) starts with:

<form class="forms" name="subround<?php echo $resultshome['hskid']; ?>" id="subroundid<?php echo $resultshome['hskid']; ?>" >

The form button is:

<input name="submit<?php echo $resultshome['hskid']; ?>" id="submit<?php echo $resultshome['hskid']; ?>" value="send" type="button"  />

thanks.

Answer 1

WilsonBubbles, welcome to StackOverflow.

It's easy to think you have to work with ids in this sort of problem but the simplest solutions generally don't require ids. jQuery makes it very simple to traverse the DOM to find other nodes relative to a clicked node (in this case a "submit" button).

In the HTML :

• make sure the <select> elements of interest all have class="subround". (maybe 'subround' is not the right word but it will do the job).

And the javascript/jQuery will be ...

$(document).ready(function() {
    $(".forms input[name^='submit']").on('click', function(e) {
        e.preventDefault();
        var $form = $(this).closest('form'),
            $select = $form.find('select.subround'),
            val = $select.val();
        $.ajax({
            type: 'POST',
            url: '/scores/printPOST.php',
            data: {
                'subround': $form.serialize() 
            },
            datatype : 'html'
        }).then(function(data) {
            $(document.forms).trigger('reset');
            if (val == '0') {
                //to remove first option from just this row's select menu
                $select.find("option").eq(0).remove();

                //to remove first option from all rows' select menus
                //$(".forms select.subround option:nth-child(1)").remove();
            }
        });
    });
});

I'm not too sure about the option removal. So I've given you two alternative lines of code.

It's also not clear why you should want to remove the option(s) only when val == '0'. In this regard, I have just repeated what's in the question.