Clicking a div instead of hitting submit and then passing argument - javascript

I've got a form with a submit button on a form that opens up a nested php page within a div on my page.
All I want to do is hide the submit button, and instead replace this with clicking one of the divs and thus running a script called showBiog(key), which then passes key to the form for submitting.... help... ;-)
<script type="text/javascript">
$(function() {
// Handler for .ready() called.
$('#SubmitForm').submit(function( event ) {
$.ajax({
url: 'test2.php',
type: 'POST',
dataType: 'html',
data: $('#SubmitForm').serialize(),
success: function(content)
{
$("#DisplayDiv").html(content);
}
});
event.preventDefault();
});
});
</script>
HTML is:
<form id="SubmitForm" method="post">
<div id="SubmitDiv" style="background-color:black;">
<button type="submit" class="btnSubmit">Submit</button>
</div>
</form>
<div class="test" onClick="showBiog(1)"><p>1</p></div>
<div class="test" onClick="showBiog(2)"><p>2</p></div>
<div class="test" onClick="showBiog(3)"><p>3</p></div>
<div class="test" onClick="showBiog(4)"><p>4</p></div>

Just remove the button element, and do something like:
$('#myspecificdiv').on('click', function() {
$('#SubmitForm').submit();
}

You can hide the submit button and perform its click action in showBiog(key); just like
function showBiog(key){
//Your code
$('#submit_btn_id').click();
}

please put the javascript on document.ready
<script type="text/javascript">
$(document).ready(function() {
$('.class name').on('click',function() {
$('#SubmitForm').submit();
});
});
</script>

Related

Trigger jQuery function on page load

I've created some jQuery that take a value from a one of several buttons and then via ajax loads the corresponding custom post types. Each button represents a category that the posts are associated with.
This is as follows:
jQuery(function ($){
jQuery('.btn').on('click', function(e){
e.preventDefault();
$.ajax({
url:'/wp-admin/admin-ajax.php',
data:('categoryfilter=' + $(this).val() + '&action=projects'), //filter.serialize(),
type:'POST',
beforeSend:function(xhr){
},
success:function(data){
$('#somediv').first().after(data);
}
});
return false;
});
});
The html for the "filter" buttons is:
<div id="myBtnContainer">
<form method="POST" id="filter">
<button class="btn active" value="all"> Show all</button>
<button class="btn" value='Business' />Business</button>
<button class="btn" value="Charity"> Charity</button>
<button class="btn" value="education-research"> Education / Research</button>
<button class="btn" value="Heritage"> Heritage</button>
<button class="btn" value="health-environment"> Health / Environment</button>
</form>
</div>
This all works great, however I need to load some content when the page loads. No records/posts are displayed until the ajax is fired on the click of one of the filter buttons.
I've tried giving the onclick function a name but, I can't call it - eg:
jQuery(document).ready(function($){
//jQuery(function ($){
alert ("test text");
loadProjects();
jQuery('.btn').on('click', function loadProjects(e){
//jQuery('.btn').on('click', function(e){
How can I convert my current code to make it so that I can load some default content on page load?
You should be able to trigger the click event callback by doing:
jQuery(function ($){
jQuery('.btn').on('click', function(e){
e.preventDefault();
$.ajax({
url:'/wp-admin/admin-ajax.php',
data:('categoryfilter=' + $(this).val() + '&action=projects'), //filter.serialize(),
type:'POST',
beforeSend:function(xhr){
},
success:function(data){
$('#somediv').first().after(data);
}
});
return false;
});
//trigger first btn's click event
$('#filter .btn.active').trigger('click');
});

Jquery: html, text and append functions are not working

I have a simple code to make requisition by ajax.
<script type="text/javascript" src="{{ url_for('static', filename='jquery-2.2.4.min.js') }}"></script>
<script type="text/javascript">
$(document).ready(function() {
$('form').submit(function (e) {
var url = "{{ url_for('ajaxPage') }}";
$.ajax({
type: "POST",
url: url,
data: $('form').serialize(),
dataType:'json',
success: function (data) {
var text= "Anything here!";
$('div.panel-body').html(text); //Not Working
$('div.panel-body').text(text); //Not Working
$('div.panel-body').append(text); //Not Working
alert(text); //Working
console.log(text); //Working
}
});
e.preventDefault();
});
});
</script>
Here body layout:
<body>
<div class="panel-body"> // Waiting content </div>
</body>
Ajax is working perfectly, I can view my array using console.log, alert, but I can not use HTML(), TEXT() and APPEND(). Where is my mistake? I already change JS file and I have other page with the same code and it works fine!
Update
My Network page
Updating body page
<div class="input-group">
<form method="POST" name='form'>
<input type="text" name="inputxt" class="form-control" size="20">
<button type="submit">Search</button>
</form>
</div>
<div class="panel-body">
</div>
I recreated this page and the problem was a css inside DIV.

jQuery- Button not working after loading content

I'm using Codeigniter and having trouble on my button after I load my page using load function on jQuery.
reg_form.php loads first, then after saving data, it will load the page-content class to see the list of data but when I'm trying to go to reg_form.php again using the button, nothing happens.
JS is not working on the current loaded page
reg_form.php
<html>
<body>
<div class="page-content">
<label>Name:</label><br>
<input type="text" id="name">
<button id="save"></button>
</div>
</body>
</html>
reg_list.php
<html>
<body>
<div class="page-content">
<button id="reg_form"></button>
</div>
</body>
</html>
reg.js
$('#reg_form').click(function(){
$(".page-content").load('reg_form');
});
$('#save').click(function(){
var name = $('#ame').val();
$.ajax({
url:"gatepass/save",
method: 'POST',
data:{
name:name
},
success:function(data){
$(".page-content").load('reg_list');
}
});
});
Use below mentioned solution.
$(document).on('click','#reg_form',function(){
$(".page-content").load('reg_form');
});
$(document).on('click','#save',function(){
var name = $('#ame').val();
$.ajax({
url:"gatepass/save",
method: 'POST',
data:{
name:name
},
success:function(data){
$(".page-container").load('reg_list');
}
});
});
This will help you.
Tabs and events in the content that you add after the DOM loads should be defined using the .on() function as shown below use of .delegate() has been discontinued:
$(document).on(events,selector,data,eventhandler);
If for example you add the button below into the div after DOM loads and you want the button to say 'You clicked me' when clicked, the code would be:
$(function() {
$(document).on('click', '#justClickMe', function(e) {
alert('You clicked me');
})
$('#content').append('<button id="justClickMe">Just Click Me</button>');
});
<div id="content"><h3>New Content</h3></div>

Hyperform addClass upon validation

I want to activate a loader class upon form validation using Hyperform.
It is not working.
When the user presses the create button:
The form should be validated.
If the form is valid it executes the loader by adding the is-active class that I've made.
I am using Hyperform because I need to validate the form on mobile Safari.
<!-- HTML -->
<div id="loader" class="loader loader-default" data-text="In Process"></div>
<button id="send" name="send" class="btn btn-create">create</button>
<script>
$("#send").click(function(){
$.ajax({url: "demo_test.txt", success: function(result){
console.log( "Succesful Request!" );
$("#loader").addClass("is-active");
}});
</script>
After validation with Hyperform:
//Script
<script>
input.addEventListener('valid', event => {
var d = document.getElementById("loader");
d.className ="loader loader-default";
});
</script>

simple append issue with jquery

I have a simple question. My JS code is like this, but when I try to add a new element or content to the <div>, it comes up then goes up quickly. I don't know why.
How can I avoid this?
<head>
$(document).ready(function () {
$('#mybtn').click(function () {
$('#main').append('<button id ="mm" onclick="myfun()">generate code my fun.</button>');
});
});
</head>
<body>
<form id="form1" runat="server">
<button id ="mybtn">generate code</button>
<div id="main"></div>
</form>
</body>
You should stop the button from Submitting the form by setting the button's type to be that of button.
Example :
<button type="button" id="mybtn">generate code</button>
The default type for a <button> element is submit. Which is causing your <FORM> tag to submit.
Try this:
$('#mybtn').click(function (e) {
e.preventDefault();
$('#main').append('<button id ="mm" onclick="myfun()">
generate code my fun </button>');
return false;
});
Try with:
$('#mybtn').click(function (event) {
event.preventDefault();
$('#main').append('<button id ="mm" onclick="myfun()"> generate code my fun </button>');
});
preventDefault : If this method is called, the default action of the event will not be triggered.

Categories

Resources