NewLine does not appear in the browser validation message - javascript

I have a input as below with a pattern
$('#charEntry').append("<input type='text' class='form-control' id='chars"+i+"' pattern='(?=.*\\\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[-+*/%])(?=.*[.?,:;-~]).*' " +
"title='Your String Must Contain:
" +
"One Upper Case Value
" +
" One Lower-Case Value
" +
" One Arithmetic Value
" +
" One Punctuation Character
" +
" One Numeric Value'" +
" maxlength='" +charLength + "'" +
" minlength='" +charLength + "' required>");
However in the actual message the new lines would not get printed as below.
I have tried , \n and &#010 but nothing works.
is there a fix for this?

Related

how to pass a string in an Onclick event

I'm trying to add an anchor automatically and this is what i've done
" <a id='" + x.NomFic + "' onclick='TransfererFica( " +x.Idtran +" , "+ x.NumVdr + " , '" + x.NomFic + "' )'; </a>"
but the problem that x.NomFic is a string so when i click on the anchor it raises an error, so my question is how can i pass a param string , i've tried to put an integer just to check if my code works and it did, and when i change x.NomFic to accept string the code didn't work, any ideas ?
You need to use a escape character "\" in your code
" <a id='" + x.NomFic + "' onclick='TransfererFica( " + x.Idtran + " , "
+ x.NumVdr + " , \"" + x.NomFic + "\" )'; </a>"
More reading about escape character
https://csharpindepth.com/articles/Strings

How to left blank spaces inline?

I'm trying to left several blank spaces in a table, but I'm not able to do it. But in the same table I'm able to do it when I don't use javascript.
For example, in this cell, I can left 4 blank spaces with
<td>
{props.tcs.tl_conv + " / " + props.tcs.tl_int}
{(props.lang == "es") ? String(props.tcs.tl_percentage).replace(".", ",") + "%" : props.tcs.tl_percentage + "%"}
</td>
But when previosuly I try to left 4 blank spaces with " ".repeat(4) or with " ".
<td>{
(props.lang == "es") ?
String(props.tcs.t2p_conv_pp).replace(".", ",") + " / " + String(props.tcs.t2p_int_pp).replace(".", ",") +
" ".repeat(4) + String(props.tcs.t2p_percentage).replace(".", ",") + "%"
:
props.tcs.t2p_conv_pp + " / " + props.tcs.t2p_int_pp + " ".repeat(4) + props.tcs.t2p_percentage + "%"
}
</td>
How can I left blank spaces in this last piece of code?
Can you use a template string? Template strings maintain their formatting.
`${props.tcs.t2p_conv_pp} / ${props.tcs.t2p_int_pp} ${props.tcs.t2p_percentage}%`
// spaces here ^^^^
Thanks to #Rylee I have found the solution. Finally, my piece of code is:
<td>{
(props.lang == "es") ?
<span style = {{whiteSpace: "pre"}}>
{String(props.tcs.t2p_conv_pp).replace(".", ",") + " / " + String(props.tcs.t2p_int_pp).replace(".", ",") +
" " + String(props.tcs.t2p_percentage).replace(".", ",") + "%"}
</span>
:
props.tcs.t2p_conv_pp + " / " + props.tcs.t2p_int_pp + " ".repeat(4) + props.tcs.t2p_percentage + "%"
}
</td>
And here is the result:
'\xa0' is no break space char, and if you add them in between you JS you should be able to get spaces without using the &nbsp.
For example
<td>{
(props.lang == "es") ?
String(props.tcs.t2p_conv_pp).replace(".", ",") + " / " +
String(props.tcs.t2p_int_pp).replace(".", ",") +
'\xa0\xa0\xa0\xa0' + String(props.tcs.t2p_percentage).replace(".", ",") + "%":
props.tcs.t2p_conv_pp + " / " + props.tcs.t2p_int_pp + " ".repeat(4) +
props.tcs.t2p_percentage + "%"
}
</td>
Not sure if this is what you were looking for, but I hope this helps.

Javascript, clear form after press OK in confirm window. But keeps form data if confirm is cancelled

