how to insert image on button click - javascript

I have create a form, and I want to insert image when I click on the button "tester".
This is my code :
<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>
It's work but just half a time ... And just during a few second ...
I don't understand why
Moreover I think that when I click on the button I refresh the page.
In the URL I have : /watermark.html at the beginning and /watermark.html?your+text= when I click on the button.
But I just want to add an image on the same page. How can I do this?

You submitting Your form.
Change type of input from submit to button.

To avoid page refresh use input type button not 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>

Related

Use jQuery to Show/Hide a Form on submit

I would like to show the second text field incl. copy button as soon as i submit the the first text field. how i can hide the second text field and show after submit?
I tried as following:
HTML:
First Texfield:
<tr><td><input type="text" id="source">
<button type="submit" id="submit" id="formButton">Submit</button></td></tr>
Second Textfield:
<tr><td><input type="text" size="62" id="target" id="form1">
<button onClick="myFunct()" id="form1">Copy</button></td></tr>
JQuery:
<script>
$("#formButton").click(function(){
$("#form1").toggle();
});
</script>
Thank you so much for your support.
If you intend to submit data to a server normally you should have your inputs and buttons wrapped in a <form> tag, so I added one and set it up so that it sends to a live test server. There's also an iframe added as well to display the server's response. The jQuery is simple:
$('#main').on('submit', function() {...
When form#main "hears" a submit event (i.e. when the button[type=submit] is clicked...
$('.row2').removeClass('hide');
...Remove the class .hide form tr.row2 which removes the style display:none
BTW, ids must be unique. #form1 is duplicated and there's 2 ids on one button in OP code.
Demo
$("#main").on('submit', function() {
$(".row2").removeClass('hide');
});
.hide {
display: none
}
<form id='main' action='https://httpbin.org/post' method='post' target='view'>
<table>
<tr>
<td><input type="text" id="source" name='source'>
<button type="submit">Submit</button></td>
</tr>
<tr class='row2 hide'>
<td><input type="text" size="62" id="target" name='target'>
<button type='button'>Copy</button></td>
</tr>
</table>
</form>
<iframe name='view'></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The first problem is that you have duplicate IDs on the button (both submit and formButton). An element can only have one ID. I've gone with the latter in my example.
Second, you have duplicate form1 IDs, which is also invalid markup. Simply make use of classes instead.
Then it's just a matter of hiding these elements by default, and showing them on click of the button. I'd recommend .show() for this instead of .toggle().
This can be seen in the following:
$("#formButton").click(function() {
$(".form1").show();
});
.form1 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<input type="text" id="source">
<button type="submit" id="formButton">Submit</button>
</td>
</tr>
<tr>
<td>
<input type="text" size="62" id="target" class="form1">
<button onClick="myFunct()" class="form1">Copy</button>
</td>
</tr>

Dynamic input fields creation is not working. Why?

Thnaks in advance. I am new in web developing and stuck in one problem. I am creating a form in which I want variable number of input fields. So I have tried to create dynamic input fields creation by taking help of some online sources. I have tried everything I could imagine but the code is not working.
So far I have written this code : index.html
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header>Dynamic Add Input Fields</header>
<form name="form1" id="form1">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="text" name="name[]" id="name" class="form-control name_list"/></td>
<td><input type="button" name="add" id="add" class="btn btn-success" value="ADD"></td>
</tr>
</table>
<input type="button" name="submit" id="submit" value="Submit"/>
</form>
<script type="text/javascript" >
$(document).ready(function () {
var i = 1;
$('#add').click(function () {
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input id="name" type="text" name="name[]" class="form-control name_list"/></td><td><input type="button" name="remove" id="row'+i+'" class="btn_remove" Value="X" /></td></tr>');
});
$('.btn_remove').on('click','.btn_remove',function () {
var button_id = $(this).attr("id");
$("#row"+button_id+"").remove();
});
});
</script>
</body>
</html>
Now when I run this code then the output comes :
Dynamic Add Input Fields
[ Input Fields ] [Add Button]
[Submit Button]
So it soould work like when I click "Add" button then it should add one more input field and a "remove" button beside it.
But if I click the "Add" button, nothing happens, just URL changes.
You need add event handler for each new item
$('#dates').append(
$('<div class="'+classname+'">'+dd+'<br /><span class="month_selector">'+dm+'</span></div>')
.click(function(){
// handle click
})
);
jQuery: adding event handler to just created element

How to get td value on post php?

<form action="" method="post" name="theform">
<table width="693" border="1" style="table-layout:fixed;" >
<tr>
<td width="683" id="mymessage" contenteditable="true" name="mymessage">Write message here...</td>
</tr>
</table>
<span class="notranslate"><input type="submit" id="btnSend" name="btnSend" value="Send"></span>
</form>
<?php
if (isset($_POST['btnSend']))
{
$getmsg = $_POST['mymessage'];//i can't seem to get the value of td here
echo $getmsg;//i want to echo the message for example.
}
?>
Currently, I want to echo my td value after clicking the button but it is not appearing. please help me. tq.
contenteditable is not part of form input element hence it can not be accessed over server like form-input-elements. It means you can not access contenteditable element value in $_POST/$_GET
Update hidden field value when value of contenteditable is changed. use input event. The DOM input event is fired synchronously when the value of an <input> or <textarea> element is changed. Additionally, it fires on contenteditable editors when its contents are changed.
document.getElementById('mymessage').addEventListener('input', function() {
document.getElementById('hiddenInput').value = this.innerHTML;
console.log(document.getElementById('hiddenInput').value);
});
document.getElementById('hiddenInput').value = document.getElementById('mymessage').innerHTML; //To set the value initially..
console.log(document.getElementById('hiddenInput').value);
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<form action="" method="post" name="theform">
<table width="693" border="1" style="table-layout:fixed;">
<tr>
<td width="683" id="mymessage" contenteditable="true" name="mymessage">Write message here...</td>
</tr>
</table>
<input type="hidden" id='hiddenInput' name='hiddenInput'>
<span class="notranslate"><input type="submit" id="btnSend" name="btnSend" value="Send"></span>
</form>
PHP:
<?php
if (isset($_POST['btnSend']))
{
$getmsg = $_POST['hiddenInput'];
echo $getmsg;
}
?>
Edit: As Nate pointed out, It is better to use submit or click(If not dealing with form) event to set the value of the hidden element for the sake of the performance
document.querySelector('[name="theform"]').addEventListener('submit', function(e) {
e.preventDefault(); //Prevented submit action just to demonstrate..
document.getElementById('hiddenInput').value = document.getElementById('mymessage').innerHTML;
console.log(document.getElementById('hiddenInput').value);
})
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<form action="" method="post" name="theform">
<table width="693" border="1" style="table-layout:fixed;">
<tr>
<td width="683" id="mymessage" contenteditable="true" name="mymessage">Write message here...</td>
</tr>
</table>
<input type="hidden" id='hiddenInput' name='hiddenInput'>
<span class="notranslate"><input type="submit" id="btnSend" name="btnSend" value="Send"></span>
</form>
td is not form element so it does not have such attributes as name or value. You can put that value to hidden field or text field:
input {
border: none;
background-color: transparent;
outline: none;
}
<table width="693" border="1" style="table-layout:fixed;">
<tr>
<td width="683" contenteditable="true">
<input id="mymessage" type="text" value="Write message here..." name="mymessage" />
</td>
</tr>
</table>
Other option would be to use jQuery to get content of td:
$('form').submit(function () {
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('action'),
data: {
mymessage: $('#mymessage').text()
},
success: function () {
// do something on success
}
});
return false; // return false so that form will not submit reloading page. Form submitting is now done via Ajax
});

