I have an application Im building that needs to output some HTML inside a <pre> and <code> tag. I am using prism for the syntax highlighting and it works fine for other languages. The problem is that when I use HTML inside the code tag it either renders the html, or won't highlight with prism because it is output as a string.
The markup is:
<pre>
<code class="language-markup">
<form class="send-to-mobile" method="post">
<input type="text" pattern="[0-9]*" name="phone_number" class="phone_number" />
<input type="submit" value="Text Me" />
</form>
<div class="thanks-message">
<p>The link will be delivered momentarily</p>
</div>
</code>
</pre>
Related
I'm working on a React hook form project and I'm using react-dropzone to upload some images, I want to display a React hook form's ERROR when the type of file is not an image, I can console.log Error but I don't know how to use SetError and block form submition until the file format is accepted..
This is my Sandbox code
Any idea please ?
The easiest way to block form submission is to use the disabled property of the input when the length of the fileRejections array is greater than zero:
<input type="submit" disabled={fileRejections.length > 0}/>
The whole form code is:
<form onSubmit={handleSubmit(onSubmit)}>
<section className="container">
<div {...getRootProps({ className: "dropzone" })}>
<input {...getInputProps()} name="upload" />
<p>Drag 'n' drop some files here, or click to select files</p>
<em>(Only *.jpeg and *.png images will be accepted)</em>
</div>
<aside>
<h4>Accepted files</h4>
<ul>{acceptedFileItems}</ul>
<h4>Rejected files</h4>
<ul>{fileRejectionItems}</ul>
</aside>
</section>
<input type="submit" disabled={fileRejections.length > 0}/>
</form>
I have a text field that stores page content created with a WYSIWYG HTML Editor.
Text field (content):
<form accept-charset="UTF-8" action="/myaction" method="post">
<input name="myaction[product]" type="hidden" value="Other" />
<input name="myaction[product]" type="hidden" value="Car" />
<input class="btn btn-primary" type="submit" value="Get a Car"/>
</form>
Show page
<% highlight(raw(#page.content),params[:search]) %>
The form does not seem to display or show the bootstrap form and button. It seems to be getting removed. What can I do to get the form to display?
For each form in an HTML page I want to add an additional hidden input tag as it passes through a JEE Filter. For a given HTML page for example:
<html>
<form name="input" action="submit.jsp" method="post">
<input type="hidden" name="id" value="1"/>
<input type="submit" value="Submit"/>
</form>
</html>
the end result should be similar to this:
<html>
<form name="input" action="submit.jsp" method="post">
<input type="hidden" name="id" value="1"/>
<input type="submit" value="Submit"/>
<input type="hidden" name="dynamickey" value="DYNAMIC_VALUE_HERE"/>
</form>
</html>
As the HTML may be malformed, I am figuring that Jericho would be the HTML parser of choice. After a couple of passes through the web pages, I have found ways to change the values of already existing tags, but how to add an additional tag escapes me.
Thanks in advance for help.
When I try to call .trigger('create') method to iframe contents, it does not work and css classes are not applied to input:text elements. but when I call .trigger('create') method for html content outside the iframe, it works
please go to this link 'here' on jsfiddle and click on "load mobile view"
javascript code
$('#mobile_view').contents().find('body').append("<div id='fbm_mob_menu'></div>");
$("#load_mobileview").click(function(){
var content = ' <form class="fbm_contactform">\
<div>Contact Us</div>\
<div data-role="fieldcontain"><label for="name" >Name</label>\
<input name="name" type="text" class="m-field" /></div>\
<div data-role="fieldcontain"><label for="email">Email</label>\
<input name="email" type="text" class="m-field" /></div>\
<div data-role="fieldcontain"><label >Message</label>\
<input name="message" type="text" class="m-field" /></div>\
<input name="submitButton" type="submit" class="m-field" value="Send Message" /></div>\
</form> ';
$("#mobile_view").contents().find("#fbm_mob_menu").before(content);
$("#mobile_view").contents().find(".fbm_contactform").trigger("create");
});
html code
<a href="javascript:void(0)" id="load_mobileview" >load mobile view </a>
<iframe id="mobile_view"></iframe>
<div id="test"></div>
iFrame contents should not be "easily" accessible, so to me this is correct behavior.
If you check the jQuery Mobile API examples, you can see that all pages are done using iFrames and every iFrame has it's own version of jQuery Mobile.
So if you have an iframe, include JQM inside the iFrame and everything should be allright.
I could solve this problem by writing a javascript function inside iframe. and calling that function outside from the iframe.
in iFrame
<script>
window.trigerCreate =function(){$(".fbm_contactform").trigger("create");}
</script>
parent
window.frames[0].trigerCreate();
.I have a div tag that is also divided into two divs. here is the code:
<div>
<div id="search">
<form id="try" method="post">
Batch: <input id="batch" name="batch" type="text"/>Dept: <input id="dept" name="dept" type="text"><input type="submit"/>
</div>
<div id="receiver">
</div>
</div>
I have placed a search option in the div named "search" using post method. what i want to do is that when i click the submit button the page to receive the values will appear on the div named "receiver".
is this possible? if it is, please help..
The ways you have for this are:
1 - The simplest - instead of a div - use an IFrame like this
<div id="search">
<form id="try" method="post" target="receiver" action="url-to-server-Page">
Batch: <input id="batch" name="batch" type="text"/>
Dept: <input id="dept" name="dept" type="text" />
<input type="submit"/>
</form>
</div>
<iframe name="receiver" id="receiver"></iframe>
</div>
The disadvantage in this case is that the search-result that come in this case from url-to-server-page - is a complete and independent HTML page that is nested in your search page.
It is not effected by styles of the parent page, and the communication between them for JavaScript operations is rather combersome.
2 - with some JavaScript skills you can use AJAX.
There are many libraries on the net that can help you do it in very few lines of code.
jQuery is the simplest, although it's the one I like least...
http://jquery.com/
3 - use a full round-trip
<div id="search">
<form id="try" method="post" target="receiver" action="url-to-server-Page">
Batch: <input id="batch" name="batch" type="text"/>
Dept: <input id="dept" name="dept" type="text" />
<input type="submit"/>
</form>
<div id="receiver">
<?php if (isset($_POST['batch']) && isset($_POST['dept'])){
//display search results here.
}
?>
</div>
</div>
You want what's called "AJAX." There are a number of libraries available, such as Google Web Toolkit or jQuery to accomplish what you want.
Can you clarify? Is this a php page and you are posting to self or are you looking to use ajax to populate the div?
If it is php and you post to self then you can simply check if the post has been made inside that div :
<div id="receiver">
<?php if (isset($_POST['batch']) && isset($_POST['dept'])){
//display search results here.
}
?>
</div>