I'm using javascript (backbone) to fill out an HTML form template. The form is an edit form, so it will be populated with existing values.
Unfortunately, when I browse to the form, values for a text input are getting truncated. For example, say the value of the field should be populated with "hello world" - but the form only shows the word before the space (hello) and the actual source looks like this (notice it thinks world is an attribute):
<input type="text" name="name" id="name" value="hello" world="">`
I'm not a huge HTML/Javascript expert. Does anyone know how I can escape the input?
Here's the template text that generates that form:
I'm not a huge HTML/Javascript expert. Does anyone know how I can escape the input?
Here's the template text that generates that form:
<h1>Edit activity</h1>
<form id="edit-activity" name="activity">
<div class="field">
<label for="name"> name:</label>
<input type="text" name="name" id="name" value=<%= name %> >
</div>
<div class="actions">
<input type="submit" value="Update Activity" />
</div>
</form>
Back
<input type="text" name="name" id="name" value=<%= name %> >
Your problem is here. Try this instead
<input type="text" name="name" id="name" value="<%= name %>" >
What's happening is you are basically making this markup:
<input type="text" name="name" id="name" value=hello world >
Without the "s, the browser is interpreting the world value as an attribute. Placing the quotes in there does not adversely affect it, and when you think about it, it makes sense why it would work that way.
Related
I looked for this everywhere but I couldn't find anything useful.
I need a way to put a default text (preferably a php variable) in a HTML text field whenever I load the page. It's like a placeholder (I'm aware of the placeholder attribute, I don't want that) that doesn't disappear so that the user can submit that value if he wants.
I'm guessing it can be done with a simple javascript script but I suck at that.
Thank you for your help.
You're looking for the value attribute then: value="text here"
With a PHP variable, it would be something like this:
<form action="path-here">
<input type="text" name="field-name" value="<?php echo $variable; ?>"><br />
<input type="submit" value="Submit">
</form>
Here are two ways to put a default value in a text field.
The first way is the simplest. All it involves is setting the value of the text field.
<input type="text" id="myTextBox" value="Some default text">
The second was uses a JavaScript function that runs when the page loads.
<!-- This solution is a little more complicated. -->
<body onload="setDefaultText()">
...
<input type="text" id="myTextBox">
</body>
<script>
function setDefaultText() {
document.getElementById("myTextBox").value = "Some default text";
}
</script>
JSFIDDLE Example
<form>
First name: <input type="text" name="fname" value="John"><br>
Last name: <input type="text" name="lname" value="Doe"><br>
<input type="submit" value="Submit form">
</form>
You are looking for the value="Text Here"
Well I am making my first landing page, something not overly professional, I want to get in the hang of being able to make simple web pages myself.
So my issue is that whenever you click on the textbox, the text disappears. Which it should. But when the user enters text, clicks off the text box and clicks back on it, that text disappears.
How can I make it so that the newly entered text does not disappear?
My current code for the text fields:
http://pastie.org/8366114
<input type="text" value="Enter Your First Name" id="form"
onblur="javascript:if(this.value=='')this.value='Enter Your First Name';"
onclick="javascript:if(this.value=='Enter Your First Name')this.value='';"
onFocus="this.value=''">
</input></br>
<input type="text" value="Enter Your Email" id="form"
onblur="javascript:if(this.value=='')this.value='Enter Your Email';"
onclick="javascript:if(this.value=='Enter Your Email')this.value='';"
onFocus="this.value=''">
</input></br>
<input type="text" value="Enter Your Phone Number" id="form"
onblur="javascript:if(this.value=='')this.value='Enter Your Phone Number';"
onclick="javascript:if(this.value=='Enter Your Phone Number')this.value='';"
onFocus="this.value=''">
</input></br>
<input type="submit" class="button" name="submit" value=""></input>
I apologize for not posting it on here, but I don't know how to do the code block thing..
to do this with javascript all you need is
<input type="text" value="Enter Your First Name"
onblur="if(this.value=='')this.value='Enter Your First Name';"
onfocus="if(this.value=='Enter Your First Name')this.value='';" />
DEMO
however you can just simply use the html5 placeholder reference
also
dont use the same id more then once, instead use class.
input is self-closing (like <br>)
</br> is wrong use <br> or <br />
here is a working version of your code, i also added submit as the value for your button
<input type="text" placeholder="Enter Your First Name" class="form"><br/>
<input type="text" placeholder="Enter Your Email" class="form"><br/>
<input type="text" placeholder="Enter Your Phone Number" class="form"><br/>
<input type="submit" class="button" name="submit" value="submit">
DEMO
<input type="text" value="Enter Your First Name" id="form" onblur="if(this.value=='')this.value='Enter Your First Name';" onfocus="if(this.value=='Enter Your First Name')this.value='';" />
or if you are using HTML5, you can use placeholder attribute:
<input type="text" placeholder="Enter Your First Name" id="form" />
you have to make the onfocus event the same as the onclick event, e.g:
onfocus="javascript: if (this.value == 'Enter Your First Name') this.value = '';"
onFocus="this.value=''"
This is causing your text fields to be reset to blank unconditionally.
You probably only need onclick or onfocus here, and since onfocus will take into account tabbing into the field as well as clicking it with the mouse, I would recommend moving the code from onclick to onfocus and deleting onclick altogether.
Remove content from form onclick:
in haml:
= f.text_field :title, :value => 'Name', :onfocus => "if (this.value=='Name') this.value='';"
in html:
<input id="project_title" name="project[title]" onfocus="if (this.value=='Name') this.value='';" type="text" value="Name">
Upon submit I am trying to have "quiz" hide and have "thanks" be shown. All was working correct until I added a JavaScript form validation code, and now it just reloads the first div "welcome" I thought adding "#thanks" to the action upon submit would solve the issue, but it did not. Then trying to add an "if true" statement to my form validation ended up breaking the form validation. I am using jquery.validate to validate my form as suggested. With the current code it skips the validation and just shows "thanks" If anyone has any suggestions it would be greatly appreciated.
<div id="quiz">
<form class="cmxform" id="commentForm" method="get" action="" onSubmit="showHide(); return false;">
<label for="cname">Name</label>
<input id="cname" name="name" size="20" class="required" minlength="2" />
</p>
<p>
<label for="ccompany">Company Title</label>
<input id="ccompany" name="company" size="20" class="required company" minlength="2" />
</p>
<p>
<label for="cnumber">Phone Number</label>
<input id="cnumber" name="number" size="20" class="required number" />
</p>
<p>
<label for="cemail">Email</label>
<input id="cemail" name="email" size="20" class="required email" />
<p></p>
<input class="submit" type="submit" value="Submit" align="center"/>
</form>
</div>
<div id="thanks"><h2>Thank you.</h2>
You will receive an email momentarily
</div>
<script>
$("#begin").click(function(){
$("#quiz").show();
$("#welcome").hide();
});
function showHide(){
$("#thanks").show();
$("#quiz").hide();
};
</script>
All I can say is that you are doing it wrong.... While the form validation that you are doing can work there are a lot of good form validation jquery plugins that would both simplify your life and add a much richer user experience. jquery.validate is probably the most widely used library and would be well worth using.
If I have a form element as given below, then calling the form's submit will automatically generate the request body/query parameters in the url-encoded form as "username={username}&password={password}&submit=submit" where values in {} are taken from the corresponding input element's text boxes.
<form action="/action.php" method="POST">
<input id="username" type="text" />
<input id="password" type="password" />
<input type="submit" id="submit" value="submit" />
</form>
But if I am going to place my input elements in multiple levels of div's, then the form submit will fail to generate the request body/query parameters.
<form action="/action.php" method="POST">
<div id="inside_formdiv">
<div id="userdiv">
<input id="username" type="text" />
</div>
<div id="passworddiv">
<input id="password" type="password" />
</div>
<div id="submit_div">
<input type="submit" id="submit" value="submit" />
</div>
</div>
</form>
Can anyone tell me the reason why it is like that? The specification doesn't mention that the input elements should be immediate children of Form element. I was wondering a proper reason for this behavior.
The values will be populated to the elements and you can check the values also if you edit the changes as given below
<script type="text/javascript">
function logincheck() {
alert ('hi ' + document.getElementById('username').value);
alert ('hi ' + document.getElementById('password').value);
}
</script>
<form action="/action.php" method="POST">
<div id="inside_formdiv">
<div id="userdiv">
<input id="username" type="text" />
</div>
<div id="passworddiv">
<input id="password" type="password" />
</div>
<div id="submit_div">
<input type="submit" onclick="logincheck()" />
</div>
</div>
</form>
A bit more detail:
I am assuming you are using PHP for the rest of this, you can substitute any other server side language.
You are missing the name attribute on your inputs. Unless you are actually using the id attributes for something you can get rid of them. Form data is listed by the name attribute - for instance the PHP $_GET, $_POST, and $_REQUEST arrays which will be keyed by names of your inputs. No name and the data is ignored.
You can also create an array of inputs by using a pair of brackets after matching names.
Example:
<input name="answers[]" type="text" id="answer1" />
<input name="answers[]" type="text" id="answer2" />
This will create one GET/POST entry that is an array. It will have the key answers with two elements inside the array.
For checkboxes, you will only get a value in the GET/POST when they are checked. You will not get a result if it isn't checked. Important to know. If someone, for instance, turns something "off" you will need to know the list of original inputs to compare against.
The first thing I notice is that your inputs are missing the "name" attribute. It's not required by the HTML spec afaik, but I think this is why the values are not sent with the request.
<form action="/action.php" method="POST">
<div id="inside_formdiv">
<div id="userdiv">
<input id="username" name="username" type="text" />
</div>
<div id="passworddiv">
<input id="password" name="password" type="password" />
</div>
<div id="submit_div">
<input type="submit" onclick="logincheck()" />
</div>
</div>
</form>
This should do the trick
The input elements don't have to be directly inside the form element! they can be inside divs tables etc... How about trying to use names along with the ids in the text fields, like the following:
<input type="text" id="username" name="username" />
note the name="username" in the previous example -
to all input elements.
Is that possible? Google searches are leading me nowhere.
My Sample form:
<form action="search.asp" method="post" name="form1">
User ID <input type="text" size="15" name="userid"><p>
Last Name <input type="text" size="15" name="lastname"><p>
School <input type="text" size="15" name="school"><p>
District <input type="text" size="15" name="district"><p>
Email <input type="text" size="20" name="email"><p>
<input type="submit" value=" Go Search! ">
</form>
This needs to work from any input box on the form. I tried onkeyUP but wouldn't work or I probably wrote it wrong. I am no javascript expert. Any ideas?
I don't know why you'd do this, but in Firefox, you would write:
<form action="search.asp" method="post" name="form1" onkeydown="if(event.keyCode == 32) this.submit(); return false;">
Check here to see how to retrieve other browsers' key codes.
Again, this is how you would do it, but I think it's a bad idea.
The whole form to submit whenever a space is detected by may be a little messy, but what's interesting is to do it for a specific input. I used it in a field where user gives some tags. Each tag must de only one word,and so the space character can be used as an event to store the given tag and wait for the next.
<input type="text" id="tagtextbox" onKeyUp="if(event.keyCode == 32) myfunction();" />