Textbox value inside iframe undefined

I'm new to JQuery and trying to learn more since my work requires me to do a lot of JQuery and AJAX. Now i have this practice project that i use to play around with JQuery and i can't seem to figure out the cause of this problem.
Here's the structure of the website
- index html with an iframe in it containing several buttons
- several html files for each of the iframe
Index.html
<div style="width:750px; height:450px; overflow:hidden; margin: 0 auto; position:relative; margin-top:35px;">
<div id="btn1" style="float:left"> <p> About Us </p> </div>
<div id="btn2" style="float:left"> <p> Objective </p> </div>
<div id="btn3" style="float:left"> <p> Constrains </p> </div>
<div id="btn4" style="float:left"> <p> Modelling </p> </div>
<div id="btn5" style="float:left"> <p> Contact Us </p> </div>
<div id="btn6" style="float:left"> <p> Feedback </p> </div>
<div id="content" style="position:absolute"> <iframe id="main",name="main" frameborder=0 height=450 width=750></iframe> </div>
2.html -- where my textbox resides
<div id="content" style="width: 730px; height: 430px !important;">
<form id="Form_obj", action="index.html", method="post">
<table width="100%" border="1" cellpadding="0">
<tr>
<td>Objective Function:</td>
<td colspan="2"><label id="msg">Your Objective Function</label></td>
</tr>
<tr>
<td></td>
<td align="center", colspan="2"><input type="button", id="Subbutton", value="-", disabled=true><input type="button", id="Addbutton", value="+", disabled=true><input type="submit", value="Submit">
<input type="button", id="Btnclear", value="Clear">
</td>
</tr>
<tr>
<td>Enter Objective Function values:</td>
<td align="right"><input type="text",id="Obj_coef1", name="Obj_coef1", size="5"><input type="text", id="Var_name1",name="Var_name1", size="15"></td>
<td><input type="button", id="Add_var_button", value="Add Variables"></td>
</tr>
</table>
</form>
main.js
$(document).ready(function(){
$("#main").load(function(){
$("#main").ready(function(){
// now read contents
$("#main").contents().find("#Add_var_button").click(function(){
alert("button is clicked");
alert($("#main").contents().find("#Obj_coef1").val());
//alert($("#main").contents().find("#Obj_coef1").val());
//var coef = $("#main").contents().find("#Obj_coef1").val();
//var var_name = $("#main").contents().find("#Var_name1").val();
//var coef_element_name = $("#main").contents().find("#Obj_coef1").getAttribute("name");
//var var_element_name = $("#main").contents().find("#Var_name1").getAttribute("name");
//alert("coef = " + coef);
//alert("var = " + var_name);
//$("#main").contents().find("#msg").text("Jquery changed the text");
//$("#main").contents().find("#msg").append(" appended");
});
});
});
});
Everytime i click the button the alert appears and i can also append text to #msg(label)but for some reason, but when value of the textbox is always undefined even after i changed the value inside the textbox.
What am i missing here?
I figured it out.
Here's my script
var iframe = $("#main");
iframe.load(function(){
iframe.ready(function(){
alert("iframe ready");
// get textboxes and buttons
var btnClear = iframe.contents().find("#Btnclear");
var btnAddVar = iframe.contents().find("#Add_var_button");
var btnAdd = iframe.contents().find("#Addbutton");
var btnSub = iframe.contents().find("#Subbutton");
var msg = iframe.contents().find("#msg");
var obj_coef_input = iframe.contents().find("#Obj_coef1");
var var_name_input = iframe.contents().find("#Var_name1");
btnAddVar.click(function(){
alert("btn add clicked");
btnAdd.prop('disabled',false);
btnSub.prop('disabled',false);
});
btnClear.click(function(){
alert("btn add clicked");
obj_coef_input.prop('value', "");
});
});
});
Oh and don't forget to add $(document).ready(function(){}); to wrap the script
I don't think the find() method is working correctly. I would suggest just using a jQuery selector to get the value. Here's an example:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
var text = $('#blah').val();
alert(text);
})
});
</script>
</head>
<body>
<input type="text" id="blah" /><input type="button" value="button" id="button"/>
</body>

