I want to remove some html as I don't actually have access to the HTML file. This is because it is a CMS so would it be possible to manipulate code via DOM?
Here is a code sample I have just written, how do I remove the frmMain [first form tag] but keep second from tag via DOM?
I know you cannot nest a <form> within a <form>.
<form id="frmMain" >
<form class="2ndform"></form>
</form>
You can save the reference of the second form:
var second_form = $( '.2ndform' ).remove()
Then remove the first form
$( '#frmMain' ).remove()
and finally reappend the second form wherever you want
$( '.other_wrapper' ).append( second_form );
As a last notes:
you CAN'T have html classes starting with a number.
See this
you CAN'T have nested form. See this
As already mentioned, you cannot have a form inside a form. When the browser parses the HTML, it will fix it to the best of its ability. This behavior is unspecified and is not necessarily the same cross-browser. Because I was curious, I made this:
<form id="frmMainA">
<form class="2ndForm">
</form>
</form>
<form id="frmMainB">
<form class="2ndForm">
<input type="text"/>
</form>
</form>
<form id="frmMainC">
<input type="text"/>
<form class="2ndForm">
<input type="text"/>
</form>
</form>
When run in Chrome, it spits out this:
<form id="frmMainA">
</form>
<form id="frmMainB">
<input type="text">
</form>
<form id="frmMainC">
<input type="text">
<input type="text">
</form>
It did the same thing in FF and IE10. This means that when JS is running in modern browsers, you will only have #frmMain and there won't be any .2ndForm to unwrap. If you need the form to have the class .2ndForm, you can add it to #frmMain.
var form = document.getElementById('frmMain');
form.className = form.className + ' 2ndForm');
Or
$('#frmMain').addClass('2ndForm');
Use .unwrap:
$('.2ndform').unwrap();
Docs
Or plain JavaScript:
var el = document.getElementById('frmMain');
var newcontent = el.outerHTML.replace(el.outerHTML, el.innerHTML);
document.body.innerHTML = newcontent;
Related
I have an html form that is more or less the following
<form action="/results">
<input name="q" type="text">
<div>See results</div>
</form>
If I type something into the form, such as "my search" and press "enter" I'll be taken to the Results page with something like this: mywebsite.com/results?q=my+search. My problem is that I would like to get the same behavior when someone clicks "See results," which currently takes them to the Results page but without the params. I know using <button> instead of <div> would get me the results I need, but in this situation using <button> is not practical due to how all of the templates have been written.
Concatenate ?q=searchstring to the URL when assigning to window.location.
document.querySelector("#results").addEventListener("click", function() {
let param = document.querySelector([name=q]).value;
let url = `/results?q=${encodeURIComponent(param)}`;
window.location = url;
}
<form action="/results">
<input name="q" type="text">
<div id="results">See results</div>
</form>
If you can use input type submit, try wrapping the it in the div as in this way:
<form action="/results">
<input name="q" type="text">
<div><input type="submit" value="See results" /></div>
</form>
If this not works for you, alternatively you can handle it using javascript as #Barmar answered above.
I'm looking to create a Chrome extension for a new tab page. I've written the page and have it working only I'm having a problem with moving my Javascript from inline to external.
Current index.html is looking like this:
<script>
function process()
{
var url="https://www.google.co.uk/search?q=" + document.getElementById("goog").value;
location.href=url;
return false;
}
</script>
<div class="container">
<form onSubmit="return process();">
<input type="text" class="form-control" id="goog" placeholder="Google Search">
<input type="submit" style="display:none"/>
</form>
I've tried a few different methods of moving this into an external file but I'm not great with Javascript. I'd imagine I would need to use an event listener of some kind. I've tried placing this in search.js:
var form = document.getElementById("search");
form.addEventListener("submit", function() {
var url="https://www.google.co.uk/search?q=" + document.getElementById("goog").value;
location.href=url;
return false;
});
With this amended html:
<form id="search">
<input type="text" class="form-control" id="goog" placeholder="Google Search">
<input type="submit" style="display:none"/>
</form>
But to no avail. Can anyone help?
You are attaching the 'submit' event to the text input element.
You should instead attach it to the form, as it's the form what gets submitted, not only that particular input. (You already do it correctly on your current index.html document).
You can do this adding an id to the form element:
<form id="your-form-id">
and then attaching the event to it like you're already doing:
var form = document.getElementById("your-form-id");
form.addEventListener("submit", function() { ...
Also, note that unless you've changed your html while moving the JS code to an external file, on the 'submit' event callback you're trying to get the search string from an element with id="url" while your text input element has id="goog", so you won't be able to retrieve it.
EDIT:
The issue seems to be that the form submit gets executed and you're redirected to the same page with a new blank input before your code can be run.
You can avoid this calling preventDefault() on the event when receiving it so the form is not submitted and your code is run, instead of returning false at the end.
form.addEventListener("submit", function(event) {
event.preventDefault();
... your code ...
I've noticed that it's possible without any Javascript. I can make a form with a method of GET and pass the contents of the form into the GET request like below:
<form method="GET" action="https://google.co.uk/search">
<input type="text" name="q" class="form-control" placeholder="Google Search">
<input type="Submit" style="display:none">
</form>
The above solution is correct but using this avoids any Javascript whatsoever.
So I am creating a form that has a feature(s) input. It starts off with only 1 but the number may increase. By clicking on a button I will append a new text box for new feature to be written into it via Jquery.
JsFiddle: https://jsfiddle.net/kmckeow/ewnetzqx/
Issue 1:error from java script saying that I cannot use input.attr().
Issue 2:When I do get this JavaScript to work, how am I supposed to reference a variable number of elements i.e. (feature1, feature2, feature3, ...) in PHP. When I submit a form with post I usually access the information in each element via it's name. How can I do that when I am not sure how many features there will be.
HTML:
<div id="new_product">
<form action="" method="post" enctype="multipart/form-data">
<p>
<label for="feature1"> Feature(s): </label>
<input type="text" name="feature1" />
<button type="button" class="btn btn-primary" id="add_feature">Add Feature</button>
<p>
<input type="submit" value="Submit" name="submit">
</form>
</div>
JQuery:
var feature_count=1;
var feature_count_old=0;
$( "#add_feature" ).click(function() {
feature_count_old=feature_count;
feature_count+=1;
var input = document.createElement("input");
input.attr('name', 'feature' + feature_count);
input.attr('type', 'text');
$("input[name='feature'+feature_count_old]").after(input);
});
Issue 1
You did not load jQuery, so $ is not defined. Simply add the jQuery library to your snippet and you're good to go!
Issue 2
attr() is a jQuery method and not vanilla JS, so you need to do something like this:
var $input = $('input');
$input.attr('name', 'feature' + feature_count);
I already tried this in single php file but doesn't work out, so i tried now in two separate php file one for form and another one for process.
How to submit the form on a div or link click?
Code i tried
$(document).ready(function(){
jQuery('.web').click(function () {
$("#g_form").submit();
alert('alert');
});
});
FORM
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" name="submit"/>
</form>
<div class="web">click</div>
Here is the process file code p.php
<?php
if(isset($_POST['f1'])){
echo $_POST['f1'];
} ?>
When i click the submit button the form is submitting but when i click the .web div it is not submitting the form even i get the alert message but not submitting.
What wrong am doing here? It'll be helpful if i get a idea.
.submit() docs
Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method.
Name conflicts can cause confusing failures. For a complete list of
rules and to check your markup for these problems, see
DOMLint.
You give your submit button a name of submit, which the above passage tells you will cause "confusing failures"
So if you accessed the dom element and looked at the .submit property you would see that since you name the button submit instead of .submitbeing a function its a reference to the buttons dom element
HTML
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" name="submit"/>
</form>
<div class="web">click</div>
JS
//Get the form element
var form = $("#g_form")[0];
console.log(form.submit);
//prints: <input type="submit" value="submit!" name="submit"/>
And when you change the submit name
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" name="psubmit"/>
</form>
<div class="web">click</div>
JS
var form = $("#g_form")[0];
console.log(form.submit);
//prints: function submit() { [native code] }
so simply give your submit button a different name that does not conflict with a form's properties.
You can trigger submit button click.
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" id="f_submit" name="submit"/>
</form>
<div class="web">click</div>
$(document).ready(function(){
jQuery('.web').click(function () {
$("#f_submit").trigger( "click" );
alert('alert');
});
});
DEMO : http://jsfiddle.net/awladnas/a6NJk/610/
HTML (provide a name for the form, strip the name from the submit):
<form action="p.php" name="g_form" id="g_form" method="post">
<input type="text" name="f1" value="">
<input type="submit" value="submit!"/>
</form>
<div class="web">click</div>
JavaScript
//use jQuery instead of $ in the global scope, to avoid conflicts. Pass $ as parameter
jQuery(document).ready(function($){
//use on(), as it's the recommended method
$('.web').on('click', function () {
//use plain JavaScript. Forms are easily accessed with plain JavaScript.
document.g_form.submit();
alert('alert');
});
});
Change the name of the submit and Try,
<input type="submit" value="submit!" name="mySubmit"/>
Remove the submit from the form and try again:
<form action="http://test.com" id="g_form" method="GET">
<input type="text" name="f1" value=""/>
</form>
<div class="web">click</div>
I changed the action to a real URL and the method to a GET so something is seen changing.
Fiddle
$(".web").live('click', DivClick);
function DivClick(){
$("#g_form").submit();
}
I'm trying to create a form which submits a string to another page only with the parameter name removed from the URL.
i.e. submitting the following form with "foo"
<form action="search.asp" method="get">
<input type="text" name="keyword" id="keyword">
<input type="submit" value="Go">
</form>
will go to search.asp?foo NOT search.asp?keyword=foo
Can this be done with pure html?
I guess this can be done with javascript and/or jquery but I'm not certain exactly how.
Can anybody help?
I'm a bit of a noob so a copy and paste solution would be great for me.
Update:
Thanks for the answers so far but they don't seem to be working. Perhaps a better way to do this is to get JQuery to construct the URL and load that URL? Any more suggestions would be great.
or maybe...?
$('input[type="text"]').blur(function() {
$('form').attr('action', 'search.asp?' + $('input').val());
});
Let's give the form and the submit button a classname for convenience and assume we have jQuery on the page.
<form action="search.asp" method="get" class="search_form">
<input type="text" name="keyword" id="keyword">
<input type="submit" value="Go" class="search_button">
</form>
<script type="text/javascript">
$(function(){
var $form = $(".search_form");
// save the default action, because we are going to mess with it.
$form.data("original-action", $form.attr("action"));
// listen to the click on the button, update the form action and submit the form manually
$(".search_button").click(function(){
$form.attr("action", $form.data("original-action") + "?" + $("#keyword").val());
$form.submit();
return false;
});
});
</script>
Not tested, but should work. Let me know.
Btw, saving the default action is maybe not needed. But just in case that you ever want to submit it with ajax without reloading the page.
Try this:
<form action="search.asp?foo">
<script>
$(document).ready(function(){
$("#btnSubmit").click(function(){
var keywordVal = $("#keyword").val();
window.location.href = "search.asp?" + keywordVal;
});
});
</script>
<input id="keyword" type="text" name="keyword">
<button id="btnSubmit">Submit</button>