I have a form which contains a submit button. When I click this submit button I want to go to another div with id home. This is what I am doing now (which is not working):
<input type="submit" class="submit" href="#home" name="action" value="Redirect"/>
For example if I had:
<div id="home"><ul><li>Hello World</li></ul></div>
<input type="submit" class="submit" href="#home" name="action" value="Redirect"/>
This won't work. How can I do this?
You need to have the action of the form be '#home'. Then add a named anchor above the home div.
<html>
<body>
<a name="home"></a>
<div style="height:1500px;">
</div>
<form action="#home">
<input type="submit" value="Home">
</form>
</body>
</html>
href is not a valid attribute for an input element. Try this:
<input type="submit" class="submit" onclick="location.href = '#home'" name="action" value="Redirect"/>
If this is inside of a form, it will submit the form unless you have something preventing that from happening.
just u mention the redirect page in one function.... then that function name calling via onclcik="function_name";
for eg:
function_name
{
some code .......
location.href = 'home.html';
}
<input type="button" onclick="function_name">
your code..........
Related
I am trying to create multiple forms which have two buttons, each will submit the form to different script, one via ajax and second one will just submit the form.
<?php foreach($objects as $object) : ?>
<div class="card-body">
<form id="edit-form" action="#" method="POST">
<input name="subject" value="<?=$object['subject']?>" type="text" id="title" class="input-xxlarge">
<textarea id="content" name="content" rows="25"><?=$object['content']?></textarea>
<button type="button" id="send-button" class="btn btn-primary">Send</button>
<input type="submit" id="submit-button" value="Submit"/>
</form>
</div>
<?php endforeach; ?>
First I am trying to get the current form, but I have problem with that. console.log shows something only on the first form, if I click on the buttons from other forms then It will do nothing.
$('#send-button').on('click', function(e) {
e.defaultPrevented;
$form = $(this);
$url = $form.attr('action');
$data = $form.serialize(); console.log($form);
console.log($url);
});
Is it because my button has same ID for every form ?
You shouln't use ID's multiple times on the same page. Try to use a class for that case. Also as stated in the comments use e.preventDefault(); to stop the event.
$(this) will result in the #send-button beeing targeted. To access the form you need to find the closest form element like this:
$form = $(this).closest('form');
html:
<form method="POST" action="#">
<input type="text">
<button type="button">send</button>
<input type="submit" value="submit" />
</form>
<form method="POST" action="#">
<input type="text">
<button type="button">send</button>
<input type="submit" value="submit" />
</form>
js:
$("form").each(function() {
var form = this;
$(form).find('button').on('click', function(e) {
e.preventDefault();
console.log(form);
console.log(this);
})
});
this will add events on every form you have on your page, button will submit form via script and submit will just submit it. also here's a fiddle to play with
anyone can help i have a form, i want do something like this :
http://criminalcase.ha-lab.com/
there is a boutom "Click Here Before Submit", when you click on it you are redirected to the same page(*url dont change), and you can see the bottom submit (*no click here for submit). Thank you in advance for any help ^^
<form method="get" action="?">
id : <input name="id" / size="45"/><br>
Sig : <input name="sig" <br>
<input type="submit" name="submit" value="==>click here befor submit<==" id="submit" />
</form>
what i want is when i click on click here befor submit it will redirect me to to do same page but with boutom submit
Something like this? It's really difficult understand you without code.
$("#showSubmit").click(function(){
$(this).hide();
$("#submitButton").show();
})
.hidden{ display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label>input</label><input type="text"/>
<input type="submit" class="hidden" id="submitButton" value="submit" />
Click here before submit
</form>
I am also trying to understand What Dr House is asking, I would like to slightly modify what JuaRoAI has done, and do something like this, try it and let us know:
$("#showSubmit").click(function(){
$(this).hide();
$("#submitButton").show();
})
.hidden{ display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label>input</label><input type="text"/>
<input type="submit" class="hidden" id="submitButton" value="submit" />
Click here before submit
</form>
I'm having some trouble getting the following code to work. I have a form that has several buttons on it. The first button has a class of ButtonAdditionalDelete. When it is clicked, it should then inspect the object for a data tag and then set the value of the tag to a hidden variable. Finally, it should then click the button with the id of saveAnswerButton.
However, when the form is submitted back to the server, the action variable from the button is not present. Any ideas?
<form action="/Area/Controller/Action/id?otherField=value" method="post">
#Html.HiddenFor(model => Model.SelectedSequenceNumber)
<button class="ButtonAdditionalDelete" data-sequence-number="1">Delete</button>
<button name="action" value="AnswerEdit" id="saveButton">Save</button>
<button name="action" value="AnswerEditAndAdd">Save and Add New</button>
<button name="action" value="AnswerEditAndReturn">Save and Return</button>
</form>
<script type="text/javascript">
$(".ButtonAdditionalDelete").on("click", function () {
var sequenceNumber = $(this).data("sequenceNumber");
$("#SelectedSequenceNumber").val(sequenceNumber);
$("#saveButton").click();
});
</script>
Shouldn't
$("#saveButton").click();
supposed to be
$("#saveAnswerButton").click();
that's a security measure. the name and value of a button will only be sent if it's a human click.
you'll have to keep a hidden input called action, then change it's value just before simulating the form submit:
<form method="post">
<input id="hiddenAction" name="action" type="hidden" value="">
<button class="ButtonAdditionalDelete" data-sequence-number="1">Delete</button>
<button name="action" value="AnswerEdit" id="saveAnswerButton">Save</button>
<button name="action" value="AnswerEditAndAdd">Save and Add New</button>
<button name="action" value="AnswerEditAndReturn">Save and Return</button>
</form>
<script type="text/javascript">
$(".ButtonAdditionalDelete").on("click", function () {
var sequenceNumber = $(this).data("sequenceNumber");
$("#SelectedSequenceNumber").val(sequenceNumber);
$("#hiddenAction").val($("#saveAnswerButton").val());
$("#saveAnswerButton").click();
});
</script>
Well, you are using sequenceNumber but your attribute is called sequence-number.
I am trying to disable a button on click, as well as change the text of the button. here is my code:
<input type="submit" value="Register" name="submit" id="submit" onClick="javascript:replaceButtonText('submit', 'Please wait...'); document.form1.submit.disabled=true;">
What is happening, is the button gets disabled, and the text changes, but the form does not do anything (submit). what am I doing wrong?
This works:
<html>
<body>
<form name="form1" method="post" action="myaction">
<input type="text" value="text1"/>
<input type="submit" value="Register" name="submit" id="submit"
onclick="javascript: replaceButtonText('submit1', 'Please wait...'); document.form1.submit.disabled=true; return true; ">
</form>
</body>
</html>
Form controls with a name are made available as named properties of the form they are in using their name. So:
document.form1.submit
refers to the button, not the submit method.
Writing:
< ... onclick="javascript:..." ...>
means that "javascript" is treated as a useless label, just don't do it. If you want the button to become disabled and change its label when the form is submitted, then use something like:
<form>
<input name=foo value=bar>
<input type="submit" onclick="
this.value='Please wait...';
this.disabled = true;
var theForm = this.form;
window.setTimeout(function(){theForm.submit();},1);
">
</form>
and let the form submit normally.
Of course the function in the onclick attribute should be a function call rather than a slab of code, but you get the idea.
I have two buttons, and I want to apply one action to another. For example.
<form>
<input type="submit" />
</form>
<input type="submit" />
I want to make the second button submit the form, despite being outside of the form.
You should make them of type button, and give your form an id.
Markup:
<form id="myForm">
<---STUFF---->
<input type='button' id='otherButton'>
</form>
<input type='button' id='someButton'>
jQuery:
$('#someButton').click(function() { $('#myForm').submit(); });
$(':input:last').click(function()
{
$('form').submit();
});
// enable form submit on the second <input>
$('input[type=submit]').click(function(){
$('form').submit();
});
// disable the inner <input>
$('form input[type=submit]').click(function(){
return false;
});
Something like this should do your trick.
If you want the second button to do everything the first can do (not just submit), you can try something like this:
html
<form>
<input id="insideButton" type="submit" />
</form>
<input id="outsideButton" type="submit" />
jsJQUERY
$("#outsideButton").click(function() {
$("#insideButton").trigger("click");
});
you can using jQuery $("#test").click() if you have jQuery instead of the document... stuff below or the way below will work without jQuery
<form name="testForm1">
<input type="submit" id="test" />
</form>
<!-- use this when not in a form: -->
<button onclick="button1_click();" id="button1"></button>
In your head tag
<script type="text/javascript">
function button1_click(){
document.forms.testForm1.submit();
}
</script>
Changed for the users that put performance under clean code