Change URL before form submit - javascript

HTML
<form id="form" method="post" action="/create_test1/54ae2be44a1bfef3138b4569">
.
.
.
<input type="button" id="export" value="Export">
</form>
jQuery
$("#export").click(function(){
url = $("#form").attr("action");
url = url.replace("create_test1","export_test1"); // This is OK
$('#form').attr('action', url).submit(); //Here form is not submited
});
Actual URL : /create_test1/54ae2be44a1bfef3138b4569
I want URL : /export_test1/54ae2be44a1bfef3138b4569
My Question is How to submit form after changing action?

$("#export").click(function()
{
$('#form').attr('action', '/export_test1/54ae2be44a1bfef3138b4569');
});

Related

Fill Action When Site open

I need a help to Fill the Action Filed For Example ("2page") when i open the Website
What i want
<form name="AGXBFS" id="AGXBFS" action="2page" method="post" autocomplete="off">
What i Got is :
<form name="AGXBFS" id="AGXBFS" action="" method="post" autocomplete="off">
what i tried
$('#AGXBFS').submit(function (event)
{
var action = 'appointment.php';
// compute action here...
$(this).attr('action', action);
});
this work but only when i click i want it to change without Clicking any Ideas how to do that With Java/Jquery

JQuery two forms toggled, show correct form on submit

I have two forms being toggled as shown below. What I need to figure out, is how to show the correct form once it has been submitted and page refreshed. It will default to the lookup_form only currently. I have been browsing the internet for answers, but am not finding any good examples.
<div class="lookup_form">
<form method="POST" action="" id="lookup_form"></form>
</div>
<div class="nolookup_form">
<form method="POST" action="" id="nolookup_form"></form>
</div>
<a href="#" class="show"> //Firing off the script
<script>
jQuery(document).ready(function($) {
$(".nolookup_form").hide();
$(".show").click(function(){
$(".lookup_form, .nolookup_form").slideToggle("slow, linear");
});
});
</script>
Essentially I need to always show after refresh the actual form that was submitted.
I guess that you know what form you should show at the backend that produces your page, you can just pass that to javascript
<script>
var showForm2 = <?php echo $shouldShow2ndForm?'true':'false'; ?>;
if( showForm2 ){
//hide form1 and show form2
} else {
//hide form2 and show form1
}
</script>
You may use cookie or LocalStorage:
before submitting the form you can save the form id for example with:
localStorage.setItem("formId", "lookup_form");
and on dom ready you can test the value of this:
localStorage.getItem("formId")
An example:
jQuery(document).ready(function($) {
//
// on DOM Ready get formId from localstorage
//
var formId = localStorage.getItem("formId");
if (formId == null) { // never set: set the default value
formId = 'nolookup_form';
localStorage.setItem("formId", formId);
}
//
// Hide the other form
//
$("form:not(#" + formId + ")").hide();
//
// on form submit save in localstorage current form id
//
$('form').on('submit', function(e) {
e.preventDefault();
localStorage.setItem("formId", this.id);
});
$("#show").on('click', function(e) {
$("#lookup_form, #nolookup_form").slideToggle("slow, linear");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="" id="lookup_form">
<p>First form</p>
<button type="submit">Submit lookup</button>
</form>
<form method="POST" action="" id="nolookup_form">
<p>Second form</p>
<button type="submit">Submit nolookup</button>
</form>
<button type="button" id="show">Show</button>

Adding css when form submitted javascript

I want to add css to a class when my form is submitted because it take long time, but nothing change! here is my form
<form method="post" class="std" enctype="multipart/form-data">
<button type="submit" name="submitAddProduct" class="btn btn-default button button-medium">
<span>Garder<i class="icon-chevron-right right"></i></span>
</button>
</form>
the div I want to change :
<div id="circlecontainer"></div>
and my script :
$('form.std').submit(function(e){
$( "#circlecontainer" ).removeClass('whatever').addClass('whatever');
});
I want the button to be disabled too when the submit goes on?
Try this.
<form id="myForm" method="post" class="std" enctype="multipart/form-data">
<button type="submit" id="submitBtn" name="submitAddProduct" class="btn btn-default button button-medium">
<span>Garder<i class="icon-chevron-right right"></i></span>
</button>
</form>
$('#myForm').submit(function(e){
$("#circlecontainer").addClass('whatever');
$("#submitBtn").prop('disabled', true).html('Please Wait...');
});
Reason 1. you will need e.preventDefault(), otherwise submit the form will refresh the whole page
Reason 2. Since reason 1, You will need to use ajax to post the form data instead of using default form event, please refer to this question for how to set it up in your submit function jQuery AJAX submit form
<script type="text/javascript">
$( "#circlecontainer" ).removeClass('whatever')
var frm = $('.std');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: //'your post url',
data: frm.serialize(),
success: function (data) {
$("#circlecontainer").addClass('whatever');
}
});
ev.preventDefault();
});
</script>
Simple add a listener to your button and change the class attribute
var divClassChanger=function()
{
var div=document.getElementByID("circlecontainer");
div.setAttribute("class", "someotherclass");
document.getElementById("yourBtnId").disabled = true;
};
document.getElementById("yourBtnId").addEventListener("click",divClassChanger);
you only need a id in you button
You really need to consider using Ajax request as this will definitely solve your problem. As you have it
<form method="post" class="std" enctype="multipart/form-data">
<button type="submit" name="submitAddProduct" class="btn btn-default button button-medium">
<span>Garder<i class="icon-chevron-right right"></i></span>
</button>
</form>
AJAX Request Script
$('form').on("submit", function(e) {
e.preventDefault();
var $form = $(this), url = $form.attr('action');//url could be your PHP script
var posting = $.post(url, {$('yourinputs').val()});
posting.done(function(data){
$('.circlecontainer').removeClass('yourclass');
});
});
This should work.

