Flask-WTF: Form never submits - javascript

I am trying to submit a form and process the results, but when I press the submit button, form.is_submitted() returns False and request.method returns "GET". Here is my form:
<form name="create" action="" role="form" class="smart-wizard form-horizontal" id="form" type="post">
{{ form.hidden_tag() }}
<div class="row">
<div class="col-sm-12">
<!-- start: FORM WIZARD PANEL -->
<div id="wizard" class="swMain">
<ul>
<li>
<a href="#step-1">
<div class="stepNumber">
1
</div>
<span class="stepDesc"> Step 1
<br />
<small>General Information</small> </span>
</a>
</li>
<li>
<a href="#step-2">
<div class="stepNumber">
2
</div>
<span class="stepDesc"> Step 2
<br />
<small>Lane(s)</small> </span>
</a>
</li>
<li>
<a href="#step-3">
<div class="stepNumber">
3
</div>
<span class="stepDesc"> Step 3
<br />
<small>Load Details</small> </span>
</a>
</li>
</ul>
<div class="progress progress-striped active progress-sm">
<div aria-valuemax="100" aria-valuemin="0" role="progressbar" class="progress-bar progress-bar-success step-bar">
<span class="sr-only"> 0% Complete (success)</span>
</div>
</div>
<div id="step-1">
<h2 class="StepTitle">Step 1 Content</h2>
<hr>
<div class="row">
<div class="col-sm-5">
<div class="form-group">
<label class="col-sm-3 control-label">
Load Type <span class="symbol required"></span>
</label>
<div class="col-sm-7">
{{ form.load_type(class="form-control") }}
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">
Required Trailer <span class="symbol required"></span>
</label>
<div class="col-sm-7">
{{ form.trailer_type(class="form-control") }}
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">
Total Miles <span class="symbol required"></span>
</label>
<div class="col-sm-7">
{{ form.total_miles(class="form-control", placeholder="Total Miles") }}
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">
Cost <span class="symbol required"></span>
</label>
<div class="col-sm-7">
{{ form.price(class="form-control", placeholder="Price") }}
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label class="col-sm-3 control-label">
# Pieces <span class="symbol required"></span>
</label>
<div class="col-sm-7">
{{ form.number_pieces(class="form-control", placeholder="Number of Pieces") }}
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">
Over Dimensional?
</label>
<div class="col-sm-7">
{{ form.over_dimensional() }}
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">
Comments <span class="symbol required"></span>
</label>
<div class="col-sm-7">
{{ form.comments(class="form-control", placeholder="Number of Pieces") }}
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-10">
<div class="form-group">
<label class="col-sm-3 control-label">
Load Description
</label>
<div class="col-sm-7">
{{ form.description(class="autosize form-control", style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 69px;") }}
</div>
</div>
</div>
</div>
<hr>
<div class="form-group">
<div class="col-sm-3 col-sm-offset-7">
<button class="btn btn-blue next-step btn-block">
Next <i class="fa fa-arrow-circle-right"></i>
</button>
</div>
</div>
</div>
<div id="step-2">
<h2 class="StepTitle">Step 2 Content</h2>
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-external-link-square"></i>
Editable Table
<div class="panel-tools">
<a class="btn btn-xs btn-link panel-collapse collapses" href="#"> </a>
<a class="btn btn-xs btn-link panel-config" href="#panel-config" data-toggle="modal"> <i class="fa fa-wrench"></i> </a>
<a class="btn btn-xs btn-link panel-refresh" href="#"> <i class="fa fa-refresh"></i> </a>
<a class="btn btn-xs btn-link panel-expand" href="#"> <i class="fa fa-resize-full"></i> </a>
<a class="btn btn-xs btn-link panel-close" href="#"> <i class="fa fa-times"></i> </a>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12 space20">
<button class="btn btn-green add-row">
Add New <i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped table-hover" id="sample_2">
<thead>
<tr>
<th>Stop #</th>
<th>Type</h>
<th>Street Address</th>
<th>City</th>
<th>State</th>
<th>Zip</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<!--- Table content created by table-data.js -->
</tbody>
</table>
</div>
</div>
</div>
</div>
<hr>
<div class="form-group">
<div class="col-sm-2 col-sm-offset-3">
<button class="btn btn-light-grey back-step btn-block">
<i class="fa fa-circle-arrow-left"></i> Back
</button>
</div>
<div class="col-sm-2 col-sm-offset-3">
<button type="submit" class="btn btn-success btn-block">
Finish <i class="fa fa-arrow-circle-right"></i>
</button>
</div>
</div>
</div>
</div>
<!-- end: FORM WIZARD PANEL -->
</div>
</div>
As a reference, here is my view which handles the form:
#loads.route('/create', methods=['GET', 'POST'])
#login_required
def create():
form = LoadForm()
flash(form.is_submitted()) #returns False
flash(request.method) # returns 'GET'
if form.validate_on_submit():
#handle form logic
return render_template('load/create2.html',
title="Create Load",
active="Loads",
form=form, user=g.user)

Add a method attribute to your form tag:
<form name="create" action="" role="form" class="smart-wizard form-horizontal" id="form" type="post" method="post">
An empty or missing #method attribute defaults to GET.

Related

My addeventListener not working on click with a button

Hello i have a login page and i want to when you click the button "login" it prints a message in the console but here it doesn't detect the button "login" i put query selector and took the class
html:
const inputs=document.querySelectorAll(".input");
let submit=document.querySelector(".btn");
submit.addEventListener('click' ,()=>{
console.log("test")
})
<img src="https://i.ibb.co/XWdPc2X/wave-01.png" class="wave">
<div class="container">
<div class="img">
<img src="https://i.ibb.co/JvXP8rW/phone.png">
</div>
<div class="login-content">
<form action="index.html" class="form-login">
<img src="https://i.ibb.co/H4f3Hkv/profile.png">
<h2 class="title">Welcome</h2>
<div class="input-div one">
<div class="i">
<i class="fas fa-user"></i>
</div>
<div class="div">
<h5>Username</h5>
<input type="text" class="input">
</div>
</div>
<div class="input-div pass">
<div class="i">
<i class="fas fa-lock"></i>
</div>
<div class="div">
<h5>Password</h5>
<input type="password" class="input">
</div>
</div>
<button id="send" class="btn btn-success mt-5">Login <i class="fa fa-long-arrow-right ml-2 mt-1"></i></button>
<!-- Forgot Password?-->
</form>
</div>
</div>
The issue is that the default type for a button is submit, so when you click the button, it attempts to redirect. Change the button's type to button to get your callback behavior.
document.querySelector(".btn").addEventListener('click' ,()=>{
console.log("test")
})
<img src="https://i.ibb.co/XWdPc2X/wave-01.png" class="wave">
<div class="container">
<div class="img">
<img src="https://i.ibb.co/JvXP8rW/phone.png">
</div>
<div class="login-content">
<form action="index.html" class="form-login">
<img src="https://i.ibb.co/H4f3Hkv/profile.png">
<h2 class="title">Welcome</h2>
<div class="input-div one">
<div class="i">
<i class="fas fa-user"></i>
</div>
<div class="div">
<h5>Username</h5>
<input type="text" class="input">
</div>
</div>
<div class="input-div pass">
<div class="i">
<i class="fas fa-lock"></i>
</div>
<div class="div">
<h5>Password</h5>
<input type="password" class="input">
</div>
</div>
<button type="button" id="send" class="btn btn-success mt-5">Login <i class="fa fa-long-arrow-right ml-2 mt-1"></i></button>
<!-- Forgot Password?-->
</form>
</div>
</div>
Use document.getElementById selector to get element and add function onClick
const btn = document.getElementById('send');
btn.onclick = () => {
console.log('here');
// do something
}
<img src="https://i.ibb.co/XWdPc2X/wave-01.png" class="wave">
<div class="container">
<div class="img">
<img src="https://i.ibb.co/JvXP8rW/phone.png">
</div>
<div class="login-content">
<form action="index.html" class="form-login">
<img src="https://i.ibb.co/H4f3Hkv/profile.png">
<h2 class="title">Welcome</h2>
<div class="input-div one">
<div class="i">
<i class="fas fa-user"></i>
</div>
<div class="div">
<h5>Username</h5>
<input type="text" class="input">
</div>
</div>
<div class="input-div pass">
<div class="i">
<i class="fas fa-lock"></i>
</div>
<div class="div">
<h5>Password</h5>
<input type="password" class="input">
</div>
</div>
<button id="send" class="btn btn-success mt-5">Login <i class="fa fa-long-arrow-right ml-2 mt-1"></i></button>
<!-- Forgot Password?-->
</form>
</div>
</div>

modal show event is not firing

I have one view in asp.net MVC application, in which i have one table. on each row i have one anchor tag which will open modal window. I have written some code on modal show event. but the event is not firing. my view's layout is coming from custom layout page.following is the code for my view.
#Model
#Imports System.Data
#Code
ViewBag.Title = ViewBag.Title
Layout = "~/Views/Shared/_MyLayout.vbhtml"
End Code
#Section js
<script src="#Session("baseurl")/Scripts/bootstrap.min.js"></script>
<script src="#Session("baseurl")/Scripts/jquery-3.3.1.slim.min.js"></script>
<script src="#Session("baseurl")/Scripts/jquery.min.js"></script>
End Section
#section css
End Section
<script src="#Session("baseurl")/Scripts/jquery-1.12.4.js"></script>
<script src="#Session("baseurl")/Scripts/jquery-ui.js"></script>
<link href="#Session("baseurl")/Styles/jquery-ui.css" rel="stylesheet" />
<link href="#Session("baseurl")/Styles/jquery.dataTables.min.css" rel="stylesheet" />
<script src="#Session("baseurl")/Scripts/jquery.dataTables.min.js"></script>
<form action="#Session("baseurl")/ContainerList/List" method="post">
<div class="row pl-md-1 pb-0">
<div class="col-md-12 pl-1">
<p class="lead" id="heading">#ViewBag.Heading</p>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="alert alert-info form-control" id="infomsg">
<label id="lblInfo" class="fa fa-info-circle">#Session("InfoMsg")</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 border border-primary pt-2 pb-2">
<div class="row pb-3">
<!--<div class="col-md-2 pt-1">
<label Class="col-form-label">#Session("ContainerNo")</label>
</div>
<div class="col-md-3">
<input type="text" name="containerno" id="containerno" class="form-control form-control-sm font-weight-bold text-uppercase" />
</div>
<div class="col-md-2"></div>-->
<div class="col-md-2">
<label Class="col-form-label">#Session("BOLNumber")</label>
</div>
<div class="col-md-5">
<input type="text" name="bolnumber" class="form-control form-control-sm font-weight-bold text-uppercase" />
</div>
</div>
<div class="row">
#If Session("Lang") = "E" Then
#:<div Class="col-md-2 pr-0">
Else
#:<div Class="col-md-2 pl-0">
End If
<Label Class="col-form-label">#Session("FromRecvdDate")</label>
</div>
<div class="col-md-3">
<div class="inputWithIcon inputIconBg">
<i class="fa fa-calendar fa-lg"></i>
<input class="form-control form-control-sm font-weight-bold readonly" type="text" placeholder="dd/mm/yyyy"
name="fromrecvdate" id="fromrecvdate" style="width:100%" maxlength="12" />
</div>
</div>
<div class="col-md-2"></div>
<div class="col-md-2">
<label Class="col-form-label">#Session("UptoRecvdDate")</label>
</div>
<div class="col-md-3">
<div class="inputWithIcon inputIconBg">
<i class="fa fa-calendar fa-lg"></i>
<input type="text" class="form-control form-control-sm font-weight-bold readonly" placeholder="dd/mm/yyyy"
name="uptorecvdate" id="uptorecvdate" style="width:100%" maxlength="12" />
</div>
</div>
</div>
<div class="row pt-3">
#If Session("Lang") = "E" Then
#:<div Class="col-md-12 text-right">
Else
#:<div Class="col-md-12 text-left">
End If
<button type="submit" name="BtnCntList" class="btn btn-info">
<i class="fa fa-search"></i>
#Session("BtnCntList")
</button>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
<div class="row pt-3">
<div class="col-md-12">
#If ViewBag.RowCount > 0 Then
#:<table id="cntlist" class="table-responsive table table-bordered table-hover table-lightfont table-condensed">
#:<thead class="thead-light">
#:<th>#Session("tdcontainerno")</th>
#:<th>#Session("tdbolnumber")</th>
#:<th>#Session("tdarrivaldate")</th>
#:<th>#Session("tdrecvddate")</th>
#:<th>#Session("tdsku")</th>
#:<th>#Session("tdagent")</th>
#:<th>#Session("tdlot")</th>
#:<th>#Session("tdstatus")</th>
#:<th></th>
#:</thead>
#:<tbody>
#For Each row As System.Data.DataRow In Model.Rows
#:<tr>
For Each cell In row.ItemArray
#:<td>#cell.ToString</td>
Next
#:<td><i class="fa fa-file-text-o"></i></td>
#:</tr>
Next
#:</tbody>
#:</table>
End If
</div>
</div>
following is the HTML code for modal
<div id="cntdetail" class="modal show fade" data-backdrop="static" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h6>#Session("CntDetails")</h6>
</div>
<div class="modal-body">
<input type="text" name="containerno" />
<input type="text" name="lot" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
<i class="fa fa-close"></i>
Close
</button>
</div>
</div>
</div>
</div>
following is the JavaScript for event firing for modal show
<script>
$(function () {
$('#cntdetail').on('show.bs.modal', function (e) {
alert("a");
});
});
</script>
Try activating the modal via javascript using class instead of data-target.
$(".yourModalClassHere").click(() => {
$('#cntdetail').modal('show');
})
$('#cntdetail').on('show.bs.modal', function (e) {
alert("a");
});

Show modal after validate form with onsubmit

I have a modal, in this modal I have a form, when I fill this form and I do click in send, automatically show another modal saying "Thank you", but, if I let the form empty and I do send, the form show "You need to fill this field" and above show the modal saying "Thank you" too... the conclusion is,
I want that first validate the form and after if all its filled show the modal saying "Thank you", bootstrap have the onsubmit option, ¿can I use this for validate the modal whit javascript? or what its the better way of validate a form?
<div class="modal fullscreen-modal fade fondo-gris modal-cotizador" id="...-...-..." tabindex="1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false">
<div class="max-height">
<div class="modal-dialog max-height">
<div class="modal-content" style="background-color: #f6f5f3">
<div class="modal-...-...">
<div>
<h1 class="centrar tit-producto-rel-..."><br>
</h1>
</div>
</div>
<div class="modal-body ancho-modal" style="">
<form id="form-cotizacion-..." method="POST">
<div id="lista">
<!-- Aquí irá la lista -->
</div>
<h5>...:</h5>
<p>...</p>
<div class="centrar"><h4 class="centrar">...</h4>
<select id="hola" class="centrar" type="text" name="selecciona-familia" style="width: 50%">
<i class="fa fa-chevron-down"></i>
<option>...</option>
</select>
</div>
{% csrf_token%}
<input type="hidden" name="origen" value="{{request.path}}">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label class="letra-verde"> ...</label>
<span style="color: red">*</span><br>
<input type="text" name="modelo" placeholder="ej. ... ..." required>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label class="letra-verde"> ...</label>
<span style="color: red">*</span><br>
<input type="text" name="serie" placeholder="ej. ... ..." required>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label> ... (s)</label>
<span style="color: red">*</span><br>
<input type="text" name="nombre" placeholder="ej. ..." required>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label> ... (s)</label>
<span style="color: red">*</span><br>
<input type="text" name="apellidos" placeholder="ej. ..." required>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label> ...</label>
<span style="color: red">*</span><br>
<select name="..." required>
<option value=""> <b> .... </b> </option><br>
<option value="...">... </option>
<option value="..."> <b> ..</b> </option><br>
</select>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label>...</label>
<span style="color: red">*</span><br>
<select name="..." required>
<option value=""><b>...</b></option><br>
<option value="..."> <b> ...</b> </option><br>
</select>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label> ...</label>
<span style="color: red">*</span><br>
<input type="email" name="..." placeholder="..#....com" required><br>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 lada-...-cot-...">
<label> ...</label>
<span style="color: red">*</span><br>
<input type="text" name="..." placeholder="...">
<input type="text" name="..." placeholder="0000 0000" required>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label>...</label><br>
<textarea style="border: 1px solid black" rows="7" name="..." placeholder="..."></textarea>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-12 term-cond-modal">
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
<input type="submit" class="fondo-verde botton-cotizar" value="..." data-toggle="modal" data-target="#exampleModalCenter" style="border:none;"></input>
<input id="close-modal" type="hidden" class="btn btn-default" data-dismiss="modal">
</div>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="modal fade modal-inside-cotizar all-ref" id="exampleModalCenter" data-keyboard="false" role="dialog" aria-labelledby="exampleModalCenterTitle" tabindex="2" aria-hidden="true" data-backdrop="static" style="padding-top: 130px">
<div class="modal-dialog modal-dialog-centered" role="document" >
<div class="modal-content ...-cotizacion-modal ">
<div class="modal-header" style="border-bottom-width: 0px!important">
<button type="button" class="close close-modal-ref" data-dismiss="modal" style="position: absolute;top: 3%;padding-top: 5%;right: 5%;color: black;opacity: 1;background-size: contain;background-repeat: no-repeat;width: 24px;height: 30px; background-image: url('-...');"></button>
</div>
<div class="modal-body" style="text-align: center;">
<img src="..." style="width: 19%;margin-bottom: 10px;">
<h3>.......</h3>
<div style="padding-left: 7%;padding-right: 7%;margin: 20px 0px 20px 0px">
<h6>....</h6>
</div>
<h5>...</h5>
<label>...</label>
<h5>... ...</h5>
<label class="icon-redes-refa" style="border:0px">
<a href="..." target="_blank">
<span class="...-..."></span>
</a>
<a href="https://.../." target="_blank">
<span class=".-.."></span>
</a>
<a href="h..." target="_blank">
<span class=".-...."></span>
</a>
<a href="https://www...../.../" target="_blank">
<span class=".-..."></span>
</a>
<a href="https://www...com/.../..." target="_blank">
<span class=".-...."></span>
</a>
</label>
</div>
<div class="modal-footer" style="border-top-width: 0px!important">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#exampleModalCenter button').on('click', function() {
$('.modal').modal('hide');
});
});
</script>
The code,

