How to change the HTML Value dynamically using javascript - php

My Problem is in brief below: This is done using PHP, JS, Smarty and HTML
<form name="todaydeal" method="post">
<span id="fix_addonval"></span>
<input type="radio" name="offer" id="offer_{$smarty.section.mem.index+1}" value="{$display_offers[mem].offervalue}" onclick="return sel_bees(this.value);" />
<input type="submit" name="SET" value="SET" />
</form>
{literal}
<script>
function sel_bees(Val)
{
document.getElementById('fix_addonval').innerHTML='<input type="hidden" name="addon" id="addon" value='+Val+' />'
}
</script>
{/literal}
When i click on the radio button its value must be replaced via javascript innerHTML and it should be placed in the span id. When i submit the form using submit button the value which is replaced in the should be get in the next page. How can this be done ?
Any ideas will be thankful and grateful. Thanks in advance

Your code is so buggy !
Your question is not clear, but if you need to create a text box in the span using javascript you can do the following:
some mistakes you've made in your code
1) you said, you need to create a textbox so you should use (text) as the type of your input.
2) use (;) at the end of the javascript statement to run successfully in all browsers
3) use < script type="text/javascript"> for your javascript code, to make it more readable
4) you've forgot to enclose the value attribute in (") and I do it in the following code for you
jQuery:
$('fix_addonval').html('< input type="text" id="addon" value="' + Val + '"/>');

This approach looks convoluted for me. All you are trying to do is to create a dynamic hidden variable and assign a value to if the checkbox is checked. Ideally, I would keep the hidden variable in the markup and will assign the value to it if the checkbox is checked. Since it is hidden, it is not going affect your HTML markup.

I don't know if span element is supposed to contain anything else besides text, at least the XHTML way, and if the input is of type hidden it can safely reside in the page and simply replace the value.

Try it with jQuery.
http://jsfiddle.net/vXgzK/

Related

How to get value contentEditable in PHP

How we can get the content present in contentEditable in html format in PHP
For example i have this code and want to get its value in a variable in PHP:
<div contentEditable="true"> type here
<img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQCze-mfukcuvzKk7Ilj2zQ0CS6PbOkq7ZhRInnNd1Yz3TQzU4e&t=1" /></div>
​
because i want to use this as html body for an email.
Infact i want to get the value of contentEditable and save it into a variable and then use that variable as a body for my email. Any idea how to perform this task.
You'll need to store the contents of the element in a form element so it can be submitted to your PHP page.
I assume you want contenteditable instead of textarea for rich text... consider taking a look at WYSIWYG editors like TinyMCE instead.
If you still want to stick with your current method, you'll need some JS to copy the value of the div into a hidden form element before the page gets submitted.
HTML
<div id="emailcontent" contenteditable>asdf</div>
<form>
<input type="text" id="a" name="a"/>
<input type="submit" name="submit" id="submit" />
</form>
jQuery
$("#submit").click(function() {
$("#a").val($("#emailcontent").html());
});
DEMO
You can try something like this:
var form = document.createElement("form");
form.setAttribute('action','some.php');
form.setAttribute('method','POST');
form.setAttribute('target','_self');
form.setAttribute('enctype','application/x-www-form-urlencoded');
form.innerHTML = '<input type="hidden" name="emailData" value="'+
document.getElementById('yourdivid').innerHTML+'" />';
form.submit();
Then in your php retrieve POSTed data:
$data = $_POST['emailData'];
If you want to use PHP maybe you can try to use php DomDocument
this is some example maybe same with want you want
How can I get a div content in php
How to get a div via PHP?
or you can use javascript and jquery to do that

Edit the value of an <input> element by jQuery

I want to fill an element with data using jQuery.
Unfortunately, the element stays blank. Until now, i used a workaround and used a textarea instead of input (which is working for some reason).
I did not only try
$('#input').val("Text") ;
but also
$('#input').text("text") ;
$('#input').attr("value", "Text") ;
I do not understand this behaviour, outside of my project it works just fine.
Maybe an overlook over the complete code could help. (Excuse the codemess)
Also i've got a small sidequestion:
I'm using async: false to make the whole thing work, if i remove it, nothing will be shown. But as i know that this is deprectaed, what alternatives do i have?
Thank you very much.
there is no element with ID of input in your HTML, i think you want to change the value of input elements, change this:
$('#input').val("Text") ; // this is an ID selector
to
$('input').val("Text") ;
#input searches for an element with id input. I did not see any on the source code.
As you want to change text of a single input field , give it an unique id. Like id='sampleText' then change its value like ,
$("#sampleText").val("Your text");
Your code has some errors please check.
<form id="editForm" method="POST" action="updatedata.php">
**<input type="text" id="editHeading" name="editHeading" /></textarea><br>**
<textarea id="editAuthor" name="editAuthor" /></textarea><br>
<textarea id="editTag" name="editTag" type="text" /></textarea><br>
<textarea id="editarea" name="editarea"></textarea><br>
<input id="id" name="id">
<input id="submitEditForm" name="submitEditForm" type="submit" /><br>
</form>
FYI some general concepts
$('input').val('foo'); //updates with value foo for all input elements
$('#input').val('foo'); //updates with value foo an input element with id #input
$('span#a').val('foo'); //wont work ,here we have to use .html
$('span#a').html('foo'); //<span>foo</span>
Hell...
i found it. It's not like the value isn't be inserted, it's just not visible O_o
MY Chrome does not show the word "test" inside the input when it is hidden by jQuery before.
With FF, everything works just fine.

