I have made a html form to take inputs from user. My sample code is given below:
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="what" value="faculty" />
<div class="form-item">
<div class="form-left">
<label><big>Name:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="facname" id="fac_name" size="20" required >
</div>
</div>
<div class="form-item">
<div class="form-left">
<label><big>Education:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="educn" id="fac_edu" size="20" required >
</div>
</div>
<div id="buttons">
<button class="greenbtn" type="submit" name="btn-upload" value="Add Now" id="add_fac" >Submit</button>
<input class="orangebtn" type="reset" value="Clear" id="clear_fac" />
</div>
</form>
I want to add a feature that, after the submit button being clicked it will be disappeared so that user can't double click on that. Is it possible? How will I do this?
Two easiest ways would either be with javascript and have
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data" onsubmit="hideSubmit()">
<script>
function hideSubmit(){
document.getElementById("buttons").style.display = "none";
}
</script>
or jquery
<script>
$(function(){
$('.form-main').on('submit', function(){
$('#buttons').hide();
});
});
</script>
after the submit button being clicked it will be disappeared so that user can't double click on that.
You've literally described how to do it.
document.getElementById('test-button').addEventListener('click', function () {
this.remove()
})
<button id="test-button">Click me!</button>
I suggest reading about setting up events.
Related
Removing div element automatically after appending it on click. It
removes the element after it adds or appends inside form tag.
$('.add').on('click', function() {
$('#testAdd').append('<div class="form-group add-input"> <input type="text" placeholder="add someting..."> <button class="add">+</button> </div>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testAdd" action="" method="POST">
<div class="form-group add-input">
<input type="text" placeholder="add someting...">
<button class="add">+</button>
</div>
</form>
After clicking on the + button the <div> element is appended to the form as expected. But then the form is submitted to the server. When the page reloads the html of the page is rendered again and thus the appended <div> element dissappears.
You can change the type of the button like this
<button type="button" class="add">+</button>
and add another button for sumitting the form.
add type="button" to existing button tag and work well and not submitting while clicking on it.
$('.add').on('click', function() {
$('#testAdd').append('<div class="form-group add-input"> <input type="text" placeholder="add someting..."> <button type="button" class="add">+</button> </div>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testAdd" action="" method="POST">
<div class="form-group add-input">
<input type="text" placeholder="add someting...">
<button type="button" class="add">+</button>
</div>
</form>
So basically, i'm trying to make a button "Call me back" so when you click it, it disappears and shows other two hiddens fields.
http://investinlisbon.ml/
What im trying to change is that little form on top of that page where it has 2 fields and a call me back button.
try jquery show / hide functions like
$("#div_to_show").show();
$("#div_to_hide").hide();
This is how you should approach your problem:
HTML
<div id="div1"> </div>
<div id="div2" style="display:none"> </div>
<div id="div3" style="display:none"> </div>
JS
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "inline-block";
document.getElementById("div3").style.display = "inline-block";
Another one, one liner:
HTML
<div id="fields" style="display:none">
<input type="text" name="name" placeholder="Name"/>
<input type="text" name="tel" placeholder="Telephonoe"/>
</div>
<button type="button" id="contact-btn" onClick="toggleFields()">
Contact me
</button>
JS
function toggleFields(){
$('#fields, #contact-btn').toggle();
}
Example JSFiddle
in your View
<div style="display: none;" class="hideDiv">
<input type="hidden" name="_wpcf7" value="1101">
<input type="hidden" name="_wpcf7_version" value="4.4">
<input type="hidden" name="_wpcf7_locale" value="pt_PT">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1101-o1">
<input type="hidden" name="_wpnonce" value="7b5f59556f">
</div>
and jquery
$(document).on('click','.send-cmb',function(e){
e.preventDefault();
$('.hideDiv').css('display:block');
});
Try this
html code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<input type="text" name="text-574" value="" size="40" class="txt" placeholder="Name">
<input type="text" name="text-574" value="" size="40" class="txt" placeholder="Telephone">
<button type="button" id="callback" >
Call Back
</button>
js code
jQuery( document ).ready(function() {
jQuery(".txt").hide();
jQuery("#callback").click(function(){
jQuery(".txt").show();
jQuery("#callback").hide();
});
});
You can view demo here
HTML
<button type="submit" name="save" id="btn"> ok </button>
<div id="acc">
<h3>First header</h3>
<form name="form1" id="id_form1" method="post">
<div><input type="text" id="firstname" name="firstname" required></div>
</form>
<h3>Second header</h3>
<form name="form2" id="id_form2" method="post">
<div><input type="text" id="lastname" name="lastname" required></div>
</form>
<h3>Third header</h3>
<form name="form3" id="id_form3" method="post">
<div><input type="text" id="address" name="address" required></div>
<button type="submit" name="create"> create </button>
</form>
</div>
JS
$(document).ready(function() {
$( "#acc" ).accordion({
collapsible: true,
heightStyle: "content",
active: false
});
$('#btn').click(function() {
$('#id_form1').submit();
});
$('#id_form1').validate({
ignore: "",
invalidHandler: function(event, validator) {
alert('ttt');
},
});
});
Please visit the link jsfiddle
I got there 3 headers (panels). The first two I would like to validate and submit as one after pressing the OK button, but I can't put them into the one form in the html code because of the accordion header <h3>. The third panel is just for this example (doesn't need to be coded now), it's separate one. As you noticed the code under the above link works only with one form for validation.
Put hidden inputs in one form, and have the OK button copy the values from the inputs of the second form to them after validating.
<button type="submit" name="save" id="btn"> ok </button>
<div id="acc">
<h3>First header</h3>
<form name="form1" id="id_form1" method="post">
<div><input type="text" id="firstname" name="firstname" required></div>
<input type="hidden" id="hidden_lastname" name="lastname">
</form>
<h3>Second header</h3>
<form name="form2" id="id_form2" method="post">
<div><input type="text" id="lastname" name="lastname" required></div>
</form>
<h3>Third header</h3>
<form name="form3" id="id_form3" method="post">
<div><input type="text" id="address" name="address" required></div>
<button type="submit" name="create"> create </button>
</form>
</div>
jQuery:
$("#btn").click(function() {
if ($("#id_form1").valid() && $("#id_form2").valid()) {
$("#id_form2 input").each(function() {
$("#id_form1 #hidden_" + this.id).value(this.value);
});
$("#id_form1").submit();
}
});
Write your own handler for the submit. In the handler you can validate your data, get the values from the forms (look at jQuery serialize), then use jQuery's post to send the data. Something like this (not real code, but should get you there)
$("#btn").click(function(){
if( input1.isValid() && input2.isValid){
var formInputSerial = $('form').serialize();
$.post("http://whereToSendData", formInputSerial, callbackFunction(ifNeeded))
}
}
You will have to implement the the validation checks for the input. You may need to add a common to class to the input then use $('.commonClass').serialize(); I'm not sure how the above will work with multiple forms.
No matter what I try I cannot get this to submit my search form
<div id="search_bar_container" style="z-index:99999">
<div class="container">
<form action="tour-list-search-results.php" method="post" name="search_2" id="search_2">
<div class="search_bar">
<div class="nav-searchfield-outer">
<input type="text" autocomplete="off" name="field-keywords" placeholder="Type your search terms ...." id="twotabsearchtextbox">
</div>
<div class="nav-submit-button">
<input type="submit" onclick="this.form.submit();" name="button" id="button" class="nav-submit-input" value="Submit">
</div>
</div>
<!-- End search bar-->
</div>
</div>
<!-- /search_bar-->
</form>
</div>
This seems to work fine, BUT your HTML looks invalid. The form is not nested correctly and you have an extra tag.
Apparently, you just need to tidy up your HTML and the form will submit when you click the button.
$("form").submit(function( event ) {
alert( "Form submitted" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search_bar_container" style="z-index:99999">
<div class="container">
<form action="tour-list-search-results.php" method="post" name="search_2" id="search_2">
<div class="search_bar">
<div class="nav-searchfield-outer">
<input type="text" autocomplete="off" name="field-keywords" placeholder="Type your search terms ...." id="twotabsearchtextbox" />
</div>
<div class="nav-submit-button">
<input type="submit" onclick="this.form.submit();" name="button" id="button" class="nav-submit-input" value="Submit" />
</div>
</div>
<!-- End search bar-->
</form>
</div>
<!-- /search_bar-->
</div>
I have formatted your HTML correctly and as you can se, the form submits on click of the button.
Fiddle
How can I get the input elements form a certain div inside a form , not from all divs?
I want to use JAVASCRIPT not JQUERY.
I tried to use like this discountForm.oldDivIdName.elements[i].value.length, but its not working.
UPDATE:
I have a form like this,
<form action="action.php" method="post">
<div id='div1'>
<input type="text" id="id[]" />
</div>
<div id='div2'>
<input type="text" id="id[]" />
</div>
<input type="submit" name="submit" />
</form>
Both text fields id are named the same and I want to get the value of the text field of div named div1 and not from div2, how can I do that.
Any help?
If the input elements have id's, you can do something like
var value = document.getElementById('div1').children[0].value;
where you have
<form action="action.php" method="post">
<div id="div1">
<input type="text" id="id" />
<input type="submit" name="submit" />
</div>
</form>