Writing a program for an assignment and no where in my book does it help with this case.
After the user enters in information for a drink order form, they hit a button that reads "Order", the button calls a function that calculates and displays a confirm window with required info
If the user clicks “ok” in the confirm message, an alert message should be displayed notifying the user that the order was placed and the form should be cleared, a function is needed
If the user clicks “cancel” in the confirm message, an alert message should be displayed notifying the user that the order was cancelled. The form should still contain all of the values that the user entered.
My issue is that I don't know what is needed to have the form reset when "OK" is selected in the confirm window. But if "Cancel" is selected, the values remain entered.
Here's what the code is so far
Javascript (Only entering confirm portion)
if (window.confirm("Fruit: " + document.drinkList.numFruit.value + ", Total: $" + totalFruit + ".00 \n"
+ "Water: " + document.drinkList.numWater.value + ", Total: $" + totalWater + ".00 \n"
+ "Coffee: " + document.drinkList.numCoffee.value + ", Total: $" + totalCoffee + ".00 \n"
+ "Coke: " + document.drinkList.numCoke.value + ", Total: $" + totalCoke + ".00 \n"
+ "Tea: " + document.drinkList.numTea.value + ", Total: $" + totalTea + ".00 \n"
+ "Ice: " + document.drinkList.numIce.value + "\n"
+ "Cream: " + document.drinkList.numCream.value + "\n"
+ "Sugar: " + document.drinkList.numSugar.value + "\n"
+ "Pinneapple Juice: " + document.drinkList.numPinn.value + "\n"
+ "Lemon Juice: " + document.drinkList.numLemon.value + "\n\n"
+ "Overall Total: " + (totalCoffee + totalCoke + totalFruit + totalTea + totalWater) + ".00 \n\n"
+ "Confirm order?"))
window.alert("The order was submitted!");
else
window.alert("The order was cancelled!");
HTML
<button type="button"value="Order" onclick="calcAll()">
As pointed out in the comments, you can use pure javascript and do:
document.getElementById("form").reset();

Posting from multiple dynamically created HTML textarea elements

Given the following snippet:
out.println("<form action=" + "./post" + " " + "method=" + "post" + " " + "id=" + "tweetForm" + ">");
for (int i = 1; i <= twParser.currentTweetIndex; i++) {
output = twParser.tweetArray[i] + newLine;
out.println("<p>");
out.println("<textarea" + " " + "name=text" + " " + "id=\"styled\"" + " " + "maxlength=140" + " " + "cols=" + "140" + " " + "rows=" + "1" + " " + "tag=" + "text_" + String.valueOf(i) + " " + "form=" + "tweetForm" + " " + "onfocus=\"setbg('#e5fff3');\" onblur=\"setbg('white')\"" + ">" + output + "</textarea>");
out.println("<span class=label-style-countdown" + " " + "id=" + "chars" + String.valueOf(i) + ">" + String.valueOf(140 - twParser.tweetArray[i].length()) + "</span> characters remaining");
out.println("<p>");
}
out.println("<input type=" + "submit" + " " + "name=" + "post" + " " + "value=" + "post" + " " + "style=\"float: left;\"" + "/>");
out.println("<button type=\"reset\" value=\"Reset\">Reset</button>"
...that creates HTML multiple textarea elements and posts them to a servlet. But since all the textareas have the same name, only the contents of the first textarea are posted.
Is there a way to post them all?
Thanks
To have multiple inputs from same name you can use name array like
<textarea name="text[]">You text here</textarea>
which will post all the values having same name as an array.
PS: This can be done with any input types expect radio buttons
On this line:
out.println("<textarea" + " " + "name=text" + " " ...
Append i to the name of the textarea, such that the names increase as text1, text2 etc.
out.println("<textarea" + " " + "name=text" + i.toString() + " " ...
Perform the same loop on the server when receiving the POST request to receive from each textarea.

Line break issue in javascript

if I use a paragraph element the line doesn't break, but if I use a textarea element the line breaks. why is this?
html:
<div id="requirement_7">
<h3> Requirement #7</h3>
<p>Press "Show Array" button to see an array created with JSON.<br>
It will show A state, the capital and quailty rating.</p>
<button type="button" id="array_button" onclick="JSONArray()">Show Array</button>
<p id="array_text"></p>
</div>
javascript:
function JSONArray(){
var text = '{"stateCapital":['+
'{"stateName":"Texas", "stateCapital":"Austin", "qualityRating":"10"},'+
'{"stateName":"Virginia", "stateCapital":"Richmond", "qualityRating":"7"},'+
'{"stateName":"California", "stateCapital":"Sacremento", "qualityRating":"7"},'+
'{"stateName":"Coloroado", "stateCapital":"Denver", "qualityRating":"10"} ]}';
var obj = JSON.parse(text);
document.getElementById("array_text").innerHTML =
obj.stateCapital[0].stateName + " " + obj.stateCapital[0].stateCapital + " "
+ obj.stateCapital[0].qualityRating + "\n" +
obj.stateCapital[1].stateName + " " + obj.stateCapital[1].stateCapital + " "
+ obj.stateCapital[1].qualityRating + "\n" +
obj.stateCapital[2].stateName + " " + obj.stateCapital[2].stateCapital + " "
+ obj.stateCapital[2].qualityRating + "\n" +
obj.stateCapital[3].stateName + " " + obj.stateCapital[3].stateCapital + " "
+ obj.stateCapital[3].qualityRating;
}
I have "\n" in my script to create the line break. I'm confused why it works in one element and not the other?
you need to replace "\n" with "<br>" since you are using .innerhtml it recognizes it as HTML and not JavaScript.
Codepen http://codepen.io/noobskie/pen/ojjeKZ?editors=101
You must use <br> to make a line break in paragraph.
If you do not want to change from '\n' to <br> you can use <pre> tag instead of <p> tag.
refer doc:
http://www.w3schools.com/html/html_paragraphs.asp
http://www.w3schools.com/tags/tag_pre.asp

Categories