Here's the function that checks if the form is complete.
So, what I'm trying to do:
If radio is not selected, throw a message.
If radio is "yes", but text is not entered, throw error.
If radio is "no" but text is entered, make the text empty.
If all is good, add stuff into `allResponses
The form was displayed 5 times, and input was as follows:
Yes a1
No
Yes a3
No
Yes
Now, this input should display an error since in 5th case, "yes" is selected but nothing is entered in the textbox.
However, I get this:
http://i.imgur.com/ya2CUp0.png
Also, the text is not being updated as in 1st and 3rd cases.
I don't know a lot about JS, so please provide me with as explained responses as you can.
EDIT: Complete code: http://pastebin.com/scNSNM2H
Thanks
You have this in a loop:
var exaggerationPart = document.getElementById('exaggeration').value
And then you check to make sure it has a value for each item. But you will get the same value each time.
You are creating multiple inputs with the same id, "exaggeration". This is invalid HTML. Id's must be unique. To correct this, you can increment the id the same as you are doing with other elements (such as, input[name='response"+thisJokeIndex+"']).
var exaggerationPart = document.getElementById('exaggeration' + thisJokeIndex).value
tipTD2.append("<input type='text' name='exaggeration' id='exaggeration" + tipIndex + "' size='70'>")
Working demo: jsfiddle.net/svvge/2
Edit: To clear the value of the text box, you must change the value property of the text box element. Right now you are just changing the value of a variable.
var exaggerationInput = document.getElementById('exaggeration' + thisJokeIndex).value;
var exaggerationPart = exaggerationInput.value;
exaggerationInput.value = '';
Related
I have an issue with my code which might be quite obvious but I can't seem to find out the answer.
I have a drop down menu with pre-filled option values in it. Whenever a user clicks on any of the values, they get displayed on a text area using JavaScript. Here's my problem:-
If the user selects 'Hello World' from the drop down, it gets displayed in the text area. if the user types a string or number or anything after that in the text area, then selects the option 'How's your day going', it doesn't get concatenated to the text area, since the user made a change to the text area. How can I get it to concatenate the option values every time a different option is selected. Here's my code:-
HTML
<select name = 'type_of_call' id = 'type_of_call' onchange = 'run()'>
<textarea name = "comments" value = "comments" id = "comments" Required /></textarea>
JavaScript
function run(){
document.getElementById("comments").innerHTML += document.getElementById("type_of_call").value + ', ';
}
You want to set the textarea's value property, not the innerHTML property:
function run(){
document.getElementById("comments").value += ...;
}
Working on a small personal project with jQuery and JavaScript. This is a one page app on a static website.
The game (if you can call it that) asks the user to select 2 characters from the selection area and pressing enter transfers the input to the "battle-area" where when you hit the "fight" button random numbers are subtracted form the characters hitpoints as attack dmg.
I am stuck on the selection part. I need two separate input fields populated with unique names. I am able to write text into the field and transfer it but I want the input fields to be populated by clicking on the individual pictures on the screen. My code seems to populate both fields at once. I can hardcode two buttons to each populate one input field, the problem is that I have about 15 image buttons and I need to be able to click either of those to populate the fields.
function selectFighter(name) {
var x = name;
var input = $('#fighter1_name').val();
$('#fighter1_name').val(x);
if ($('#fighter1_name').val() != "") {
$('#fighter2_name').val(x);
}
}
I have tried to add a condition that checks the first input field for a value and if it is NOT empty, to instead write the input into the second field. But that is causing one button click to populate both fields. I need one button click to populate one field, and then when I click another button to populate the other, empty field.
I am passing in a name with an onclick event: onclick="selectFighter('bob');"
Problem is when I click the image, both fields are populated with the same name. I want to be able to click an image to populate one input field, and then click a different image and put that name in the input field.
This should do the trick. We're checking if the first field has a value - if so, we populate the second one - otherwise the first one.
function selectFighter(name) {
if ($('#fighter1_name').val()) {
$('#fighter2_name').val(name);
} else {
$('#fighter1_name').val(name);
}
}
Add a class to the elements you click, and an ID, and remove all inline javascript.
Then add a script tag with the event handler targeting the elements
$('.toBeClicked').on('click', function() {
var x = $(this).data('name'); // note that "name" is not a good name for a variable
var f1 = $('#fighter1_name');
var f2 = $('#fighter2_name');
f1.val() === "" ? f1.val(x) : f2.val(x);
});
$('#clear').on('click', function() { $('input[id^=fighter]').val("") })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toBeClicked" data-name="bob">Bob</button>
<button class="toBeClicked" data-name="jon">Jon</button>
<button class="toBeClicked" data-name="ann">Ann</button>
<br><br>
Fighter 1 <input id="fighter1_name"><br>
Fighter 2 <input id="fighter2_name">
<br><br>
<button id="clear">Clear</button>
I have a function where if the user changes an IP to be unallocated in the select box, an alert will pop-up that asks if they are sure, on cancelling this alert I want the select2 box to change back to the original status (i.e allocated etc.).
I have been able to change the value of the select2 box by storing the original value in a variable and then assigning it to the value of the select on cancelling the alert
else
$('#ip_status').val(original_status)
However although this DOES change the value of the select2 box meaning the functionality is working, the text in the select2 box stays 'unallocated' giving the end user a misleading value. Keep in mind that .text(" example ") does not work.
Thank you.
Full Code -
original_status = document.getElementById('ip_status').value
$('#ip_status').change ->
# If the user changes ip status to unallocated, clear and hide system name and description fields.
if parseInt($('#ip_status').val()) == 0
r = confirm("You are about to unallocate this IP! Are you sure you want to do this?")
if r == true
$('#ip_description').val("").parent().hide()
$('#ip_system_name').val("").parent().hide()
else
$('#ip_status').val(original_status)
else
# if the select changes to allocated or reserved, re-show the fields that were hidden
$('#ip_description').parent().show()
$('#ip_system_name').parent().show()
You have to use something like:
$( function() {
$("#your_option").attr("selected", "selected");
});
I was able to fix this by changing
$('#ip_status').val(original_status)
to
$("#ip_status").select2("val", original_status)
I have a form in which a user can click a button and add additional fields as needed. Later on, user clicks submit, i do some error checking via ajax. if the additional fields are blank, i want to highlight them in red to let user know its required data.
jquery to add row:
$('#addPerson').click(function(){
var row = "<div id='row_"+rowNum+"'><div class='leftBigRow'><input type='text' class='field' id='addPerson[name][]' name='addPerson[name][]' placeholder='persons name'></div>";
$('.additionalPeople').append(row);
rowNum++;
my ajax call returns a string of field ids that have errors. for example result could be:
//firstname,lastName,zipCode,...etc
so my errorcheck is:
if(result.length > 0)
{
var errors = result.split(",");
for (i=1;i<errors.length;i++)
{
alert(errors[i]);
$('#'+errors[i]).addClass('error');
alert($('#'+errors[i]).val());
}
$("#subForm").attr("disabled", "disabled");
}
the first alert returns what i would expect "addPerson[name][0]";
the second alert returns undefined. telling me it cant find that field....
i have added a fiddle:fiddle
in my fiddle var result is a representation of what i get back from the ajax call. my ultimate goal is to get each field added by pressing yes to turn red if blank....
You don't have an element with id equal to "addPerson[name][0]". When adding new input elements to DOM, you have to include rowNum in their id and name attributes.
Do not include "[" and "]" in name/id attributes. Use:
var row = "<div id='row_"+rowNum+"'><div class='leftBigRow'><input type='text' class='field' id='addPerson_name_"+rowNum+"' name='addPerson_name_"+rowNum+"' placeholder='persons name'></div>";
When you declare your dynamic element's id, you cannot use an array there. You can concatenate it with the rowNum count that you already have.
I have updated your JSFiddle here: http://jsfiddle.net/Myra4/3/
(Observe how I changed the dynamic element's id and your simulated 'result' variable)
I did it in JSFiddle for you so you can immediately verify that it works.
Use .on to bind later created DOM elements.
http://api.jquery.com/on/
I am working to parse a form and obtain the values of all elements, including the text boxes, radio buttons, check boxes, list boxes and drop down boxes.
I am currently able to obtain the values for all of the above... By values I mean the value as assigned to that element (eg radio button)... However in some cases the text shown on screen for a value (in a radio/check box/drop down/list) is different from the text actually assigned to that value (when the form is submitted).
For your reference, I am using code similar to the following for obtaining all the 'options' of a list/drop down text box-
if($(this).is('select'))
{
$(this).find('option').each(function(){
alert( " Option value=" + $(this).val() );
});
}
For check box/radio button I am using val() which obtains all the assigned values.
Code that does this is given below--
textmsg= textmsg + "...Also, for this element, the value is " + $(this).val() + " and type =" + $(this).attr('type');
alert (textmsg);
How do I obtain the text value shown on screen (for radio buttons/check boxes/lists /drop down boxes)??
You can do that with jQuery.fn.text().
$(this).text();
For:
Radiobuttons: Check what is in the label, belonging to the button like $('#radioid label').html();
Checkboxes: see #1 -> html()
List item: $('ul#mylist li').html();
dropdownbox: like your example, but use our friend html() again :D
Good luck
PS: html() is your friend, but text() as indicated by your commenters will do fine too!