CODEWITHSUNDEEP
javascriptphpjqueryhtml
user2529058
user2529058

Reputation: 83

Change value of select option using Js without page refresh

So I want to change the select option using javascript but without reloading the page. I am able to change other element data using document.getElementById.value but not the select element

This is what I am trying to do: there is a form and a table inside my webpage , the table data is fetched dynamically using php. The form will edit the data. so when the edit button is pressed the row data against it will be automatically filled into the form.

All other elements of the form could fetch the data with my code. except the select option input element. below is the the code I have used for each element of the form jsfiddle here:http://jsfiddle.net/ZE6BX/11/

document.getElementById("l_type").value = data[1];

data array contains the values of the row against which edit is pressed!

Upvotes: 0

Views: 4988

Answers (2)

ran
ran

Reputation: 82

u can check whether using index value or option value.

var opt = ocument.getElementById('l_type').options;
for(var i=1;i<opt.length;i++){
  if(opt[i].value == 'Ve'){
    **opt[i].selected = true;**  }
}

this will help u.

Upvotes: 1

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

This works http://jsfiddle.net/ZE6BX/12/

YOu had a difference in case in between VE in the table and Ve as the value in the select.
Here's the code

HTML:

<div id="l-form">
    <form method="post" class="DA_custom_form" id="l-form" action="php/add.php">
            <h3>Add</h3>

        <label>Name</label>
        <input type="text" class="field" id="l_name" name="l_name" />
        <label>City</label>
        <input type="text" class="field" id="l_city" name="l_city" />
        <label>Phone</label>
        <input type="text" class="field" id="l_phone" name="l_phone" />
        <label>OP</label>
        <div class="cl">&nbsp;</div>
        <input type="text" class="field" id="l_op" name="l_op" />
        <label>Type</label>
        <select class="select_field" id="l_type" name="l_type">
            <option value=" ">Select type</option>
            <option value="cu">Cu</option>
            <option value="Ve">Ve</option>
            <option value="Ex">Ex</option>
        </select>
        <div class="cl">&nbsp;</div>
        <div class="btnp">
            <input type="submit" value="Save" name="submit" id="submit" />
        </div>
</div>
</form>
</br>
</br>
<table id="existing" border=1>
    <thead>
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>View/Edit</th>
        </tr>
    </thead>
    <tbody>
        <tr style:padding-left:10px;>
            <td>sweet_name</td>
            <td>Ve</td>
            <td style="display:none">dream_city</td>
            <td style="display:none">123456</td>
            <td style="display:none">SWAG</td>
            <td>
                <button class="edit_button" value="Edit" name="button">Edit</button>
            </td>
        </tr>
    </tbody>
</table>

JS:

$(document).ready(function () {
    var data;
    $("#existing").on("click", ".edit_button", function () {
        data = $(this).closest("td").siblings().map(function () {
            return $(this).text();
        }).toArray();

        console.log(data[0]); // name
        console.log(data[1]); //type
        console.log(data[2]); //city
        console.log(data[3]); //phone
        console.log(data[4]); //op

        document.getElementById("l_name").value = data[0];
        $("#l_type").value = data[1];
        document.getElementById("l_city").value = data[2];
        document.getElementById("l_phone").value = data[3];
        document.getElementById("l_op").value = data[4];


    });
});

Upvotes: 0

Related Questions