I got this weird problem:
I get content that is dynamically built. In this special case I also get the element "input" as content, which is then displayed directly by the browser as an element.
What I get:
<div class="search_result_content"> this is just text, but the code <input variable="" name=""> displays as an element
What i need:
You may want to add 'type="text"', so total would be like
<input type="text" name="" value=""/>
Else if the input needs to be added to a (like) 'span' or 'div', i would suggest JS or jQuery
$(document).ready(function() {
$(".search_result_content").append('<input variable="" name="">');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search_result_content"> this is just text, but the code </div>
u insert the input tag dynamically in this scenario, after inserting convert it into html format
Related
I am trying to have multi-coloured textarea on my page.
So basically I am planing have one textarea input and one <p> object. When user type in textarea, the <p> will be updated with jQuery, as soon as user type any letters in textarea.
Similar to Stackoverflow.
When the user finishes typing, he will select a text from the textarea and click the red or blue button.
The system will read the selected text, find the index of starting text and append
<span> style='color:red;'>
at the end of the text add
</span>
To be honest, I am not sure this is the best way to do it. I have seen
lots of RichText editor but they don't have any save button.
Anyway.
So far what I did:
<div class="row">
Red
Blue
<form asp-action="Save" method="post">
<textarea rows="10" style="width:100%" id="DetailText" name="DetailText">
This email and any files whom this email is addressed. <span> style='color:red;'>This suppose to be red</span>
Any unauthorised use, retention, distribution, copying or disclosure is strictly prohibited.
If you have received this email in error)
</textarea>
</form>
<hr />
#Html.Raw("<p id='viewText'></ p >");
<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
$(document).ready(function () {
$("#viewText").text($("#DetailText").val());
$("#DetailText").on('input',function () {
$("#viewText").text( $("#DetailText").val());
});
});
ISSUE Html.Raw() doesn't complie the text and shows HTML code instead. style='color:red;'>This suppose to be red
I have 2 strange problems. I have a large form with lots of input fields. That works fine. I want to add a slide toggle at the bottom which changes a variable that will affect styles on the whole form.
My first problem is that the variable will not display until the slide toggle is clicked.
HTML
<mat-slide-toggle [(ngModel)]="ifPrint" name="ifPrint" id="ifPrint" ></mat-slide-toggle>
<div>
{{ifPrint}}
</div>
COMPONENT
export class PrintReviewDetailsComponent implements OnInit {
ifPrint = true;
}
the ifPrint variable is blank on page load
The second problem is
when the slide toggle is clicked the div containing the variable shows as true but when I click the toggle to the off position the ifPrint variable stays as true and does not change.
I have created a blitz and it is working fine there with the same code so I am unsure as why I am having these issues on my page.
The console says:
Error: No value accessor for form control with name: 'ifPrint'
EDIT: I updated the stackblitz to include the html of the form and now it is not working.
Your updated stackblitz couldn't recreate the issue which you shared... But from your question, the following 2 issues are addressed for a form and styling is also done:
the toggle value was not displayed by-default until the toggle was clicked
the toggle value didn't change when you toggled it
the style is now being updated based on the toggle value
relevant TS:
model:any;
constructor(){
this.model = {name: '' , age: null, ifPrint: false};
}
relevant HTML:
<form (ngSubmit)="formSubmit()" #demoForm="ngForm" >
<div [ngClass]="model.ifPrint === true ? 'trueClass' : 'falseClass'">
<input type="text" placeholder="Enter Name" #name="ngModel" [(ngModel)]="model.name" name="name" />
<br/>
<input type="number" placeholder="Enter Age" #age="ngModel" [(ngModel)]="model.age" name="age" /> <br/>
<mat-slide-toggle #ifPrint #age="ngModel" [(ngModel)]="model.ifPrint" name="ifPrint"></mat-slide-toggle> {{model.ifPrint}} <br/>
</div>
<button type="submit"> Submit </button>
</form>
check a minimal, working demo here for what you're trying... hope it helps...
I removed everything in your template except the mat-slide-toggle and it works as expected.
I believe the issue is because your html template is referencing methods or properties that your component does not have, or trying to access a property of null or undefined somewhere is causing the issue.
Check your console for the errors and if you fix those up, the slide toggle should work as expected.
Was a bit unsure how else to word this, JavaScript is the main thing I NEED to learn but after putting hours and hours in i still can't write javascript code off the top of my head. I understand the syntax of just about everything but when it comes to integrating it with css or html I am clueless!
Heres the code:
HTML:
<div id="mydiv">
<input type="text" name="colorpicker">
<input type="submit" value="Submit">
</div>
JavaScript:
document.getElementById("mydiv").style.backgroundColor="colorpicker.Submit";
bare in mind i've had little experience with forms and inputs in html too.
Any reply would be much appriciated! Thanks!
The value for style.backgroundColor should be a string representing a color value used in CSS, which can be one of:
Color name such as red, green, pink, ...
Color hex code such as #ff0000 (or #f00), #00ff00, #ff00ff ...
rgb() or rgba() function such as rgb(255,0,0), rgb(0,255,0), ...
You also have to set up the click event handler for the button submit. Here are details:
HTML:
<div id="mydiv">
<input type="text" name="colorpicker"/>
<input type="submit" value="Submit"/>
</div>
JS:
var div = document.getElementById('mydiv');
div.children[1].onclick = function(){
div.style.backgroundColor = div.children[0].value;
};
Note that you can assign an id for each input field to get access to it in JS code, in the above code I use the children collection to access to them instead. The first input field is the first child of div, the second input field is the second child of div.
Demo
Also note that, since HTML5 (which has been supported by all the major browsers) you can use the color input field which can popup a real color picker dialog for the user to select and then you just need to handle the event onchange to get the selected color (via the value property) like this:
HTML:
<div id="mydiv">
<input type="color" name='colorpicker'/>
</div>
JS:
var div = document.getElementById('mydiv');
div.children[0].onchange = function(){
div.style.backgroundColor = div.children[0].value;
};
Updated Demo.
Use the form tag onsubmit method to call your JavaScript function.
This is my code:
Enter your question here:
<form method="post" action="">
Title:
<input type="text" name="title">
<br>Further Explanation:<br>
<textarea name="content" rows="5"></textarea><br>
<input type="submit" name="input" value="Ask" />
<?php
if(isset($_POST['delete'])) {
include "connection.php";
if (mysql_query("TRUNCATE TABLE Questions"))
{
echo "Pitanje je uspesno obrisano";
} else {
echo "Nastala je greška pri brisanju pitanja<br>" . mysql_error();
}
}
?>
</form>
<form action="
<?php
$_SERVER['PHP_SELF'];
?>
" method="post">
<input type="submit" name="delete" value="delete all questions">
</form>
Now, this is what should my form normally look like:
But this is what happens when I put in or out of the div tag inside my dynamic page file:
http://tinypic.com/images/404.gif
What am I doing wrong? what is going on? :(
I'm not a CSS pro, but what I'd recommend is firing this up in Firefox after you download the add-on Firebug. Firebug will let you get right in there and mess with the CSS and HTML while it is running in the browser, so you can adjust things on the fly, turn on and off css elements, and isolate exactly what is causing the problem. Just find the div in the Firebug window and it will list every css element currently attached to it. From there, you should be able to move through the code and see where that weird CSS is coming from.
You probably have some CSS rules that change the appearance of input and textarea elements, probably something like:
input, textarea {
border: none;
}
That’s why your input and textarea elements do not have a border. And the centered align might be inherited from a parent element.
I am writing a form using jQuery and encounter some difficulties.
My form works fine in static page (html).
However, when I use the form in dynamic page(aspx), the form does not behave correctly.
I cannot append items to the form and call the form.serialize function.
I think the error occurs when a form is inside another form (.aspx code needs to enclosed by a form tag).
What should I do?
Let me give a simplified version of my code:
<form name="Form1" method="post" id="Form1">
some content
<form name="form_inside">
<input name="fname" type="text" />
</form>
</form>
jQuery code:
$("#form_inside").append($("<input type='text' name='lname'>"));
When the user submits,
$("#form_inside").serialize();
// it should return fname=inputfname&lname=inputlname
I want to append element to "form_inside" and serialize the form "form_inside".
The form "Form1" is required by the aspx and I cannot remove it.
Could you just serialize the fields inside Form1?
I don't know anything about ASP, but it seems that you're not doing a straightforward "submit" anyway - so does it really matter if the fields aren't within their own separate form?
You could possibly group the fields you're interested in within a <div> or something, e.g.:
<div id="my-interesting-fields">
...
</div>
then substitute #form-inside with #my-interesting-fields where appropriate - is that helpful at all?
Edit
OK, a quick glance at the jQuery code suggests that serialize() depends on the form's elements member.
I suppose you could hack this in a couple of different ways:
Copy all elements from #my-interesting-fields into a temporary <form> that you dynamically create outside Form1, then call serialize() on that. Something like:
$("#Form1").after("<form id='tmp-form'></form>").
append("#my-interesting-fields input");
$("tmp-form").serialize();
Or, create an elements member on #my-interesting-fields, e.g.
$("#my-interesting-fields").elements = $("#my-interesting-fields input");
$("#my-interesting-fields").serialize();
I haven't tried either of these, but that might give you a couple of ideas. Not that I would necessarily recommend either of them :)
Because you can't have nested <form> tags you'll need to close off the standard dotnet form tag like below:
<script type="text/javascript">
$(document).ready(function() {
$("#form_inside").append($("<input type='text' name='lname'>"));
$("#submitBtn").click(function() {function() {
var obj = $("#form_inside *");
var values = new Array();
obj.each(function(i,obj1) {
if (obj1.name && !obj1.disabled && obj1.value) {
values.push(obj1);
};
});
alert(jQuery.param(values));
}); });
});
</script>
<form id="form1" runat="server">
<div>
<div id="form_inside" name="form_inside"> <input name="fname" type="text" /><input type="button" id="submitBtn" /></div>
</div>
</form>
jQuery.param on a array of form elements will give you the same results as .serialize()
so you get all elements in div $("#form_inside *) then filter for elements then on the result jQuery.param will give you exactly what you need