I have a form that I want to submit when a radio button is selected. I already tried some methods to make it work, but it doesn't.
My form is something like this (just one radio option for ilustration, but the original one has 20 options):
<form action="http://spartanas.com.br/novo/wp-comments-post.php" method="post" id="votoscommentform" class="comment-form">
<div class="anuncio vitrine">
<a href="http://spartanas.com.br/novo/ninasalvattori/">
<div style="position: absolute; width: 172px; height: 285px;" class="fphover"> </div>
<img src="http://spartanas.com.br/novo/wp-content/plugins/nextcellent-gallery-nextgen-legacy/nggshow.php?pid=982" style="width:172px;height:285px">
</a>
<div class="infos">Nina Salvattori<br>Hotéis e Motéis</div>
<div style="text-align:center"><strong>1 Voto</strong><br>
<p><input onchange="this.form.submit();" value="6019" id="6019" name="comment" type="radio"><label for="6019">Votar</label></p></div></div>
<p class="form-submit">
<input name="submit" id="votarcomentform" value="Votar" type="submit">
<input name="comment_post_ID" value="6183" id="comment_post_ID" type="hidden">
<input name="comment_parent" id="comment_parent" value="0" type="hidden">
</p>
<input id="_wp_unfiltered_html_comment_disabled" name="_wp_unfiltered_html_comment" value="f33d177e03" type="hidden"><script>(function(){if(window===window.parent){document.getElementById('_wp_unfiltered_html_comment_disabled').name='_wp_unfiltered_html_comment';}})();</script>
</form>
As you can see this version I tried to submit it with onchange event, but I've tried with JQuery too:
<script>
jQuery(document).ready(function($) {
$('input[type="radio"][name="comment"]').click(function() {
$(this).closest("form").submit();
});
});
</script>
What am I doing wrong?
you can use change event...
<script>
jQuery(document).ready(function($) {
$('input[type="radio"][name="comment"]').change(function() {
$(this).closest("form").submit();
});
});
</script>
Related
I have an invisible search form that only appears when I click a button.
Is it somehow possible that when you click the button, the cursor is directly available in the search field? The "autofocus" attribute doesn't work here. Is there maybe a script solution?
Search form:
<div id="searchform">
<form action="bla" method="post">
... <input type="text" name="item" id="search" placeholder="bla" autofocus /> ...
</form>
</div>
Button:
<a id="button"></a>
Script:
<script>
$(document).ready(function(){
$('#searchform').hide();
$("#button").click(function(){
$("#searchform").slideToggle("fast");
});
});
</script>
To do what you require call focus() on the input as you make it visible:
$(document).ready(function() {
$("#button").click(function() {
$("#searchform").slideToggle("fast");
$('#search').focus();
});
});
#searchform { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="searchform">
<form action="bla" method="post">
<input type="text" name="item" id="search" placeholder="bla" autofocus /> ...
</form>
</div>
<a id="button">Toggle form</a>
Note that I used CSS to hide the #searchForm element on load instead of JS, as this avoids the element being visible for a fraction of a second before the DOM is ready (aka a FOUC).
I am pretty new to jquery, and was trying to create a search button. I wanted to append some code to a div on button click, but the changes apply for a second, and goes off (Flashes as if the page is loaded again)
My code as below:
HTML:
<body>
<!-- HTML for SEARCH BAR -->
<div id="tfheader">
<form id="tfnewsearch" method="get" action="">
<input type="text" class="tftextinput" name="q" size="21" maxlength="120">
<input type="submit" name="search" id="search" value="search" class="tfbutton">
</form>
<div class="tfclear"></div>
</div>
<div id="container" class="cntnr">
<p>My text here</p>
</div>
</body>
Jquery:
jQuery(document).ready(function() {
$("#search").click(function () {
console.log('your message');
$("#container").append('<div><p>Results displayed here</p></div>');
});
});
Both the console log message and div append get applied for a second and then immediately goes off
The page is, in fact, reloading because you are submitting the form by clicking on it (note: this is quite evident since your console clears when you click. Console output typically only clears on reload). If you don't want to submit the form, you could replace it with a regular button:
<input type="button" name="search" id="search" value="search" class="tfbutton">
or prevent the default event from triggering:
$("#search").click(function (e) {
e.preventDefault();
console.log('your message');
$("#container").append('<div><p>Results displayed here</p></div>');
});
Demo:
jQuery(document).ready(function() {
$("#search").click(function(e) {
e.preventDefault();
console.log('your message');
$("#container").append('<div><p>Results displayed here</p></div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!-- HTML for SEARCH BAR -->
<div id="tfheader">
<form id="tfnewsearch" method="get" action="">
<input type="text" class="tftextinput" name="q" size="21" maxlength="120">
<input type="submit" name="search" id="search" value="search" class="tfbutton">
</form>
<div class="tfclear"></div>
</div>
<div id="container" class="cntnr">
<p>My text here</p>
</div>
</body>
Change input type from submit to button.
<input type="button" name="search" id="search" value="search" class="tfbutton">
Here is my problem, when i click the submit button, the textbox doesn't show any value
Is there any mistakes, i am just a newbie
Thank you very much
<form id="form1" name="form1" method="post" >
<p>
<input type="submit" name="setValue" id="setValue" value="submit" onclick="setValue()"/>
</p>
<p>
<label>
<input type="text" name="bbb" id="bbb" />
</label>
</p>
</form>
<script type="text/javascript">
function setValue()
{
document.getElementById('bbb').value="new value here";
}
</script>
The first issue is that you're using the same name for the element as the function, so window.setValue is not the function, but the submit button, and that's an error.
The second issue is that when you hit the submit button, the form is submitted and the page reloads, that's why you wont see a value, you have to prevent the form from submitting.
You could do it with javascript, but the easiest would be to just use a regular button instead of the submit button.
<form id="form1" name="form1" method="post">
<p>
<input type="button" name="set_Value" id="set_Value" value="submit" onclick="setValue()" />
</p>
<p>
<label>
<input type="text" name="bbb" id="bbb" />
</label>
</p>
</form>
<script type="text/javascript">
function setValue() {
document.getElementById('bbb').value = "new value here";
}
</script>
FIDDLE
I was typing the same answer what Adeneo just given, thank you Adeneo.
And user3635102, your <form> was good, you can keep it as it was. Only you need to change <input type="submit"> to <input type="button"> . if you need to submit the form in future you can update your Javascript as follows which will submit form1:
<script>
function setValue() {
document.getElementById('bbb').value = "new value here";
document.getElementById("form1").submit();
}
</script>
<form action="" method="post">
<body>
customer type:<input type="radio" name="customer" value="yes" onclick="return check()" checked="checked"/>yes
<input type="radio" name="customer" value="no" onclick="return check2()" />no
<div id="one">
firts name :<input type="text" name="fname" id="fname" required="required"/>
</div>
<div id="two" style="display:none;">
Party Name<input type="text" name="party_name" id="pname" required="required"/>
</div>
<input type="submit" value="save" name="save" />
</body>
</form>
<script type="text/javascript">
function check()
{
document.getElementById("one").style.display="";
document.getElementById("two").style.display="none";
}
function check2()
{
document.getElementById("one").style.display="none";
document.getElementById("two").style.display="";
}
</script>
</head>
<?php
if(isset($_POST["save"]))
{
header("location: hide_show.php");
}
?>
here at the top are two radio buttons ...when i click on "Yes" radio button Div one shows and div two gets hide....when i click on "no" radio button then div two shows up and one hides ...now i have applied validation in both the textboxes so suppose if have choosen yes div one shows up and when i click submit button ...it doesnt get submitted because i have applied validation in div named two....valiadtion is also necessary...but is taking both div's validation at the submit time...plz suggest some way for this
Try style.display="block" rather
function check()
{
document.getElementById("one").style.display="block";
document.getElementById("two").style.display="none";
}
function check2()
{
document.getElementById("one").style.display="none";
document.getElementById("two").style.display="block";
}
I'm using Smarty, Php and Jquery for my website. When the page loads the following form should not be displayed. When user clicks on a hyperlink given below it should get dsiplayed and if user wants to hide the form again he will click on the same hyperlink to hide the above form. In short on formload the form shouldn't be displayed and upon clicking on hyperlink the form should be displayed if it is open and should be closed if it is hidden. Can you help me in achieving this using jQuery? Thanks in advance.
<a class="reply" href="{$control_url}modules/enquiries/reply_to_enquiry.php?contact_id={$data.contact_id}&op=reply&from_date={$from_date}&to_date={$to_date}">Reply</a>
<form id="manage_reply_enquiry" name="manage_reply_enquiry" method="post" action="{$control_url}modules/enquiries/reply_to_enquiry.php" enctype="multipart/form-data">
<ul>
<li>
<label>{'To Name'|signal_on_error:$error_msg:'contact_full_name'} :</label>
<div class="form-element">
<input type="text" name="contact_full_name" id="contact_full_name" {if $data.contact_full_name!=''} value="{$data.contact_full_name}" {else} value="{$contact_full_name|capitalize}" {/if} class="">
</div>
</li>
<li>
<label>{'To Email'|signal_on_error:$error_msg:'contact_email_id'} :</label>
<div class="form-element">
<input type="text" name="contact_email_id" id="contact_email_id" {if $data.contact_email_id !=''} value="{$data.contact_email_id}" {else} value="{$contact_email_id}" {/if} class="">
</div>
</li>
<li>
<label>{'Reply'|signal_on_error:$error_msg:'reply'} :</label>
<div class="form-element">
<textarea name="reply" id="reply" cols="60" rows="12">{if $error_msg!=""}{$data.reply}{/if}</textarea>
</div>
</li>
<li>
<label>{'Upload File'|signal_on_error:$error_msg:'reply_file_name'} :</label>
<div class="form-element">
<p class="uploadBtn"><input type="file" id="reply_file_name" name="reply_file_name" /></p>
<div class="input-info"> <span class="required">Note* (Image size should be less then 1 mb and alowed format types are jpg, jpeg, gif, png, JPG, JPEG, GIF, PNG, doc, docx)</span></div>
</div>
</li>
<input type="hidden" name="contact_id" value="{$data.contact_id}" />
<input type="hidden" name="from_date" value="{$from_date}" />
<input type="hidden" name="to_date" value="{$to_date}" />
<input type="hidden" name="op" value="{$op}" />
<li>
<label></label>
<div class="form-element">
<input type="submit" name="submit" id="submit" class="c-btn" value="Send">
<input type="button" name="cancel" id="cancel" class="c-btn" value="Cancel" onclick="javascript:window.location.href='{$control_url}modules/enquiries/view_contact_us.php?page={$page}&from_date={$from_date}&to_date={$to_date}'">
</div>
</li>
</ul>
</form>
What about users without JS enabled? This Fiddle may be a more complete solution:
HTML:
<!-- Have the link anchored to the form so it still makes sense for text-only, speech-readers, or users with JS disabled -->
<a class="reply" href="#manage_reply_enquiry">Reply</a>
<form id="manage_reply_enquiry">
<fieldset>
<legend>I am Legend</legend>
<input type="text" name="field" value="a form field" />
</fieldset>
</form>
JS:
//If JS is enabled add a class so we can hide the form ASAP (and only for JS enabled browsers)
document.documentElement.className = 'js';
//add the jQuery click/show/hide behaviours (or native JS if you prefer):
$(document).ready(function(){
$(".reply").click(function(){
if($("#manage_reply_enquiry").is(":visible")){
$("#manage_reply_enquiry").hide();
} else {
$("#manage_reply_enquiry").show();
}
//don't follow the link (optional, seen as the link is just an anchor)
return false;
});
});
CSS:
.js #manage_reply_enquiry {
display:none; /* hide for JS enabled browsers */
}
#manage_reply_enquiry {
/* form styles here */
}
DEMO
Hide the form initially using css:
#manage_reply_enquiry { display: none; }
Then bind an event handler to a link and toggle the visibility:
$(function(){ //when the DOM is ready
$('a.reply').click(function(){ //when clicking the link
$('#manage_reply_enquiry ').toggle(); //toggles visibility
});
});
<form id="manage_reply_enquiry" name="manage_reply_enquiry" method="post" action="{$control_url}modules/enquiries/reply_to_enquiry.php" enctype="multipart/form-data" style="display: none">
In your script
$(".reply:first").click(function() {
$("#manage_reply_enquiry").toggle();
})
Try:
HTML:
<div id="someId" style="display: none;">
<form id="manage_reply_enquiry" name="manage_reply_enquiry" method="post" action=" {$control_url}modules/enquiries/reply_to_enquiry.php" enctype="multipart/form-data">
//your normal code
</form>
</div>
JAVASCRIPT:
$(document).ready(function(){
$(".reply").click(function(){
if($("#someId").css("display") == "none"){
$("#someId").show();
} else {
$("#someId").hide();
}
});
});
hope that helps!
method hide(), show() and toggle is expensive(performance). Good method is
var el = $("#someId")
if (el.style.display=='none'){
el.style.display='block'
}else{
el.style.display='none'
}
1) you have one request to object!
2) native js is fast
For anyone having the same issue :)
$(document).ready(function() {
$("#manage_reply_enquiry").hide();
$(".reply").on({
click: function(){
$("#manage_reply_enquiry").toggle();
}
});
});