Generating form fields using jquery - javascript

I have a pretty basic form that allow user to post simple classified ads. It looks like this:
<form action="">
<fieldset>
<h3>Personal Informations</h3>
<input type="text" placeholder="Your Name">
<input type="text" placeholder="Your Address">
</fieldset>
<fieldset>
<h3>Car Informations</h3>
<input type="text" placeholder="Manufacturer">
<input type="text" placeholder="Model">
<input type="text" placeholder="Year">
Add More Ads
</fieldset>
</form>
I would like to allow the visitor to post more ads then one via "Add More Ads" button/link which would generate same 3 fields as much times as visitor needs ads.
What would be the simplest solution to do this? Any help/guide would be great!
Thanks!
P.S Also it would be great if the user could also remove the fields if he doesnt need them

Try this.
$('#addMOre').on('click',function(){
var self = $('.apendable').first().clone().insertAfter(".apendable:last");
$('.apendable:last input').val('');
self.append('<button class="close-info">close</button>');
$('.close-info').on('click', function(){
$(this).parent().remove();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<fieldset>
<h3>Personal Informations</h3>
<input type="text" placeholder="Your Name">
<input type="text" placeholder="Your Address">
</fieldset>
<fieldset id="info">
<h3>Car Informations</h3>
<div class="apendable">
<input type="text" placeholder="Manufacturer">
<input type="text" placeholder="Model">
<input type="text" placeholder="Year">
</div>
Add More Ads
</fieldset>
</form>

You can set inputs in <div class="row"> then copy first row class.
$("#addAdsFiels").click(function(){
var clone = $(this).siblings(".row:first").clone();
$(clone).find("input").val("");
$(this).before(clone);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<fieldset>
<h3>Personal Informations</h3>
<input type="text" placeholder="Your Name">
<input type="text" placeholder="Your Address">
</fieldset>
<fieldset>
<h3>Car Informations</h3>
<div class="row">
<input type="text" placeholder="Manufacturer">
<input type="text" placeholder="Model">
<input type="text" placeholder="Year">
</div>
Add More Ads
</fieldset>
</form>

Related

How Can I Display Success message On Divi Contact Form Module

Hello I have a divi contact form module. website is not wordpress. I want to display a success message after user submits form. How can I go about it. Tried many ways.
The form appears below.
<div class="et_pb_module et_pb_contact_form_0 dct-contact-forn et_pb_contact_form_container clearfix"
data-form_unique_num="0"
id="et_pb_contact_form_0">
<div class="et-pb-contact-message"><p>Thanks</p></div>
<div class="et_pb_contact">
<form action="contact.php" class="et_pb_contact_form clearfix"
method="post">
<p class="et_pb_contact_field et_pb_contact_field_0 et_pb_contact_field_last"
data-id="name_2" data-type="input">
<label class="et_pb_contact_form_label"
for="name">Name</label>
<input class="input" data-field_type="input" data-required_mark="required" id="name"
name="name" placeholder="Name"
type="text" value="">
</p>
<p class="et_pb_contact_field et_pb_contact_field_1 et_pb_contact_field_half"
data-id="email" data-type="email">
<label class="et_pb_contact_form_label" for="email">Email
Address</label>
<input class="input" data-field_type="email" data-required_mark="required" id="email"
name="email" placeholder="Email Address"
type="text" value="">
</p>
<p class="et_pb_contact_field et_pb_contact_field_2 et_pb_contact_field_half et_pb_contact_field_last"
data-id="subject" data-type="input">
<label class="et_pb_contact_form_label" for="subject">Subject</label>
<input class="input" data-field_type="input" data-required_mark="required" id="subject"
name="subject" placeholder="Subject"
type="text" value="">
</p>
<p class="et_pb_contact_field et_pb_contact_field_3 et_pb_contact_field_last"
data-id="message" data-type="text">
<label class="et_pb_contact_form_label"
for="et_pb_contact_message_0">Message</label>
<textarea class="et_pb_contact_message input" data-field_type="text"
data-required_mark="required"
id="message"
name="message"
placeholder="Message"></textarea>
</p>
<input name="et_pb_contactform_submit_0" type="hidden"
value="et_contact_proccess">
<div class="et_contact_bottom_container">
<button class="et_pb_contact_submit et_pb_button" name="submit"
type="submit">Submit
</button>
</div>
<input id="_wpnonce-et-pb-contact-form-submitted-0"
name="_wpnonce-et-pb-contact-form-submitted-0"
type="hidden"
value="7dbdd1dfcb"><input name="_wp_http_referer"
type="hidden"
value="/?page_id=1750">
</form>
That is what it looks like. I really need assistance. Anyone here that could help, would appreciate your time and efforts. thanks in advance.

Advance search function of google search using javascript but getting some problems

Below is the code of the form using which I'm trying to fetch the value for the query string.
<form id="form1">
<label for="allthesewords"> all these words</label>
<input type="text" id="allthesewords">
<br>
<label for="thisexactwordphrase">this exact word phrase</label>
<input type="text" id="thisexactwordphrase">
<br>
<label for="anyofthese">any of these</label>
<input type="text" id="anyofthese">
<br>
<label for="noneofthese">none of these</label>
<input type="text" id="noneofthese">
<br>
<input type="submit" value="Advance Search" onClick="advanceSearch()">
</form>
This one is the javascript function where I'm building my query string.
function advanceSearch(){
document.getElementById("form1").action="https://www.google.com/search?as_q="+document.getElementById("allthesewords").value+"&as_epq="+document.getElementById("thisexactwordphrase").value+"&as_oq="+document.getElementById("anyofthese").value+"&as_eq="+document.getElementById("noneofthese").value;
return true;
}
So, the actual problem is while clicking on the submit button it must redirect to this url
https://www.google.com/search?as_q=Harvard%20univeristy%20students&as_epq=students%20of%20Harvard%20Univeristy&as_oq=Harvard&as_eq=almamater
However, when I run my code it just redirects to this url:
https://www.google.com/webhp.
Thanks in advance!!!!!
<form action="https://www.google.com/search">
<p>Find page with</p>
<input class="input_bar" type="text" name="as_q" placeholder="all these words">
<input class="input_bar" type="text" name="as_epq" placeholder="this exact word or phrase">
<input class="input_bar" type="text" name="as_oq" placeholder="any of these words">
<input class="input_bar" type="text" name="as_eq" placeholder="none of these words">
<input id="btn" type="submit" value="Advance Search">
</form>
Use it!

how to display a response message on html after post request in nodejs

i wanted to display a message in html page after submiting the data, wether it is correct or not on the same html page, till now i can only do is show the message on new page.
below is the node code
app.post('/login',(req,res)=>{
try{
console.log(req.body)
if(req.body.yourname!='mohit')
res.send('Content-Type' )
else
res.send('thankyou for submission')
}catch(error){
res.send()
}
})
app.listen(port,()=>{
console.log('server started to'+port);
})
Below is the html code
<div class="container">
<form id="contact" action="/login" method="post">
<h3>Contact Form</h3>
<fieldset>
<input name="yourName" placeholder="Your name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input name="Email" placeholder="Your Email Address" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<input name="Phone" placeholder="Your Phone Number (optional)" type="tel" tabindex="3" required>
</fieldset>
<fieldset>
<input name="site" placeholder="Your Web Site (optional)" type="url" tabindex="4">
</fieldset>
<fieldset>
<textarea name="Message" placeholder="Type your message here...." tabindex="5"></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit">Submit</button>
</fieldset>
</form>
help would be really appricated?

post http in form not working

POST http method in my form does not work when I use JavaScript:
<form id="user" method="post"action="url" onsubmit="return false;">
<span>First Name:</span>
<input type="text" class="input" id="fname" name="fname" required>
<span>last Name:</span>
<input type="text" class="input" id="lname" name="lname" required>
<input class="button" type="submit" value="submit" onclick = "checkForm()">
</form>
However, it does seem to work when I do not use JavaScript:
<form id="user" method="post"action="url">
<span>First Name:</span>
<input type="text" class="input" id="fname" name="fname" required>
<span>last Name:</span>
<input type="text" class="input" id="lname" name="lname" required>
<input class="button" type="submit" value="submit">
</form>
How can I use JavaScript validations in my form and send the form to a given URL?
<form id="user" method="post"action="url" onsubmit="return checkForm();">
<!-- blah blah-->
<input class="button" type="submit" value="submit">
</form>
Thanks for your help; this is working fine now.
It is not submitting to server because onsubmit="return false;" tells the browser the validation failed and do not send to server. If onsubmit is not specified or returns true the data will be submitted to the specified url. The following code should work if the function checkForm() returns true when passing validation and returns false while failing validation.
<form id="user" method="post" action="url" onsubmit="checkForm()">
<span>First Name:</span>
<input type="text" class="input" id="fname" name="fname" required>
<span>Last Name:</span>
<input type="text" class="input" id="lname" name="lname" required>
<input class="button" type="submit" value="submit">
</form>

Make form run a javascript function?

How can I make my form run a function when submit is clicked?
<form id="commentForm" name="comment">
<fieldset>
<label for="name">Name <span>(required)</span></label>
<input type="text" class="text" id="name" value="" />
<label for="email">Email <span>(will not be published) (required)</span></label>
<input type="text" class="text" id="email" value="" />
<label for="website">Website</label>
<input type="text" class="text" id="website" value="" />
<label for="message">Message <span>(required)</span></label>
<textarea id="message" class="textarea" rows="10"></textarea>
<input type="submit" name="submit" class="submit" id="submit_btn" value="Submit Comment" action="JavaScript: ajax_add_comment();">
</fieldset>
...
I am trying running the following function:
function ajax_add_comment () {
alert ("testing");
}
Use onclick attribute instead of action.
You could use jQuery, and use the .submit() function.
You can give the form an id and then attach the submit function to it.
Example:
<form id="execute"....
</form>
<script type="javascript">
$("#execute").submit(function(){
alert("i've submitted this form");
});
</script>
make sure you have included the jquery js file.
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
You can use the onsubmit event to execute JavaScript code when the form is submitted. For example:
<script>
function ajax_add_comment () {
alert ("testing");
}
</script>
<form id="commentForm" name="comment">
<fieldset>
<label for="name">Name <span>(required)</span></label>
<input type="text" class="text" id="name" value="" />
<label for="email">Email <span>(will not be published) (required)</span></label>
<input type="text" class="text" id="email" value="" />
<label for="website">Website</label>
<input type="text" class="text" id="website" value="" />
<label for="message">Message <span>(required)</span></label>
<textarea id="message" class="textarea" rows="10"></textarea>
<input type="submit" name="submit" class="submit" id="submit_btn" value="Submit Comment" onsubmit="ajax_add_comment();">
</fieldset>
Thank you!

Categories