Javascript password + button open URL in targeted element - javascript

I learned how to open a link using a password and button.
I used the following code:
<input type="text" id="text" />
<input type="button" id="btn" value="Submit" onClick="window.location=url;" />
<script>
$("#btn").click(function() {
window.location="example.com/"+$("#text").val();})
</script>
What I would like to figure out is whether I can target a div element for the link to open within.
I've been using the following script to load html pages into a specified div element with a link:
<div class="item1" id="pageone"></div>
link
<script>
function loadSAMEDiv1() {
$.ajax({
url: 'item1.html',
success: function(data) {
$('#pageone').html(data);
}
});
}
</script>
I guess I'm wondering if there's a way to make the password url made by the first script open in a targeted div, like it does in the second script. So when you click the button element it will make the url using the password entered into the text box and load it into a div like #pageone.

The simplest way to do this is with Ajax load(). Try this.
<input type="text" id="text" />
<input type="button" id="btn" value="Submit"/>
<div class="item1" id="pageone"></div>
<script>
$("#btn").on("click", function() {
$("#pageone").load("example.com/"+$("#text").val());
});
</script>

Related

Fill input with jquery variable (Input receive html code)

I am able to open an external page in the DOM.
But I am trying to fetch all the child tags from a div and save it to the javascript variable and then print the variable in the input value
I need to save in the input all html content of the div and the child tags:
<form method="POST" action="test.php">
<input id="content" type="text" name="content" value="<script>document.write(content)</script>">
<input type="submit" value="submit">
</form>
<div id="mydiv"></div>// here load external page
<script>
$(document).ready(function(){
$("#mydiv").load("index.html"); // load external page in Dom
var content = $(this).closest('#div1');
/* find all parents tags e content of div id="div1"
(This is inside the external index.html file) */
});
</script>
I'm not getting it, I do not know where I'm going wrong in the code above
Thanks
//try like below
<form method="POST" action="test.php">
<input id="content" type="text" name="content" value="">
<input type="submit" value="submit">
</form>
<div id="mydiv"></div>// here load external page
<script>
$(document).ready(function(){
$("#mydiv").load("index.html");
var loadFile = load("index.html");
var content = $(loadFile).find('#div1').html();
$('#content').val(content);
});
</script>
you need to use callback function to view/explore the loaded contents using $.fn.load
$(document).ready(function(){
$("#mydiv").load("index.html", function(data){
// assuming #div1 is inside "index.html"
var content = $(data).find("#div1");
});
});

.submit doesn't work on appended element

I created custom form for fast reply (.append), now I want to use ajax for submit reply without reloading, I tried .on('submit', function(e)... which doesn't work (tried event delegation also). Now I tried .on('click', function(e)... and this works - don't know why.
$("#newpost").on('click', '.send', function(event) {
event.preventDefault();
});
This doesn't work:
$("#newpost").on('submit', '.send', function(event) {
event.preventDefault();
});
Appended form:
<form id="newpost" method="post" action="/forum/addpost/"+ id +"/"+ rek +" name="newpost">
<div class="editor" align="left">
<textarea name="post" cols="50" rows="5"></textarea>
<div class="submit" align="right">
<input class="send" value="." title="Send" type="submit">
</div>
</div>
</form>
So why .on('submit'..) doesn't work even if I use event delegation?
Thank you
This is not working because you have conflicting name to textarea(name="post") with the form properties.
As from jquery documentation:
jquery submit
Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.
If you append the whole form dynamically then you'll have to attach the submit listener to something that already exists when the page loads. Something like this:
$('body').on('submit', '#newpost', function(event) {
event.preventDefault();
});
EDIT:
I might have misread the question. The part you said doesn't work cant work because you don't submit a ".click" button, but the form that your ".click" button is in.
The right form is
$( "#newpost" ).submit(function( event ) {
event.preventDefault();
});
Later edit:
I understood now what you want.Try a new approach.Presuming that id is 23 and rek is value "add" you have the following:
HTML
<div class="editor" align="left">
<textarea name="post" cols="50" rows="5" id="post"></textarea>
<div class="submit" align="right">
<input class="send" value="." title="Send" type="button" id="23" data-rek="add">
</div>
</div>
JS ( can be used in external file also):
//get the answer based on id-s and classes
$("body").on("click", ".send", function() {
//get what is at attribute id of the clicked link
var ID=$(this).attr("id");
//get the text from the form with id "fasttext"
var thetext = $("#post").val();
//take the value of rek ( don't know what means :) )
var therek = $(this).attr("data-rek");
//create the string that will be posted
var theString = 'post=' + thetext;
//post the form using ajax and without reloading the page
$.ajax(
{
type: "POST",
url: "/forum/addpost/"+ id +"/"+ therek,
data: theString,
cache: false,
success: function(html)
{
//do what you want to do as success - html is the returning response
//you can also make this div disappear or display a success message
}
});
});
});
May be problem is here
<div class="submit" align="right">
<input class="send" value="." title="Send" type="submit">
try to remove class="submit" from div tag
<div align="right">
<input class="send" value="." title="Send" type="submit">

How to prevent browser from opening a new page on form submit?

