CODEWITHSUNDEEP
phpjquery
user1819709
user1819709

Reputation: 197

How to replace a image button with a plain image

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.

Upvotes: 0

Views: 130

Answers (3)

charlietfl
charlietfl

Reputation: 171669

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

Upvotes: 1

Muhammad Saifuddin
Muhammad Saifuddin

Reputation: 1294

I would suggest to use span or div to enclosed this image tag.

<img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage" id="mainPlusbutton" name="plusbuttonrow"/>

and change the script with this.

$('#mainPlusbutton').parent().html(x);

Upvotes: 0

JayC
JayC

Reputation: 7141

That code gave me a brief headache.

Your code

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

refers to an image tag. Your invocation of html is supposed to replace the inside of the tag, but image tags cannot contain anything, so there's nothing to replace.

Upvotes: 1

Related Questions