How to get td value on post php? - javascript

<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
});

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>

how to insert image on button click

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>

AJAX - on button click does not work

as title suggests, I am having issues running my script:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#subbut").click(function(e){
e.preventDefault();
$.ajax(
{
url : 'http://jsonplaceholder.typicode.com/users?email=Sincere#april.biz',
method : 'GET'
})
.then(
function(data) {
document.getElementById("street").value = data[0].address.street;
});
});
});
</script>
And my form is here:
<form id="myForm"
action="<%=response.encodeURL(request.getContextPath()
+ "/upisKorisnika.html")%>"
method="POST">
<table id='userInput' class="display" border="0"
style="font-family: Arial; font-size: 18px;">
<tr>
<td><c:out value="E-mail: " /></td>
<td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<input type="submit" name="subbut" class="btn btn-default" id="subbut" value="Submit">
</td>
</tr>
</table>
<input type="hidden" id="street" name="street" />
</form>
My first question is why doesn't anything happen when I click submit, what am I doing wrong?
And I would also like to know how could I get value of text field "Email", so I could use something like this:
url : 'http://jsonplaceholder.typicode.com/users?email='+mail,
First, is confusing the use of a form that not send data to the server and a submit button without submit form behavior.
Second you need use a debug tool like chrome developer tool. It will give you the trace of your calls.
To debug, add to the promise.then the error callback with a simple alert or a console.log to view what is happen with your call.
And responding your question,your code seen be right.

Javascript alert message on form submit

I'm new to javascript and I have trouble finding a solution that works for what I need.
I have a form and when the user submits the form, if a checkbox is checked, it needs to display an alert message.
<form method="post" action="inserting.php" id="form1" class="signupform">
<input type="hidden" name="allowlang" id="allowlang" value="no" />
<table cellpadding="4" cellspacing="0" width="100%" border="0" style="text-align:left;">
<tr>
<td><input type="checkbox" name="enable" id="enable" value="YES" style="width:15px !important"/>
There has been an issue.</td>
</tr>
</table>
<br />
<table cellpadding="4" cellspacing="0" width="100%" border="0" style="text-align:left;">
<tr>
<td height="50"></td>
<td> <br /><button id="registerButton" type="submit" style="float:left;">Send Data</button></td>
</tr>
</table>
</form>
Any help is welcome, thanks in advance.
Just change the start of yout form to this
<form method="post" action="inserting.php" id="form1" onsubmit="return validateForm()" class="signupform" name="signupform">
Use this Jscript
function validateForm() {
if (document.forms["signupform"]["enable"].checked)
alert("yes, there has been an issue");
}
You do not jQuery for this.
DEMO
Try in jquery
$('#form1').submit(function () {
if ($('#enable').is(':checked')) { //if checkbox is checked
alert("checked");
}
else {
return false;
}
})
methods to be learned:
submit()
is()
Change button type="submit" to button.
Submit the form using submit() function.
$( "#buttonId" ).click(function() {
//CHECK here for the checkbox;
if(checked) alert();
$( "#form" ).submit();
});
I would use an ordinary button that calls a function that shows the alert, and then if necessary, submits the form by calling formObject.submit().

How to Submit only after Jquery finished updating the field

I have a form where a user inputs a word, when pressing the button I want it to translate the word (using the jquery script) into the same field.
Only after completed to populate the field, it should continue and submit the translated word.
everything is working except that it will submit as soon as it translating causing the original word to be submitted instead of the translated one.
the original page shows that the word had been translated.
please help on how to make it submit only after the word have been translated in the text field. ?
should I use a delay ? if so how ?
or is there an oncomplete, "onpopulate" or something like that ?
here is the script:
<script type="text/javascript">
$(function transle() {
$('#transbox').sundayMorningReset();
$('#transbox input[type=submit]').click(function(evt) {
$.sundayMorning(
$('#transbox input[type=text]').val(),
{ source:'', destination:'ZH', menuLeft:evt.pageX, menuTop:evt.pageY},
function(response) {
$('#transbox input[type=text]').val(response.translation);
}
);
});
});
</script>
and the form:
<table id="transbox" width="30px" border="0" cellspacing="0" cellpadding="0">
<form action="custom-page" method="get" name="form1" target="_blank" id="form1" >
<tr>
<td><input id="q" name="q" type="text" class="search_input" value="Evening dress" /></td>
<td><input type="submit" /></td>
</tr>
</form>
</table>
there are another JS called for the script but I don't sure its needed for the question.
thank you.
you can use type="button" instead of type="submit" and after filling call submit event of your form
function(response) {
$('#transbox input[type=text]').val(response.translation);
document.forms.form1.submit();
}
<input type="button" />

Categories

Resources