how to pass value of input textbox and its id to javascript function so it makes post request via ajax?

Question

i got some editable textbox inside html table cells! Each textbox got a summit button. I want send value of textbox and id of textbox to javascript function so it makes ajax post request to php script and edit mysql row!

My problem is that i dont know how to pass textbox value and its corresponding id to javascript and change textbox button on response of ajax.Does my buttons need unique ids as well ? could any one show me how this can done.Thanks

 $table3.="<tr>";
 $table3.="<td>" . $row['ID'] ."(".$totalRows. ")</td>";
 $table3.="<td bgcolor=\"#FF0000\"><input type=\"text\" id =\"". $row['ID'] ."\" name=\"". $row['ID'] ."\" value=\"edit\"><button onclick='setNewValue(\"".$row['ID']."\")'>Edit this Row</button></td>";
 $table3.="<td>" . $row['imgPURL'] . "</td>";
 $table3.="<td>" . $row['imgUrl'] . "</td>";
 $table3.="<td>".$line."</td>";  echo "</tr>";

javascript :

<script>
function setNewValue(a,b) {
var button = $(event.target);  // get button here

var text = $("#"+a);
var textboxvalue = text.val();

//alert("inputId:"+a+"\nuInputValue:"+b);


    var url = "./edit.php";
    $.post(url, {
        "method": "post",
        "rowId": a,
        "rowValue": textboxvalue,

    }, function(data) 
       {

          var ajaxResponse = data;

        //alert("success"+ajaxResponse);

            if(ajaxResponse.indexOf("SuccessEdit")>=0)
            {
              //remote the edit button
               button.hide();
            } 
            else
            {
              //change caption of edit button to try again
             button.text("some text");
            }

      })
    }

</javascript>

possibly duplicate

Prateek
– Prateek

2013-11-23 07:19:36 +00:00
Commented Nov 23, 2013 at 7:19 — Prateek
– Prateek, Commented Nov 23, 2013 at 7:19

Ivin Polo Sony · Accepted Answer · 2013-11-23 07:27:34Z

1

pass the id of the input box through the function like setNewValue(23)

function setNewValue(id){

$("#"+id);

}

Thats it you can get all the values of the input box and

this works if name the submit button with an id or rather a class;

answered Nov 23, 2013 at 7:27

Ivin Polo Sony

3633 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1788736 Over a year ago

thanks for replies. Ivin Polo Sony could you tell me how i can pass the id of inputbox to the function ? I tried this but it gives me erros!<button onclick=\'setNewValue(\" . $row['ID' . \")\'>edit this row</button>. After passing id of inputbox how can access value of inputbox itself ?

Ivin Polo Sony Over a year ago

@user1788736 you can simply pass the is through the function parameter like this <input type = "button" onclick=" setNewValue(<?php echo $row['id']; ?>)" /> thats it.

srain · Accepted Answer · 2013-11-23 08:37:39Z

1

This line:

$table3.= "<td bgcolor=\"#FF0000\"><input type=\"text\" id =\"". $row['ID'] ."\" name=\"". $row['ID'] ."\" value=\"edit\"><button onclick=\'setNewValue()\'>Edit this Row</button></td>";

to:

$table3.= "<td bgcolor=\"#FF0000\"><input type=\"text\" id =\"". $row['ID'] ."\" name=\"". $row['ID'] ."\" value=\"edit\"><button onclick=\'setNewValue(" . $row['ID'] . ")\'>Edit this Row</button></td>";

Then in your js:

function setNewValue(id){
    var text = $("#"+id);
    var value = text.val();

}

update, hide button or change caption

function setNewValue(id){
    var button = $(event.target);  // get button here

     // change caption 
     button.text("some text");

     // hide 
     button.hide();

}

edited Nov 23, 2013 at 8:37

answered Nov 23, 2013 at 7:30

srain

9,1426 gold badges32 silver badges43 bronze badges

13 Comments

user1788736 Over a year ago

srain the value of textbox is dynamic and editable. in your example you just put it edit! how to pass whatever user put in the textbox to javascript. I removed ,\"edit\" part and i get lots of error!

user1788736 Over a year ago

thanks i was keep trying var textboxvalue = $('input[id=+a]').val(); and it was not working . but now i get both id and textbox value in javascript. Now how i can remove the button or change caption of button if depending on ajax response from ajax call? i want somehow user know that edit was successfull. or forexample how to change bgcolor of inputbox on ajax response ?

srain Over a year ago

@user1788736, how is the issue going?

user1788736 Over a year ago

srain there are more then one button in the page i just want to change the one that was clicked if the result of ajax resposnse is SuccessEdit(if(ajaxResponse.indexOf("SuccessEdit")>=0))! do i need to provide each button with unique id as well?

srain Over a year ago

in function setNewValue(), var button = $(event.target); get the button you clicked.

|

Gabriel Ratener · Accepted Answer · 2013-11-23 07:35:19Z

0

 $table3.="<tr>";
 $table3.="<td>" . $row['ID'] ."(".$totalRows. ")</td>";
 $table3.="<td bgcolor=\"#FF0000\"><input type=\"text\" id =\"". $row['ID'] ."\" name=\"". $row['ID'] ."\" value=\"edit\"><button onclick=\'setNewValue(this)\'>Edit this Row</button></td>";
 $table3.="<td>" . $row['imgPURL'] . "</td>";
 $table3.="<td>" . $row['imgUrl'] . "</td>";
 $table3.="<td>".$line."</td>";  echo "</tr>";

the 'this' will reffer to the button element that gets clicked.

function setNewValue(btn) {
   var cell = btn.parentNode.querySelector("input[type='text']");
   var input = cell.querySelector("input[type='text']");
   var inputId = input.id;

...

answered Nov 23, 2013 at 7:35

Gabriel Ratener

6058 silver badges21 bronze badges

Comments

Ivin Polo Sony · Accepted Answer · 2013-11-23 07:45:13Z

0

you can pass this like a normal js parameter ==>

<input type=text id = <?php echo $row['id'];  ?> onclick= setNewValue(<?php echo $row['id']; ?>);


    function setNewValue(id){

    var obj = $("#"+id);

    console.log(obj);

    }

answered Nov 23, 2013 at 7:45

Ivin Polo Sony

3633 silver badges17 bronze badges

Comments

John Ezell · Accepted Answer · 2013-11-23 08:26:10Z

0

keep in mind if he is using the element the default type is submit and his entire form will probably submit. add either type="button" or use event.preventDefault() on the JS event.

answered Nov 23, 2013 at 8:26

John Ezell

722 bronze badges

Collectives™ on Stack Overflow

how to pass value of input textbox and its id to javascript function so it makes post request via ajax?

5 Answers 5

2 Comments

13 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

13 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related