How to take the particular details in one division in jquery

Here I have two property details.
If I click first property contact button myFunction() it means I want to take property name 3BHK Individual House for SELL in Jayanagar and property id 1.
If I click second property contact button myFunction() it means I want to take property name 10BHK Individual House for SELL in Jayanagar and property id 2.
How can I do this?
var htmlString='';
htmlString+='<div class="row prptylstt" id="prptylstt"><div class="col-sm-4" style="padding-left:0px;padding-right:0px;"><a class="p_id" href="propertydetails.php?id=1"></a></div><div class="col-sm-8" style="padding-left:20px;"><h4 style="color:#000;padding-top:12px; class=" property_name""="">3BHK Individual House for SELL in Jayanagar</h4><div class="row"><div class="col-sm-3"><p class="parclr">Price</p><h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4></div><div class="col-sm-2 divbrdr"><p class="parclr">Sqft</p><h4 class="colrh">56565</h4></div><div class="col-sm-4 divbrdr"><p class="parclr">Avaliable From</p><h4 class="colrh">2016-12-16</h4></div><div class="col-sm-3 divbrdr"> <p class="parclr">PostedBy</p><h4 class="colrh">Agent</h4></div></div><hr><div class="row" style="padding-top: 5px;"><div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a></div><div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a></div><div class="col-sm-3 "></div><div class="col-sm-3 "><div class="contact" style="text-align:center;"><button class="btn btn-default" id="prlstbtn" onclick="myFunction(this)">Contact</button></div></div></div></div></div>';
htmlString+='<div class="row prptylstt" id="prptylstt"><div class="col-sm-4" style="padding-left:0px;padding-right:0px;"><a class="p_id" href="propertydetails.php?id=5852408f05dd7b0320e3473d"></a></div><div class="col-sm-8" style="padding-left:20px;"><h4 style="color:#000;padding-top:12px; class=" property_name""="">3BHK Individual House for SELL in Jayanagar</h4><div class="row"><div class="col-sm-3"><p class="parclr">Price</p><h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4></div><div class="col-sm-2 divbrdr"><p class="parclr">Sqft</p><h4 class="colrh">56565</h4></div><div class="col-sm-4 divbrdr"><p class="parclr">Avaliable From</p><h4 class="colrh">2016-12-16</h4></div><div class="col-sm-3 divbrdr"> <p class="parclr">PostedBy</p><h4 class="colrh">Agent</h4></div></div><hr><div class="row" style="padding-top: 5px;"><div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a></div><div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a></div><div class="col-sm-3 "></div><div class="col-sm-3 "><div class="contact" style="text-align:center;"><button class="btn btn-default" id="prlstbtn" onclick="myFunction(this)">Contact</button></div></div></div></div></div>';
$('#prop_listing').empty().append(htmlString);
function myFunction(that) {
name = $(that).closest('.prptylstt').find('.property_name').html();
console.log(name);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="prop_listing"></div>
move the code out of the HTML
use a class to access all buttons
use UNIQUE IDs or no IDs
a div does not have a value but has text() or html()
use type=button to not submit the form/page
$(function() {
$(".prlstbtn").on("click", function(e) {
var $list = $(this).closest(".prptylstt"),
name = $list.find(".property_name").text(),
id = $list.find(".p_id").attr("href").split("id=")[1];
console.log(id, name);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row prptylstt">
<div class="col-sm-4" style="padding-left:0px;padding-right:0px;">
<a class="p_id" href="propertydetails.php?id=1"></a>
</div>
<div class="col-sm-8" style="padding-left:20px;">
<h4 style="color:#000;padding-top:12px;" class="property_name">3BHK Individual House for SALE in Jayanagar</h4>
<div class="row">
<div class="col-sm-3">
<p class="parclr">Price</p>
<h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4>
</div>
<div class="col-sm-2 divbrdr">
<p class="parclr">Sqft</p>
<h4 class="colrh">56565</h4>
</div>
<div class="col-sm-4 divbrdr">
<p class="parclr">Avaliable From</p>
<h4 class="colrh">2016-12-16</h4>
</div>
<div class="col-sm-3 divbrdr">
<p class="parclr">PostedBy</p>
<h4 class="colrh">Agent</h4>
</div>
</div>
<hr>
<div class="row" style="padding-top: 5px;">
<div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a>
</div>
<div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a>
</div>
<div class="col-sm-3 "></div>
<div class="col-sm-3 ">
<div class="contact" style="text-align:center;">
<button type="button" class="btn btn-default prlstbtn">Contact</button>
</div>
</div>
</div>
</div>
</div>
<div class="row prptylstt">
<div class="col-sm-4" style="padding-left:0px;padding-right:0px;">
<a class="p_id" href="propertydetails.php?id=2"></a>
</div>
<div class="col-sm-8" style="padding-left:20px;">
<h4 style="color:#000;padding-top:12px;" class="property_name">10BHK Individual House for SALE in Jayanagar</h4>
<div class="row">
<div class="col-sm-3">
<p class="parclr">Price</p>
<h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 25.70L</h4>
</div>
<div class="col-sm-2 divbrdr">
<p class="parclr">Sqft</p>
<h4 class="colrh">56565</h4>
</div>
<div class="col-sm-4 divbrdr">
<p class="parclr">Avaliable From</p>
<h4 class="colrh">2016-12-16</h4>
</div>
<div class="col-sm-3 divbrdr">
<p class="parclr">PostedBy</p>
<h4 class="colrh">Agent</h4>
</div>
</div>
<hr>
<div class="row" style="padding-top: 5px;">
<div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a>
</div>
<div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a>
</div>
<div class="col-sm-3 "></div>
<div class="col-sm-3 ">
<div class="contact" style="text-align:center;">
<button type="button" class="btn btn-default prlstbtn">Contact</button>
</div>
</div>
</div>
</div>
</div>
$(this) refer which button clicked.In onclick function without declaration this not performed.so apply with in the function like this myfuntion(this) .Then this declare in a variable that in DOM.
And then apply with jquery function of closest() and find() method
closest() to match the parent of the div and find() to match the inner element respected with clicked button.
function myFunction(that) {
var name = $(that).closest('.prptylstt').find('.property_name').html();
var id =/(id=)(\w+)/g.exec($(that).closest('.prptylstt').find('.p_id').attr('href'))
console.log(name);
console.log(id[2])
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="row prptylstt" id="prptylstt">
<div class="col-sm-4" style="padding-left:0px;padding-right:0px;">
<a class="p_id" href="propertydetails.php?id=1"></a>
</div>
<div class="col-sm-8" style="padding-left:20px;">
<h4 style="color:#000;padding-top:12px;" class="property_name">3BHK Individual House for SELL in Jayanagar</h4>
<div class="row">
<div class="col-sm-3">
<p class="parclr">Price</p>
<h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4>
</div>
<div class="col-sm-2 divbrdr">
<p class="parclr">Sqft</p>
<h4 class="colrh">56565</h4>
</div>
<div class="col-sm-4 divbrdr">
<p class="parclr">Avaliable From</p>
<h4 class="colrh">2016-12-16</h4>
</div>
<div class="col-sm-3 divbrdr">
<p class="parclr">PostedBy</p>
<h4 class="colrh">Agent</h4>
</div>
</div>
<hr>
<div class="row" style="padding-top: 5px;">
<div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a>
</div>
<div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a>
</div>
<div class="col-sm-3 "></div>
<div class="col-sm-3 ">
<div class="contact" style="text-align:center;">
<button class="btn btn-default" id="prlstbtn" onclick="myFunction(this)">Contact</button>
</div>
</div>
</div>
</div>
</div>
<div class="row prptylstt" id="prptylstt">
<div class="col-sm-4" style="padding-left:0px;padding-right:0px;">
<a class="p_id" href="propertydetails.php?id=2"></a>
</div>
<div class="col-sm-8" style="padding-left:20px;">
<h4 style="color:#000;padding-top:12px;" class="property_name">10BHK Individual House for SELL in Jayanagar</h4>
<div class="row">
<div class="col-sm-3">
<p class="parclr">Price</p>
<h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 25.70L</h4>
</div>
<div class="col-sm-2 divbrdr">
<p class="parclr">Sqft</p>
<h4 class="colrh">56565</h4>
</div>
<div class="col-sm-4 divbrdr">
<p class="parclr">Avaliable From</p>
<h4 class="colrh">2016-12-16</h4>
</div>
<div class="col-sm-3 divbrdr">
<p class="parclr">PostedBy</p>
<h4 class="colrh">Agent</h4>
</div>
</div>
<hr>
<div class="row" style="padding-top: 5px;">
<div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a>
</div>
<div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a>
</div>
<div class="col-sm-3 "></div>
<div class="col-sm-3 ">
<div class="contact" style="text-align:center;">
<button class="btn btn-default" id="prlstbtn" onclick="myFunction(this)">Contact</button>
</div>
</div>
</div>
</div>
</div>
or
Try with jquery script like this.It's easy to solve your problem.you can use $(this)
$(document).ready(function(){
$('.btn-default').click(function(){
var name = $(this).closest('.prptylstt').find('.property_name').html();
var id =/(id=)(\w+)/g.exec($(this).closest('.prptylstt').find('.p_id').attr('href'))
console.log(name);
console.log(id[2])
})
})
Updated answer for upadated Question
class name of the property_name is spell mistake "=" and both html content are 3BHK .i was corrected with that. see the below snippet.Its work out with query
var htmlString='';
htmlString+='<div class="row prptylstt" id="prptylstt"><div class="col-sm-4" style="padding-left:0px;padding-right:0px;"><a class="p_id" href="propertydetails.php?id=1"></a></div><div class="col-sm-8" style="padding-left:20px;"><h4 style="color:#000;padding-top:12px; class="property_name">3BHK Individual House for SELL in Jayanagar</h4><div class="row"><div class="col-sm-3"><p class="parclr">Price</p><h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4></div><div class="col-sm-2 divbrdr"><p class="parclr">Sqft</p><h4 class="colrh">56565</h4></div><div class="col-sm-4 divbrdr"><p class="parclr">Avaliable From</p><h4 class="colrh">2016-12-16</h4></div><div class="col-sm-3 divbrdr"> <p class="parclr">PostedBy</p><h4 class="colrh">Agent</h4></div></div><hr><div class="row" style="padding-top: 5px;"><div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a></div><div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a></div><div class="col-sm-3 "></div><div class="col-sm-3 "><div class="contact" style="text-align:center;"><button class="btn btn-default" id="prlstbtn" >Contact</button></div></div></div></div></div>';
htmlString+='<div class="row prptylstt" id="prptylstt"><div class="col-sm-4" style="padding-left:0px;padding-right:0px;"><a class="p_id" href="propertydetails.php?id=5852408f05dd7b0320e3473d"></a></div><div class="col-sm-8" style="padding-left:20px;"><h4 style="color:#000;padding-top:12px; class=" property_name">10BHK Individual House for SELL in Jayanagar</h4><div class="row"><div class="col-sm-3"><p class="parclr">Price</p><h4 class="colrh"><i class="fa fa-inr" aria-hidden="true"></i> 22.70L</h4></div><div class="col-sm-2 divbrdr"><p class="parclr">Sqft</p><h4 class="colrh">56565</h4></div><div class="col-sm-4 divbrdr"><p class="parclr">Avaliable From</p><h4 class="colrh">2016-12-16</h4></div><div class="col-sm-3 divbrdr"> <p class="parclr">PostedBy</p><h4 class="colrh">Agent</h4></div></div><hr><div class="row" style="padding-top: 5px;"><div class="col-sm-3"><a class="par" data-toggle="modal" data-target="#myModal"><i class="fa fa-search" aria-hidden="true"></i>Quick View</a></div><div class="col-sm-3 "> <a class="par"><i class="fa fa-heart-o" aria-hidden="true"></i> Shortlist</a></div><div class="col-sm-3 "></div><div class="col-sm-3 "><div class="contact" style="text-align:center;"><button class="btn btn-default" id="prlstbtn" >Contact</button></div></div></div></div></div>';
$('#prop_listing').empty().append(htmlString);
$(document).on('click','.btn',function(){
name = $(this).closest('.prptylstt').find('h4').eq(0).html();
console.log(name);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="prop_listing"></div>

How to pass a query string to a bootstrap modal popup in php

I want to open a particular record in modal pop up for that i want to use query string to pass id to that modal popup which is on the same page after opening and displaying the data user can edit it and save it.
My code is as follows :
<a class="btn btn-info" data-toggle="modal" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>
<div class="modal fade" id="myModalDetail">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Edit Products Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<form role="form" name="Insertdb" method="post" action="Insert_code/edit-products.php">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Name</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodName" value="<?=$prodPrice ?>">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Price</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodPrice" placeholder="Enter product price">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Type</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productType" placeholder="Enter product type">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input name="button1" type="submit" class="btn btn-primary">
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
As far i can understand your question, you are having problem in passing the id to Modal, if yes, then you can do the following:
In your a-href code use data-id:
<a class="btn btn-info open_modal" data-toggle="modal" data-id="<?php echo productid;?>" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>
Javascript:
$(document).on("click", ".open_modal", function () {
var product_id = $(this).data('id');
});

Categories