Dynamically add/remove new input to form

So I am a beginner and as the title says I want to be able to; on the click of a button, allow the user to add another input field to my form. I would also like to be able to remove this.
The use of the form is adding students to a student group, which I will then be storing in my database.
my form example:
<form name="addstudents" id="addstudents" method="post" action="add_students.php">
<table><tr><td>Student:</td><td>
<input type='text' name="1" size='20'></td><td><input type="button" id="add" value="+">
</td><td><input type="button" id="remove" value="-"></td>
</table></form>
However from what I have been looking at there are different suggestions such as using a clone() function or Jquery appendto().
which is the best method for doing so?
thanks
$('form').append('<input ...'); //take care of appending valid DOM elements
//Create the input element
var $el = $('<input>')//Set the attribute that you want
.attr('id','inputID')
.attr('readonly',true);
//And append it to the form
$('#addstudents').append($el);
Remember you also can remove any DOM from your form just find the appropiate jquery selector
$('form > input:last').remove(); // to remove last input
check this working sample that a made on jsfiddle.net to help you with this
I would use JavaScript, I already answered this question here. Just uses plain JavaScript to edit the HTML of the page. Hope this helps!

Remove text from fields on input

How do I make the text disappear like the way some fields work here on stackoverflow once I start putting in text? I tried out the different 'on'-actions in HTML but that didn't really do what I wanted.
Thanks.
You can do it with onfocus/onblur events. For example:
<input type="text" value="search" onfocus="if(this.value=='search')this.value=''"/>
If you click on this input field, the default text "search" will disappear. The onfocus event handler checks if this input field has the value of "search" and if so then clears it, in other cases (user has already typed something in) leaves everything as is.
Presumably you mean "Labels which appear inside the input".
If you want to do this in a sane, accessible, semantic way — use a <label>, if JS is available then position it under the element, and onfocus/onblur change classes around based on the value of the element.
I knocked up a simple example at http://dorward.me.uk/tmp/label-work/example.html using jQuery (all the source that isn't part of the jQuery library is embedded in the HTML of that document for easy reading).
jQuery would make this easy work;
http://www.jsfiddle.net/TshDN/
If you are using HTML 5 you could use the placeholder attribute.
http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute
use the onFocus() in javascript
<input type="text" onfocus="if(this.value == 'value') { this.value = ''; }" value="value" />

Pass html variables to PHP using "ID" not "Name"

I have HTML code like below
<input type = "textarea" id="sentence1"> Here is my sentence </textarea>
<input type="hidden" name="sentence2" value="This is another sentence">
PHP:
$_POST['sentence1'] //shows nothing
$_POST['sentence2'] // works fine
I want to get the value of sentence1 also But i have such a scattered code that for textarea i can't change "id" to "name" otherwise i'll have to make lot of changes in different files.
I have to transfer both sentences to PHP so please help me how can i do that?
There is no input type="textarea". You cannot use the id attribute for the name attribute. This is not how it will get transmitted and there is no way to change that from plain HTML. Form <input> elements are transmitted with their name and value attributes.
Please refresh you knowledge about HTML Form elements and attributes
Your code is wrong. You should start using a browser with HTML validation, that would've caught it.
<textarea name="sentence1" id="sentence1"> Here is my sentence </textarea>
<input type="hidden" name="sentence2" value="This is another sentence" />
Change
<input type = "textarea" id="sentence1"> Here is my sentence </textarea>
into
<textarea id="sentence1" name="sentence1"> Here is my sentence </textarea>
and your PHP will work.
I'm assuming you've corrected the <input type="textarea"> mistake. If I understand your needs correctly, you know that the form only passes the value of the name attribute, and not the id, but you can't change that easily.
My suggestion would be to add a script to either change the value of the name attribute into that of the id, or copy the entire attribute so it's available under both the name and the id:
<script>
var inputs = document.getElementsByTagName('input');
for (var i=0; i<inputs.length; i++)
inputs[i].parentNode.appendChild(inputs[i].cloneNode(false));
</script>
and add it at the end of your pages. do the same for textareas.
You can't (at least not using plain HTML). The W3C recommendation regarding form handling and processing states
A control's "control name" is given by
its name attribute. The scope of the
name attribute for a control within a
FORM element is the FORM element.
and
A form data set is a sequence of
control-name/current-value pairs
constructed from successful controls
See here.
You can use Javascript to add the name-attribute dynamically to all form elements without the respective attribute.
But i have such a scattered code that for textarea i can't change "id" to "name" otherwise i'll have to make lot of changes in different files.
Then probably that's where you should start. (Note: A input/textarea element may have both a name and an id attribute.)

Categories