Submit image via AjaxForm and perform callback

I have the following function
(inside onchange; console.log works well)
$("#prof_picture").ajaxForm(
{
target: '#preview',
success: function(response){
console.log("called");
}
});
The success function is not called and therefore no feedback is received. Feedback is echoed in the following way "{message:"success",action:"something",data:Array}". Can someone help me please? Thank you very much
Here is the form
<form id="profile_picture_upload" enctype="multipart/form-data" action="profile/uploadProfilePicture.php" method="post" name="prof_picture">
<input id="profpic1" style="display:none;" name="profile_picture" type="file">
<a id="change_profile_picture" class="profile_option" onclick="$('#profpic1').click();">Upload</a>
</form>
As Quentin mentioned, the form isn't submitting.
Bind the ajax to the correct form ID instead of the name of the form
$("#profile_picture_upload").ajaxForm(
{
target: '#preview',
success: function(response){
console.log("called");
}
});
And use this html to submit the form
<form id="profile_picture_upload" enctype="multipart/form-data" action="profile/uploadProfilePicture.php" method="post" name="prof_picture">
<input id="profpic1" style="display:none;" name="profile_picture" type="file" onchange="$('#profile_picture_upload').submit();">
<a id="change_profile_picture" class="profile_option" onclick="$('#profpic1').click();">Upload</a>
</form>
though it'll click through to the next page if you do this, so you probably want to add the return false to prevent it from leaving this page.

How can I apply changes to the web after the POST method?

Any changes that I want does not take effect because the page refreshes itself whenever I click a button.
With the POST method on it. This the scenario, I clicked the button, then changes take effect like editing the inner html of a division, after that, the page refreshes itself that is why all the changes disappears. Please help me if there are any ways that changes can be made after the page refreshes.
This is my code. Can you tell me how to use ajax on it?
<form name="myForm" method="POST">
<button style="border-radius:0px;" type="submit" name="tabExe" id="tabExe" href="#Exec" onClick="myFunction('Executive');" class="btn btn-primary">Executive Room>
</button>
</form>
<script>
function myFunction(str){
if(document.getElementById(str) == tabExe){
document.getElementById('room1').innerHTML = "Room 101";
}
}
</script>
Consider this code of Javascript ajax as you need:
function submit()
{
var xhReq = new XMLHttpRequest();
xhReq.open("POST", "yourpage.phtml?param1=2&param2=10", false);
xhReq.send(null);
var serverResponse = xhReq.responseText;
alert(serverResponse);
return false;
}
HTML onsubmit method:
<form name="myForm" method="POST" onsubmit="return submit()">
When u clicked on submit button . form submitted. But when u use button as type, It will not refresh.
remove type ="submit". use type type ="button"
add return false; in onclick function. So it change bydefault property.
<form name="myForm" method="POST">
<button style="border-radius:0px;" name="tabExe" id="tabExe" href="#Exec"
onClick="myFunction('Executive'); return false;" class="btn btn-primary">
Executive Room>
</button>
</form>
<script>
function myFunction(str){
alert();
if(document.getElementById(str) == tabExe){
document.getElementById('room1').innerHTML = "Room 101";
}
}
</script>

Categories