Develop Reference

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

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.

Error in JavaScript code while attempting to make the button submit the form

This is code which should perform a submission on a form, but it doesn't do the submission:
<script>
function validate(){
var formm = document.getElementById('form_first');
var basar1=document.form_first.basar1;
var basar2=document.form_first.basar2;
if(basar1.checked == 1 && basar2.checked == 1){
alert('Please ckeck only one of them') ;
}
else{
formm.submit();
}
}
</script>
And this is my HTML page:
<form action="#" method="post" name="form_first" id="form_first" >
<tr id="row_ques">
<td width="200">aaaaa</td>
<td width="113"><input type="checkbox" name="basar1" value="aaaa" /></td>
<td width="113"><input type="checkbox" name="basar2" value="bbbb" /></td>
</tr>
<input type="button" onclick="validate();" value="Save" name="btn_first" id="btn_first" />
</form>
the problem is that the form isn't submitted if validation checked correctlly

Posting to hash "#" doesn't trigger a page load. Posting to "" will load the page with the post data.
<form action="" method="post" name="form_first" id="form_first" >
<tr id="row_ques">
<td width="200">aaaaa</td>
<td width="113"><input type="checkbox" name="basar1" value="aaaa" /></td>
<td width="113"><input type="checkbox" name="basar2" value="bbbb" /></td>
</tr>
<input type="button" onclick="validate();" value="Save" name="btn_first" id="btn_first" />
</form>
Cleaned up JS:
function validate(){
var formm = document.getElementById('form_first');
if(formm.basar1.checked && formm.basar2.checked ){
alert('Please ckeck only one of them');
}else{
formm.submit();
}
}

You can use onSubmit function to validate the form
<form action="/feedback" method="post" name="form_first"
onSubmit="return validate()">
<!-- write your form conent -->
</form>
function validate(){
//validation
if (failed) {
// return false will cancel the form submission
return false;
}
// If everything goes well, proceed the form submission
return true;
}

change these lines
var basar1=document.form_first.basar1;
var basar2=document.form_first.basar2;
to
var basar1=formm.getElementById('basar1');
var basar2=formm.getElementById('basar1');
and you should be through

Submitting form after changing input by jQuery

I got HTML like this:
<table>
<form action=\'food.php\' method=\'POST\'>
<tr><h4>
<td><span><input type="submit" name="food_edit" class="food_edit" value="Edytuj" /></span></td>
</h4>
</tr>
</form>
</table>
And then a function in jQuery which change input field:
wrap.find('.food_edit')
.replaceWith('<input type=\'submit\' name=\'food_edit_confirm\' value=\'Potwierdź\' />');
My problem is that after change submitting button, send form doesn't work.

you may try this after replacement of submit button:
$('form').on('click','input[type=submit]',function(){
//rest of code goes here.
});

you either need to use $( document ).ready() around the particular jquery code or u can try and use the .attr to change the attribs of your class or u can use 'focus' to wrap around it. or u can do something like
$('form').live('submit',function(){
// do the rest of ur code and then submit it....
});

You have invalid HTML. It should look like this:
<form action=\'food.php\' method=\'POST\'>
<table>
<tr>
<td>
<span>
<input type="submit" name="food_edit" class="food_edit" value="Edytuj" />
</span>
</td>
</tr>
</table>
</form>
If you're looking to add a confirmation you should look into the onsubmit="" in the <form> tag.
Example:
<form action=\'food.php\' method=\'POST\' onsubmit=\'return checkForm();\'>
<table>
<tr>
<td>
<span>
<input type="submit" name="food_edit" class="food_edit" value="Edytuj" />
</span>
</td>
</tr>
</table>
</form>
JS Code:
function checkForm() {
return confirm("Submit this form?");
}

<script type="text/javascript">
$(function(){
$('.food_edit').replaceWith("<input type='submit' name='food_edit_confirm' value='Potwierdz' onclick='document.getElementById(\"submit\").click();' />");
});
</script>
<form action='food.php' method='POST'>
<input type="submit" name="food_edit" class="food_edit" value="Edytuj" onclick="document.getElementById('submit').click();" />
<input type="submit" style="display:none" id="submit" />
</form>
The hidden button always do submit the form regardless you do anything with the submit button which is replacable.

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" />