I'm trying to change the input type in a form from 'hidden' to 'text' after a Javascript variable has a value. My current code is this:
var currentUser;
var getButton = document.getElementById("button");
getButton.addEventListener("click",getUser,false);
function getUser(event) {
var user = document.getElementById("username");{
if(user.value !=="") {
currentUser = user.value;
}
event.preventDefault();
}
if(currentUser.value!=="") {
document.getElementById("message").type="text";
}
}
My HTML is this:
<form method = "post">
{% if username %}
<label>{{ username }}</label>
<input id="message" type="text" size="70" name="message" />
<input type="hidden" name="username" value="{{ username }}" />
<input type="hidden" name="timestamp" value="{{ timestamp }}" />
{% else %}
<label>Pick a username: </label>
<input type="text" size="10" name="username" id="username" />
{% endif %}
<input type="submit" value="send" id="button" />
</form>
</div>
Can anyone tell me where I'm going wrong? At the moment, whenever I run the code, it gets stuck on 'username', and the 'message' box doesn't appear.
Related
I have a django template in which there is a form in which I am getting input from the user.
template.html
{% extends 'header.html' %}
{% load staticfiles %}
{% block content %}
<h3> Questtion</h3>
<img src="/media/{{ image }}" >
<br> <br>
<h3> Responses </h3>
<form method="post" action="/tools/submit">
{% csrf_token %}
<input type="text" name="first_response" placeholder="First Response" size="40" required>
<input type="text" name="second_response" placeholder="Second Response" size="40" required>
<input type="text" name="third_response" placeholder="Third Response" size="40" required>
<input type="text" name="fourth_response" placeholder="Fourth Response" size="40" required>
<input type="text" name="fifth_response" placeholder="Fifth Response" size="40" required>
<button type="submit" >Submit</button>
</form>
{% endblock %}
The text from input is easy to get with the following method in views.py
def post_form(request):
if request.method == 'POST':
first_response = request.POST.get('first_response')
second_response = request.POST.get('second_response')
third_response = request.POST.get('third_response')
fourth_response = request.POST.get('fourth_response')
fifth_response = request.POST.get('fifth_response')
image_name = # HOW TO GET {{ image }} name here ?
But I want to also post {{ image }} from <img src="/media/{{ image }}" > also when the submit button is clicked. How can I do that ?
in html
<form method="post" action="/tools/submit" enctype="multipart/form-data">
<input type="file" name="image" placeholder="Image Response" size="40" required>
in view
fifth_response = request.FILES.get('image')
Inside your html template form add this line
<input type="hidden" name="question" value="/media/{{ image }}">
in Django views simply get the image path
fifth_response = request.POST.get('question')
since the image is already on your server i don't think you would like to have it as file. so getting file path is enough.
I have checked recent blogs about onsubmit event not triggering the method. Those suggestions were not helpful for this problem.And i've tried this method and form in an another html page which didn't work either.So i am not able to find out where main problem is ?
My code :
<div id="_div2">
<center>
<div class="contianer">
<script type="text/javascript">
function formValidation ()
{
var fName =document.Log.firstName.value;
var lName =document.Log.lastName.value;
var pName =document.Log.penName.value;
var email =document.Log.email.value;
var password=document.Log.password.value;
var confirmPassword=document.Log.confirmPassword.value;
var status=false;
if(fName.length<1)
{
document.getElementById("firstNameLoc").innerHTML=
"<img src='Resource/unchecked.gif'/>Please Enter your First Name";
status=false;
}
else
{
document.getElementById("firstNameLoc").innerHTML=
"<img src="Resource/checked.png"/>Please Enter your First Name";
status=true;
}
return status;
}
</script>
<form name="Log" action="SignUpInsert.php" method="post" onsubmit="return formValidation();return false;">
<label><b>First Name</b></label><span id="firstNameLoc"></span><br>
<input type="text" placeholder="Enter your Last Name" name="firstName"><br>
<label><b>Last Name</b></label><span id="lastNameLoc"></span><br>
<input type="text" placeholder="Enter your Last Name" name="lastName"><br>
<label><b>Pen Name</b></label><span id="penNameLoc"></span><br>
<input type="text" placeholder="Enter your Unique Pen Name" name="penName"><br>
<label><b>Email</b></label><span id="emailLoc"></span><br>
<input type="text" placeholder="Enter your Email" name="email"><br>
<label><b>Password</b></label><span id="passwordLoc"></span><br>
<input type="password" placeholder="Enter your Password" name="password"><br>
<label><b>Confirm Password</b></label><span id="confirmPasswordLoc"></span><br>
<input type="password" placeholder="Enter your Password Again" name="confirmPassword"><br>
<input type="submit" title="Done?" value="Sign Up"><br>
<div class ="contianer">
<button type="button" class="cancelBtn" title="Go Back" onclick="location.href='Main.html'">Cancel</button>
</div>
</form>
</div>
</center>
you almost done. simple quotes problem.you could change like this in your dom else statement
document.getElementById("firstNameLoc").innerHTML = '<img src="Resource/checked.png"/>Please Enter your First Name';
function formValidation() {
var fName = document.Log.firstName.value;
var lName = document.Log.lastName.value;
var pName = document.Log.penName.value;
var email = document.Log.email.value;
var password = document.Log.password.value;
var confirmPassword = document.Log.confirmPassword.value;
var status = false;
if (fName.length < 1) {
document.getElementById("firstNameLoc").innerHTML =
"<img src='Resource/unchecked.gif'/>Please Enter your First Name";
status = false;
} else {
document.getElementById("firstNameLoc").innerHTML = '<img src="Resource/checked.png"/>Done..!';
status = true;
}
return status;
}
<div id="_div2">
<center>
<div class="contianer">
<form name="Log" action="SignUpInsert.php" method="post" onsubmit="return formValidation();return false;">
<label><b>First Name</b></label><span id="firstNameLoc"></span><br>
<input type="text" placeholder="Enter your Last Name" name="firstName"><br>
<label><b>Last Name</b></label><span id="lastNameLoc"></span><br>
<input type="text" placeholder="Enter your Last Name" name="lastName"><br>
<label><b>Pen Name</b></label><span id="penNameLoc"></span><br>
<input type="text" placeholder="Enter your Unique Pen Name" name="penName"><br>
<label><b>Email</b></label><span id="emailLoc"></span><br>
<input type="text" placeholder="Enter your Email" name="email"><br>
<label><b>Password</b></label><span id="passwordLoc"></span><br>
<input type="password" placeholder="Enter your Password" name="password"><br>
<label><b>Confirm Password</b></label><span id="confirmPasswordLoc"></span><br>
<input type="password" placeholder="Enter your Password Again" name="confirmPassword"><br>
<input type="submit" title="Done?" value="Sign Up"><br>
<div class="contianer">
<button type="button" class="cancelBtn" title="Go Back" onclick="location.href='Main.html'">Cancel</button>
</div>
</form>
</div>
</center>
I have project here were in I need to change the default name attribute value when a link is clicked. Here's my form at the moment:
<form id="searchform" action="" method="GET">
<input id="intextbox" maxlength="150" size="20" value="" name="q" type="text" placeholder="Insert your keyword here..">
<input id="wpbdmsearchsubmit" class="submit wpbdp-button wpbdp-submit" value="Search" type="submit">
<div class="search-filter">
Search By: <a id="FilterByContinent">Continent</a> | <a id="FilterByCountry">Country</a> | <a id="FilterByFlag">Flag</a>
</div>
</form>
======================
As you can see, the default name value of my input #intextbox is q and I want to change it to listingfields[1] when the Continent link is clicked.
so from:
<input id="intextbox" maxlength="150" size="20" value="" name="q" type="text" placeholder="Insert your keyword here..">
to:
<input id="intextbox" maxlength="150" size="20" value="" name="listingfields[1]" type="text" placeholder="Insert your keyword here..">
How can I do this with JavaScript?
Your solution is here :
<form id="searchform" action="" method="GET">
<input id="intextbox" maxlength="150" size="20" value="" name="q" type="text" placeholder="Insert your keyword here..">
<input id="wpbdmsearchsubmit" class="submit wpbdp-button wpbdp-submit" value="Search" type="submit">
<div class="search-filter">
Search By: <a id="FilterByContinent" onclick="changename();" >Continent</a> | <a id="FilterByCountry">Country</a> | <a id="FilterByFlag">Flag</a>
</div>
</form>
<script>
function changename(){
document.getElementById('intextbox').name = "listingfields[1]";
}
</script>
Check this out:
//getting the name attribute before:
var currentName = document.getElementById("intextbox").name;
document.getElementById("intentBoxName").innerHTML = currentName;
//Now for changing the name attribute of input,
//first add an Event Listener to the continent link:
var continentLink = document.getElementById("FilterByContinent");
continentLink.addEventListener("click", function() {
document.getElementById("intextbox").name = "listingfields[1]";
//Just for showing the change in the name attribute:
var newName = document.getElementById("intextbox").name
document.getElementById("intentBoxName").innerHTML = newName;
});
<form id="searchform" action="" method="GET">
<input id="intextbox" maxlength="150" size="20" value="" name="q" type="text" placeholder="Insert your keyword here..">
<input id="wpbdmsearchsubmit" class="submit wpbdp-button wpbdp-submit" value="Search" type="submit">
<div class="search-filter">
Search By: <a id="FilterByContinent">Continent</a> | <a id="FilterByCountry">Country</a> | <a id="FilterByFlag">Flag</a>
</div>
</form>
<br/>
<br/>
<h5> Name Attribute: </h5>
<div id="intentBoxName"></div>
If you had just googled "change name attribute using javascript" you'd have found the answer easily. You should spend some time looking up on google before posting it as a question. I hope my snippet above does what you were expecting.
I am trying to pass variables in the URL like this to fill a HTML and Liquid form and submit it once it's populated:
http://www.example.com/login?customer_email=admin#website.com&customer_password=123456
The closest thing I've found to what I'm trying to achieve is this question. I'm losing my marbles because I don't understand how the variables are put into the form.
Can someone please break it down / explain?
Here is the form code:
{% form 'customer_login' %}
<h1>Login</h1>
{% include 'form-errors-custom' %}
<label for="customer_email" class="hidden-label">Email Address</label>
<input type="email" value="" name="customer[email]" id="customer_email" placeholder="Email" {% if form.errors contains "email" %} class="error"{% endif %} autocorrect="off" autocapitalize="off" autofocus>
{% if form.password_needed %}
<label for="customer_password" class="hidden-label">Password</label>
<input type="password" value="" name="customer[password]" id="customer_password" placeholder="Password" {% if form.errors contains "password" %} class="error"{% endif %}>
<p>
Forgot your password?
</p>
{% endif %}
<div class="text-center">
<p>
<input type="submit" class="btn" value="Sign In">
</p>
or Return to Store
</div>
{% endform %}
If you are looking to get the parameters from the URL client side (using JS/Jquery, as per your tags), you can get the query string (using location.search) and extract the key/value pairs, then allocate them however you wish.
//var str = location.search
var str = 'customer_email=admin#website.com&customer_password=123456';
var pairs = str.split('&');
var email = pairs[0].split('=')[1];
var password = pairs[1].split('=')[1];
$('#customer_email').val(email);
$('#customer_password').val(password);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="email" value="" name="customer[email]" id="customer_email" placeholder="Email" autocorrect="off" autocapitalize="off" autofocus>
<input type="password" value="" name="customer[password]" id="customer_password" placeholder="Password" class="error"{% endif %}>
The parameters that are passed in the url like in your case are like the get request and can be received in the same way as you would receive the parameters submitted by the form with method="get". And then you put the variable in the value attribute of the form fields in current page.
I am trying to validate code in javascript. Here is my code:
if(document.getElementById("name").value == ""){
alert("Name is a required field");
document.getElementById("name").focus();
return false;
}
name is id in my html page:
<div class="app-form-box">
{% if review %}
{% if not review.name %}
<input type="text" alt="" onkeyup="return validateField(name)" tabindex="2" name="name" id="name" class="disabled inputtxtlarge" onfocus="highlightInput(this.id)" onblur="return (!validateField(name) || unhighlightInput(this.id))" maxlength="50" value="{{name|moonescape}}" disabled="disabled"/><span> </span>
{% else %}
<input type="text" alt="" onkeyup="return validateField(name)" tabindex="2" name="name" id="name" class="inputtxtlarge" onfocus="highlightInput(this.id)" onblur="return (!validateField(name) || unhighlightInput(this.id))" maxlength="50" value="{{name|moonescape}}"/><span> </span>
{% endif %}
{% else %}
<input type="text" alt="" onkeyup="return validateField(name)" tabindex="2" name="name" id="faname" class="inputtxtlarge" onfocus="highlightInput(this.id)" onblur="return (!validateField(name) || unhighlightInput(this.id))" maxlength="50" value="{{name|moonescape}}"/><span> </span>
{% endif %}
<div class="servererror">
{% if form_errors.name %}
* {{ form_errors.name|join:"| " }}<br/>
{% endif %}
</div>
</div>
But I am getting OBJECT REQUIRED. Please suggest how to put check in js file for this. Thanks