Question

function insertQuestion(form) {   

var x = "<img src='Images/plussigndisabled.jpg' width='30' height='30' alt='Look Up Previous Question' class='plusimage' name='plusbuttonrow'/><span id='plussignmsg'>(Click Plus Sign to look <br/> up Previous Questions)</span>" ;

    if (qnum == <?php echo (int)$_SESSION['textQuestion']; ?>) {

   $('#mainPlusbutton').html(x); // no need to create a jQuery object

}

//append rows into a table code, not needed for this question

}

<form id="QandA" action="<?php echo htmlentities($action); ?>" method="post">

<table id="question">

<tr>
<td colspan="2">
<a onclick="return plusbutton();">
<img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage" id="mainPlusbutton" name="plusbuttonrow"/>
</a>
<span id="plussignmsg">(Click Plus Sign to look up Previous Questions)</span>
</td>
</tr>
</table>

<table id="questionBtn" align="center">
<tr>
<th>
<input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" />
</th>
</tr>
</table>

</form>

What is suppose to happen with code above is that the user clicks on the “Add Question” button and this will append question numbers into a table. Now what is suppose to happen is that if the if statement is met in the jquery function, then it suppose to replace the plus button image Images/plussign.jpg with Images/plussigndisabled.jpg. But it is not doing this.

So my question is that what is the best way to replace an image button with another image button? Also in the document ready function I need it to go back to displaying the Images/plussign.jpg button.

Answer 1

Can use replaceWith() method if you want to replace the whole button with new html

$('#mainPlusbutton').replaceWith(x); 

API Reference: http://api.jquery.com/replaceWith/

I suspect you really only want to replace the src of the button, and simultaneously disable it which can be done with attr() and prop() methods

var newImage='Images/plussigndisabled.jpg';

$('#mainPlusbutton').attr('src',newImage).prop('disabled',true); 

Please be aware that ID’s must be unique in a page, so if you are duplicating rows you will need to revise to using class and modifying a traverse to change the appropriate element