Need javascript equivalent to HTML input tag

I have a settings page that is full of forms, normally the values get submitted back to the server using the input tags. I have one instance that requires an alertbox to display a warning with a yes and no button, this part I have done, what I need to know is how to submit the value from a radio button back to the server in the same way the input tag does?
<script type="text/javascript">
function radioFunc()
{
var x;
var r=confirm("WARNING! \nManually adjusting flowrate settings can flood your process, Are you sure?");
if (r==true)
{
x="YES!";
}
}
</script>
...
<FORM action=/menu/index.zhtml method=post>
<TR>
<TD width="45%">Max Flowrate Span </TD>
<TD align=middle width="25%"><INPUT value="<?z echo($configData.span420) ?>" name=configData.span420></TD>
<TD align=middle width="30%"><INPUT type=submit value=Submit><INPUT type=reset value=Reset></TD>
</TR>
<TR>
<TD width="45%">Desired Span </TD>
<TD align=middle width="25%">0%<input type="radio" name="ang" checked>25%<input type="radio" name="ang">50%<input type="radio" name="ang"><br>75%<input type="radio" name="ang">100%<input type="radio" name="ang" ></TD>
<TD align=middle width="30%"><button onclick="radioFunc()">Submit</button></TD>
</TR>
</FORM>
Take a look at:
http://www.w3schools.com/js/js_popup.asp
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display a confirm box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction()
{
var x;
var r=confirm("Press a button!");
if (r==true)
{
x="You pressed OK!";
}
else
{
x="You pressed Cancel!";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
Replace
document.getElementById("demo").innerHTML=x;
with setting the value of a hidden input on the form like:
<input type'hidden' id='hiddenAttr' />
and
document.getElementById("hiddenAttr").innerHTML=x;
You will then be able to access the hiddenAttr input the same as for the other attributes.

Categories

Resources