I have included a simple form on the home page of our website that posts its results to a page named Results.aspx.
Instead of the form's results returning on the same page, I'd like it if the results opened in a new modal.
How is this accomplished? To recap, the form is on the home page, and on submit, the results should be shown in a new modal window.
<form action="Results.aspx" method="post" name="myForm" onsubmit="return validateForm()">
<div id="blank-box-form">
<h2>Looking For Medicare Advantage Plans?</h2>
<label for="zipcode1"> Please enter your zip code</label>
<input id="zipcode1" class="wpcf7" name="zipcode1" type="text" />
<input type="submit" />
</div>
I would suggest that you post the form using ajax. When the ajax-call is complete you populate the body of the modal with the response-data and open it up :)
Try
<form action="Results.aspx" target="_blank" method="post" name="myForm" onsubmit="return validateForm()">
But ass #digi recommend, you should use ajax to get the results and then insert them in a modal.
This could guide you:
<script>
$("form").submit(function(event){
event.preventDefault();//to stop the submit
$.get("url","data",function(results){
$("#someModalStyledDiv").html(results).show();
});
});
</script>
http://api.jquery.com/jquery.get/
Related
I'm trying to get the search term to appear in the URL. What am I doing wrong?
<form name="catsearchform74255" method="post" onsubmit="processSearch(this)" action="/Default.aspx?SiteSearchID=2248&ID=/search-results&keywords=">
<div class="input-field search-box">
<input id="CAT_Search" type="search" name="CAT_Search" placeholder="What are you looking for?" class="white" required="true">
<label class="label-icon" for="CAT_Search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
<script type="text/javascript">
function processSearch(form) {
form.action = form.action + CAT_Search.value;
}
</script>
</form>
Change method="post" to method="get".
Update any server-side code referencing post variables to reference get variables. For example, in PHP code, change $_POST["CAT_Search"] to $_GET["CAT_Search"].
Also, the correct format for the required HTML attribute is either required="" or required="required.
Code
This can be done with JS, you can't edit the method as Business Catalyst expects a post for this form.
If you change the form to the following:
<form name="catsearchform74255" id="searchForm" method="post" action="/Default.aspx?SiteSearchID=2248&ID=/search-results&keywords=">
<div class="search-box">
<input class="cat_textbox_small" type="text" name="CAT_Search" id="CAT_Search">
<input id="submitForm" onclick="submitFormScript()" type="button" class="cat_button" value="Search">
</div>
</form>
and then add the following jQuery:
function submitFormScript() {
var searchAction = $("#searchForm").attr("action");
searchAction = searchAction + $("#CAT_Search").val();
$("#searchForm").attr("action", searchAction);
$("#searchForm").submit();
}
Explanation
By adding the ID's to the fields on the form and then taking type="submit" off the input button we can edit the form action before we submit the form.
In the JS we are getting the form action, adding on the value of the search box (users input) and then setting that back to the form action attribute. After that we have the URL that we want to send to the next page so we can then submit the form.
I want to submit a form when a file select is changed in my form and be able to redirect to same page.
ie: I have this url: http://localhost:3000/worker_steps/basic_info. after dropdown changed, I want the form be submitted and redirect again to http://localhost:3000/worker_steps/basic_info.
I have this code in html:
<form class="simple_form form-horizontal" novalidate="novalidate" id="edit_user_385" enctype="multipart/form-data" action="/worker_steps/basic_info" accept-charset="UTF-8" method="post">
<input class="file optional" name="user[picture]" id="user_picture" type="file"> //this is th e dropdown select input
and in my jquery, I have this atm:
$("#user_picture").change(function(){
//window.location = "/worker_steps/basic_info";
$(this).closest("form").submit();
});
I would just use this:
window.location.replace(window.location.href);
You can use header in
worker_steps/basic_info
file,
So put the below line at the end of the file,
header('location:the_current_page.html');
exit();
How can I submit a single form while having different forms on a single page?
FORM 1:
<form action="../../../../../xyz/services/xyzOperation" method="post" enctype="multipart/form-data" target="upload_target" class='form-horizontal page formm' id='uploadForm' style="margin-bottom: -1px;">
FORM 2:
<form action="../../../../../xyz/services/create" method="post" enctype="multipart/form-data" target="final_target" class='form-horizontal page formFinal' id='finalForm'>
JS CODE
document.forms["uploadForm"].submit();
I am using the above statement to submit the first form but surprisingly it also submits the second form..
Please help me, as this issue is now becoming so irritating to me.
I have also used the following code but of no avail
document.getElementById("uploadForm").submit();
THANKS
You can try this...
function submitForm(){
document.formName.action="actionName";
document.formName.submit();
}
<form method="post" name="formName" enctype="multipart/form-data">
....
<input type="button" onclick="submitForm()"/>
<form>
Form submissions use the name not the id attribute to identify unique elements. Add
name = "uploadForm"
name = "finalForm"
to their respective elements.
<form>
<input type="submit" name="action" value="UPDATE"/>
<input type="submit" name="action" value="DELETE"/>
</form>
and use $_GET['action'] or $_POST['action'] (depending if you use get or post for form).
if($_POST['action'] == 'DELETE'){
//.....
} elseif($_POST['action'] == 'UPDATE'){
//.....
}
If you assign each form with an element id, then you will be able to manipulate which form to upload as per your script. Id enables DOM to specifically pick the exact form and execute the process. For example
<form id="form1"> blah blah </form>
<form id="form2"> blah blah </form>
assign name to form tag,
<form name="frm1" action="form action"></form>
<form name="frm2" action="form action"></form>
to submit first form
document.frm1.submit();
to submit second form
document.frm2.submit();
I have tried all above mentioned answers but I was unable to succeed, but after that I removed the action attribute of the forms and then used the following code at the time of submission of each form
document.uploadFormName.action="../../../../../xyz/services/abc/fileUpload";
document.uploadFormName.submit();
Then it was not submitting all the forms on the page.
It is a kind of work around but a good one ;).
I am developing a web site in it I am using Google search bar, code I used
<form id="form_body" method="get" action="http://www.google.com /search">
<p>Google Search<input type="text" name="q"/>
<input type="submit" value="Search"/></p>
</form>
Now the problem is I want the key words entered for search to be saved I tried using this code
<form id="form_body" method="get" action="http://www.google.com/search">
<p>Google Search<input type="text" name="q"/>
<input type="button" onclick="save1()" value="Search"/></p>
</form>
where save1 is my javascript function which does not work(not at all working)
When you hook the click event of a submit button in a form, it will not fire/stop firing when the page unloads. Instead, hook the submit event to ensure your code fires before the page is ever submitted.
<form id="form_body" method="get" action="http://www.google.com/search" onsubmit="return save1();">
<p>Google Search<input type="text" name="q"/>
<input type="submit" value="Search"/></p>
Create an ajax call on the submit of the button that pulls in the text input value and then sends it to a php file to store the value in a database.
I have to place a link to a webpage through an <a> .The webpage link contains some request parameters and I don't want to send it across through the browser directly (meaning I want to use something similar to POST method of FORM).
<a href="www.abc.do?a=0&b=1&c=1>abc</a>
I am using this inside a jsp page and is there a way to post it through javascript or any other way where I don't pass the request parameters through the url?
You can use links to submit hidden forms, if that's what you're asking.
Click Me
<form id="secretData" method="post" action="foo.php" style="display:none">
<input type="hidden" name="foo" value="bar" />
</form>
<script type="text/javascript">
function submitForm(formID) {
document.getElementById(formID).submit();
}
</script>
Use the form tag with hidden fields to submit your data:
GO !!
<form name="frm" action="www.abc.do" method="post">
<input type="hidden" value="your-data" name="whatever">
<input type="hidden" value="your-data" name="whatever">
<input type="hidden" value="your-data" name="whatever">
</form>
You can use AJAX for that. For example, with jQuery, you can use the post function:
clickMe
<script type="text/javascript">
$(function(){
$("#myMagicLink").click(function(){
$.post("www.abc.do", {"a":0, "b":1, "c":1});
});
});