2016-08-10 20 views
0

Ich habe ein Formular erstellen, und ich möchte Bild einfügen, wenn ich auf den Button "Tester" klicken. Dies ist mein Code:wie Bild auf Knopf klicken klicken

<table id="table"> 
    <tr> 
     <td id="col1"> 
      <form> 

       <p><label for="text"> your text</label>:<input type="text" id="text"></input></p> 

       <input type="submit" value="tester" onclick="addImage()" /> 
      </form> 
     </td> 
     <td id = "img"></td> 
    </tr> 
</table> 




<script> 
function addImage(){ 
    document.getElementById("img").innerHTML = "<img src='newWatermark.png'/>" 
} 
</script> 


<style> 
#table{width:100%} 
#col1{width:50%} 

</style> 

Es ist Arbeit, aber nur eine halbe Zeit ... Und nur während ein paar Sekunden ... Ich verstehe nicht, warum

Außerdem denke ich, dass wenn ich auf Auf der Schaltfläche aktualisiere ich die Seite. In der URL habe ich: /watermark.html am Anfang und /watermark.html?your+text=, wenn ich auf die Schaltfläche klicken. Aber ich möchte nur ein Bild auf der gleichen Seite hinzufügen. Wie kann ich das machen?

+1

'' – Rayon

+0

vermeiden ok danke, Rayon, es funktioniert! – wxcvbn

Antwort

0

Sie reichen Ihr Formular ein.

Ändern Sie den Eingangstyp von submit zu button.

+0

Es funktioniert, danke Razzka! Aber was sind die Unterschiede zwischen Submit und Button? – wxcvbn

+0

Aktion senden sendet Ihr Formular (mit allen eingegebenen Daten) an den Server und lädt diese Seite mit der Antwort des Servers neu. In der Regel müssen Sie die Übermittlung auf der Serverseite durchführen und die neu geladene Seite enthält einige neue Daten. Wenn Sie (aus irgendeinem Grund) ein Formular senden, aber die Seite nicht aktualisieren möchten, fügen Sie 'onclick =" return false "' zu hinzu. – Razzka

0

Zur Aktualisierung der Seite Verwendung input type button nicht submit

function addImage(){ 
 
    document.getElementById("img").innerHTML = "<img src='newWatermark.png'/>"; //This will overwrite previous image 
 
} 
 

 
function appendImage(){ 
 
    document.getElementById("img").innerHTML += "<img src='newWatermark.png'/>"; //This will append image 
 
}
#table{width:100%} 
 
#col1{width:50%}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="table"> 
 
    <tr> 
 
     <td id="col1"> 
 
      <form> 
 

 
       <p><label for="text"> your text</label>:<input type="text" id="text"></input></p> 
 

 
       <input type="button" value="tester" onclick="addImage()" /> 
 
       <input type="button" value="Append" onclick="appendImage()" /> 
 
      </form> 
 
     </td> 
 
     <td id = "img"></td> 
 
    </tr> 
 
</table>