There's an email subscription form in a web page, When someone enters his email and clicks on submit button, We don't want this page to be redirected to form action url, We just want it's submit button text value to be converted to another text, something like "Thank You!". How is it possible? Should I go through ajax? or javascript?
Here's the form:
<form class="ml-block-form" action="//app.mailerlite.com/webforms/submit/myownID" data-code="myownID" method="POST" target="_blank">
<div class="form-group ml-field-email ml-validate-required ml-validate-email">
<input class="newsletter-email" type="email" name="fields[email]" placeholder="Email*"/>
</div>
<input type="hidden" name="ml-submit" value="1" />
<p>
<input class="newsletter-submit" type="submit" value="Get Updates!"/>
</p>
For starters remove target="_blank" from your form tag.
Then, within your jQuery, do something along the lines of this:
$(".ml-block-form").submit(function(){
var vals = $(this).serialize();
$.ajax({
url: "postpage.php",
method: "POST",
data: vals,
success: function(data) {
$("#formsubmit").val("Thank you!");
}
});
return false; // prevent from submit
});
I've altered your HTML as well, as it was originally very messy. You can of course add the other elements back if you need:
<form class="ml-block-form" action="" data-code="myownID" method="post">
<input id="mainval" type="email" name="fields[email]" placeholder="Email*">
<input id="hiddenval" name="ml-submit" value="1" />
<input id="formsubmit" type="submit" value="Get Updates!"/>
</form>
You can simply remove target="blank" because blank value opens the linked document in a new window.
Instead of
<input class="newsletter-submit" type="submit" value="Get Updates!"/>
use
<button id="newsletter-submit" value="Get Updates!"/>
(note that I changed class for id)
And then use jQuery to handle the click on the button:
$("#newsletter-submit").click(function () {
$(this).prop("value", "Thank You!");
// do something else with the input values e.g. send them via ajax to a server script
});

How can I open a URL inside a DIV tag using AJAX?

I have the following php files. One that captures a user's text from a simple form, and the other echos this text. The files are shown below..
file1.php:
<form action="output.php" method="post">
Paste text document: <br><br>
<textarea name="doc" rows="5" cols="50" value="">
</textarea><br><br>
<input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="Clear">
</form>
<br><br>
<div id="output_area">
</div>
</body>
</html>
output.php:
<html lang="en">
<head><title>Output</title></head>
<body>
<?php
$doc = $_POST['doc'];
echo $doc;
?>
</body>
</html>
I want the output to be displayed between the DIV tags, rather than to load and show the output on a new page. I want the text to be output in between the DIV tags on the same page. Maybe the best way is to use AJAX to display output.php within the DIV tags and output the text after the user has clicked on the "submit" button. How can I use AJAX to do this in the most basic way possible?
You can use JQuery ajax function:
JQuery:
$("form").on("submit", function(event){
event.preventDefault();
$.ajax({
type: "POST",
url: "output.php",
data: { doc: $('#doc').val()}
})
.done(function( data) {
$("#output_area").html(data);
});
});
Change html:
<textarea name="doc" id="doc" rows="5" cols="50" value=""></textarea>
You can use the function:
$(document).ready(function() {
$( "#output_area" ).load( "output.php" );
});
But remeber!
That the load function from jquery, loads everything on the page you are asking for, so dont use:
<html lang="en">
<head><title>Output</title></head>
<body>
</body>
</html>
Now the load(function), will put in the PHP you made in output.php
if you want to output the answer on a submit i would do it like:
First add:
Show doc
Then add jquery:
$(document).ready(function() {
$('.pressme').on('click', function(){
var yourdata = $(this).parent().find("textarea[name='doc']").val();
$.ajax({
type: "POST",
url: "output.php",
data: {doc: yourdata},
success: function(data) {
$('#output_area').html(data);
});
});
});
I added a <a>, instead of using the <input type="submit"> because the submit, will post the form, thats not what you need, after what i understand, you need to preview the textarea in a div.
Hope it helps!
If you want your $_POST variable to be shown on the same page, then
1.change form's action to it. In your case
action="file1.php" or leave it empty to reload the page on submit (not valid in HTML5)
2.insert echo part directly in your div
<div id="output_area">
<?php
echo $_POST['doc'];
?>
</div>
not in another file
You need not use ajax for this. You can do this by using javascript. It will improve your performance of your code.
Try This:
<script>
function show() {
document.getElementById("output_area").innerHTML=document.getElementById("doc").value;
return false;
}
</script>
<form action="#" method="post">
<textarea name="doc" id="doc" rows="5" cols="50" value="">
</textarea>
<input type="submit" name="submit" value="submit" onclick="return show();">
<input type="reset" name="reset" value="Clear">
</form>
<div id="output_area"></div>
</body>
</html>

Popup box doesn't return a value when click ok

Im working with Asp .net MVC3.I'm using text box in viewpage when focusing on a text box popup window will open which contains a textarea and ok button.when click ok populated in viewpage textbox and popup page has to be hided.im using following code,
<input type="text" id ="Comments" class="Comments" value= "value"/>
<div id="popup">
<input type="text" id="content" style="width:243px;height:150px" maxlength="250" cols="70" rows="50"></input>
<input id="popupok" type="Button" value="Ok" />
<input id="popupclose" type="Button" value="Close"/>
</div>
and following is the Jquery,
$(function () {
$('.Comments').focus(function(){
$('#popup').show("slow");
});
$('#popupclose').click(function () {
$('#popup').hide("slow");
});
$('#popupok').click(function () {
var thought = $("#content").val();
$(".Comments").Val()=thought;
$('#popup').hide("slow");
});
});
Im not getting the Content value on the thought variable when click ok.what is wrong in thie above code.some one please help on this
Try this,
$('#popupok').click(function () {
var thought = $("#content").val();
$(".Comments").val(thought); // val function need an argument to set value
$('#popup').hide("slow");
});
Live Demo

Categories

Resources