I want to validate the dynamically added fields of the form(present in the templates/appname) in django. I am adding those fields with the help of the javascript (addInput.js - stored at a place mentioned as source in the script tag) which also has the logics for removing those fields as well as validating those fields values. But when I click send_invites button, it directs me again to app/register when I first want that it should go to the validateEmail() function if everything is fine then it should redirect to app/register.
var counter = 1;
var limit = 5;
function addInput(divName) {
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " Email Addresses");
} else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<p id = 'remove" + counter + "'>Email Address " + (counter + 1) + " : " + "<input type = 'text' name ='myInputs[]'></p>";
document.getElementById(divName).appendChild(newdiv);
counter++;
alert(counter + "add");
}
}
function removeInput(divName) {
if (counter == 1) {
alert("You have reached the limit of removing Email Addresses");
} else {
counter--;
var olddiv = document.getElementById("remove" + counter);
alert(counter + "remove");
olddiv.parentNode.removeChild(olddiv);
}
}
function validateEmail(divName) {
var emailFilter = /^([a-zA-Z0-9_.-])+#(([a-zA-Z0-9-]+.)+([a-zA-Z0-9]{2,4})+$/;
console.log("cmn");
alert("cmn");
for (i = 0; i < counter; i++) {
var email = $("#remove" + i).val();
alert(email);
// return true;
}
return true;
}
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<br>
<h1 class="page-header">
Send Invites
</h1>
<form method="POST" onsubmit="return validateEmail('dynamicInput')" action="/app/register/">
<div id="dynamicInput">
<p id='remove0'>Email Address 1 :
<input type="text" name="myInputs[]">
</p>
</div>
<br>
<br>
<input type="button" value="Add another Email Address" onClick="addInput('dynamicInput');">
<input type="button" value="Remove Email Address Field " onClick="removeInput('dynamicInput');">
<br>
<br>
<input type="submit" value="Send Invites">
<input type='hidden' name='csrfmiddlewaretoken' value='xyz' />
</form>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
</div>
<style>
a.active {
background-color: #eee;
}
</style>
But why is this not happening? other two javascript functions addInput and removeInput are working fine. Only validateEmail is not getting called, for which I am even calling alert and console.log but nothing is getting displayed. Please help. I am new to javascript.
Running the code, clicking the button, you get the following error in the console.
Uncaught SyntaxError: Invalid regular expression:
/^([a-zA-Z0-9_.-])+#(([a-zA-Z0-9-]+.)+([a-zA-Z0-9]{2,4})+$/:
Unterminated group
Looking at the code you have an extra (
/^([a-zA-Z0-9_.-])+#(([a-zA-Z0-9-]+.)+([a-zA-Z0-9]{2,4})+$/;
^
So you are either missing a closing ) or you have the extra (. My guess is you are missing a ) before the +. Look at wherever you found the reg exp and see what it should be.
Related
This is a problem for school. I need to make an array of records to store user input that loops the number of times the user specifies.
1 - The user will enter the number of volunteers (between 5-10). I have that part working.
2 - The input form is suppose to display the number of times as the number of volunteers. I'm not sure how to do that.
3 - The user's input is to be stored in an array of records.
4 - A message is to be displayed at the bottom with each volunteer's inputted information.
I'm stuck on number 2 and I'm positive I'll need help with 3 & 4 too.
Any assistance would be greatly appreciated.
You can see the code I've written below and I've included the JS code for both functions that I have working (validateForm() & getNumberOfVolunteers())
function getNumberOfVolunteers() {
var y = document.forms["numberOfVolunteersForm"]["numberOfVolunteers"].value;
if (y == "") {
alert("Number of volunteers must be filled out.");
return false;
}
document.getElementById("numberOfVolunteers1").innerHTML = y;
return false;
}
function validateForm() {
var a = document.forms["inviteForm"]["recipientName"].value;
if (a == "") {
alert("Name must be filled out.");
return false;
}
var b = document.forms["inviteForm"]["organizationName"].value;
if (b == "") {
alert("Organization name must be filled out.");
return false;
}
document.getElementById("recipientName1").textContent = a;
document.getElementById("organizationName1").textContent = b;
return false;
}
<!DOCTYPE html>
<html lang="en-US">
<!--
<head>
<script src="js/getNumberOfVolunteers.js"></script>
</head>
-->
<body>
<header>
</header>
<section id="numOfVolunteers">
<form name="numberOfVolunteersForm" onsubmit="return getNumberOfVolunteers()">
<label for="numberOfVolunteers">Number of volunteers:
</label>
<input type="number" min="5" max="10" value="5" name="numberOfVolunteers" id="numberOfVolunteers" placeholder="Enter the number of volunteers" />
<input type="submit" value="submit" id="submit1" />
</form>
</section>
<section id="pageForm">
<form action="#" name=inviteForm onsubmit="return getVolunteerInfoIntoArray()">
Number of Volunteers Entered: <strong><span id="numberOfVolunteers1"> </span></strong> <br/> <br/>
<label for="recipientName">Recipient name:
</label>
<input type="text" name="recipientName" id="recipientName" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization name:
</label>
<input type="text" name="organizationName" id="organizationName" placeholder="Enter your Organization Name" />
<input type="submit" value="submit" id="submit2" onclick="validateForm" />
</form>
</section>
<article id="placeholderContent">
Hello <span id="recipientName1"></span>!
<br/>
<br/> You have been invited to volunteer for an event held by <span id="organizationName1"></span>
</article>
<script>
var volunteerArray = [];
function getVolunteerInfoIntoArray() {
var volCount;
for (volCount = 5; volCount < getNumberOfVolunteers1.length; volCount++);
document.getElementById('recipientName');
document.getElementById('organizationName');
volunteerArray.push([recipientName.value, organizationName.value]);
}
</script>
</body>
</html>
I need to display the input form and the article multiple times. And store all the input in an array.
Is this what you're trying to do? Hope this helps even it's not exactly what you want hahahah
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.numberofvolunteers,
.all-volunteers{
padding:10px;
}
input,button{
margin:3px;
}
span{
font-size:12px;
padding:10px 10px;
}
</style>
</head>
<body>
<div class="numberofvolunteers">
<input type="number" id="volunteers" placeholder="Enter No. of volunteers"><button onclick="createVolunteerForm()">Submit</button>
</div>
<div id="all-volunteers">
</div>
<span id="array"></span>
<script>
var volunteerArray = [];
function createVolunteerForm(){
volunteerArray = [];
var numberofvolunteers = document.getElementById("volunteers").value;
var content = "";
if(parseInt(numberofvolunteers) < 5 || parseInt(numberofvolunteers) > 10){
alert("No. of volunteer should be 5 to 10");
}
else{
for(var i = 0; i < parseInt(numberofvolunteers); i++){
content += createForm(i);
}
}
document.getElementById("all-volunteers").innerHTML = content;
}
function createForm(index){
var content = ' <div id="volunteer-div-'+index+'">'+
'<div id="volunteer-form-'+index+'">'+
'<input type="text" id=recipient-'+index+' placeholder="Enter recipient name">'+
'<input type="text" id=organization-'+index+' placeholder="Enter organization name">'+
'<button id="submit-'+index+'" onclick="displayMessage('+index+');addToArray('+index+');">submit</button>'+
'</div>'+
'<span id="message-'+index+'"></span>'+
'</div>';
return content;
}
function displayMessage(index){
var message = "Hello " + document.getElementById("recipient-"+index).value + " your organization is " + document.getElementById("organization-"+index).value;
document.getElementById("message-" + index).innerHTML = message;
}
function addToArray(index){
volunteerArray.push({recipient : document.getElementById("recipient-"+index).value , organization : document.getElementById("organization-"+index).value});
document.getElementById("array").innerHTML = JSON.stringify(volunteerArray);
}
</script>
</body>
</html>
I'm trying to have it so when the user enters a number below 1 and higher than 20, they will get an error code and it will be highlighted yellow. When the user clicks the greet button, the text from before should disappear.
Right now with the highlight code I have it works but it messes up my disappearing of the text. For example, when I say 2, and then 22, the text from 2 doesn't disappear. When I do 22, then 2, the text disappears. I'm not sure if I have the layout wrong, or I need to use a different way. Lost on what is causing my issues.
function greetMe() {
$('#errors').css("background-color", "white");
var name = document.getElementById('txtName').value;
var nr = document.getElementById('txtNmr').value;
if (nr > 0 && nr < 21) {
$('#errors').text('');
$('#greetings').text('');
for (var counter = 0; counter < nr; counter = counter + 1) {
$('#greetings').append("Hello, " + name + "<br />");
}
} else {
$('#errors').append("Please Enter A Number Between 1 and 20");
$('#errors').css("background-color", "yellow");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<p>Type in your name</p>
<input type="text" id="txtName">
<p>Enter a number 1-20.</p>
<input type="text" id="txtNmr">
<input type="button" value="Greet Me!" onclick="greetMe()">
<hr>
<div id="greetings">
<!-- Section to output the greeting -->
</div>
<div id="errors">
<!-- Section to output the greeting -->
</div>
You need to set the text of #errors and #greetings to an empty string before the if/else statement. Otherwise, the text will only be removed if the input is valid and not otherwise since you are only setting the text of those elements inside the if statement and not the else part.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" ></script>
<body>
<p>Type in your name</p>
<input type="text" id="txtName">
<p>Enter a number 1-20.</p>
<input type="text" id="txtNmr">
<input type="button" value="Greet Me!" onclick="greetMe()">
<hr>
<div id="greetings">
<!-- Section to output the greeting -->
</div>
<div id="errors">
<!-- Section to output the greeting -->
</div>
<script type="text/javascript">
function greetMe(){
$('#errors').css("background-color", "white");
var name = document.getElementById('txtName').value;
var nr = document.getElementById('txtNmr').value;
$('#errors').text('');
$('#greetings').text('');
if (nr > 0 && nr < 21){
for (var counter = 0; counter < nr; counter = counter + 1) {
$('#greetings').append("Hello, " + name + "<br />");
}
}
else{
$('#errors').append("Please Enter A Number Between 1 and 20");
$('#errors').css("background-color", "yellow");
}
}
</script>
</body>
JSFiddle: http://jsfiddle.net/tsgh3o6u/
Just write the below piece of code:
$('#errors').text('');
$('#greetings').text('');
outside of the if/else statement, it solves your problem.
There is another way to empty a div element using the following piece of code:
$('#errors').html('');
$('#greetings').html('');
It also solves your problem, I have attached working example of it:
function greetMe(){
$('#errors').css("background-color", "white");
var name = document.getElementById('txtName').value;
var nr = document.getElementById('txtNmr').value;
$('#errors').html('');
$('#greetings').html('');
if (nr > 0 && nr < 21) {
for (var counter = 0; counter < nr; counter = counter + 1) { $('#greetings').append("Hello, " + name + "<br />");
}
}
else{
$('#errors').append("Please Enter A Number Between 1 and 20");
$('#errors').css("background-color", "yellow");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Type in your name</p>
<input type="text" id="txtName">
<p>Enter a number 1-20.</p>
<input type="text" id="txtNmr">
<input type="button" value="Greet Me!" onclick="greetMe()">
<hr>
<div id="greetings">
<!-- Section to output the greeting -->
</div>
<div id="errors">
<!-- Section to output the greeting -->
</div>
Hope, it solves your problem.
You can use .empty() function of jquery to clear the content of the div and you have to clear the div content before checking the conditions.
function greetMe() {
$("#errors").css("background-color", "white");
var name = document.getElementById("txtName").value;
var nr = document.getElementById("txtNmr").value;
$("#errors").empty();
$("#greetings").empty();
if (nr > 0 && nr < 21) {
for (var counter = 0; counter < nr; counter = counter + 1) {
$("#greetings").append("Hello, " + name + "<br />");
}
} else {
$("#errors").append("Please Enter A Number Between 1 and 20");
$("#errors").css("background-color", "yellow");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Type in your name</p>
<input type="text" id="txtName">
<p>Enter a number 1-20.</p>
<input type="text" id="txtNmr">
<input type="button" value="Greet Me!" onclick="greetMe()">
<hr>
<div id="greetings">
<!-- Section to output the greeting -->
</div>
<div id="errors">
<!-- Section to output the greeting -->
</div>
The Idea:
User selects “Email” from menu which opens the Google Sidebar.
It prompts the user to select their field office location with radio buttons and add their additional message for the email body with a text area
User clicks Submits and “FFO_Email” function runs
“FFO_Email” function will do the following
Determines the Field Office Location based on the radio selection
Determines the list of emails based on Field Office Location ('FFO-IS'!A3:A12) and emails to the right in “FFO-IS” sheet ('FFO-IS'!B3:H12)
Creates email subject
Creates email body (which will incorporate the additional message from text area in sidebar
Finally sending email to individuals and displaying the message the email has been sent successfully in the sidebar
The problems I’m having
The selected radio Field Office Location and Additional Message are not passing to the FFO_Email.gs function. Thus not sending the email to the individuals.
Sheet can be found here
https://docs.google.com/a/cougars.ccis.edu/spreadsheets/d/1PK18AXMlfC2reKRP7IJWHRT9TEnDzfWa3g-uavgsxUk/edit?usp=sharing
FFO_email.html
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function onSuccess(fieldOffice, AdditionalMessage) {
var div = document.getElementById('fieldOfficeFFO');
div.innerHTML = 'Email for ' + fieldOffice + ' has been sent successfully.';
}
google.script.run.withSuccessHandler(onSuccess)
.FFO_Email();
</script>
</head>
<body>
<form id=fieldOfficeFFO>
<fieldset style="background-color:LightGray;width:250px">
<div>
<label for="Field Office Select">Please select your field office below.</label>
</div>
<div>
<input type="radio" name="fieldOfficeFFO" id="fieldOfficeFFO" value="ARK_E_TEXAS">
<label for="ARK_E_TEXAS">ARK_E_TEXAS</label>
</div>
<div>
<input type="radio" name="fieldOfficeFFO" id="fieldOfficeFFO" value="BORDER_EAST">
<label for="BORDER_EAST">BORDER_EAST</label>
</div>
<div>
<input type="radio" name="fieldOfficeFFO" id="fieldOfficeFFO" value="BORDER_WEST">
<label for="BORDER_WEST">BORDER_WEST</label>
</div>
<div>
<input type="radio" name="fieldOfficeFFO" id="fieldOfficeFFO" value="CENTRAL_TEXAS">
<label for="CENTRAL_TEXAS">CENTRAL_TEXAS</label>
</div>
<div>
<input type="radio" name="fieldOfficeFFO" id="fieldOfficeFFO" value="DALLAS">
<label for="DALLAS">DALLAS</label>
</div>
<div>
<input type="radio" name="fieldOfficeFFO" id="fieldOfficeFFO" value="FORT_WORTH">
<label for="FORT_WORTH">FORT_WORTH</label>
</div>
<div>
<input type="radio" name="fieldOfficeFFO" id="fieldOfficeFFO" value="GULF_COAST">
<label for="GULF_COAST">GULF_COAST</label>
</div>
<div>
<input type="radio" name="fieldOfficeFFO" id="fieldOfficeFFO" value="LOUISIANA">
<label for="LOUISIANA">LOUISIANA</label>
</div>
<div>
<input type="radio" name="fieldOfficeFFO" id="fieldOfficeFFO" value="NEW_MEXICO">
<label for="NEW_MEXICO">NEW_MEXICO</label>
</div>
<div>
<input type="radio" name="fieldOfficeFFO" id="fieldOfficeFFO" value="OKLAHOMA">
<label for="OKLAHOMA">OKLAHOMA</label>
</div>
</fieldset>
<br>
<br>
<fieldset>
<div class="form-group">
<label for="AdditionalMessage">Additional Message</label>
<textarea id="AdditionalMessage" rows="3" style="width:250px"></textarea>
</div>
</fieldset>
</form>
<div class="block">
<button class="blue" onclick="onSuccess(fieldOfficeFFO,AdditionalMessage)">Submit</button>
<button onclick="google.script.host.close()">Close</button>
</div>
</body>
</html>
FFO_Email.gs
function FFO_Email(fieldOfficeFFO, AdditionalMessage) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('FFO-IS')
var firstRow = 3;
var lastRow = 10;
var dataRange = sheet.getRange(firstRow, 1, lastRow, 8);
var myDate = new Date();
var hrs = myDate.getHours();
//Determines the row the Field Office is in
for (var j = 0; j < dataRange.length; j++) {
if (dataRange[j][0] == fieldOfficeFFO) {
Logger.log((j + 1))
return j + 1;
}
}
//Create the greeting based on the time of day
var greeting;
if (hrs < 12)
greeting = 'Good Morning';
else if (hrs >= 12 && hrs <= 17)
greeting = 'Good Afternoon';
else if (hrs >= 17 && hrs <= 24)
greeting = 'Good Evening';
// Fetch values for each row in the Range.
var data = dataRange.getValues();
for (i in data) {
var row = data[i];
var field_Office = fieldOfficeFFO;
var PT_Director = dataRange.getValues(j, 2);
var PT_Manager = dataRange.getValues(j, 3);
var PT_Management_Specialist = dataRange.getValues(j, 4);
var Area_Supervisory_AM = dataRange.getValues(j, 5);
var Area_AM = dataRange.getValues(j, 6);
var SC_Senior_Property_Manager = dataRange.getValues(j, 7);
var AMS = dataRange.getValues(j, 8);
var email_Subject = field_Office + " FFO / Income Statement Report is ready for viewing";
var message_Body = greeting + "," +
"<br> <br>" +
"The " + field_Office + " <b>FFO / Income Statement Report is ready for viewing in</b> the <i>AMS Standard Reports - R07 Google Folder</i>" +
" located at https://drive.google.com/drive/u/0/folders/0Bx1aKS2V9K-kb0tNLXFfbGtmalE" +
"<br> <br>" +
"<br> <br>" +
//Additional Message from html side added here
AdditionalMessage +
"<br> <br>" +
"Thank you." +
"<br> <br>" +
AMS;
//Send email
MailApp.sendEmail({
to: SC_Senior_Property_Manager + "," + Area_AM + "," + AMS,
cc: PT_Director + "," + PT_Manager + "," + PT_Management_Specialist + "," + Area_Supervisory_AM,
replyTo: AMS,
subject: email_Subject,
htmlBody: message_Body
});
return fieldOfficeFFO
SpreadsheetApp.flush();
Utilities.sleep(1000);
}
}
Radio inputs in the same group can't have the same id=.
Giving them the same name attribute is ok if that's how you want to group them.
Textarea has no name= attribute at all.
There are quite a few changes that need to be made:
I'd create a new function for the submission, I'm calling it sendInputInfo():
Script Tag:
<script>
function sendInputInfo() {
console.log('sendInputInfo ran!');//Open browsers console to see print out
//Get the form information to be sent
var theFormElement = document.getElementById('fieldOfficeFFO');
google.script.run.withSuccessHandler(onSuccess)
.FFO_Email(theFormElement);
};
function onSuccess(fieldOffice, AdditionalMessage) {
div.innerHTML = 'Email for ' + fieldOffice + ' has been sent successfully.';
};
</script>
Change the onclick attribute:
<button class="blue" onclick="sendInputInfo()">Submit</button>
Note that there are no values in the parenthesis being sent to the function. That's not needed. The form is being retrieved in the sendInputInfo() function.
Currently, the code is not passing any information to the server. There is nothing in the parenthesis of the server function:
Currently:
.FFO_Email();
There needs to be something in the parenthesis:
.FFO_Email(theFormElement);
Your .gs code has two arguments in the parenthesis. Apps Script will only accept one input on the server side if it is a form object. So, you'll need to change the function to:
function FFO_Email(theFormObject) {
Logger.log('theFormObject: ' + theFormObject);//Should be an object
Logger.log('theFormObject.fieldOfficeFFO: ' + theFormObject.fieldOfficeFFO);
for (var key in theFormObject) {//Loop through all the data in the form
Logger.log('key: ' + key);
Logger.log('value: ' + theFormObject[key]);
};
I'm new to Stack and this is my first question, but I did search and wasn't able to find anything that was specifically what I am trying to accomplish. I'm all for learning, so any reference material that would help me better understand how to approach this would be appreciated, but if someone wants to provide some example code I wouldn't mind that either :p
OK, so the scenario is this. I am writing a "Note Creator" that will generate automatic client notes based on some fields I enter into a form. I've already scripting getting the values from text fields, but I have one field that I want to be a combination of a radio option OR text field, and the java needs to grab whichever one was used and the proper value. Any help is appreciated, below is my code:
<script type="text/javascript">
function getNotes() {
//Grab Variables
spokeTo = document.thisForm.spokeWith.value;
problemItem = document.thisForm.problemWith.value;
resolvedBy = document.thisForm.resolvedWith.value;
thisTech = document.thisForm.techName.value;
fSpace = "... "
//Read in the location information and prep the output container
outputValue = "";
{
//Test if things are blank
if (spokeTo == "") { alert('Please Enter the Name of the Person.'); }
else if (problemItem == "") { alert('Please Select the Problem.'); }
else if (resolvedBy == "") { alert('Please Type Your Resolution.'); }
else {
//The loop that puts the output together
outputValue += "Spoke With: " + spokeTo + "\n\n" + "Called About: " + problemItem + "\n\n" + "Resolution: " + resolvedBy +fSpace + thisTech;
}
//output to the user
document.thisForm.outputArea.value = outputValue;
}
}
</script>
<form name="thisForm">
<p>
1. Spoke With: <input type="text" id="spokeWith" class="input" name="spokeWith">
</p>
<p>
2. Called About:
Hardware <input type="radio" id="problemWith" class="input" name="problemWith" value="Hardware">
Software <input type="radio" id="problemWith" class="input" name="problemWith" value="Software">
<input type="text" id="problemWith" class="input" name="problemWith"><br>
</p>
<p>
3. Resolved By:<br /><br />
<textarea name="resolvedWith" id="resolvedWith"></textarea>
</p>
<p>
4. Your Name:<br>
<input type="text" id="techName" class="input" name="techName" /><br>
</p>
<p>
<input type="button" class="button" value="Make My Notes!" onClick="javascript:getNotes();" />
<input type="reset" class="button" value="Start Over" />
</p>
<br><br>
<textarea name="outputArea" id="outputArea"></textarea>
<p class="finishMessage" id="finishMessage" name="finishMessage"></p>
</form>
I am referring specifically to The Step 2 section of the form where it has radio options and a text field with the same IDs and names. I know IDs are only supposed to be used once per page so this would probably change but I'm open to any suggestion/assistance. I'm moderate with Javascript, still in the learning phases.
Thanks again!
---------------
ROUND 2
---------------
Here is my revised code after taking the suggestion of the provided answer. I added a bunch of alerts to kind of let me know along the way which parts of the script I'm managing to hit, and I can't get anything past the first alert to trigger, and can't get any output at all anymore. What am I missing?
<script type="text/javascript">
function getNotes() {
alert('You\'ve hit the function. Congratulations - you didn\'t break the whole damn thing.');
//Grab Variables
var spokeTo = document.thisForm.spokeWith.value;
var resolvedBy = document.thisForm.resolvedWith.value;
var thisTech = document.thisForm.techName.value;
var fSpace = "… ";
//Grab if radio else text
var inputVal1 = document.getElementByClass('problemRadio').value;
var inputVal2 = document.getElementByClass('problemWith').value;
alert('You made it! Almost there.');
// If Input Value 1 is not Null, Show Radio Value. Else, show Text Value
var problemOutput;
if (inputVal1.length > 0) {
problemOutput = inputVal1;
alert('I found value 1!');
}
else {
problemOutput = inputVal2;
alert('I found value 2!');
}
//Read in the location information and prep the output container
outputValue = "";
//Test if things are blank
if (spokeTo == "") { alert('Please Enter the Name of the Person.'); }
else {
alert('We Made it to Else to parse outputValue');
//The loop that puts the output together
outputValue += "Spoke With: " + spokeTo + "\n\n" + "Called About: " + problemOutput + "\n\n" + "Resolution: " + resolvedBy +fSpace + thisTech;
}
//output to the user
document.thisForm.outputArea.value = outputValue;
}
</script>
<form name="thisForm">
<p>1. Spoke With: <input type="text" id="spokeWith" class="input" name="spokeWith"></p>
<p>2. Called About:
Hardware <input type="radio" id="problemRadio" class="problemRadio" name="problemRadio" value="Hardware">
Software <input type="radio" id="problemRadio" class="problemRadio" name="problemRadio" value="Software">
<input type="text" id="problemWith" class="problemWith" name="problemWith"><br>
</p>
<p>3. Resolved By:<br /><br />
<textarea name="resolvedWith" id="resolvedWith"></textarea>
</p>
<p>4. Your Name:<br>
<input type="text" id="techName" class="input" name="techName" /><br>
</p>
<p>
<input type="button" class="button" value="Make My Notes!" onClick="javascript:getNotes();" />
<input type="reset" class="button" value="Start Over" />
</p>
<br><br>
<textarea name="outputArea" id="outputArea"></textarea>
<p class="finishMessage" id="finishMessage" name="finishMessage"></p>
</form>
sorry about that, I don't know the best way to get code in here yet. Always ends up messy looking ( till I figure it out )
Few things I spotted in your update;
1) getElementbyId is best ( it wasn't getting past your first lines)
2) duplicate IDs on the radio buttons
3) We Needed to 'check' which of the radio buttons was checked
4) always handy to alert the variables ( I've added some in to show )
I gave this code below a rough test and it looks to be along the lines ..
see comments added in your code below ..
<script type="text/javascript">
function getNotes() {
//Grab Variables
var spokeTo = document.getElementById('spokeWith').value;
var resolvedBy = document.getElementById('resolvedWith').value;
var thisTech = document.getElementById('techName').value;
var fSpace = "… ";
alert("spokeTo:" + spokeTo
+" , resolvedBy: " +resolvedBy+", thisTech: "+thisTech);
//Grab if radio else text
var problemWith = document.getElementById('problemWith').value;
alert("problemWith: "+problemWith);
/* set a default value */
var problemOutput="other";
/* if they added no notes */
if((problemWith=="") || ( problemWith==null)) {
/* check which radio is selected if any */
if(document.getElementById('problemHardware').checked) {
problemOutput = document.getElementById('problemHardware').value;
}
if(document.getElementById('problemSoftware').checked) {
problemOutput = document.getElementById('problemSoftware').value;
}
} else {
problemOutput=problemWith;
}
alert("problem output is: "+problemOutput);
alert('You made it! Almost there.');
//Read in the location information and prep the output container
outputValue = "";
//Test if things are blank
if (spokeTo == "") { alert('Please Enter the Name of the Person.'); }
else {
alert('We Made it to Else to parse outputValue');
/* The loop that puts the output together */
outputValue += "Spoke With: "
+ spokeTo + "\n\n"
+ "Called About: "
+ problemOutput + "\n\n"
+ "Resolution: " + resolvedBy +fSpace + thisTech;
}
//output to the user
document.thisForm.outputArea.value = outputValue;
}
</script>
<form name="thisForm">
<p>1. Spoke With: <input type="text" id="spokeWith" class="input" name="spokeWith"> </p>
<p>2. Called About:
Hardware <input type="radio" id="problemHardware" class="problemRadio" name="problemRadio" value="Hardware">
Software <input type="radio" id="problemSoftware" class="problemRadio" name="problemRadio" value="Software">
<input type="text" id="problemWith" class="problemWith" name="problemWith"><br>
</p>
<p>3. Resolved By:<br /><br />
<textarea name="resolvedWith" id="resolvedWith"></textarea>
</p>
<p>4. Your Name:<br>
<input type="text" id="techName" class="input" name="techName" /><br>
</p>
<p>
<input type="button" class="button" value="Make My Notes!" onClick="javascript:getNotes();" />
<input type="reset" class="button" value="Start Over" />
</p>
<br><br>
<textarea name="outputArea" id="outputArea"></textarea>
<p class="finishMessage" id="finishMessage" name="finishMessage"></p>
</form>
one approach would be to check on the value and if else
var input1val = document.getElementById('input1Id').value;
var input2val = document.getElementById('input2Id').value;
var valfromeitherbox = (input1val.length > 0) ? input1val : input2val;
/* UPDATE : ^ is the same as -
var valfromeitherbox;
if(input1val.length > 0) { valfromeitherbox=input1val;
} else { valfromeitherbox=input2val; }
*/
document.getElementById('input3Id').value = valfromeitherbox;
/* if val is empty in input1 use val from text box 2 */
Sorry if a little scrappy , but hope you get the gist and I haven't missed the point
i am working on a project in which i have to render rows dynamically . but user could also delete that row have a look at my current working
JQuery
var counter = 1;
function addrow() {
var textbox = "<div id='rows" + counter + "'> </br><label> Option : </label><input type='text' name='Answers[" + counter + "]' class='ahsan required' />Remove</div>";
var form = $("#form").valid();
if (form) {
$("#TextBoxesGroup").append(textbox);
counter++;
}
else {
return false;
}
}
html
<div id="TextBoxesGroup" style="margin-left: 100px;">
<div id="rows0">
</br><label>
Option :
</label>
<input type='text' name='Answers[0]' class='ahsan required' />Remove
</div>
</div>
<div>
<input type="button" value="Add another row" onclick="addrow();" class="qa-adbtn" id='addButton' /></div>
Now , if i have 10 rows there names will be Answers[0,1,2,3,4,5] . I want to remove input when i click on remove anchor and also reoder all textbox's name
For Example if i remove input at 4th index then all textbox automatically get re arranged . Can i Do it Please Help me and Thanks in Advance
You can make it without counter. This way your answers will be always ordered in the array starting by zero.
Here's a plausible solution:
$(function(){
$("#form").validate();
this.addrow = function() {
if ($("#form").valid()) {
var textbox = "<div> </br><label> Option : </label><input type='text' name='Answers["+$("#TextBoxesGroup div").length+"]' class='ahsan required' /><a class='remove-me' href='#'>Remove</a></div>";
$("#TextBoxesGroup").append(textbox);
$('.remove-me').click(function(){
$(this).parent().remove();
return false;
});
}
else {
return false;
}
}
this.addrow();
});
and the html is simple like this:
<form id="form">
<div id="TextBoxesGroup" style="margin-left: 100px;"></div>
<div>
<input type="button" value="Add another row" onclick="addrow();" class="qa-adbtn" id='addButton' />
</div>
</form>