I'm having 2 buttons to load 2 separate forms, events and offers. when a user clicks on a button i want to load the relevant html form and make the buttons disappear.
events loads events.html
offers loads offers.html
<div class="view_col">
<form id="form1" name="form_b" method="post" action="">
<input name="c_event" class="clr" type="button" value="event" />
<input name="c_offer" class="clr" type="button" value="offer" />
</form>
</div>
load the form to
<div id="form_body"> </div>
i want make sure that the buttons are disappear after the user has clicked.
Can someone give an idea how to do it?
You need to use $.load() to get the HTML from your external HTML pages. Try something like this:
HTML
<div class="view_col">
<form id="form1" name="form_b" method="post" action="">
<input name="c_event" class="clr" type="button" value="event" id="eventsBtn" />
<input name="c_offer" class="clr" type="button" value="offer" id="offersBtn" />
</form>
</div>
jQuery
$("#eventsBtn").on('click', function() {
$("#form_body").load('events_loads_events.html');
});
$("#offersBtn").on('click', function() {
$("#form_body").load('offers_loads_events.html');
});
More information on load();
If you use jQuery then this is quite easy:
$('#form1 input').on('click', function(event) {
var $target = $(event.target);
$('#form_body').load($target.data('url'));
$('#form1').hide();
})
You would have to change you html into this:
<div class="view_col">
<form id="form1" name="form_b" method="post" action="">
<input name="c_event" class="clr" type="button" value="event" data-url="http://www.path-to-your-form-html-for-this-button.com/"/>
<input name="c_offer" class="clr" type="button" value="offer" />
</div>
Related
How to attach a input element with a Form using jQuery ?
I have a Form like below.
<form action="{{ route('update_profile') }}" method="POST" id="buildyourform"
enctype="multipart/form-data">
<div class="form-group">
<label for="exampleFormControlFile1">Company Logo</label>
<div id="company_logo">
<i class="ri-close-line" title="Click to Update Image"></i>
</div>
</div>
<div class="flex-row">
<div class=" d-flex justify-content-end ">
<button type="submit" class="btn btn-primary mb-5 mt-3">Update</button>
</form>
</div>
</div>
I am trying to place <input type="file" class="form-control-file" name="company_logo" /> inside <div id="company_logo"></div> using jQuery.
I am using below jQuery code.
var fName = $("<input type=\"file\" class=\"form-control-file\" name=\"company_logo\" />");
$("#company_logo .ri-close-line").click(function() {
$("#company_logo").html(fName);
});
But this code is not working when I submit the Form.
Below code is working.
var fName = $("<input type=\"file\" class=\"form-control-file\" name=\"company_logo\" />");
$("#company_logo .ri-close-line").click(function() {
$("#buildyourform").append(fName);
});
How to attach a input element with a Form using jQuery ?
I have been working on a website, but for some reason when I click enter it stays on the same page. But when I click the button I added on the page itself it works. What I'm trying to do is go from my login page, index.html, to my home page after the password is verified, home.html. Any Ideas?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/popup.css?Version=1.1">
</head>
<body>
<div id="box">
<form id="myform-search" method="post" autocomplete="off">
<h1>Enter Password</h1>
<p>
<input type="password" value="" placeholder="Enter Password" id="p" class="password">
<button class="unmask" type="button" onclick="toggle()"></button>
<button class="enter" type="button" onclick="done()">Enter</button>
</p>
</form>
</div>
<div id="wrong">
<p>Sorry, but the password you entered is incorrect!</p>
</div>
<!--Javascript to show password Box-->
<script>
//Verifies password
function done() {
document.getElementById("box").style.display = "none";
var password = document.getElementById("p").value;
if (password == "12345") {
location.replace("http://apr.great-site.net/Home/home.html");
} else {
document.getElementById("wrong").style.display = "block";
}
};
function toggle() {
var x = document.getElementById("p");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
</body>
</html>
```````````````````````````````````````````
// Verifies password
function done() {
document.getElementById("box").style.display = "none";
var password = document.getElementById("p").value;
if (password == "12345") {
// returning true will submit the form
return true;
} else {
document.getElementById("wrong").style.display = "block";
// returning false will prevent submiting the form
return false;
}
};
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/popup.css?Version=1.1">
</head>
<body>
<div id="box">
<form id="myform-search" method="post" action="validationUrlHere" autocomplete="off" onsubmit="return done();">
<h1>Enter Password</h1>
<p>
<input type="password" value="" placeholder="Enter Password" id="p" class="password">
<!-- Commented this button as it is not needed in the context of the solution -->
<!--<button class="unmask" type="button" onclick="toggle()">something</button>-->
<!-- HERE is the interesting part : -->
<!-- Clicking the "Enter" button has same effect as -->
<!-- hitting the default submit button or pressing the Enter button on your -->
<!-- keyboard. Your cursor focus must be inside one of the form's elements, -->
<!-- preferably in the password input field -->
<button class="enter" type="button" onclick="done()">Enter</button>
<input type="submit" value="Real Submit" />
</p>
</form>
</div>
<div id="wrong" style="display: none;">
<p>Sorry, but the password you entered is incorrect!</p>
</div>
</body>
</html>
Take a look at this snippet, take what you need from it. To be honest, it's not clear what you are seeking... hope it will help you understand some basics :-)
Try this :
<form onSubmit="done()">
<p>
<input type="password" value="" placeholder="Enter Password" id="p" class="password">
<button class="unmask" type="button" onclick="toggle()"></button>
<button type="submit" class="enter">Enter</button>
</p>
</form>
If you want the function done() to be called when you hit enter you should add an event listener for Enter on your form. (Have in mind that you opened 2 form tags)
document.getElementById('myform-search').addEventListener('keyup', function(e) {
if(e.key=='Enter') {
done()
}
}
Sorry I'm not sure how to phrase this properly
Is it possible to do this?:
Example I want to have 4 buttons/divs for the user to click on
Maybe with a form like this?
input value="Yes" name="response"
input value="No" name="response"
input value="Maybe" name="response"
input value="Later" name="response"
If the user clicks "Yes" then it will form submit that data with "Yes" to be stored in the database slot of "response"
So it's like 4 boxes with "Yes" "No" "Maybe" and "Later" which can be click by the user after which will be submitted like a form
Sorry once again as I'm lost as to how to do this(hopefully the solution is simple?)
Thanks in advance!
Hi i have one idea to do this With JQuery
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div>
<input class="btn1" type="button" value="Yes" />
</div>
<div>
<input class="btn1" type="button" value="No"/>
</div>
<div>
<input class="btn1" type="button" value="Maybe"/>
</div>
<div>
<input class="btn1" type="button" value="Later"/>
</div>
<div id="display">
</div>
<script>
$(document).ready(function() {
$('.btn1').click(function(e) {
e.preventDefault();
document.getElementById('display').innerHTML=$(this).val();
});
});
</script>
</body>
</html>
Fiddle link: https://jsfiddle.net/pranavadurai/jbxdbkLk/2/
There are two different ways you could approach this. A form can have multiple submit buttons, via <input type='submit' name='custom_name' .... You could also have a drop down (<select>) that the user selects from the options you present them, and have a separate submit button.
Examples
Multiple Submit Buttons
<form id="my_form" ...>
<!-- actual form contents -->
<input type="submit" name="submit_value" value="Yes" />
<input type="submit" name="submit_value" value="No" />
...
</form>
In this situation, the POST/GET data for submit_value would be set to whatever the user clicked.
Dropdown
<form id="my_form" ...>
<!-- actual form contents -->
<!-- drop down -->
<select name="my_option">
<option value="yes">Yes</option>
<option value="no">No</option>
...
</select>
<!-- normal submit button -->
<input type="submit" value="Submit" />
</form>
In this case, the POST/GET data for this form would be my_option for the choice you were asking about.
i will propose a solution evolving jQuery, HTML and some database
<html>
<head>
<title>Hi folk</title>
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//Here goes your database query
});
$("#btn2").click(function(){
//Here goes your database query
});
$("#btn3").click(function(){
//Here goes your database query
});
$("#btn4").click(function(){
//Here goes your database query
});
});
</script>
</head>
<div>
<div>
<input id="btn1" type="button" value="Yes" />
</div>
<div>
<input id="btn2" type="button" value="No"/>
</div>
<div>
<input id="btn3" type="button" value="Maybe"/>
</div>
<div>
<input id="btn4" type="button" value="Later"/>
</div>
</div>
</html>
I created a form in which you can enter a text
With onSubmit, this text creates a URL
I would like to have this website opened in an iframe on the same page where the form is.
What I've done:
<form onsubmit= "location.href = 'http://feedback.ebay.com/ws/eBayISAPI.dll?ViewFeedback2&userid=' + score.value + '&ftab=FeedbackAsSeller'; return false; target="eBay";">
<input type="text" name="score" placeholder="Copy Seller ID here"> <input type="submit" value="Enter/Click">
</form>
<iframe name="eBay"src="" width="90%" height="90%"></iframe>
I supposed that the target attribute would do the trick, but I still get redirected to the generated URL. What am I doing wrong? Thanks for any help :)
I have put whole code
<html>
<head>
<title>Please Rate if it helps</title>
<!-- PUT A PATH OF JQUERY LIBRARY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script>
function onSubmitCallIt() {
$("#eBay").attr("src", 'http://feedback.ebay.com/ws/eBayISAPI.dll?ViewFeedback2&userid=' + score.value + '&ftab=FeedbackAsSeller');
}
</script>
</head>
<body>
<form>
<input type="text" id="score" name="score" placeholder="Copy Seller ID here">
<input type="button" value="Enter/Click" onclick="onSubmitCallIt();">
</form>
<iframe id="eBay" name="eBay" src="" width="90%" height="90%"></iframe>
</body>
</html>
Rate, If it helps...
function openWin(){
alert("in func");
var frame=document.getElementById("iFrame");
var sellID=document.getElementById("score").value;
var win="http://feedback.ebay.com/ws/eBayISAPI.dll?ViewFeedback2&userid=" + sellID + "&ftab=FeedbackAsSeller";
frame.src=win;
alert("done");
}
<form onsubmit="openWin()">
<input type="text" name="score" id="score" placeholder="Copy Seller ID here"> <input type="submit" value="Enter/Click">
</form>
<iframe name="eBay"id="iFrame" src="" width="90%" height="90%"></iframe>
I am trying to get the value from html input control and send it to my controller on my image click event. Here is the code snippet to capture an email ID and send it to another view.
<div id="div1">
<a href="<%= Url.Action("ActionName", "Controller", new {strEmailAddress = ????? }) %>">
<img alt="sign up" src="<%= ResolveUrl("~/media/signup_btn.png") %>" border="0" /></a>
</div>
<input name="Email address" type="text" value="Email address" />
How do I get the value from this input element?
Thanks
//try something like this using a javascript function
<html>
<head>
<script>
function WhatsMyValue(field)
{
alert("field:" + field.value);
}
</script>
</head>
<body>
<form name="f1">
<input type="text" onkeyup="WhatsMyValue(this);" name="text1">
</form>
</body>
</html>
link JQuery here
<script>alert($("#myCon").html());</script>
<input type="text" id="myCon" name="text1">