I would like to create a for to post some data which is a date to be chosen and there will be 2 buttons.
1 button needs to post the data on the same page and another button needs to post the data on a different page.
What I don't understand is how I can specify that in the 2 buttons as they are in the same form.
Thanks for your help,
John.
Do something like this with jQuery
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#first").click(function(){
$("#for").attr("action","ad.html");
$("#for").submit();
});
$("#second").click(function(){
$("#for").attr("action","test.html");
$("#for").submit();
});
});
</script>
<body>
<form id="for">
input : <input type="text">
</form>
<button id="first">Subit First</button><button id="second">Submit Second</button>
</body>
All the best
Related
I am about to start a work on a alert box or Modal, that will Pop-up when the sites loads and after 10 seconds it disappear.
I am looking for a html/css solution, if possible.
Can any body lend me an idea on how to achieve it?
Here's a working example based on what you need as a modal popup.
<html>
<head>
<title>Model popup box</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#modal').delay(10000).fadeOut();
});
</script>
</head>
<body>
<div id=modal > Hello, i am a modal popup </div>
</body>
</html>
I've seen examples of a form being submitted and a new window being opened via _blank. However, I can't seem to reproduce the results. See my code, below.
In the <head> tag:
<script type="text/javascript" lang="javascript">
function submitForm(formId) {
newDialog = window.open('http://redhue.ir/upload/upload.php', '_form','status=no,scrollbars=no');
document.forms[formId].target='_form';
document.forms[formId].submit();
return false;
}
</script>
In the <body> tag:
<form action="#" method="post" enctype="multipart/form-data" onsubmit="return submitForm(this)">
But it just opens the new window and goes to test.php, but the form doesn't work, and there is no POST action, which means that test.php does not receive any form input.
What am I doing wrong, and how can this issue be resolved?
I need to show details on the popup. I don't have any idea how to do this. I need to do it in a MVC3 Razor view.
my Controller-
public ViewResult ViewDetail(Int32 id)
{
var q = from p in db.accs
where p.id == id
select p;
return View(q.FirstOrDefault());
}
my View-
<td># Html.ActionLink("View Detail", "ViewDetail", new { id=item.id }) </td>
use the Jquery UI ModalForm to show up your data.
Say you want to display the following in Modal pop-up of jquery .
<div id="displayinmodal">
<input type="file" id="file" name="file" />
<input type="submit" id="submitdata" value="Upload" />
</div>
Now write your jquery like this.
<script>
$(document).ready(function(){
$("#displayinmodal").dialog({ //displayinmodal is the id of the div you want to display in modal popup
autoOpen: true
});
});
</script>
That's it. you should get Modal popup in your browser.
Hope this helps
This kind of task isn't really what ASP.NET MVC / Razor does. Consider using a Javascript library like JQuery UI Dialog. You have to add several of the JQuery UI scripts to your page, but the payoff is a very simple API; you can create a basic dialog out of any HTML element (say with id mydiv) with one line of code:
$( "#mydiv" ).dialog();
And of course there are customizations and themes you can apply.
Of course, you could simply use the Javascript:
alert("my details here");
to get a basic modal popup, but I'm guessing that's not what you want.
If you want a simple no frills modal (with not much content) you can use a JavaScript alert like so:
alert('Hello from a modal popup');
If you would like a prettier option a common solution is to use jQuery UI's dialog which allows for a modal option. Take a look here for a demo of what you get with this option:
http://jqueryui.com/demos/dialog/#modal
The code is pretty simple; the below should do everything for you using Google's CDN as a source for the scripts and stock jQuery UI CSS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
$( "#details" ).dialog({
modal: true
});
});
</script>
<div id="details">
Hello from a modal popup
</div>
I'm using the following script to create a toggle effect for opening and closing div's.
<script type="text/javascript" src="/mainmenu/js/jquery.min.4.1.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery(".content").hide();
jQuery(".heading").click(function()
{
jQuery(".content").hide();
jQuery(this).next(".content").slideToggle(500);
});
});
</script>
<div class="main_text_faq"
<p class="heading">Header-1 </p>
<div class="content">Lorem ipsum</div>
<p class="heading">Header-2</p>
<div class="content">Lorem ipsum</div>
<p class="heading">Header-3</p>
<div class="content">Lorem ipsum</div>
</div>
Now I can't just seem to figure out how I can let Header 1 to always be open and to have Header 2 open when entering the content.
Any ideas how I can start coding this? I am in the process of learning how to use Jquery so please forgive me for not having anything to show for what I allready tried to fix my "problem"
Thanks in advance.
Regards!
If I've understood your question correctly, you want the first .content element to stay visible when the others are initially hidden. To do that you can use the :not and :first pseudo-selectors to exclude the first element:
jQuery(".content:not(:first)").hide();
Here's a working example.
I m new to MVC. I need to refresh tab panel after 10 seconds in MVC.
Can anybody help me in that?
Thanks
you can do that using JQuery or ajax the following is a sample example using Jquery
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var refreshId = setInterval(function()
{
$('#responsecontainer').fadeOut("slow").load('your target page will be here').fadeIn("slow");
}, 100);
</script>
</head>
<body>
<div id="responsecontainer">
here you can place your Div,html or ASP.net control
</div>
</body>
</head>
</html>
The div or whatever you use for content should have an id and should be rendered as an action that returns a partial view. Then you can use JavaScript to set the timer, and jquery Ajax call to replace the content with what is returned by calling the URL you get by URL.Action.