CODEWITHSUNDEEP
javascriptformspopup
Smudger
Smudger

Reputation: 10809

javascript pass value to popup page

I have an order form table with 100 rows. for each of these there is a button with a popup wherein users can select a product they want to order.

I have adapted a javscript I found on the net which works as per the code below. my issue is that I have 100 rows, each product has a name of sku1, sku2, sku3... sku4, sku5. I dont want to create 100 instances of the javascript code?

I am looking for a way to pass the value of my input field sku3 to the popup so it knows which field to send the value back to.

any help would be appreciated.

my main page code is: (Snippet of relevent code- 100 rows in real document)

<tr id="r1">  
    <td>
        <input size=10  type=number id=sku1 name=sku1>
        <img src=q.png border=0 onClick="window.open('popupselector.php','orderform','width=500,height=600');">
    </td>
    <td>
        <input type="number" name="qty1" id="qty1">
    </td>   
</tr>
<tr id="r2">  
    <td>
        <input size=10  type=number id=sku2 name=sku2>
        <img src=q.png border=0 onClick="window.open('popupselector.php','orderform','width=500,height=600');">
    </td>
    <td>
        <input type="number" name="qty2" id="qty2">
    </td>   
</tr>
<tr id="r3">  
    <td>
        <input size=10  type=number id=sku3 name=sku3>
        <img src=q.png border=0 onClick="window.open('popupselector.php','orderform','width=500,height=600');">
    </td>
    <td>
        <input type="number" name="qty3" id="qty3">
    </td>   
</tr>

The javascript code for popupselector.php is:

<SCRIPT LANGUAGE="JavaScript">

function sendValue(s){
var selvalue = s.options[s.selectedIndex].value;
window.opener.document.orderform.sku1.value = selvalue;
window.close();
}

</script>
<form name=selectform>

<SELECT NAME=selectmenu size=30> 
<?=$options?> 
</SELECT> 

<input type=button value="Select" onClick="sendValue(this.form.selectmenu);">
</form>

Where the javascript has sku1, I want this to be a variable depending on the row the users clicks:

window.opener.document.orderform.sku1.value = selvalue;

I dont want to hardcode the sku1, sku2, sku3 into these pages as I would need 100 popupselector.php pages.

Thanks and Regards, Ryan Smith

Upvotes: 0

Views: 1620

Answers (1)

U and me
U and me

Reputation: 740

I think you can create a variable to be the id of the item, then query them in a loop.

function sendValue(s){
    for (var i = 1; i < 101; i++) {
        var selvalue = s.options[s.selectedIndex].value;
        var itemId = 'sku' + i;
        var item = document.getElementById(itemId).value = selvalue;
    }
    window.close();
}

If the selvalue does not change in each loop, you can move it out of the loop

- - Update to send id from the form to the javascript popup - - You can use DOM to access the id of the input standing right before the img clicked:

function sendValue(s){
    var inputField = s.previousSibling; // will be the space between <input> and <img>
    if (inputField.nodeName != 'INPUT') 
        inputField = inputField.previousSibling; // will be the <input> node

    // Here you can get id, name... attributes with: inputField.getAttribute('id'), inputField.getAttribute('name')
    window.close();
}

Some thought: If the table rows are generated from PHP code, why don't you insert the id directly to the img tag and get it back inside popupselector.php

<img src=q.png border=0 onClick="window.open('popupselector.php?<?=$rowId ?>','orderform','width=500,height=600');">

Upvotes: 1

Related Questions