I have this form:
<form name="form" method="post">
<div>
<p>
Problem Name: <input type="text" size="20" name="problem_name"></input>
</p>
<p>
Explain the problem
</p>
<p>
<textarea name="problem_blurb" cols=60 rows=6 ></textarea>
</p>
</div>
<div>
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Registration Successfully</span>
<input type="submit" class="button" value="Add Problem"></input>
</div>
<form>
and here is my JS:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" >
$(function()
{
$("input[type=submit]").click(function()
{
var name = $("#problem_name").val();
var problem_blurb = $("#problem_blurb").val();
alert ("name: " + name);
alert ("problem_blurb: " + problem_blurb);
var dataString = 'name='+ name + '&username=' + username + '&password=' + password + '&gender=' + gender;
if(name=='' || username=='' || password=='' || gender=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "join.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
</script>
I went through the basic jQuery tutorials, but still confused with their syntax. For some reason, these variables show up as undefined:
var name = $("#problem_name").val();
var problem_blurb = $("#problem_blurb").val();
alert ("name: " + name);
alert ("problem_blurb: " + problem_blurb);
Any idea what I am doing wrong?
# refers to id attributes, rather than names.
Use $('input[name="problem_name"]') to refer to the elements.
Add id="problem_name" and id="problem_blurb" respectively. The jQuery '#' selector looks for id attributes.
You can have both id and name attributes. id is the DOM identifier while name is the form input identifier.
The hash-tag selector tells it to look for that ID. In your HTML you only have those tags with a name attribute. Put the same value in the id attribute and you will be all set.
<input id="problem_name" type="text" size="20" name="problem_name"></input>
<textarea id="problem_blurb" name="problem_blurb" cols=60 rows=6 ></textarea>
You would also try ID in your elements, which is the identifier for # in jQuery.
<input type="text" size="20" id="problem_name">
Which also go for your Button.
If you have <input type="button" ... id="bn"> you can replace "input[type=submit]" (which in your case will activate ALL submit buttons on the page) with $("#bn").click(function() { .. });.
Related
I am trying to create form where I can submit two answers.
Alongside the form I would like to create an alert where the alert takes the input from the form when one of the buttons are clicked. That works fine.
Alongside the form I would like to create another button that displays the text from the form in html.
function htmlText(argument) {
document.getElementById("fname").innerHTML = alertText();
document.getElementById("lname").innerHTML = alertText();
}
function alertText(argument) {
return "Your name is: " +
document.getElementById("fname").value + " " +
document.getElementById("lname").value + ".";
}
<form>
<label>Name :</label><input type="text" id="fname"> <br>
<label>Name2 :</label><input type="text" id="lname"> <br>
</form>
<button onclick="htmlText()">html</button>
<button onclick="window.alert(alertText())">alert</button>
You likely meant to do this
Note the user of recommended eventListeners instead of inline event handlers
window.addEventListener("load", function() { // on page load
function getText() {
return "Your name is: " +
document.getElementById("fname").value + " " +
document.getElementById("lname").value + ".";
}
document.getElementById("htmlButton").addEventListener("click", function() {
document.getElementById("fullName").innerHTML = getText();
});
document.getElementById("alertButton").addEventListener("click", function() {
alert(getText());
});
});
<form>
<label>Name :</label><input type="text" id="fname"> <br>
<label>Name2 :</label><input type="text" id="lname"> <br>
</form>
<button type="button" id="htmlButton">html</button>
<button type="button" id="alertButton">alert</button>
<sid id="fullName">
</div>
Please help to fix an algorithm and prevent reloading after clicking submit:
my website has to check, does user ever entered a nickname. If he did, then website have to show his name, if did not, then ask to type it. If the user decided to change it, he will click "reset username".
After clicking "reset" user has to submit twice his name (after first click on "Set" total page is reloading, and after second click it is reloading only one element). Please help to fix it - user has to submit it only once.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var formNewName = '<form id="new-task"> <input id="nickN" autocomplete="off" autofocus placeholder="Write your nick" type="text"> <input id="submitname" type="submit" value="Set new name1"> </form>';
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#setnewname').onsubmit = () => {
var newname;
localStorage.setItem('localN', newname);
document.querySelector('#nickName').innerHTML = formNewName;
// Stop form from submitting
return false;
};
});
// Checking does user entered his name
if ( !localStorage.getItem('localN') || localStorage.getItem('localN')=="undefined" )
{ var nick;
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#nickName').innerHTML = formNewName;
document.querySelector('#new-task').onsubmit = () => {
nick = document.querySelector('#nickN').value;
localStorage.setItem('localN', nick);
document.querySelector('#nickName').innerHTML = "Your nick is: <b>" + localStorage.getItem('localN') + '</b>';
// Stop form from submitting
return false;
};
});
}
else
{
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#nickName').innerHTML = "Your nick is: <b>" + localStorage.getItem('localN') + '</b>';
});
}
</script>
</head>
<body>
<div id = "nickName"></div>
<div id = "newname">
<br>
<form id="setnewname">
<input id="submitreset" type="submit" value="Reset nick name">
</form>
</div>
</body>
Update: event.preventDefault(); and event.stopPropagation(); does not helps to solve the problem.
Sorry for late reply if you are still having it, i couldn't see where you are taking the value from user in your code there's no input field where user can type so i'll add that and then on id submitreset you'll do this:
i work with jquery most so the syntax for that will be
// HTML CODE TO ADD
<input type="text" name="entername" id="entername">
// than in jquery for the submit button you already have
$(document).on("click","#submitreset",function(e){
e.preventDefaults();
var name = $(this).val();
// you can print the value in the div with this id
$("#nickName").html(name);
});
In a Russian language branch of StackOverflow I had received an answer (https://ru.stackoverflow.com/a/901260/291735):
HTML
<div id = "nickName">
<form id="new-task">
<input id="nickN" autocomplete="off" autofocus placeholder="Write your nick" type="text">
<input id="submitname" type="submit" value="Set new name1"> </form>
</div>
<div id = "newname">
<br>
<form id="setnewname">
<input id="submitreset" type="submit" value="Reset nick name">
</form>
</div>
JavaScript
var setName = document.getElementById('submitname');
var reset = document.getElementById('submitreset');
var nickN = document.getElementById('nickN');
document.addEventListener('DOMContentLoaded', () => {
if (localStorage.getItem('localN')!== null){
document.querySelector('#nickName').innerHTML = "Your nick is: <b>" + localStorage.getItem('localN') + '</b>'
}
})
setName.addEventListener('click', function(){
var newName = document.getElementById('nickN').value;
localStorage.setItem('localN', newName);
document.querySelector('#nickName').innerHTML = "Your nick is: <b>" + localStorage.getItem('localN') + '</b>'
})
reset.addEventListener('click', function(){
delete localStorage['localN'];
document.querySelector('#nickName').innerHTML = '<input id="nickN" autocomplete="off" autofocus placeholder="Write your nick" type="text"> <input id="submitname" type="submit" value="Set new name1">'
});
I can't seem to get the cookie output right. I want to type in a player name as a cookie, and get it printed out inside <p id="playerName"></p>. I know this isn't the best option, but its what I am going for atm.
HTML
<form name="myform" action="">
Enter name: <input type="text" name="customer" />
<input type="button" value="Set Cookie" onclick="WriteCookie();" />
<p id="playerName"></p>
</form>
JavaScript
function WriteCookie() {
if (document.myform.customer.value == "") {
alert("Du må taste inn et navn!");
return;
}
cookievalue = escape(document.myform.customer.value) + ";";
document.cookie = "name=" + cookievalue;
document.getElementById("playerName").innerHTML = cookievalue("playerName");
}
Thanks in advance :)
document.getElementById("playerName").innerHTML = cookievalue("playerName");
Use innerHTML to set the stuff in the tag.
want to create an output of gathered variables from a script. but can't seem to input the variables in HTML markup in the script.
$(".regclick3").click(function(){
$('.regtarget4').trigger('click');
var data1 = $("[name='f_k_page_title']").val();
var data2 = $("[name='f_extended_user_email']").val();
$(".divoutput").html(data1+ " " + data2);
});
html
<form>
<input type="text" name="f_extended_user_email" />
<input type="text" name="f_k_page_title" />
</form>
<div class="capture_data">Capture</div>
<div class="divoutput"></div>
Is it possible to add class and variables to the script? Can there be if statements, so if var data1 exists then display "X"
Thank you
According to your comment yes you can show HTML only if it exists otherwise something default like so:
function showMe()
{
var theVal = $('#name').val();
if(!theVal)
{
theVal = "Oop's No value entered";
}
$('#theValue').html(theVal);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" />
<br/>
The value is :: <span id="theValue"></span>
<br/>
<button onClick="showMe();">Show Me</button>
$(".divoutput").html(data1+ " " data2+);
// Yah! its possible what your missed + symbol in your code use like below https://codepen.io/kalaiselvan/pen/xdoWYy
$(".divoutput").html(data1+ " " + data2);
I have the following dynamically created HTML block:
<form class="standard settingsPage" method="post" enctype="multipart/form-data" name="account" style="background-color: rgb(61, 80, 133);">
<h2>Add New Account</h2>
<p>
<label class="" disabled="true">E-mail address:</label>
<input id="accountEmailAddress" class="" type="text" value="" name="accountEmailAddress"/>
</p>
<p>
<label class="" for="accountEmailPassword">Password:</label>
<input id="accountEmailPassword" type="password" name="accountEmailPassword"/>
</p>
<p class="submit">
<input type="button" onclick="checkEmailSettings();" value="Send" name="submit"/>
</p>
<p>
<label>Mail Server:</label>
<input id="mail2server" type="text" name="mail2server"/>
</p>
<p>
<label>Mail Type:</label>
<select id="mail2type" name="mail2type">
</select>
</p>
<p>
<label>Mail Security:</label>
<select id="mail2security" name="mail2security">
</select>
</p>
<p>
<label>Mail Server Port:</label>
<input id="mail2port" type="text" name="mail2port"/>
</p>
<p>
<label>Mail Username:</label>
<input id="mail2username" type="text" name="mail2username"/>
</p>
<p class="submit">
<input id="mailsend" type="button" name="mailsend" onclick="checkEmailSettings();" value="Send"/>
</p>
</form>
Which is appended to an existing form.
However when I do $('#mail2server').val() it returns blank, even if there is something in the box. If I do $('#mail2server').attr('name') it returns the name, so it definitely recognizes that the element exists. Any ideas why this would be failing?
Cheers,
Gazler.
EDIT
function checkEmailSettings()
{
var emailAddress=$("#accountEmailAddress").val();
var emailPassword=$("#accountEmailPassword").val();
var datastring = "emailaddress="+emailAddress+"&emailpassword="+emailPassword;
if (additionalInfo == 1)
{
var mailserver = $("#mail2server").val();
var mailtype = $("#mail2type").val();
var mailsecurity = $("#mail2security").val();
var mailport = $("#mail2port").val();
var mailusername = $("#mail2username").val();
alert($("#mail2server").val());
datastring += "&mailserver="+mailserver+"&mailtype="+mailtype+"&mailsecurity="+mailsecurity+"&mailport="&mailport+"&mailusername="+mailusername;
}
$('input[type=text]').attr('disabled', 'disabled');
$('input[type=password]').attr('disabled', 'disabled');
$('input[type=button]').attr('disabled', 'disabled');
$.ajax({
type: "GET",
url: "checkemailsettings.php",
data: datastring,
async: true,
cache: false,
timeout:50000,
success: function(data){
switch(parseInt(data))
{
//SNIPPED
case 4:
alert("More information needed.");
if (additionalInfo == 0)
{
var string = addTextToForm("Mail Server","mail2server");
string += addOptionsToForm("Mail Type","mail2type", new Array("IMAP", "POP3"));
string += addOptionsToForm("Mail Security","mail2security", new Array("NOTLS", "TLS", "SSL"));
string += addTextToForm("Mail Server Port","mail2port");
string += addTextToForm("Mail Username","mail2username");
string += addButtonToForm("Send","mailsend", "checkEmailSettings();");
alert(string);
$('form[name=account]').append(string);
additionalInfo = 1;
}
break;
}
},
});
}
function addTextToForm(strLabel, strID, strVal)
{
if (!strVal) {return "<p><label>"+strLabel+":</label><input id=\""+strID+"\" type=\"text\" name=\""+strID+"\" /></p>";}
return "<p><label>"+strLabel+":</label><input id=\""+strID+"\" type=\"text\" name=\""+strID+"\" value=\""+strVal+"\"/></p>";
}
function addButtonToForm(strLabel, strID, functionName)
{
return "<p class=\"submit\"><input id=\""+strID+"\" value=\""+strLabel+"\" onclick=\""+functionName+"\" type=\"button\" name=\""+strID+"\"/></p>";
}
function addOptionsToForm(strLabel, strID, optionsArr)
{
var returnstring="<p><label>"+strLabel+":</label><select id=\""+strID+"\" name=\""+strID+"\">";
for (i=0; i<optionsArr.length; i++)
{
returnstring += "<option>"+optionsArr[i]+"</option>";
}
returnstring += "</select></p>";
return returnstring;
}
The "alert" call says $('#mailserver'), not $('#mail2server')
I created a sample page that dynamically added the code you had above and everything worked just fine. There must be something else going on, perhaps in the function that your submit button is calling?
I think it's good to add "return false;" at the end of the onclick attribute in the input buttons.