Edit the value of an <input> element by jQuery - php

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.

Related

url formatting when processing a form

So I have written this code for a form (search form) and it looks like this:
<form action="" method="get">
<select >
<option value="name">Client Name:</option>
<option value="email">Client Email:</option>
<option value="tnx_id">Transaction ID:</option>
<option value="amount">Amount:</option>
</select>
<input type="text" name="svalue" placeholder="Search"></input>
<input type="image" name="submit" src="img/search_btn.png"></input>
</form>
When user clicks Search I want the url to be formatted this way:
http://localhost/pp/index.php?search&name=haha
But instead I get:
http://localhost/pp/index.php?search=name&svalue=haha&submit.x=0&submit.y=0
I'm only having difficulties formating the url correctly because the rest of the
code is good, I cannot get rid of that &submit.x=0&submit.y=0 at the end of the
url too. Do you have any ideas guys?
Basically my desired url format gets the selected option (name, email, tnx_id, amount)
and assigns svalue's value to it.
I'd appreciated your help,
Thank you in advance,
Thanks.
That is how forms work. Each control gives a name=value pair in the submitted data.
You could hack it with JavaScript, but that becomes fragile. Give the <select> element a name and change the server side script so that it takes the two pieces of data as separate pieces of data.
I cannot get rid of that &submit.x=0&submit.y=0 at the end of the url too
Remove the name attribute from the image map so it won't be a successful control.
<input type="image" src="img/search_btn.png">
Other improvements you should make:
<input> is an empty element. It should not have an end tag. If you are writing XHTML then use the empty element syntax.
placeholder should not be used as a replacement for <label>
Add an alt attribute to the image map
Use JavaScript to create the URL. If you're using jQuery:
var url = 'http://localhost/pp/index.php?search&'
+ encodeURIComponent($('#id-of-your-select-element').val())
+ '='
+ encodeURIComponent($('#id-of-your-svalue-element').val());
Edit: As for getting rid of submit.x and submit.y, see #Quentin's answer.
in your php code you can add this:-
if(isset($_GET['name']))
{
$searchString="&cs=".$_GET['name'];
}
then use this:
http://localhost/pp/index.php?".$searchString."/
i think this will help you to get the right thing. if you want to use pagination with that,i have a code for you which i used before and it works great. just try it once!

How to change the HTML Value dynamically using javascript

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/

jQuery autocomplete on multiple input fields

I am using jQuery auto-complete. I have download this script from http://code.google.com/p/jquery-autocomplete/. I want to use this on multiple fields. Please help me thanks.
$("#input").autocomplete("samefile.php");
$("#input").autocomplete("samefile.php");
thanks
the hash mark means you are using IDs to select elements. there should however never be more than one element in your page with the same ID. for instance,
<input id="test" /><input id="test" />
is invalid HTML.
The second problem, is that it appears you are trying to find tag names, which means you should simply leave out the hash mark from your code, and JQuery will apply your methods to all of the tags with that tag name,
$("input").autocomplete("samefile.php");
will apply autocomplete to all input tags on your page.
Third, I would use classes instead of tag names incase you ever want to have an input on your page that does not use the same auto complete. So your html would look like this,
<input class="auto" /><input class="auto" />
and your JQuery would look like this.
$(".auto").autocomplete("samefile.php);
I also wonder where you are calling your JQuery from?
You should use a less specific selector to mark multiple fields as autocomplete in one statement.
Maybe you can assign a class of type ".autocomplete" and then use that.
<input type=textbox" name="txt1" class="autocomplete"/>
<input type=textbox" name="txt2" class="autocomplete"/>
$(".autocomplete").autocomplete("samefile.php");

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